这个想法是这个游戏每 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/