質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

798閲覧

図形の動きを追従させる関数(ヘビゲーム)の作り方が知りたいです。

BsaiuhuaNkt

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/08/17 09:25

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問