Question

我正在使用一个简单的画布布局，并试图弄清楚如何修改一个乒乓球脚本，以便每次碰到桨和蓝色时，它都会将球的颜色更改为红色。

画布设置与此网页上的相同：

我正在使用Context.strokeStyle来更改颜色，但它在我放置的上下文中不起作用。

这是我的代码：

HTML：

<HTML>
<BODY>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;" />
    <script src="JQuery.js"></script>
    <script src="scripts.js"></script>
</BODY>

画布上的pong元素的Javascript：

    var Main = {};                                      // scope a (global) main object

Main.Canvas = document.getElementById('myCanvas');                  // 600 x 600 canvas (per HTML)
Main.Context = Main.Canvas.getContext('2d');                         
Main.MX = 0;                                        // keep track of X mouse position
Main.MY = 0;    

Main.CX = 395;
Main.CY = 150;      
Main.CRAD = 20;

Main.XINC = 1;  
Main.YINC = 1;  
Main.OFFSET = 1;    

Main.HITS = 0;
Main.MISSES = 0;

// keep track of mouse movements
Main.Canvas.onmousemove = function(event)
{
    if (event.offsetX)
    {
        mouseX = event.offsetX;
        mouseY = event.offsetY;
    }
    else if (event.layerX)
    {
        mouseX = event.layerX;
        mouseY = event.layerY;
    }

    Main.MX = mouseX;
    Main.MY = mouseY;
}

Main.Animate = function()
{
    Main.Context.clearRect(0, 0, Main.Canvas.width, Main.Canvas.height);        // clear entire canvas
                                            // upper left X & Y coordinates, width & height

    // Draw Rectangle
    Main.Context.fillStyle = "#FF0000";                         // color red
    Main.Context.fillRect(0, Main.MY, 25, 50);                  // position and size (follow mouse)

    // Draw Circle
    Main.Context.beginPath();                           // start the circle

    // When ball crosses the paddle width, 
    // check to see if paddle intersects path
    if ( (Main.CX-Main.CRAD == 25) && (Main.XINC == -1) ) {

        // if ball hits paddle, change increment (both X & Y) and change color of circle
        if ( (Main.CY>Main.MY) && (Main.CY<(Main.MY+50)) ){

            Main.XINC = Main.XINC * (-1);
            Main.YINC = Main.YINC * (-1);

            Main.HITS = Main.HITS + 1;
            Main.Context.beginPath();
            Main.Context.strokeStyle = 'red';

        } else Main.MISSES = Main.MISSES + 1;
        Main.Context.beginPath();
            Main.Context.strokeStyle = 'blue';

    }

    // If we hit a wall in x coordinate, then change x direction
    if ( (Main.CX < 0+Main.CRAD) || (Main.CX > 600-Main.CRAD)) 
        Main.XINC = Main.XINC * (-1);
    Main.CX = Main.CX + (Main.XINC);    

    // If we hit a wall in y coordinate, then change y direction
    if ( (Main.CY < 0+Main.CRAD) || (Main.CY > 600-Main.CRAD)) 
        Main.YINC = Main.YINC * (-1);
    Main.CY = Main.CY + Main.YINC;  

    Main.Context.arc(Main.CX, Main.CY, Main.CRAD, 0, 2 * Math.PI);          // draw the circle
    Main.Context.stroke();                              // fill the circle

    // Display the location of the mouse and circle
    Main.Context.font = "10px Arial";
    Main.Context.fillText("Mouse: X: " + Main.MX + "  Y: " + Main.MY, 50, 25);
    Main.Context.fillText("Ball: X: " + Main.CX + "  Y: " + Main.CY, 350, 25);

    // Display the score
    Main.Context.font = "30px Arial";
    Main.Context.fillText("Hits: " + Main.HITS + "  Misses: " + Main.MISSES, 50, 100);

    requestAnimFrame(function() { Main.Animate(); });               // must call at end of Main.Animate (recursive)
}

window.requestAnimFrame = (function(callback)                       // part of sample standard framework                    
{                                           // for browser compatibilty
    return window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.oRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function(callback) { window.setTimeout(callback, 1000 / 60); };      // control repainting speed
})();

$(document).ready(function()                                // called when document loads
{
    Main.Animate();                                 // this method is all that executes here
});

Answer 1

您在{}上缺少打开和关闭else括号，请参阅小提琴：https://jsfiddle.net/5wwg1q5j/61/

else{ 
        Main.MISSES = Main.MISSES + 1;
        Main.Context.beginPath();
        Main.Context.strokeStyle = 'blue';
}

Answer 2

我想补充一下已经提供的答案和OP下面的评论。

编程任何语言时最常见的错误来源是语法错误，可以通过编译或解析。 Javascript特别容易出现这种类型的错误，因为它没有声明性的松散类型性质。这意味着您不必声明变量，对象结构和函数，并且不需要显式定义变量类型。

对OP而言，如果你错过了这个bug，就不会感到惊讶，它很容易被忽视，特别是当重点是代码的逻辑而不是语法时。我还会说这不会是最后一次同样的语法错误会让你感到沮丧。

限制语法错误的最佳方法是一致的风格。

如果你有100行和1000行的代码并且你的风格在整个事情上变化很难看到这些类型的错误，大括号中的花括号特别难以看到，当你的时候更是如此有时缩进而不是其他缩进，或者有时在新行上添加花括号而不是其他行。由于风格和一些经验的一致性，这样的错误将突出并迅速被发现。

对于Javascript，有各种代码质量工具可以帮助您提升风格。 JSLint和JSHint是两个示例，许多编辑都内置了这些工具或类似工具。比使用此类工具更重要的是了解它们应用的规则以及应用它们的原因。它们不会在逻辑或性能方面提高代码的质量，它们的作用是减少错误并使错误更容易被发现。

对于OP（以及每个人），我建议您永远忘记Javascript允许您删除if，else，for的大括号， while和do（对于C / C ++ Java和类似语言也是如此）

永远不要再做

if(foo === bar) 
     callThat();

为了简洁起见，采用了单线条件必须遵循同一条线的风格

if(foo === bar) callThat();

或

while(!stream.eof) buff.push(stream.read);

如果您在条件中添加了额外的代码，这种风格很容易识别。虽然当条件的语句很长并且您已经深入缩进代码时，这可能会变得混乱。比如

if((foo !== bar && foo <== poo && foo > that && what !== how) || cows === cud || day !== night || black == white) return (((u1 / r1) * ( r1 * r1 * m1 - r2 * r2 * m2 ) + 2 * r2 * r2 * m2 * (u2 / r2)) / (r1 * r1 * m1 + r2 * r2 * m2)) * r1;

或者，如果您嵌套了许多单行条件

if(foo !== bar) if(foo <== poo) if(foo > that) if(what !== how) if(cows === cud || day !== night || black == white) return sunshine();

就个人的两个额外字符的痛苦而言，我的规则总是有大括号，无例外。如果您遵循该规则，您将永远不会再遇到您的错误。

我也注意到你与放置花括号的位置不一致。有时在新线上的同一线上。

if(foo === bar) 
{
    doThat();
}

然后

if(bar === foo){
    doThat()
}

这也最终会让臭虫难以找到，因为如果你不想在线上支撑它就可以忽略它。选择一种风格并坚持整个项目的风格。

通过努力开发个人编码风格并保持一致，您将花费更多时间编写高效代码，而不是追逐令人沮丧的错误。

在Paddle Hit上改变HTML Canvas Pong动画中圆圈的颜色

2 个答案: