形状不移动

我正在尝试一场蛇的游戏，虽然形状似乎不动。我不知道它为什么这样做，这不是一个印刷错误。为了看到我的问题，请参阅下面的代码片段。形状不移动

我已经添加了CSS和HTML文件，所以你知道我做对了。我的做法是获得蛇的方向（由变量'vx'和'vy'表示），然后使用该方向来计算'snakePiece（）'对象的未来位置在'蛇'的阵列中。

window.onload = function main() { 
 
    var c = document.getElementById("canvas"); 
 
    var ctx = c.getContext("2d"); 
 

 
    function snakePiece() { 
 
    this.color = "#9999ff"; 
 
    this.dimension = 25; 
 
    this.x = 0; 
 
    this.y = 0; 
 
    this.vx = 0; 
 
    this.vy = 0; 
 
    } 
 

 
    var snake = new Array(new snakePiece()); 
 

 
    function setPosition() { 
 
    for (i = 0; i < snake.length; i++) { 
 
     switch (snake[i].vx) { 
 
     case 1: 
 
      snake[i].x += snake[i].dimension; 
 
      snake[i + 1].x = snake[i].x - snake[i].dimension; 
 
      snake[i + 1].vx = 1; 
 
      break; 
 
     case -1: 
 
      snake[i].x -= snake[i].dimension; 
 
      snake[i + 1].x = snake[i].x + snake[i].dimension; 
 
      snake[i + 1].vx = -1; 
 
      break; 
 
     } 
 
     switch (snake[i].vy) { 
 
     case 1: 
 
      snake[i].y -= snake[i].dimension; 
 
      snake[i + 1].y = snake[i].y + snake[i].dimension; 
 
      snake[i + 1].vy = 1; 
 
      break; 
 
     case -1: 
 
      snake[i].y += snake[i].dimension; 
 
      snake[i + 1].y = snake[i].y - snake[i].dimension; 
 
      snake[i + 1].vy = -1; 
 
      break; 
 
     } 
 
    } 
 
    } 
 

 
    setInterval(function draw() { 
 
    setPosition(); 
 
    ctx.clearRect(0, 0, c.width, c.height); 
 
    for (j = 0; j < snake.length; j++) { 
 
     ctx.fillStyle = snake[j].color; 
 
     ctx.fillRect(snake[j].x, snake[j].y, snake[j].dimension, snake[j].dimension); 
 
    } 
 
    }, 500); 
 

 
    document.onkeydown = function(event) { 
 
    var keyPress = String.fromCharCode(event.keyCode); 
 
    switch (keyPress) { 
 
     case 40: //DOWN 
 
     snake[0].vy = 1; 
 
     snake[0].vx = 0; 
 
     break; 
 
     case 39: //RIGHT 
 
     snake[0].vx = 1; 
 
     snake[0].vy = 0; 
 
     break; 
 
     case 38: //UP 
 
     snake[0].vy = -1; 
 
     snake[0].vx = 0; 
 
     break; 
 
     case 37: //LEFT 
 
     snake[0].vx = -1; 
 
     snake[0].vy = 0; 
 
     break; 
 
    } 
 
    } 
 
}

body { 
 
    padding: 15px; 
 
} 
 
#canvas { 
 
    border: 3px solid black; 
 
    background-color: #FFB6C1; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Simple Snake</title> 
 
    <script src="snake-java.js" type="text/javascript" rel="javascript"></script> 
 
    <link href="snake-css.css" type="text/css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <canvas height="900" width="900" id="canvas"></canvas> 
 
</body> 
 

 
</html>

来源

2016-05-15 Mineohmight

你自己解决你的问题？ – PinkTurtle

以下是一张就可以了。我在代码中添加了一些注释，我修改了某些内容以排除错误。

window.onload = function main() { 
 
    var c = document.getElementById("canvas"); 
 
    var ctx = c.getContext("2d"); 
 

 
    function snakePiece() { 
 
    this.color = "#9999ff"; 
 
    this.dimension = 25; 
 
    this.x = 100; 
 
    this.y = 100; 
 
    this.vx = 0; 
 
    this.vy = 0; 
 
    } 
 

 
    var snake = new Array(new snakePiece()); 
 

 
    function setPosition() { 
 
    for (i = 0; i < snake.length; i++) { 
 
     switch (snake[i].vx) { 
 
     case 1: 
 
      snake[i].x += snake[i].dimension; 
 
      
 
      // You don't need all the commented lines in this function. 
 
      // The for loop is already taking care of your snake cells. 
 
      // Moreover snake[i + 1] is undefined if your snake is length 1 (hence a JS error). 
 
      
 
      //snake[i + 1].x = snake[i].x - snake[i].dimension; 
 
      //snake[i + 1].vx = 1; 
 
      break; 
 
     case -1: 
 
      snake[i].x -= snake[i].dimension; 
 
      //snake[i + 1].x = snake[i].x + snake[i].dimension; 
 
      //snake[i + 1].vx = -1; 
 
      break; 
 
     } 
 
     switch (snake[i].vy) { 
 
     case 1: 
 
      snake[i].y -= snake[i].dimension; 
 
      //snake[i + 1].y = snake[i].y + snake[i].dimension; 
 
      //snake[i + 1].vy = 1; 
 
      break; 
 
     case -1: 
 
      snake[i].y += snake[i].dimension; 
 
      //snake[i + 1].y = snake[i].y - snake[i].dimension; 
 
      //snake[i + 1].vy = -1; 
 
      break; 
 
     } 
 
    } 
 
    } 
 

 
    setInterval(function draw() { 
 
    setPosition(); 
 
    ctx.clearRect(0, 0, c.width, c.height); 
 
    for (j = 0; j < snake.length; j++) { 
 
     ctx.fillStyle = snake[j].color; 
 
     ctx.fillRect(snake[j].x, snake[j].y, snake[j].dimension, snake[j].dimension); 
 
    } 
 
    }, 500); 
 

 
    document.onkeydown = function(event) { 
 
    //var keyPress = String.fromCharCode(event.keyCode); <- this is wrong -> verify with : console.log(keyPress); 
 
    switch (event.keyCode) { // switch on event.keyCode instead 
 
     case 40: //DOWN 
 
     snake[0].vy = -1; // -1 instead of 1 
 
     snake[0].vx = 0; 
 
     break; 
 
     case 39: //RIGHT 
 
     snake[0].vx = 1; 
 
     snake[0].vy = 0; 
 
     break; 
 
     case 38: //UP 
 
     snake[0].vy = 1; // 1 instead of -1 
 
     snake[0].vx = 0; 
 
     break; 
 
     case 37: //LEFT 
 
     snake[0].vx = -1; 
 
     snake[0].vy = 0; 
 
     break; 
 
    } 
 
    // add preventDefault(); to disable window scrolling 
 
    event.preventDefault(); 
 
    } 
 
}

body { 
 
    padding: 15px; 
 
} 
 
#canvas { 
 
    border: 3px solid black; 
 
    background-color: #FFB6C1; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Simple Snake</title> 
 
    <script src="snake-java.js" type="text/javascript" rel="javascript"></script> 
 
    <link href="snake-css.css" type="text/css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <canvas height="900" width="900" id="canvas"></canvas> 
 
</body> 
 

 
</html>

来源

2016-05-16 01:09:18 PinkTurtle

回答

相关问题