實現貪吃蛇程序的整個代碼:
阿新 • • 發佈:2017-08-31
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>
實現貪吃蛇程序的整個代碼: