思路：
? ? 蛇
食物
食物被吃掉之后隨機(jī)位置出現(xiàn)
食物不能隨機(jī)在蛇身上
蛇頭碰到蛇身就結(jié)束了桨啃，碰到墻也結(jié)束了端衰。
碰到食物變長
蛇能動(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è)蛇頭長40px狗超，寬40Px弹澎，顏色為紅色
? //添加到身體開始的地方
this.body.splice(0,0,rect);
//去掉一個(gè)尾巴
if(Snake.prototype.isEatFood){
Snake.prototype.isEatFood=false;
? ? ? // 如果吃到食物了就重新給位置，即末尾添加一節(jié)努咐，即蛇變長
? // 重新隨機(jī)產(chǎn)生食物
}else{
this.body.pop();//如果沒吃到末尾就砍掉一節(jié)苦蒿，即蛇長度不變
}
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>
