html贪吃蛇游戏复杂,HTML贪吃蛇游戏，附重玩，加速，暂停，排行榜功能

【实例简介】

实训时做的个答辩网页游戏本项目是基于html、javascript、css而开发的一款上手简单的贪吃蛇游戏。

【实例截图】

【核心代码】

var score = document.getElementById('score');

var map = document.getElementById('map');// 获取地图路径

var hangNumber = 20;

var lieNumber = 22;

var mapWidth = lieNumber * 20 'px';// 地图的宽

var mapHeight = hangNumber * 20 'px';// 地图的高

map.style.width = mapWidth;

map.style.height = mapHeight;

var snakeDIVPosition = [];//记录地图上的所有div的位置

for ( var i = 0; i < hangNumber; i ) {

var hangDIV = document.createElement('div');//行div

hangDIV.className = 'hang';

map.appendChild(hangDIV);//创造节点

var hangArray = [];

for ( var j = 0; j < lieNumber; j ) {

var lieDIV = document.createElement('div');//方块DIV

lieDIV.className = 'lie';

hangDIV.appendChild(lieDIV);//在创造节点

hangArray.push(lieDIV);//将lieDiv添加到数组

}

snakeDIVPosition.push(hangArray);//将hangArray添加到数组

}

var snake = [];//蛇身

for ( var i = 0; i < 3; i ) {

snakeDIVPosition[0][i].className = 'lie liveSnake';

snake[i] = snakeDIVPosition[0][i];

}

//初始化

score.innerHTML=0;

var x = 2;

var y = 0;

var scoreCount = 0;

var foodX = 0;

var foodY = 0;

var direction = 'right';

var changeDir = true;

var delayTimer = null;

document.onkeydown = function(event) {//方向键

if (!changeDir) {//判断是否需要改变方向

return;

}

event = event || window.event;

if (direction=='right' && event.keyCode == 37) {

return;

}

if (direction == 'left' && event.keyCode == 39) {

return;

}

if (direction == 'up' && event.keyCode == 40) {

return;

}

if (direction == 'down' && event.keyCode == 38) {

return;

}

switch (event.keyCode) {

case 37:

direction = 'left';

break;

case 38:

direction = 'up';

break;

case 39:

direction = 'right';

break;

case 40:

direction = 'down';

break;

}

changeDir = false;

delayTimer = setTimeout(function() {

changeDir = true;

},50)

};

function snakeMove() {//蛇头位置

switch (direction) {

case 'left':

x--;

break;

case 'right':

x ;

break;

case 'up':

y--;

break;

case 'down':

y ;

break;

};

if (x < 0 || y < 0 || x >= lieNumber || y >= hangNumber) {//判断游戏是否结束

alert('游戏结束！您当前的得分是：' scoreCount '分！继续加油吧！');

clearInterval(moveTimer);

paihang();

return;

}

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

if (snake[i] == snakeDIVPosition[y][x]) {//蛇头位置与之前身体位置比较，相同则吃到了自己

alert('您吃了您自己！游戏结束！下次请注意哦！另外，您当前的分数是：' scoreCount '分！继续加油吧！');

clearInterval(moveTimer);

paihang();

return;

};

}

if (foodX == x && foodY == y) {//判断当前位置是否有食物

snakeDIVPosition[foodY][foodX].className = 'lie liveSnake';

snake.push(snakeDIVPosition[foodY][foodX]);//蛇加长

scoreCount=scoreCount 5;//记分

score.innerHTML = scoreCount;//更新分数

createNewfood();//随即产生食物

} else {//蛇尾变成格子的颜色

snake[0].className = 'lie';

snake.shift();

snakeDIVPosition[y][x].className = 'lie liveSnake';

snake.push(snakeDIVPosition[y][x]);

};

};

var moveTimer = setInterval('snakeMove()', 300);//蛇移动速度

function random(min, max) {

return Math.floor(Math.random() * (max - min 1) min);

};

function createNewfood() {//随即产生食物

foodX = random(0, lieNumber - 1);

foodY = random(0, hangNumber - 1);

if (snakeDIVPosition[foodY][foodX].className == 'lie liveSnake') {

createNewfood();//食物被吃后，随即又产生食物

} else {

snakeDIVPosition[foodY][foodX].className = 'lie food';

}

};

createNewfood();//开局的食物

var pause = document.getElementById('Pause');

var start = document.getElementById('Start');

var refresh = document.getElementById('Refresh');

var speed = document.getElementById('Speed');

pause.onclick = function() {

clearInterval(moveTimer);

};

start.onclick = function() {

clearInterval(moveTimer);

moveTimer = setInterval('snakeMove()', speed1);

};

refresh.onclick = function() {

window.location.reload();

};

var speed1 = 300;

speed.onclick = function() {

speed1 -= 50;

clearInterval(moveTimer);

moveTimer = setInterval('snakeMove()', speed1);

};

function paihang() {

var his = localStorage.getItem('history')

if (his) {

// 已经有记录了

//把his转换为JSON对象

his = JSON.parse(his)

if (his.length >= 10) {

// 当前成绩是否进入了前10名

if (scoreCount > his[9].score) {

gameStorage(scoreCount)

} else {

alert('请再接再厉！')

}

} else {

gameStorage(scoreCount)

}

} else {

// 第一次

gameStorage(scoreCount)

}

}

// 游戏存储

function gameStorage(score) {

if(scoreCount<100) {

alert('友情提示：只有分数超过100才能进入至尊排行榜哦！')}

else {

var name = prompt('恭喜您获得进入至尊榜的资格！请输入您的名字哟：')

name = name ? name : '匿名'

his = localStorage.getItem('history')

if (his) {

his = JSON.parse(his)// 将JSON字符串转换JSON对象(数组)

var index = his.length

// 计算出当前成绩应该放到哪个 位置

for (var a in his) {

if (score > his[a].score) {// 当前成绩 大于 哪个历史记录 就放到哪个之前

index = a

break

}

}

// 当前成绩的数组

var obj = [

{"name": name, "score": score}

]

// 根据 上一步到的位置 从这个地方 his 分为2个数组

var before = his.slice(0, index)

var after = his.slice(index, his.length)

// 将3个数组 进行重新排序 需要把当前的成绩 插入 before after中间 更新缓存

localStorage.setItem('history', JSON.stringify(before.concat(obj, after)))

} else {

var obj = [

{"name": name, "score": score}

]

// 转换为JSON格式字符串 进行存储

localStorage.setItem('history', JSON.stringify(obj))

}

}

// 更新排行榜

showOrder()

}

// 排行榜输出

function showOrder() {

var ul = document.getElementById('orderList')

ul.innerHTML = ''

his = localStorage.getItem( 'history')

if (his) {

his = JSON.parse(his)

var html = ''

for (var i = 0; i <= his.length - 1; i ) {

if (i > 9) {

break

}

html = '

第' (i 1) '名    姓名：' his[i]['name'] '    成绩：' his[i]['score'] ''

}

ul.innerHTML = html

}

}

showOrder()