はじめに
この本を読んだので、とりあえずつくってみようとおもいました田中 賢一郎
インプレスR&D
2017-03-24
SnakeBiyte風ゲーム
コード
本にあった内容のコードを少し変更して、ボタン操作にしました。そうしないとスマートフォンからは動かすことができなかったので。
やり方としては、クリックのイベントを利用して、タグのvalueごとに向きを変えてます
あとリロードしなくても良いように初期化するボタンも追加してます
<input type="button" value="最初から" style="width:100px;height:50px" onclick="reset()"> <canvas style="background-color:yellow;" height="400" width="400" id="field"></canvas> <table border="0"> <tr> <td style="border-style: none;"></td> <td style="border-style: none;"><input type="button" value="↑" style="width:50px;height:50px"></td> <td style="border-style: none;"></td> </tr> <tr> <td style="border-style: none;"><input type="button" value="←" style="width:50px;height:50px"></td> <td style="border-style: none;"></td> <td style="border-style: none;"><input type="button" value="→" style="width:50px;height:50px"></td> </tr> <tr> <td style="border-style: none;"></td> <td style="border-style: none;"><input type="button" value="↓" style="width:50px;height:50px"></td> <td style="border-style: none;"></td> </tr> </table> <br/> <script> "use strict"; var W, H, S = 20; var snake = []; var foods = []; var keyCode = 0; var point = 0; var timer = NaN; var ctx; //Point Object function Point(x, y){ this.x = x; this.y = y; } //Init Function function init(){ var canvas = document.getElementById('field'); W = canvas.width / S; H = canvas.height / S; ctx = canvas.getContext('2d'); ctx.font = "20px sans-serif"; // snake snake.push(new Point(W / 2, H / 2)); // foods for(var i = 0 ; i<10 ; i++){ addFood(); } timer = setInterval("tick()",200); document.onclick = clickbutton; } // add food function function addFood(){ while(true){ var x = Math.floor(Math.random()*W); var y = Math.floor(Math.random()*H); if(isHit(foods, x, y) || isHit(snake, x, y)){ continue; } foods.push(new Point(x,y)); break; } } // Hit function isHit(data, x, y){ for(var i = 0;i<data.length ;i++){ if(data[i].x == x && data[i].y == y){ return true; } } return false; } // Move Food function moveFood(x, y){ foods = foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } // Move Snake function tick(){ var x = snake[0].x; var y = snake[0].y; console.log(keyCode); switch(keyCode){ // Left case "←": x--; break; // Up case "↑": y--; break; // Right case "→": x++; break; // Down case "↓": y++; break; default: paint(); return; } if(isHit(snake, x, y) || x < 0 || x >= W || y<0 || y >= H){ clearInterval(timer); paint(); return; } // new head snake.unshift(new Point(x, y)); if(isHit(foods, x, y)){ // eat food point += 10; moveFood(x, y); }else{ // do not eat food snake.pop(); } paint(); } // drow function paint(){ ctx.clearRect(0, 0, W * S, H * S); ctx.fillStyle = "rgb(256,0,0)"; ctx.fillText(point, S,S * 2); ctx.fillStyle = "rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p. x*S, (p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p. x*S, (p.y+1)*S); }); } function clickbutton(event){ keyCode = event.srcElement.defaultValue; } function reset(){ W, H, S = 20; snake = []; foods = []; keyCode = 0; point = 0; timer = NaN; init(); } init(); </script>
コメント