我正在尝试编码Snake,但是我有一个小问题。



var ctx = document.getElementById('ctx').getContext('2d');
var canvas = document.getElementById('ctx');

var y = [240, 230, 220];
var x = [240, 240, 240];

var xSpeed = 0;
var ySpeed = 0;

function load() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (p = 0; p < x.length; p++) {
        ctx.fillStyle = "black";
        ctx.fillRect(x[p], y[p], 10, 10);
    }
}

function keyDown() {
    var key = event.keyCode; /*getting keyCode of pressed key*/
    ctx.fillStyle = "black"; /*color of rectangle*/
    if (key == 39) { //RIGHT
        var xSpeed = 10;
        var ySpeed = 0;
        console.log("right");
    } else if (key == 37) { //LEFT
        var xSpeed = -10;
        var ySpeed = 0;
        console.log("left");
    } else if (key == 38) { //UP
        var xSpeed = 0;
        var ySpeed = -10;
        console.log("up");
    } else if (key == 40) { //DOWN
        var xSpeed = 0;
        var ySpeed = 10;
        console.log("down");
    }
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    /*if (x[0] >= 490) {
        xSpeed = 0;
    } else if (y[0] >= 490) {
        ySpeed = 0;
    }*/
    for (w = 0; w < x.length; w++) {
        y[w] += ySpeed;
        x[w] += xSpeed;
    }
    for (i = 0; i < x.length; i++) {
        ctx.fillStyle = "black";
        ctx.fillRect(x[i], y[i], 10, 10);
    }

    console.log(xSpeed);
    console.log(ySpeed);
}

setInterval(update, 500);

<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="#">
    <title>The Snake Game</title>
</head>
<style>
    #ctx {
        position: absolute;
        /*it can be fixed too*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*this to solve "the content will not be cut when the window is smaller than the content":*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
    }
</style>

<body onkeydown="keyDown()" onload="load()">
    <center><canvas id="ctx" width="500" height="500" style="border:1px solid black"></canvas></center>
</body>
<script src="script.js"></script>

</html>





如果运行代码,您会发现xSpeed和ySpeed变量没有更改。我尝试了橡皮鸭式调试,但是什么也没发现。我14岁,所以请不要对我的愚蠢笑那么多。 :D谢谢你的建议。托马斯

最佳答案

您必须在if中的变量之前删除var

else if (key == 38) { //UP
    xSpeed = 0;
    ySpeed = -10;
    console.log("up");
...


如果在变量之前添加var,则它将仅在本地函数中可见,而在其外部不可见。

这是一种更好的编写方式:

function keyDown() {
    var key = event.keyCode; /*getting keyCode of pressed key*/
    ctx.fillStyle = "black"; /*color of rectangle*/

    switch( key){
      case 39:  //RIGHT
        xSpeed = 10;
        ySpeed = 0;
        console.log("right");
       break;
     case 37:  //Left
       xSpeed = -10;
       ySpeed = 0;
       console.log("left");
       break;
     case 38:  // Up
       xSpeed = 0;
       ySpeed = -10;
       console.log("up");
       break;
     case 40:  // Down
       xSpeed = 0;
       ySpeed = 10;
       console.log("down");
    }
}


甚至更好:

var speed= {
        37: {
             xSpeed : -10,
             ySpeed : 0,
             text: 'left'
        },
        38: {
             xSpeed : 0,
             ySpeed = -0,
             text: 'up'
        },
        39: {
             xSpeed : 10,
             ySpeed = 0,
             text: 'right'
        },
        40: {
             xSpeed : 0,
             ySpeed = 10,
             text: 'down'
        }
}


function keyDown() {
    var key = event.keyCode; /*getting keyCode of pressed key*/
    ctx.fillStyle = "black"; /*color of rectangle*/

    xSpeed = speed[key].xSpeed ;
    ySpeed = speed[key].ySpeed ;
    console.log(speed[key].text);
}

关于javascript - JavaScript-不更改变量,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45253802/

10-12 07:35
查看更多