1. 程式人生 > >實現貪吃蛇程序的整個代碼:

實現貪吃蛇程序的整個代碼:

switch 開始 加載 tle wrap canvas body .get dir

1.實現貪吃蛇程序的整個代碼: <!doctype html> <html> <head> <meta charset="utf-8"> <title>課件_老師</title> </head> <body> <canvas id="canvas"></canvas> <input type="button" value="開始遊戲" id="play" > <script> window.onload = function() { var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); var playG = document.getElementById("play"); canvas.width = 400; canvas.height = 400; canvas.style.border = "1px solid #ccc"; var foodx = 0; // 食物的x坐標 var foody = 0; // 食物的y坐標 var size = 8; // 每一塊大小 var long = 10; // 初始蛇身長度 var x = y = 8; // 初始坐標 var dir = 2; // 0 左 1 上 2 右 3 下 方向
var times = 100; // 運動速度 var map = []; // 存儲蛇身數據 var timer = null; // 定時器名稱 var onOff=true; playG.onclick = playGame; function playGame() { if(onOff) { timer = setInterval(move,times); food(); onOff=false; }; } function move() { /*運動方向;*/ switch(dir) { case 0: x = x - size; break; case 1: y = y - size; break;
case 2: x = x + size; break; case 3: y = y + size; break; } // 判斷撞墻 if(x>=400 || x<0 || y<0 || y>=400) { alert("你掛掉了,原因是你撞墻了!"); window.location.reload();/*每次掛掉以後就重新開始,讓遊戲重新加載*/ } // 判斷撞自己 for(var i=0; i<map.length; i++) { if(x == map[i].x && y == map[i].y) { alert("你掛掉了,原因是你撞自己了!"); window.location.reload(); } } if(map.length > long) { var cl = map.shift(); context.clearRect(cl.x,cl.y,size,size); } map.push({‘x‘:x,‘y‘:y}); context.fillRect(x,y,size,size); // 吃到食物 if(foodx*size ==x && foody*size == y) { long++; times -=5; clearInterval(timer); onOff=true; playGame(); } } document.onkeydown = function(ev) { var ev = ev || event; var cod = ev.keyCode - 37; switch(cod){ case 0: dir = 0; break; case 1: dir = 1; break; case 2: dir = 2; break; case 3: dir = 3; break; } } // 隨機生成食物 function food() { foodx = Math.floor(Math.random()*50); foody = Math.floor(Math.random()*50); /*排除生成食物的時候,不讓食物生成在自己身上;*/ for(var i=0; i<map.length; i++) { if( foodx*size == map[i].x && foody*size == map[i].y ) { food(); return false; } } context.save(); context.fillStyle = "#000"; context.fillRect(foodx*size,foody*size,size,size); context.restore(); } } </script> </body> </html>

實現貪吃蛇程序的整個代碼: