Javascriptでヘビゲームを作っているのですが、餌を食べたときにヘビを長くし先頭に追従させる関数でつまずいてしまいました。
ヘビと餌が接触したときに先頭のヘビの後ろに同じ大きさのブロックを作ってsetTimeout()等で少しだけ遅れさせて先頭と同じ動きにすることはできますか?
Javascript
1var canvas = document.getElementById("mycanvas"); 2var ctx = canvas.getContext("2d"); 3 4 5var snakeX = 300; 6var snakeY = 300; 7 8var rightPress = false; 9var leftPress = false; 10var upPress = false; 11var downPress = false; 12 13var x = Math.random()* 570; 14var y = Math.random()* 570; 15var statu = 1; 16 17var score = 0; 18 19var snakewidth = 20; 20var snakeheight = 20; 21 22 23function drawScore() { 24 ctx.font = '16px Arial'; 25 ctx.fillStyle = 'white'; 26 ctx.fillText("score:"+score, 8, 16); 27} 28//餌の描画 29function addFood() { 30if(statu==1){ 31 ctx.beginPath(); 32 ctx.arc(x, y, 10, 0, Math.PI * 2); 33 ctx.fillStyle = "green"; 34 ctx.fill(); 35 ctx.closePath(); 36} 37} 38//接触判定 39function touch() { 40 if(y < snakeY + 30 && y > snakeY - 10){ 41 if(x < snakeX + 30 && x > snakeX - 10){ 42 statu = 0; 43 x = (Math.random()* 580) + 10; 44 y = (Math.random()* 580) + 10; 45 score += 10; 46 statu = 1; 47 } 48 } 49} 50//ヘビの描画 51function snake() { 52 ctx.beginPath(); 53 ctx.rect(snakeX, snakeY, snakewidth, snakeheight); 54 ctx.fillStyle = "green"; 55 ctx.fill(); 56 ctx.closePath(); 57} 58 59function draw() { 60 ctx.clearRect(0, 0, canvas.width, canvas.height); 61 addFood(); 62 snake(); 63 touch(); 64 cope(); 65 drawScore(); 66 67 if(rightPress) { 68 snakeX += 2; 69 } 70 if(leftPress) { 71 snakeX -= 2; 72 } 73 if(upPress) { 74 snakeY -= 2; 75 } 76 if(downPress) { 77 snakeY += 2; 78 } 79 if(snakeX + 15 > 600) { 80 alert("GAME_OVER"); 81 document.location.reload(); 82 } 83 if(snakeX < 0) { 84 alert("GAME_OVER"); 85 document.location.reload(); 86 } 87 if(snakeY + 5 < 0) { 88 alert("GAME_OVER"); 89 document.location.reload(); 90 } 91 if(snakeY + 20 > 600) { 92 alert("GAME_OVER"); 93 document.location.reload(); 94 } 95} 96 97document.addEventListener("keydown", keyDownHandler, false); 98document.addEventListener("keyup", keyUpHandler, false); 99 100function keyDownHandler(e) { 101 if(e.key == "Right" || e.key == "ArrowRight") { 102 rightPress = true; 103 if(leftPress == true) { 104 alert("GAME_OVER"); 105 document.location.reload(); 106 } 107 else { 108 leftPress = false; 109 } 110 upPress = false; 111 downPress = false; 112 } 113 if(e.key == "Left" || e.key == "ArrowLeft") { 114 if(rightPress == true) { 115 alert("GAME_OVER"); 116 document.location.reload(); 117 } 118 else { 119 rightPress = false; 120 } 121 leftPress = true; 122 upPress = false; 123 downPress = false; } 124 if(e.key == "Up" || e.key == "ArrowUp") { 125 rightPress = false; 126 leftPress = false; 127 if(downPress == true) { 128 alert("GAME_OVER"); 129 document.location.reload(); 130 } 131 else { 132 downPress = false; 133 } 134 upPress = true; 135 downPress = false; } 136 if(e.key == "down" || e.key == "ArrowDown") { 137 rightPress = false; 138 leftPress = false; 139 if(upPress == true) { 140 alert("GAME_OVER"); 141 document.location.reload(); 142 } 143 else { 144 upPress = false; 145 } 146 upPress = false; 147 downPress = true; } 148} 149 150function keyUpHandler(e) { 151 if(e.key == "Right" || e.key == "ArrowRight") { 152 rightPress = true; 153 leftPress = false; 154 upPress = false; 155 downPress = false; 156 } 157 if(e.key == "Left" || e.key == "ArrowLeft") { 158 rightPress = false; 159 leftPress = true; 160 upPress = false; 161 downPress = false; 162 } 163 if(e.key == "Up" || e.key == "ArrowUp") { 164 rightPress = false; 165 leftPress = false; 166 upPress = true; 167 downPress = false; 168 } 169 if(e.key == "down" || e.key == "ArrowDown") { 170 rightPress = false; 171 leftPress = false; 172 upPress = false; 173 downPress = true; 174 } 175} 176 177setInterval(draw, 10); 178 179draw();
あなたの回答
tips
プレビュー