gpt4 book ai didi

javascript - Wack-A-Circle 游戏不工作

转载 作者:行者123 更新时间:2023-11-28 01:21:55 25 4
gpt4 key购买 nike

这个想法是这个游戏每 15 毫秒在一个随机位置生成一个圆圈。它似乎不识别变量 initialize 并且不创建新的圆圈,甚至根本不生成一个圆圈

<!DOCTYPE html>
<html>
<head>
<script src="wack-a-circle.js"></script>
</head>

<body onload="initialize();">
<canvas id="canvas" width="848" height="600" style="border:1px solid black;"></canvas>
</body>
</html>

现在是javascript

var canvas;
var circles = [];
var circleRadius = 50;
var score = 0;
var xaxis = getRandom(848)
var yaxis = getRandom(600)

function wackableCircle(){
xaxis = getRandom(848)
yaxis = getRandom(600)
if(circles.length > 10){
alert("You lose!\nScore: " + score)
}
setTimeout(function() {circles.push(new wackableCircle()}, 1000 - (score / 5));
}
function getRandom(max){
return Math.floor((Math.random() * max));
}
function initialize(){
canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", onMouseDown)
//add new circle every 1000ms
setTimeout(function () {circles.push(new wackableCircle())}, 1000);
setInterval(function () {updateCanvas()}, 15); //Update canvas every 15ms.
}
//Find difference between two numbers.
function numberDifference (a, b){
return Math.abs(a - b);
}
function onMouseDown(event){
for(var i = 0; i < circles.length; i++){
var wackableCircle = circles[i];
if(numberDifference(event.clientX, xaxis) < circleRadius){
//The circle's X and the mouse's X are within 50.
if(numberDifference(event.clientY, yaxis) < circleRadius){
//The circle's Y and the mouse's Y are also with in 50.
circles.splice(i, 1);
}
}
}
alert("click at " + event.clientX + ", " + event.clientY);
}
function updateCanvas(){
//clear canvas
var canvasContext = canvas.getContext("2d");

canvasContext.clearRect(0, 0, 848, 600);
for (var i = 0; i < circles.length; i++){
wackableCircle = circles[i];
//Draw circle at wackableCircle's x and y.
canvasContext.beginPath();
canvasContext.arc(xaxis, yaxis, circleRadius, 0 ,Math.PI * 2);
canvasContext.fill();
}
}

最佳答案

我可以让您更轻松地更进一步,我认为这回答了您关于获取显示内容的问题。但这并不能使整个事情正常进行。

更新

setTimeout(function() {circles.push(new wackableCircle()}, 1000 - (score / 5));

setTimeout(function() { circles.push(new wackableCircle()) }, 1000 - (score / 5));

您在 new wackableCircle() 之后缺少右括号。


又近了一步..

var canvas;
var circles = [];
var circleRadius = 50;
var score = 0;
var xaxis = getRandom(848)
var yaxis = getRandom(600)

function wackableCircle(){
return { x: getRandom(848), y : getRandom(600)};
}

function getRandom(max){
return Math.floor((Math.random() * max));
}
function initialize(){
canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", onMouseDown)
//add new circle every 1000ms
setInterval(function () {circles.push(new wackableCircle())}, 1000 - (score / 5));
setInterval(function () {updateCanvas()}, 15); //Update canvas every 15ms.
}
//Find difference between two numbers.
function numberDifference (a, b){
return Math.abs(a - b);
}
function onMouseDown(event){
for(var i = 0; i < circles.length; i++){
var w = circles[i];
if(numberDifference(event.clientX, w.x) < circleRadius){
//The circle's X and the mouse's X are within 50.
if(numberDifference(event.clientY, w.y) < circleRadius){
//The circle's Y and the mouse's Y are also with in 50.
circles.splice(i, 1);
}
}
}
alert("click at " + event.clientX + ", " + event.clientY);
}
function updateCanvas(){
//clear canvas
var canvasContext = canvas.getContext("2d");

canvasContext.clearRect(0, 0, 848, 600);
for (var i = 0; i < circles.length; i++){
w = circles[i];
//Draw circle at wackableCircle's x and y.
canvasContext.beginPath();
canvasContext.arc(w.x, w.y, circleRadius, 0 ,Math.PI * 2);
canvasContext.fill();
}
}

您的代码中存在一个重大缺陷,wackableCircle() 实际上并未返回任何内容。我现在已经得到它返回一个简单的对象,其中包含我们可以查询的随机 x 和 y 坐标。您的版本正在使用代码中其他地方定义的变量,而不是您打算创建的对象的随机变量。加速圆圈出现的逻辑可能不在这里,但你会明白的:)

关于javascript - Wack-A-Circle 游戏不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33627474/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com