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

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

转载作者：行者123 更新时间：2023-11-28 01:21:55

这个想法是这个游戏每 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();
    }
}