首先设置canvas和样式
#canvas{
box-shadow: 0 0 10px #000;
margin: 20px auto;
display: block;
}
<canvas id="canvas" width='800' height='600'></canvas>
接下来写js
首先添加canvas绘图的构造函数
function Draw(canvas){
this.canvas = canvas;//Draw私有属性传入dom获取canvas；
//检测兼容
this.check = function(){
if(!this.canvas.getContext){//如果this.canvas.getContext不存在就返回false如果存在就返回true
return false;
}else{
return true;
}
}
//绘图的主函数
this.main = function(){
//判断私有方法check()返回来的是什么如果是true就跳过
if(!this.check()){
console.log('浏览器不支持canvas')
}
//开整获取画笔
Draw.prototype.xt = this.canvas.getContext('2d')
//创建蛇
var snake = new Snake(this)
//画蛇
snake.draw();
//产生食物
var food = randFood(snake);
food.draw();
//动画定时器
Draw.prototype.timer = setInterval(function(){
//清除旧的图像
Draw.prototype.xt.clearRect(0,0,this.canvas.width,this.canvas.height)
//改变社的位置
if(!snake.move()){
clearInterval(Draw.prototype.timer);
alert('游戏结束')
};
//重新绘制蛇
snake.draw();
food.draw()
if(isRectHit(food,snake.head)){
Snake.prototype.isEatFood = true;
food = randFood(snake);
}
},100)
}
}
//创建矩形构造函数
function Rect(x,y,width,height,color){
this.x= x; //创建私有属性
this.y = y;
this.width = width;
this.height = height;
this.color = color;
}
//画矩形的方法
Rect.prototype.draw = function(){
Draw.prototype.xt.beginPath(); //开始绘画
Draw.prototype.xt.fillStyle = this.color; //画笔颜色
Draw.prototype.xt.fillRect(this.x,this.y,this.width,this.height);//创建填充矩形
Draw.prototype.xt.strokeRect(this.x,this.y,this.width,this.height)//创建描边矩形
}
//创建蛇
function Snake(obj){
this.head = new Rect(obj.canvas.width/2,obj.canvas.height/2-20,40,40,'red') //蛇头，根据Rect构造函数创建的实例对象
this.body = [] //蛇身
var x = this.head.x - 40; //定义变量
var y = this.head.y; //定义变量
//循环创建身体
for(var i=0;i<3;i++){
var rect = new Rect(x,y,40,40,'gray');
this.body.push(rect); //通过数组方法添加蛇身
x -= 40; //蛇身位置的调整
}
}
//默认的移动方向
Snake.prototype.direction = 1;
//是否吃到十五
Snake.prototype.isEatFood = false;
//画蛇
Snake.prototype.draw = function(){
//画舌头
this.head.draw();
//画蛇身
for(var i=0;i<this.body.length;i++){
this.body[i].draw()
}
}
//动
Snake.prototype.move = function(){
if(this.head.x< 40 || this.head.y< 40 || this.head.x>$('#canvas')[0].width-40-40 || this.head.y>$('#canvas')[0].height-40-40){
return false;
}
//检测蛇头与蛇身
for(var i=0; i<this.body.length; i++){
if (isRectHit(this.head,this.body[i])) {
return false;
}
}
//加一个头
var rect = new Rect(this.head.x,this.head.y,40,40,'gray');
//添加到身体开始的地方
this.body.splice(0,0,rect)
//去掉尾巴
if(Snake.prototype.isEatFood){
Snake.prototype.isEatFood = false;
//产生食物
}else{
this.body.pop()//去除一个身体
}
//改变方向
switch(this.direction){
case 0://方向为0蛇向上走
this.head.y -=40;
break;
case 1://方向为1蛇向右走
this.head.x += 40;
break;
case 2://方向为2蛇向下走
this.head.y +=40;
break;
case 3://方向为3蛇向左走
this.head.x -=40;
break;
}
return true;
}
//添加键盘事件
$(window).keydown(function(e){
switch(e.keyCode){
case 37://键盘按左方向如果是右直接返回，如果不是方向变为左
if(Snake.prototype.direction == 1){
return;
}
Snake.prototype.direction = 3;
break;
case 38://键盘按左方向如果是下直接返回如，果不是方向变为上
if(Snake.prototype.direction == 2){
return;
}
Snake.prototype.direction = 0;
break;
case 39://键盘按左方向如果是左直接返回，如果不是方向变为右
if(Snake.prototype.direction == 3){
return;
}
Snake.prototype.direction = 1;
break;
case 40://键盘按左方向如果是上直接返回，如果不是方向变为下
if(Snake.prototype.direction == 0){
return;
}
Snake.prototype.direction = 2;
break;
}
})
//随机产生食物
function randFood(snake){
var isInSnake = true;//定义默认食物在蛇身上
//判断食物是否在蛇身上
while(isInSnake){
//产生两个位置
var x = getRandPosition(0,($('#canvas')[0].width-40)/40)*40;//x轴的位置
var y = getRandPosition(0,($('#canvas')[0].height-40)/40)*40;//y轴的位置
var food = new Rect(x,y,40,40,'green')//食物
isInSnake = false;
//判断位置是否在蛇头上
if(isRectHit(food,snake.head)){
isInSnake = true;
continue;
}
//判断位置是否在蛇身上
for(var i=0;i<snake.body.length;i++){
if(isRectHit(food,snake.body[i])){
isInSnake = true;
break;
}
}
}
return food; //返回一个食物矩形
}
//创建随机坐标函数
function getRandPosition(min,max){
return Math.round(Math.random()*(max-min)+min)//返回一个随机的整数值
}
//碰撞检测参数为两个矩形
function isRectHit(rect1,rect2){
var R1_min_x = rect1.x; //矩形1的x轴起始点
var R2_min_x = rect2.x; //矩形2的x轴起始点
var R1_min_y = rect1.y; //矩形1的y轴起始点
var R2_min_y = rect2.y; //矩形2的y轴起始点
var R1_max_x = rect1.x+40; //矩形1的x周的结束点
var R2_max_x = rect2.x+40; //矩形2的x周的结束点
var R1_max_y = rect1.y+40; //矩形1的y周的结束点
var R2_max_y = rect2.y+40; //矩形2的y周的结束点
var min_x = Math.max(R1_min_x,R2_min_x) //矩形1矩形2两个中最大的x轴起始点
var max_x = Math.min(R1_max_x,R2_max_x) //矩形1矩形2两个中最小的x轴结束点
var min_y = Math.max(R1_min_y,R2_min_y) //矩形1矩形2两个中最大的y轴起始点
var max_y = Math.min(R1_max_y,R2_max_y) //矩形1矩形2两个中最小的y轴结束点
//如果条件成立返回布尔值
if(min_x<max_x-1 && min_y<max_y-1){
return true;
}else{
return false;
}
}
//创建一个实例对象
var draw = new Draw($('#canvas')[0])
//调用主函数
draw.main();
})
