html5 js贪吃蛇,html5+js 贪吃蛇

body{background:#c7e2e7;}

.box{

width:450px;

height:450px;

margin:0px auto;

pandding:1px auto;

box-shadow:2px 2px 5px 1px #000;

color:#252b34;

}

var direction=0;//方向

var speed=500;//初始速度500ms

//拿到画板

var canvas = document.getElementById("mycanvas");

//拿到画图工具

var ctx = canvas.getContext("2d");

//假定格子 15*15 450/15=30个

//for

ctx.strokeStyle="white";//颜色

for(var i=0;i<30;i++){

//开始路径

ctx.beginPath();

ctx.moveTo(0,i*15);//移动到哪里

ctx.lineTo(450,i*15)

ctx.moveTo(i*15,0);//移动到哪里

ctx.lineTo(i*15,450)

ctx.closePath();

ctx.stroke();//画线

}

//蛇 节点 x-x坐标,y-y坐标,f-方向

//上1 下 -1 左 2 右-2

function Cell(x,y,f){

//this 当前对象

this.x=x;

this.y=y;

this.f=f;

}

//食物

function Food(x,y){

this.x=x;

this.y=y;

}

//蛇对象数组

var snake = [];

var width = 15;

var head;//头

var food =new Food(15,15)

for(var i=0;i<5;i++){

//初始化蛇的身体

snake[i] =new Cell(i,0,-2);

}

//画蛇

function drawSnake(){

ctx.clearRect(0,0,450,450);

//填充颜色

for(var i=0;i

ctx.fillStyle="black";

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

ctx.fillStyle="red";

}

ctx.beginPath();

ctx.rect(snake[i].x*15,snake[i].y*15,width,width);//矩形

ctx.closePath();

ctx.fill();

}

head = snake[snake.length-1];

//是否吃到食物

if(head.x==food.x&&head.y==food.y){

var newCell=new Cell(head.x,head.y,head.f);

switch(head.f){

case 1:newCell.y--;break;

case 2:newCell.x--;break;

case -1:newCell.y++;break;

case -2:newCell.x++;break;

}

snake[snake.length]=newCell;

//重新生成食物

initFood();

}

//取出蛇的头

drawFood();

}

//食物

function drawFood(){

ctx.fillStyle="red";

ctx.beginPath();

ctx.rect(food.x*15,food.y*15,width,width);//矩形

ctx.closePath();

ctx.fill();

}

drawSnake();

//生成随机食物

function initFood(){

var x= Math.ceil(Math.random()*28)+1;

var y= Math.ceil(Math.random()*28)+1;

food.x=x;

food.y=y;

for(var i=0;i

//食物与身体重合

if(snake[i].x==x&& snake[i].y==y){

initFood();

}

}

}

//监听键盘事件

document.οnkeydοwn=function(e){

//左 37 右 39

var cade=e.keyCode;

var dir=0;//方向

//上1 下 -1 左 2 右-2

switch(cade){

case 38:dir=1;break;

case 39:dir=-2;break;

case 40:dir=-1;break;

case 37:dir=2;break;

}

//当方向确定了，做移动

if(dir!=0){

if(parseInt(head.f)+dir!=0){//不准上走时下走

//移动蛇

//moveSnake();

direction=dir;

//按键方向相同，每次加速100ms

if(speed>100&&head.f==dir){

speed-=100;

window.clearInterval(timer);

timer=window.setInterval(autoMove,speed);

}

}else{

direction=0;

}

}

}

//移动蛇

function moveSnake(){

var newCell=new Cell(head.x,head.y,head.f);//新蛇

newCell.f=direction;

//循环蛇的身体 蛇的单元格往前动 把下标为0的丢弃

var newSnake=[];

for(var i=1;i

newSnake[i-1]=snake[i];

}

newSnake[snake.length-1]=newCell;

switch(direction){

case 1:newCell.y--;break;

case 2:newCell.x--;break;

case -1:newCell.y++;break;

case -2:newCell.x++;break;

}

snake=newSnake;

head=snake[snake.length-1];

if(head.x>30||head.x<0||head.y>30||head.y<0){

alert("游戏结束");

//刷新页面

window.location.reload();

}

drawSnake();

}

//自动移动蛇

function autoMove(){

if(direction!=0){

moveSnake();

}

}

//定时自动移动

var timer=window.setInterval(autoMove,500);