HTML canvas 实现贪吃蛇的效果

HTML canvas 实现贪吃蛇的效果

  

思路：1.

  画蛇

  食物被吃掉之后随机位置出现

  食物不能随机在蛇身上

 碰到墙也结束了

  碰到食物变长

  蛇能动

  蛇不能180度转头

  画蛇头和蛇身

2.让蛇动起来

    2.1默认的开启游戏的时候有一个方向

   2.2键盘能够控制方向

   2.3animate 定时器

3.有食物  随机投放

    3.1 产生随机的位置

3.2 判断位置是否在蛇头或者蛇身上，如果在

     重新产生位置，如果不在画食物

4.吃食物

  4.1判断吃到食物  碰到检测

  4.2吃到食物添加蛇身

5.判断游戏结束

  5.1蛇头碰到蛇身

   5.2蛇头碰到墙壁

代码如下：

​<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>

</head>

<style type="text/css">

/* 设置canvas画布的阴影 颜色为黑色  居中并且向下移动20px*/

canvas{

box-shadow: 0 0 10px 10px #000;

display: block;

margin: 20px auto;

}

</style>

<body>

<!-- 我们要操作的canvas -->

<canvas id="canvas" width="800" height="600"></canvas>

</body>

<script>

$(function(){

/**

[Draw description]canvas 绘图的构造函数

@param{[type]} canvas [description]

**/

function Draw(canvas){

this.canvas = canvas;// 这里通过Canvas获取canvas对象

/**

[check description]检测浏览器是否支持canvas

@return bool fals支持e 表示不支持  true表示

**/

this.check = function(){

//检测浏览器是否支持canvas

if(!this.canvas.getContext){

console.log('浏览器不支持canvas');

return false;//返回false

}else{

return true;//否则返回true

}

}

/**

[main description]canvas 绘图的主函数

@return{[type]} [description]

**/

this.main = function(){

//检测兼容

if(!this.check()){

console.log('浏览器不支持canvas');

return false;//返回false

}

//获取canvas绘图的上下文:画笔

Draw.prototype.xt = this.canvas.getContext('2d');

// var _this=this;

//绘制蛇的初始图像

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);

}

},80);

}

}

/**

*[Rect description]

* @param number x      矩形起始点x坐标

* @param number y      矩形起始点y坐标

* @param number width  矩形的宽度

* @param number height  矩形的高度

* @param string color  矩形的填充颜色

* @param object xt      画笔  上下文

**/

//添加蛇默认的移动方向，右,公有的属性，任何地方能够修改访问，并且和实例共享

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(){

//检测蛇头与蛇身

for(var i=0;i<this.body.length;i++){

console.log(this.body[i])

if(isRectHit(this.head,this.body[i])){

return false;

}

}

//检测碰撞到墙壁

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 (item in this.body){

// if(isRectHit(this.head,this.body[item])){

// return false

// }

// }

//蛇的 移动方式

//给身体加一个头

var rect=new Rect(this.head.x,this.head.y,40,40,'gray');//这个蛇头长40px，宽40Px，颜色为红色

  //添加到身体开始的地方

this.body.splice(0,0,rect);

//去掉一个尾巴

if(Snake.prototype.isEatFood){

Snake.prototype.isEatFood=false;

      // 如果吃到食物了就重新给位置，即末尾添加一节，即蛇变长

  // 重新随机产生食物

}else{

this.body.pop();//如果没吃到末尾就砍掉一节，即蛇长度不变

}

switch(this.direction){

case 0:

this.head.y-=40//向上

    break;

case 1:

this.head.x+=40;//向下

    break;

case 2:

this.head.y+=40//向右

    break;

case 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 Rect(x,y,width,height,color){

this.x = x;//定义Rect的x坐标

this.y = y;//定义Rect的y坐标

this.width = width; //，宽

this.height = height;//，高

this.color = color;//颜色

}

/**

* [draw description]  画矩形

* @return

**/

//画方块的方法

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');

//蛇身

this.body=[];//表示多个身体

var x=this.head.x-40;//表示这个蛇身的x坐标=蛇头的x-40

var y=this.head.y;//表示这个蛇身=蛇头的y坐标

//循环创建身体

for(var i=0;i<3;i++){//画出3个方块，设置成灰色

var rect=new Rect(x,y,40,40,'gray');//创建新的身体，定义了x,y宽高颜色为灰色

this.body.push(rect);//将该函数添加到数组里面

x-=40;//x=x-40

}

}

//随机产生食物

function randFood(snake){

//是否在蛇身上

isInSnake = true;

while(isInSnake){

//产生两个位置 x,y

var x = getRandPosition(0,($('#canvas')[0].width-40)/40)*40;

var y = getRandPosition(0,($('#canvas')[0].height-40)/40)*40;

//创建食物矩形

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;

var R2_min_x = rect2.x;

var R1_min_y = rect1.y;

var R2_min_y = rect2.y;

var R1_max_x = rect1.x+40;

var R2_max_x = rect2.x+40;

var R1_max_y = rect1.y+40;

var R2_max_y = rect2.y+40;

var min_x = Math.max(R1_min_x,R2_min_x);

var max_x = Math.min(R1_max_x,R2_max_x);

var min_y = Math.max(R1_min_y,R2_min_y);

var max_y = Math.min(R1_max_y,R2_max_y);

if(min_x<max_x && min_y<max_y){

return true;

}else{

return false;

}

}

var draw = new Draw($('#canvas')[0]);//创建一个绘图的实例对象

draw.main();//调用main绘制图像

})

</script>

</body>

</html>

最终效果：



最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 贪吃蛇
    思路： 蛇 食物 食物被吃掉之后随机位置出现 食物不能随机在蛇身上 蛇头碰到蛇身就结束了，碰到墙也结束了。 碰...
    孤久成瘾_63e8阅读 404评论 0赞 0
  • 2020-03-31
    贪吃蛇的思路与方法 1.设计蛇： 设计蛇的宽、高、长、蛇的状态、蛇的方向。 2.设计蛇的食物：设计食物的宽、高、位...
    guoshauili阅读 206评论 0赞 0
  • 面向对象游戏案例：贪吃蛇
    案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫...
    逸笛阅读 896评论 0赞 1
  • js面向对象贪吃蛇
    <!DOCTYPE html> Title * { margin: 0; ...
    雨_8882阅读 376评论 0赞 0
  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,054评论 0赞 2