頁面部分
<body>
<canvas id="c1" width="300" height="300" style="background:#9FC"></canvas>
</body>
jquery部分
function Block(ctx){
this.x=0;//x座標
this.y=0;//y座標
this.ctx=ctx;//畫布
this.draw=function(){
//繪圖方法
ctx.fillRect(this.x*20,this.y*20,20,20);
}
}
$(function(){
$(document).keydown(function(e){
switch(e.keyCode){
case 37:
if(vx!=1) {vx=-1;vy=0;}
break;
case 38:
if(vy!=1) {vy=-1;vx=0;}
break;
case 39:
if(vx!=-1) {vx=1;vy=0;}
break;
case 40:
if(vy!=-1) {vy=1;vx=0;}
break;
}
})
var canvas=document.getElementById("c1");
ctx=canvas.getContext("2d");
var b1=new Block(ctx);
var b2=new Block(ctx);
var b3=new Block(ctx);
var vx=1;//水平速度
var vy=0;//豎直速度
var arr=[];
var food=new Block(ctx);//食物
arr.push(b1);
arr.push(b2);
arr.push(b3);
var move=function(){
ctx.clearRect(0,0,300,300);//畫布清空
//控制除第一塊以外的其他快，每一塊等於前一塊位置
for(var i=arr.length-1;i>0;i--){
arr[i].x=arr[i-1].x;
arr[i].y=arr[i-1].y;
}
//控制第一塊
b1.x+=vx;
b1.y+=vy;
//檢測食物
if(b1.x==food.x && b1.y==food.y){
randomFood();
var b=new Block(ctx);
b.x=-1;
b.y=-1;
arr.push(b);
}
//撞牆
if(b1.x<=-1||b1.y<=-1||b1.x>=15||b1.y>=15){
clearInterval(timer);
alert("撞牆了Game Over")
return;
}
//撞到自己
for(var i=1;i<arr.length;i++){
if(arr[i].x==b1.x && arr[i].y==b1.y){
clearInterval(timer);
alert("撞到自己了 Game Over")
return;
}
}
//循環繪圖
for(var i=0;i<arr.length;i++){
arr[i].draw();
}
food.draw();
}
var randomFood=function(){
food.x=parseInt(Math.random()*15);
food.y=parseInt(Math.random()*15);
}
var timer=setInterval(move,200);//定時器控制移動
})