文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Wack-A-Circle游戏不起作用

问Wack-A-Circle游戏不起作用
EN

Stack Overflow用户
提问于 2015-11-10 18:07:50
回答 4查看 188关注 0票数 2

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

代码语言：javascript
复制
<!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

代码语言：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();
    }
}
javascript
html
game-physics
geometry
EN

回答 4

Stack Overflow用户

发布于 2015-11-10 18:36:03

我可以让你更容易的走一步，我想这回答了你关于显示的问题。不过，这并不能让整个系统正常工作。

更新

代码语言：javascript
复制
setTimeout(function() {circles.push(new wackableCircle()}, 1000 - (score / 5));

使用

代码语言：javascript
复制
setTimeout(function() { circles.push(new wackableCircle()) }, 1000 - (score / 5));

在新的wackableCircle()之后，您缺少一个右方括号。

再近一步..。

代码语言：javascript
复制
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坐标的简单对象，我们可以对其进行查询。您的版本使用的是代码中其他地方定义的变量，而不是您打算创建的对象的随机变量。加速圆圈出现的逻辑可能在这里并不正确，但你会明白的:)

票数 1
EN

Stack Overflow用户

发布于 2015-11-10 18:39:53

尝尝这个

代码语言：javascript
复制
<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="848" height="600" style="border:1px solid black;"></canvas>

        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="wack-a-circle.js"></script>
        <script>
            $(function () {
                initialize();
            });
        </script>
    </body>
</html>
票数 0
EN

Stack Overflow用户

发布于 2015-11-10 19:20:07

你有几个问题，

其中包括：

  • 缺少重新声明为变量

的分号变量名称

在您的updateCanvas()函数中，您将执行以下操作：

代码语言：javascript
复制
wackableCircle = circles[i];

这使得名为wackableCircle的函数未定义，请考虑使用以下命令将其设置为局部变量

代码语言：javascript
复制
var wackableCircle = circles[i];

附言-我看不到这是在哪里使用的？

正如Darren Dourley提到的，你的超时函数中缺少一个)。更新

代码语言：javascript
复制
setTimeout(function() {circles.push(new wackableCircle()}, 1000 - (score / 5));

使用

代码语言：javascript
复制
setTimeout(function() { circles.push(new wackableCircle()) }, 1000 - (score / 5));

这并不是在作秀--但是你遗漏了很多;，如果你缩小你的代码，这将会破坏它。

单行函数使得错误很难被发现，将函数分成多行(特别是setTimeout函数更容易看到问题)，下面是修复后的代码

代码语言：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++) {
        var wackableCircle = circles[i];
        //Draw circle at wackableCircle's x and y.
        canvasContext.beginPath();
        canvasContext.arc(xaxis, yaxis, circleRadius, 0, Math.PI * 2);
        canvasContext.fill();
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/33627474

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档