貪吃蛇

思路：

? ? 蛇

食物

食物被吃掉之后隨機(jī)位置出現(xiàn)

食物不能隨機(jī)在蛇身上

蛇頭碰到蛇身就結(jié)束了，碰到墻也結(jié)束了。

碰到食物變長(zhǎng)

蛇能動(dòng)

蛇不能180度轉(zhuǎn)頭

蛇可以加速

1.神說：要有蛇 畫蛇

? ? 1.1蛇頭

1.2蛇身

2.讓蛇動(dòng)起來

? ? 2.1默認(rèn)的開啟游戲的時(shí)候有一個(gè)方向

2.2鍵盤控制方向

2.3animate定時(shí)器

3.有食物 隨機(jī)投放

? ? 3.1產(chǎn)生隨機(jī)的位置

3.2判斷位置是否在蛇頭或者蛇身上，如果在 重新產(chǎn)生位置，如果不在畫食物

4.吃食物

? ? 4.1判斷遲到食物? 碰撞檢測(cè)

4.2遲到食物添加蛇身

5.判斷游戲結(jié)束

? ? 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">

/* 設(shè)置canvas畫布的陰影 顏色為黑色? 居中并且向下移動(dòng)20px*/

canvas{

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

display: block;

margin: 20px auto;

}

</style>

<body>

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

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

</body>

<script>

$(function(){

/**

[Draw description]canvas 繪圖的構(gòu)造函數(shù)

@param{[type]} canvas [description]

**/

function Draw(canvas){

this.canvas = canvas;// 這里通過Canvas獲取canvas對(duì)象

/**

[check description]檢測(cè)瀏覽器是否支持canvas

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

**/

this.check = function(){

//檢測(cè)瀏覽器是否支持canvas

if(!this.canvas.getContext){

console.log('瀏覽器不支持canvas');

return false;//返回false

}else{

return true;//否則返回true

}

}

/**

[main description]canvas 繪圖的主函數(shù)

@return{[type]} [description]

**/

this.main = function(){

//檢測(cè)兼容

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

//隨機(jī)產(chǎn)生食物

var food = randFood(snake);

food.draw();

//做一個(gè)動(dòng)畫的定時(shí)器

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('游戲結(jié)束')

}

//重新繪制圖像

snake.draw();

food.draw();

//是否吃到了食物

if(isRectHit(food,snake.head)){

Snake.prototype.isEatFood=true;

//重新隨機(jī)產(chǎn)生食物

food=randFood(snake);

}

},80);

}

}

/**

*[Rect description]

* @param number x? ? ? 矩形起始點(diǎn)x坐標(biāo)

* @param number y? ? ? 矩形起始點(diǎn)y坐標(biāo)

* @param number width? 矩形的寬度

* @param number height? 矩形的高度

* @param string color? 矩形的填充顏色

* @param object xt? ? ? 畫筆? 上下文

**/

//添加蛇默認(rèn)的移動(dòng)方向，右,公有的屬性，任何地方能夠修改訪問，并且和實(shí)例共享

Snake.prototype.direction=1;

//定義一個(gè)是否吃到食物的標(biāo)記

Snake.prototype.isEatFood=false;

//畫蛇的方法

Snake.prototype.draw=function(){

//畫蛇頭

this.head.draw();

//畫蛇身

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

this.body[i].draw(); //判斷當(dāng)前尾部方向

}

}

//讓蛇動(dòng)起來

Snake.prototype.move=function(){

//檢測(cè)蛇頭與蛇身

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

console.log(this.body[i])

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

return false;

}

}

//檢測(cè)碰撞到墻壁

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;

}

//檢測(cè)蛇頭與蛇身

//for (item in this.body){

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

// return false

// }

// }

//蛇的 移動(dòng)方式

//給身體加一個(gè)頭

var rect=new Rect(this.head.x,this.head.y,40,40,'gray');//這個(gè)蛇頭長(zhǎng)40px，寬40Px，顏色為紅色

? //添加到身體開始的地方

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

//去掉一個(gè)尾巴

if(Snake.prototype.isEatFood){

Snake.prototype.isEatFood=false;

? ? ? // 如果吃到食物了就重新給位置，即末尾添加一節(jié)，即蛇變長(zhǎng)

? // 重新隨機(jī)產(chǎn)生食物

}else{

this.body.pop();//如果沒吃到末尾就砍掉一節(jié)，即蛇長(zhǎng)度不變

}

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;

}

//添加鍵盤監(jiān)聽

$(window).keydown(function(e){

switch(e.keyCode){

case 37://向右

if(Snake.prototype.direction==1){

return;

}

? Snake.prototype.direction=3;

? break;

//如果當(dāng)前方向是向下的，不能改為向上

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;

}

})

//構(gòu)造對(duì)象方塊

function Rect(x,y,width,height,color){

this.x = x;//定義Rect的x坐標(biāo)

this.y = y;//定義Rect的y坐標(biāo)

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);//落點(diǎn)位置


}

//創(chuàng)建蛇的對(duì)象

function Snake(obj){

//蛇頭,，蛇頭設(shè)成紅色

this.head=new Rect(obj.canvas.width/2,obj.canvas.height/2,40,40,'red');

//蛇身

this.body=[];//表示多個(gè)身體

var x=this.head.x-40;//表示這個(gè)蛇身的x坐標(biāo)=蛇頭的x-40

var y=this.head.y;//表示這個(gè)蛇身=蛇頭的y坐標(biāo)

//循環(huán)創(chuàng)建身體

for(var i=0;i<3;i++){//畫出3個(gè)方塊，設(shè)置成灰色

var rect=new Rect(x,y,40,40,'gray');//創(chuàng)建新的身體，定義了x,y寬高顏色為灰色

this.body.push(rect);//將該函數(shù)添加到數(shù)組里面

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

}

}

//隨機(jī)產(chǎn)生食物

function randFood(snake){

//是否在蛇身上

isInSnake = true;

while(isInSnake){

//產(chǎn)生兩個(gè)位置 x,y

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

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

//創(chuàng)建食物矩形

var food = new Rect(x,y,40,40,'green');

isInSnake = false;

//判斷這個(gè)位置是否在蛇上.

//是否是蛇頭

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;

}

//產(chǎn)生隨機(jī)函數(shù)

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]);//創(chuàng)建一個(gè)繪圖的實(shí)例對(duì)象

draw.main();//調(diào)用main繪制圖像

})

</script>

</body>

</html>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.HTML5 canvas arcTo() 用于在畫布上創(chuàng)建介于兩個(gè)切線之間的弧。但是要注意請(qǐng)使用 stroke...
    清歡152365閱讀 434評(píng)論 0贊 0
  • HTML canvasarcTo()方法 1.arcTo() 方法在畫布上創(chuàng)建介于兩個(gè)切線之間的弧/曲線。 2....
    Agonl_0929a閱讀 273評(píng)論 0贊 1
  • 【canvas】 《2.6.5 面向?qū)ο蠡A(chǔ)復(fù)習(xí)補(bǔ)充：》 創(chuàng)建對(duì)象的方式： * var o = { name: '...
    夜幕小草閱讀 456評(píng)論 0贊 0
  • arcTo()方法主要就是用于在畫布Canvas上創(chuàng)建兩條切線之間的弧線或者曲線。 確定一條弧線，那么就要有兩條切...
    氟西汀_677f閱讀 1,054評(píng)論 0贊 0
  • 一、canvas簡(jiǎn)介 1.1 什么是canvas？（了解） 是HTML5提供的一種新標(biāo)簽 Canvas是一個(gè)矩形區(qū)...
    J_L_L閱讀 1,695評(píng)論 0贊 4

友情鏈接更多精彩內(nèi)容