贪吃蛇制作

HTML部分

首先我们需要一个HTML的页面制作

css部分

紧接着我们需要一个css的页面我是用sass来做的

.container{

width: 3.2rem;

height: 3.2rem;

float: left;

ul{

width: 3.16rem;

height: 3.16rem;

border: 2px solid #FF9797;

li{

list-style: none;

width: 0.158rem;

height: 0.158rem;

float: left;

border-radius: 10px;

}

}

}

上面的css代码是ul大盒子

.oper{

font-size: 0.1rem;

padding: 0.2rem 0;

width: 3.2rem;

float: left;

#level{

width: 0.5rem;

height: 0.2rem;

}

input{

margin-top: 0.1rem;

width: 0.5rem;

border-radius: 6px;

height: 0.2rem;

color: #fff;

background: green;

border: none;

outline: none;

font-weight:bold;

}

input:active{

background:#93FF93;

}

}

移动端的配置

@media screen and (min-width:320px){

html{

font-size: 100px;

}

}

@media screen and (min-width:360px){

html{

font-size: 112px;

}

}

@media screen and (min-width:375px){

html{

font-size: 117px;

}

}

@media screen and (min-width:412px){

html{

font-size: 128px;

}

}

@media screen and (min-width:414px){

html{

font-size: 129px;

}

}

@media screen and (min-width:440px){

html{

font-size: 138px;

}

}

@media screen and (min-width:480px){

html{

font-size: 150px;

}

}

@media screen and (min-width:640px){

html{

font-size: 200px;

}.container{margin: 0 auto;}

}

@media screen and (max-width:640px){

html{

font-size: 200px;

}

}

js部分

下面我们需要js页面来做效果

首先我们要获取我们需要的标签

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

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

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

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

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

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

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

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

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

我们需要初始化ul下面的每一个li

//初始化格子

function init(){

var pianduan = document.createDocumentFragment();

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

var oli = document.createElement("li");

pianduan.appendChild(oli);

}

oul.appendChild(pianduan);

lis = oul.children;

}

我们需要判断初始化显示几个盒子，加入随机颜色

var snake= [];

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

snake.push({pos:i , color:randColor()})

}

//随机色

function randColor(){

return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";

}

//初始化前五个格子改背景色

function initSnake(){

for(var i=0,l=snake.length ; i

lis[snake[i].pos].style.background=snake[i].color;

}

}

接着我们需要初始化一个食物

//食物的索引

var food = {pos:0,color:"yellow"};

//生成食物

function initFood(){

var index = Math.floor(Math.random()*400);

while(isInSnake(index)){

index = Math.floor(Math.random()*400);

}

food = {pos:index,color:randColor()};

lis[food.pos].style.background=food.color;

}

判断食物不能出现在蛇的位置

//判断食物不能出现蛇的位置

function isInSnake(index){

for(var i=0,l=snake.length ; i

if(snake[i].pos == index){

return true;

break;

}

}

return false;

}

当我们让蛇运动的时候，每前进一步，最后面的一个将变成白色

var shewei = snake.slice(0,1)[0].pos;

lis[shewei].style.background = "#fff";

for(var i=0 , l=snake.length ; i

snake[i].pos = snake[i+1].pos;

}

shetou = snake[l-1].pos

接着我们在吃掉食物之后，将吃掉的食物累加都蛇尾

//蛇吃食物的碰撞检测

if(shetou == food.pos){

//将食物放到数组的前面

snake.unshift({pos:shewei,color:food.color});

//音乐特效

siwu.play();

//分数

fenshu.innerHTML = snake.length;

//生成新的食物

initFood();

}

下面我们做蛇与墙壁的碰撞

var direction = 39;//方向 37左键 38上键 39右键 40下键

//个数

var geshu = 20;

//蛇跑

var shetou = snake.slice(-1)[0].pos;

//关于墙的碰撞检测

if((shetou+1)%geshu == 0 && direction == 39){

death()

}else if(shetou>=(400-geshu) && direction == 40){

death()

}else if((shetou < geshu) && direction == 38){

death()

}else if(shetou%geshu == 0 && direction == 37){

death()

}

接着我们检测是否碰撞到自身

//检测是否吃到自己

for(var i=0 , l=snake.length ; i

if(snake[i].pos == shetou){

siwang.play();

alert("你已经自毁，游戏结束！");

location.reload();

break;

}

}

下面我们控制方向

if(direction == 40){//向下

snake[l-1].pos = snake[l-1].pos+geshu;

}else if(direction == 37){//向左

snake[l-1].pos = snake[l-1].pos-1;

}else if(direction == 39){//向右

snake[l-1].pos = snake[l-1].pos+1;

}else if(direction == 38){//向上

snake[l-1].pos = snake[l-1].pos-geshu;

}

//给文档加点击下键事件

document.addEventListener("keydown" , function(e){

e=e || window.event;

//获取按下的是什么键

switch(e.keyCode){

//左键

case 37:{

if(direction == 39)return false;

direction = e.keyCode;

break;

}

//上键

case 38:{

if(direction == 40)return false;

direction = e.keyCode;

break;

}

//右键

case 39:{

if(direction == 37)return false;

direction = e.keyCode;

break;

}

//下键

case 40:{

if(direction == 38)return false;

direction = e.keyCode;

break;

}

}

} , false)

如果碰撞到墙壁和自身以后调用死亡函数

//死亡函数

function death(){

alert("你以头破血流，游戏结束！");

//location.href=location.href;

location.reload();

}

接着我们来做开始游戏和暂停游戏

var timer = null;

//开始游戏

btnStart.onclick = function(){

clearInterval(timer);

timer = setInterval(yundong,shudu);

//背景音乐开始

bjyy.play();

}

//暂停游戏

btnsuspend.onclick = function(){

clearInterval(timer);

}

下面我们设置游戏难度

//蛇的熟读

var shudu = 100;

//设置难度

shudu = level.value;

紧跟着我们需要做历史最高分数和当前分数

//获取蛇的长度

//分数

fenshu.innerHTML = snake.length;

//历史最高分

var score = localStorage.getItem("score")||0;

//分数

fenshu.innerHTML = snake.length;

var changdu = snake.length;

//历史最高分

var score = localStorage.getItem("score")||0;

if(changdu > score){

localStorage.setItem("score" , changdu);

}

最后我们做手机效果，上下左右滑动

function hua(e){

//获取按下的是什么键

switch(e){

//左键

case 37:{

if(direction == 39)return false;

direction = e;

break;

}

//上键

case 38:{

if(direction == 40)return false;

direction = e;

break;

}

//右键

case 39:{

if(direction == 37)return false;

direction = e;

break;

}

//下键

case 40:{

if(direction == 38)return false;

direction = e;

break;

}

}

}

//位置改变

//开启滑动

hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

hammertime

.on('swipeleft', logEventType1)

.on('swiperight', logEventType3)

.on('swipeup',logEventType2)

.on('swipedown', logEventType4);

function logEventType1() {

hua(37);

}

function logEventType2() {

hua(38);

}

function logEventType3() {

hua(39);

}

function logEventType4() {

hua(40);

}