Question

我试图编写Snake代码，但我有一点问题。

＆＃13;

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);

＆＃13;

<!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>

＆＃13;

如果你运行代码，你会发现变量xSpeed＆amp; ySpeed没有变化。我尝试了橡皮鸭的补丁，但我什么都没发现。我14岁，所以请不要嘲笑我的愚蠢。：D谢谢你的建议。托马斯

Answer 1

您必须在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);
}

Answer 2

在函数内部分配rules和php php-cs-fixer.phar fix /path/to/project --rules=@Symfony的新值时，删除var关键字。在函数内部使用xSpeed关键字意味着您只在函数内声明了该函数本地的新变量。因此，无法从其他功能或外部功能访问它。

＆＃13;

ySpeed

＆＃13;

var

＆＃13;

javascript - 不更改变量

2 个答案: