html css js贪吃蛇,html5+js+css开发贪吃蛇

̰贪吃蛇

*{

margin:0;

padding:0;

}

body{

background:url(img/bg.jpg);

background-size:cover;/*屏幕自适应*/

}

#box{

width:600px;

margin:20px auto;

}

#canvas{

border:3px solid #4a4a4a;

}

#btn a{

width:100px;

height:26px;

display:inline-block;

text-decoration:none;

background:#338328;

text-align:center;

padding:10px;

border-radius:10px;

line-height:26px;

color:#000;

font-weight:600;

}

#btn a:hover{

color:#fff;

}

#score_one{

color:#fff;

text-align:center;

font-weight:600;

font-size:20px;

}

得分：

开始游戏

重新游戏

function $(id){

return document.getElementById(id);

}

//获取画布对象

var canvas = $("canvas");

var beginmusic = $("beginmusic");

var bomb = $("bomb");

var over = $("over");

var score = $("score");

score.innerText="0";

//获取上下文

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

//蛇身长4格

var snakeCount = 4;

var snakes = [];

var foodX = 0;

var foodY = 0;

var timer = null;

var toGo = 3;// 1 左 2 上 3 右 4 下

//绘画

function draw(){

var s=600;

for(var i=0;i

ctx.strokeStyle="#4a4a4a";

ctx.moveTo(0,i+40);

ctx.lineTo(600,i+40);

ctx.moveTo(i+40,0);

ctx.lineTo(i+40,600);

ctx.stroke();

}

//画蛇

for(var i=0;i

//重启绘画

ctx.beginPath();

ctx.fillRect(snakes[i].x,snakes[i].y,40,40);

ctx.strokeStyle="#4a4a4a";

ctx.moveTo(snakes[i].x,snakes[i].y);// 0 0

ctx.lineTo(snakes[i].x+40,snakes[i].y);// 40 0

ctx.lineTo(snakes[i].x+40,snakes[i].y+40);// 40 40

ctx.lineTo(snakes[i].x,snakes[i].y+40);// 0 40

ctx.lineTo(snakes[i].x,snakes[i].y);// 0 0

ctx.stroke();

}

ctx.fillRect(foodX,foodY,40,40);

}

//定义蛇的位置

function start(){

for(var i=0;i

snakes[i]={x:i*40,y:0};

}

addFood();

draw();

}

//添加食物

function addFood(){

foodX = Math.floor(Math.random()*15)*40;

foodY = Math.floor(Math.random()*15)*40;

}

//蛇移动

function move(){

switch(toGo){

case 1:

//给数组添加新的元素

snakes.push({x:snakes[snakeCount-1].x-40,y:snakes[snakeCount-1].y});//左

break;

case 2:

//给数组添加新的元素

snakes.push({x:snakes[snakeCount-1].x,y:snakes[snakeCount-1].y-40});//上

break;

case 3:

//给数组添加新的元素

snakes.push({x:snakes[snakeCount-1].x+40,y:snakes[snakeCount-1].y});//右

break;

case 4:

//给数组添加新的元素

snakes.push({x:snakes[snakeCount-1].x,y:snakes[snakeCount-1].y+40});//下

break;

}

//删除数组的第一个元素

snakes.shift();

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

isEat();

isDead();

draw();

}

//键盘方向键控制蛇的走向

function keyDown(e){

switch(e.keyCode){

case 37://左

toGo = 1;

break;

case 38:

toGo = 2;

break;

case 39:

toGo = 3;

break;

case 40:

toGo = 4;

break;

}

};

//蛇吃东西

function isEat(){

if(snakes[snakeCount-1].x == foodX && snakes[snakeCount-1].y == foodY){

snakeCount++;

addFood();

snakes.unshift({x:-40,y:-40});

score.innerText = parseInt(score.innerText)+50;

bomb.play();

}

};

//规则限制

function isDead(){

//边界判断

if(snakes[snakes.length-1].x>560 || snakes[snakes.length-1].y>560 || snakes[snakes.length-1].x<0 || snakes[snakes.length-1].y<0){

beginmusic.pause();

over.play();

alert("你为啥这么想不开呢？");

window.location.reload();

}

//判断自身，蛇不能碰到蛇身

for(var i=0;i

if(snakes[snakes.length-1].x == snakes[i].x && snakes[snakes.length-1].y == snakes[i].y){

beginmusic.pause();

over.play();

alert("你何必为难自己呢？");

window.location.reload();

}

}

}

//开始游戏

function btnStart(){

beginmusic.play();

timer = setInterval(move,150);

document.onkeydown = function(e){

e = e || window.event;

keyDown(e);

}

}

//重新游戏

function reStart(){

window.location.reload();

}

window.onload = function(){

start();

}