贪吃蛇 --- 对象

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

food

function Food(w,range){

this.x = 0;

this.y = 0;

this.w = w;

this.range = range;

// 1.随机位置的方法

this.randomPos = function(theSnake){

// 随机位置的方法

this.x = parseInt(Math.random()*this.range)*this.w;

this.y = parseInt(Math.random()*this.range)*this.w;

var isEnd = true;//判断食物在不在蛇的身体里

while(isEnd){

for(var i=0;i<theSnake.snakeBodyArray.length;i++){

var pos =theSnake.snakeBodyArray[i];

if(pos.x == this.x&&pos.y==this.y){

break;

}

if(i==theSnake.snakeBodyArray.length){

isEnd = false;

}

// 2.绘制实物的方法

this.drawFood = function(context,color){

context.beginPath();

context.fillStyle = color;

context.fillRect(this.x,this.y,w,w);

// console.log(this.x);

// context.save();

}

main

var fenshu = document.getElementById("fenshu");

var anniu = document.getElementById("anniu");

var snakeCanvas = document.getElementById("snakeCanvas");

var context = snakeCanvas.getContext("2d");

var lock = false; // false 代表锁是打开的

var timer = null; //定时器

var speed = 200; //蛇移动的速度

var isDie = false; //活着

//创建对象 (画格)

var manger = new Manager();

manger.drawBackgroundLine(20,snakeCanvas,context);

//画蛇

var aSnake = new Snake(4,"greenyellow",manger.boxSize);

aSnake.initSnake(context);

//画食物

var aFood = new Food(manger.boxSize,manger.numberOfBox);

aFood.drawFood(context,"powderblue");

aFood.randomPos(aSnake);

function snakePlay(){

timer = setInterval(function(){

lock = false; //开锁

context.clearRect(0,0,snakeCanvas.width,snakeCanvas.height);//清除画布

manger.drawBackgroundLine(20,snakeCanvas,context);//绘制背景

aFood.drawFood(context,"powderblue"); //绘制食物

aSnake.moveSnake();//移动蛇

aSnake.drawSnakeBody(context);//画蛇

manger.snakeEatFood(aSnake,aFood);//判断蛇是否吃到了食物

aSnake.crashCheck(snakeCanvas,timer); //判断蛇是否死亡

if(aSnake.snakeBodyArray.length == 5&&speed > 30){

speed =30;

clearInterval(timer);

snakePlay();

}

if(aSnake.snakeBodyArray.length == 10&&speed > 20){

speed = 20;

clearInterval(timer);

snakePlay();

}

fenshu.innerHTML = manger.ii; //分数

console.log(manger.ii);

},speed)

}

snakePlay();

function game(){

lock = true; //开锁

context.clearRect(0,0,snakeCanvas.width,snakeCanvas.height);//清除画布

manger.drawBackgroundLine(20,snakeCanvas,context);//绘制背景

aFood.drawFood(context,"powderblue"); //绘制食物

aSnake.drawSnakeBody(context);//画蛇

}

// 键盘的监听事假

document.onkeydown = function(event){

var ev =event || window.event;

switch(ev.keyCode){

case 37:

if(lock == false&&(aSnake.direction == "top"||aSnake.direction == "bottom")){

aSnake.direction = "left"; //direction是Snake的属性

lock = true;

}

break;

case 38:

if(lock == false&&(aSnake.direction == "left" || aSnake.direction == "right")){

aSnake.direction = "top";

lock = true;

}

break;

case 39:

if(lock == false&&(aSnake.direction == "top"||aSnake.direction == "bottom")){

aSnake.direction = "right"; //direction是Snake的属性

lock = true;

}

break;

case 40:

if(lock == false&&(aSnake.direction == "left" || aSnake.direction == "right")){

aSnake.direction = "bottom";

lock = true;

}

break;

}

anniu.onclick=function(){

window.location.reload();

}

Manager

//这个类功能 *画线

function Manager(){

this.boxSize = null;//格子大小

this.numberOfBox = null;//格子数量

this.ii=0;

//画线

this.drawBackgroundLine = function(boxSize,canvas,context){

this.boxSize = boxSize;

this.numberOfBox = parseInt(canvas.width/this.boxSize);

//横线.

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

context.beginPath();

context.moveTo(0,i*this.boxSize);

context.lineTo(this.boxSize*this.numberOfBox,i*this.boxSize);

context.strokeStyle = "lightgray";

context.stroke();

context.save();

}

//竖线.

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

context.beginPath();

context.moveTo(i*this.boxSize,0);

context.lineTo(i*this.boxSize,this.boxSize*this.numberOfBox);

context.strokeStyle = "lightgray";

context.stroke();

context.save();

}

// 蛇是否吃到食物

this.snakeEatFood = function(theSnake,theFood){

var snakeHead = theSnake.snakeBodyArray[theSnake.snakeBodyArray.length-1];

if(snakeHead.x == theFood.x&&snakeHead.y == theFood.y){

// 吃到食物

//1.食物的位置重新随机

theFood.randomPos(aSnake);

//2.蛇的身体加长

theSnake.addBody();

this.ii++;

}

snake

function Snake(bodyLength,color,w){// 蛇头的颜色

this.bodyLength = bodyLength;

this.color = color; //蛇头

this.snakeBodyArray = []; //用来存储蛇每截身体的坐标------数组里最后一个元素是蛇头(第一个是的话距离墙太近-会死)

this.WIDTH = w; //一节身体的大小

this.direction = "right";

this.prevBody = []; //处理头进去

// 初始化蛇的状态--注意这个方法在初始化蛇的对象的时候就需要调用

this.initSnake = function(context){

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

var pos = {

x:i*this.WIDTH+200,

y:100,

}

this.snakeBodyArray.push(pos);

}

this.drawSnakeBody(context);

}

// 1.绘制身体

this.drawSnakeBody = function(context){

var body = [];//处理头

if (isDie) {

body = this.prevBody;

}else{

body = this.snakeBodyArray;

}

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

var pos = body[i];

context.beginPath();

if(i == body.length - 1){

context.fillStyle = this.color;

}else{

context.fillStyle = "black";

}

context.fillRect(pos.x,pos.y,this.WIDTH,this.WIDTH);

context.strokeStyle = "width";

context.strokeRect(pos.x,pos.y,this.WIDTH,this.WIDTH);

}

// 2.移动

this.moveSnake = function(){//把数组里第一个元素删掉,然后在最后一个元素后面添加一个新的再push回数组

this.prevBody = [];//处理头

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

this.prevBody.push(this.snakeBodyArray[i]);

}

this.snakeBodyArray.shift();//删除数组里第一个元素

var currentHead = this.snakeBodyArray[this.snakeBodyArray.length-1];//获取到数组里最后一个元素

var newHead = {};

switch(this.direction){

case "left":

newHead.x = currentHead.x-this.WIDTH;

newHead.y = currentHead.y;

break;

case "right":

newHead.x = currentHead.x+this.WIDTH;

newHead.y = currentHead.y;

break;

case "top":

newHead.x = currentHead.x;

newHead.y = currentHead.y-this.WIDTH;

break;

case "bottom":

newHead.x = currentHead.x;

newHead.y = currentHead.y+this.WIDTH;

break;

}

this.snakeBodyArray.push(newHead);

}

// s蛇身体增加长度

this.addBody = function(){

var pos = {x:0,y:0};

this.snakeBodyArray.unshift(pos);

}

// 蛇是否碰到了墙壁或者自己

this.crashCheck = function(canvas,timer){

var snakeHead = this.snakeBodyArray[this.snakeBodyArray.length-1];

if(snakeHead.x>=canvas.width||snakeHead.x<0||snakeHead.y<0||snakeHead.y>=canvas.height){

isDie = true;

clearInterval(timer);

game();

alert("game Over");

return;

// window.location.reload();//刷新重新开始

}

//循环检测身体部分是否发生了碰撞

for(var i=0; i<this.snakeBodyArray.length-1; i++){

var bodyPice = this.snakeBodyArray[i];

if(snakeHead.x==bodyPice.x&&snakeHead.y==bodyPice.y){

isDie = true;

clearInterval(timer);

game();

alert("game Over");

return;

}