html5贪吃蛇小游戏
好一阵子前自己随便写的：
js代码：
//将method作用域绑定于一个目标
function makeCallback(method,target){
return function(){method.apply(target,arguments);}
}
//坐标点类
var point = function(x,y){
this.x = x;
this.y = y;
this.comp = function(tempPoint){
if(tempPoint.x==this.x&&tempPoint.y==this.y)return true;
else return false;
};
};
//蛇类
var snake = function(){
this.pointArr = new Array();
this.dir = 1;
this.food = null;
this.gogo = null;
this.putFood = function(){
var x,y;
while(1){
var flag = 0;
x = Math.round(Math.random()*79);
y = Math.round(Math.random()*49);
for(var i = 0;i<this.pointArr.length;i++){
if(x==this.pointArr[i].x&&y==this.pointArr[i].y){
flag = 1;
break;
}
}
if(flag==0)break;
}
this.food.x = x;
this.food.y = y;
};
this.move = makeCallback(function(){
for(var j=1;j<this.pointArr.length;j++){
if(this.pointArr[j].x==this.pointArr[0].x&&this.pointArr[j].y==this.pointArr[0].y){
clearInterval(this.gogo);
alert("吃到自己了啊亲~~");
}
}
if(this.pointArr[0].x>=80||this.pointArr[0].y>=50||this.pointArr[0].x<0||this.pointArr[0].y<0){
clearInterval(this.gogo);
alert("撞墙了啊亲~~");
}
var popPoint = this.pointArr.pop();
switch(this.dir){
case 0:
var tempPoint = new point(this.pointArr[0].x,this.pointArr[0].y-1);
if(this.food.comp(tempPoint)){
this.pointArr.push(popPoint);
this.putFood();
}
this.pointArr.unshift(tempPoint);
break;
case 1:
var tempPoint = new point(this.pointArr[0].x+1,this.pointArr[0].y);
if(this.food.comp(tempPoint)){
this.pointArr.push(popPoint);
this.putFood();
}
this.pointArr.unshift(tempPoint);
break;
case 2:
var tempPoint = new point(this.pointArr[0].x,this.pointArr[0].y+1);
if(this.food.comp(tempPoint)){
this.pointArr.push(popPoint);
this.putFood();
}
this.pointArr.unshift(tempPoint);
break;
case 3:
var tempPoint = new point(this.pointArr[0].x-1,this.pointArr[0].y);
if(this.food.comp(tempPoint)){
this.pointArr.push(popPoint);
this.putFood();
}
this.pointArr.unshift(tempPoint);
break;
default:;
}
context.clearRect(0,0,800,500);
for(var i=0;i<this.pointArr.length;i++){
context.fillStyle='#FF0000';
context.fillRect(this.pointArr[i].x*10,this.pointArr[i].y*10,10,10);
context.fillStyle='#87CEFA';
context.strokeRect(this.pointArr[i].x*10,this.pointArr[i].y*10,10,10);
}
context.fillStyle='#FF0000';
context.fillRect(this.food.x*10,this.food.y*10,10,10);
},this);
this.init = function(){
this.pointArr = [new point(22,20),new point(21,20),new point(20,20)];
this.dir = 1;
this.food = new point(30,20);
this.gogo = setInterval(this.move,50);
};
};
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var aSnake = new snake();
aSnake.init();
$(document).bind('keydown',function (event){
switch (event.keyCode) {
case 38://up
if(aSnake.dir == 2)break;
aSnake.dir = 0;
break;
case 40://down
if(aSnake.dir == 0)break;
aSnake.dir = 2;
break;
case 37://left
if(aSnake.dir == 1)break;
aSnake.dir = 3;
break;
case 39://right
if(aSnake.dir == 3)break;
aSnake.dir = 1;
break;
}
});
html代码：
<!DOCTYPE html> <html> <head> <style> </style> <script src="jquery-1.7.2.min.js"></script> <script> </script> </head> <body style="margin:0;padding:50px;"> <canvas id="canvas" width="800" height="500" style="border:solid 1px black"></canvas> <script src="mySnake.js"></script> </body> </html>
