javascript - 不改變變量

我想編碼Snake，但我有一個小問題。javascript - 不改變變量

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謝謝你的建議。托馬斯

來源

2017-07-22 Tomáš Hobza

你有變量之前刪除了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); 
}

來源

2017-07-22 11:05:49 CodeWizard

太感謝你了「」 –

添加到您的代碼中的一些更多的改進 – CodeWizard

我試圖擺脫的‘變種’，但沒有奏效。添加開關它後開始工作，所以再次感謝你。 –

分配的xSpeed和ySpeed在函數內部新值時，取出var關鍵字。在函數中使用var關鍵字意味着你在函數內部聲明瞭只在該函數本地的新變量。因此它不能從其他功能或從該功能以外訪問。

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 
 
     xSpeed = 10; 
 
     ySpeed = 0; 
 
     console.log("right"); 
 
    } else if (key == 37) { //LEFT 
 
     xSpeed = -10; 
 
     ySpeed = 0; 
 
     console.log("left"); 
 
    } else if (key == 38) { //UP 
 
     xSpeed = 0; 
 
     ySpeed = -10; 
 
     console.log("up"); 
 
    } else if (key == 40) { //DOWN 
 
     xSpeed = 0; 
 
     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>

來源

2017-07-22 11:14:59 Munawir

javascript - 不改變變量

回答

相關問題