形が動かない

私はヘビのゲームを試みていますが、形は動いていないようです。なぜこれをやっているのか分かりませんし、それは誤植でもありません。私の問題を見るには、下記のスニペットをご覧ください↓。形が動かない

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

ここにそれが私の感想です。私は何が間違っていたかをexlainするために何かを修正したコードにコメントを追加しました。

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

答えて

関連する問題