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

總結

以上是生活随笔為你收集整理的html5 js贪吃蛇,html5+js 贪吃蛇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。