html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）

先看结果截图（界面很丑，但是主要是为了贪吃蛇游戏算法设计和历史记录、排行榜功能的实现，希望以后不被产品经理打，哈哈）

功能描述：
1.开始游戏页面之前输入玩家姓名
2.历史记录：可以查看之前自己玩过的记录（历史记录存储在本机硬盘，所以即使电脑重新开启，下一次也能读取到之前的记录）
3.排行榜：历史玩家的记录
4.清除记录：清除所有存储在本机的记录
实现：

<!doctype html>
<html>
<head><meta charset="utf-8"><title>mySnack</title><style>#canvas{border: 1px  #000000 solid;background: #9DE5F4;display: inline;margin-top: 80px;margin-left:50px;float:left;}</style></head><body>
<!-- 画出一个长450，宽450的矩形    -->
<canvas id="canvas" width="450" height="450" ></canvas><div id="message" style="border:1px solid black;width: 300px;height: 450px;margin-top: 80px;margin-right:100px;float:right"><button id="pause">暂停</button> &nbsp;&nbsp;<button  onclick="javascript:location.reload();" type="button">重新开始</button><div></div><br/><div>当前玩家：<span id="name"></span></div><br/><div>得分：<span id="score">0</span></div><br/><div><button id="historyScore_button" onclick="displayHistory()">历史记录</button><ul id="historyScore"></ul></div><div><button id="ranking_button" onclick="displayRanking()"> 排行榜</button><ul id="ranking"></ul></div><div><button id="clearStorage" onclick="clearStorage()">清除记录</button></div>
</div>
</body><script type="text/javascript">var canva = document.getElementById("canvas");var ctx   = canva.getContext("2d");//它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 APIvar snakes = [];//定义蛇var foodX = 0;       //食物X轴坐标var foodY = 0;       //食物Y轴坐标var snakecount = 6;var size = 15;  //格子的长度var interval = null;   //计时器var toGo = 3;           //行进方向var currentscore=0;//当前得分var flag=false;//false表示当前用户是新用户,true为老用户var currentName;//当前用户var isPause=false;window.onload = function(){initMes();start();interval = setInterval(move,100);//间隔document.onkeydown = function(event){var event = event || window.event;keydown(event.keyCode);}};function clearStorage() {localStorage.clear();alert("记录已清除");}function displayRanking() {var historyMessage=JSON.parse(localStorage.getItem("messageStorage"));//用户历史信息var ranking=new Array();for(var i=0;i<historyMessage.length;i++) {var player=historyMessage[i];var name_highScore={};var currentScore=player.score;//当前玩家历史得分数组var currentHighScore=currentScore[0];//当前玩家最高分for(var j=0;j<currentScore.length;j++){if(currentHighScore<currentScore[j]){currentHighScore=currentScore[j];}}name_highScore.name=player.name;name_highScore.score=currentHighScore;ranking.push(name_highScore); //将玩家以及对应的最高分组成的对象放入数组中}//对数组按照分数排序var k, m, tmp;for (k = 1; k < ranking.length; k++){tmp = ranking[k];m = k - 1;while (m>=0 && tmp.score < ranking[m].score){ranking[m + 1] = ranking[m];m--;}ranking[m + 1] = tmp;}
//        console.log(ranking);//创建结点for(var f=ranking.length-1;f>=0;f--){var ul=document.getElementById('ranking');var li=document.createElement('li');li.innerHTML="玩家："+ranking[f].name+"------最高分："+ranking[f].score;ul.appendChild(li);}}function displayHistory() {var historyMessage=JSON.parse(localStorage.getItem("messageStorage"));//用户历史信息
//        console.log("历史记录--》"+historyMessage);
//        console.log(historyMessage.length);var ul=document.getElementById('historyScore');for(var i=0;i<historyMessage.length;i++) {console.log(historyMessage[i].name);if(historyMessage[i].name==currentName){var score=historyMessage[i].score;for(var j=1;j<score.length;j++){var li=document.createElement('li');li.innerHTML='第'+j+'次：'+score[j];ul.appendChild(li);}return;}}}//游戏开始，初始化用户信息function initMes(){var message_child={};var historyMessage=JSON.parse(localStorage.getItem("messageStorage"));//用户历史信息
//        console.log("初始化--》"+historyMessage);currentName=prompt('请输入你的名字：','');if(currentName!=null && currentName!=''){document.getElementById('name').innerHTML=currentName;}if(historyMessage != null){for(var i=0;i<historyMessage.length;i++){if(historyMessage[i].name===currentName){flag=true; //已经有该用户
//                    console.log("旧用户");}}}if(!flag){//新用户console.log("新用户");message_child.name=currentName;message_child.score=[0];if(historyMessage==null){historyMessage=new Array();//不仅是新用户，而且该游戏还没有任何历史记录
//                console.log("新用户且该游戏还没有任何历史记录");}historyMessage.push(message_child);//将新用户的信息对象放入数组中localStorage.setItem("messageStorage",JSON.stringify(historyMessage));//存入本地//            console.log("新用户加入--》"+JSON.parse(localStorage.getItem("messageStorage")));}}//游戏结束，更新用户信息function updataMes() {var historyMessage=JSON.parse(localStorage.getItem("messageStorage"));//用户历史信息console.log("游戏结束--》"+historyMessage);
//        console.log(historyMessage.length);for(var i=0;i<historyMessage.length;i++){if(historyMessage[i].name==currentName){historyMessage[i].score.push(currentscore);localStorage.setItem("messageStorage",JSON.stringify(historyMessage));//存入本地
//                console.log(JSON.parse(localStorage.getItem("messageStorage"))[i].score);return;}}}//创建画布function map(){ctx.clearRect(0,0,450,450);//(x,y,width,height)，在给定的矩形中清除一个指定矩形（坐标和像素）//画出X轴线for(var x=0;x<=30;x++){ctx.moveTo(size*x,0); //开始位置ctx.lineTo(x * size, 450);//结束位置ctx.strokeStyle  = "#000000";//边框颜色ctx.stroke();}//画出y轴线for(var y=0;y<=30;y++){ctx.moveTo(0,size*y); //开始位置ctx.lineTo(450,y * size);//结束位置ctx.strokeStyle  = "#000000";//边框颜色ctx.stroke();}//创建蛇for (var i = 0; i < snakes.length; i++){if(snakes[i] == snakes[snakes.length-1]){ctx.beginPath();ctx.fillStyle = "red";ctx.fillRect(snakes[i].x, snakes[i].y, size, size);ctx.moveTo(snakes[i].x, snakes[i].y);ctx.lineTo(snakes[i].x + size, snakes[i].y);ctx.lineTo(snakes[i].x + size, snakes[i].y + size);ctx.lineTo(snakes[i].x, snakes[i].y + size);ctx.closePath();ctx.strokeStyle = "white";ctx.stroke();}else{ctx.beginPath();ctx.fillStyle = "green";ctx.fillRect(snakes[i].x, snakes[i].y, size, size);ctx.moveTo(snakes[i].x, snakes[i].y);ctx.lineTo(snakes[i].x + size, snakes[i].y);ctx.lineTo(snakes[i].x + size, snakes[i].y + size);ctx.lineTo(snakes[i].x, snakes[i].y + size);ctx.closePath();ctx.strokeStyle = "white";ctx.stroke();}}//画出食物ctx.beginPath();ctx.fillStyle = "yellow";ctx.fillRect(foodX, foodY, size, size);ctx.moveTo(foodX, foodY);ctx.lineTo(foodX + size, foodY);ctx.lineTo(foodX + size, foodY + size);ctx.lineTo(foodX, foodY + size);ctx.closePath();ctx.strokeStyle = "red";ctx.stroke();}//初始化function start(){//定义蛇for(var i=0;i<snakecount;i++){snakes[i]={x:i*size,y:0};}map();addFood();}//随机生成食物function addFood(){foodX = Math.floor(Math.random() * (30 - 1)) * size;foodY = Math.floor(Math.random() * (30 - 1)) * size;}//添加蛇身function addSnake(){snakecount++;snakes.unshift({x:size * 30, y:size * 30});}//吃到食物判断function isEat(){if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) {currentscore++;document.getElementById("score").innerHTML=currentscore;addFood();addSnake();}}//移动函数function move(){switch(toGo){case 1: //左边snakes.push({x: snakes[snakecount - 1].x - size, y: snakes[snakecount - 1].y});break;case 2: //上边snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - size});break;case 3: //右边snakes.push({x: snakes[snakecount - 1].x + size, y: snakes[snakecount - 1].y});break;case 4: //下边snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + size});
//          case 5: //下边
//              snakes.push({x: snakes[snakecount - 1].x+ size, y: snakes[snakecount - 1].y + size});
//break;default:;}snakes.shift();isEat();isDie();map();}//交互响应函数function keydown(keyCode){//        console.log(keyCode);console.log(isPause);switch(keyCode){case 37: //左边if(toGo != 1 && toGo != 3)  toGo = 1;break;case 38: //上边if(toGo != 2 && toGo != 4)  toGo = 2;break;case 39: //右边if(toGo != 3 && toGo != 1)  toGo = 3;break;case 40: //下的if(toGo != 4 && toGo != 2)  toGo = 4;break;
//          case 65: //右斜
//                   toGo = 5;break;case 80: //开始/暂停if(isPause){interval = setInterval(move,100);isPause = false;document.getElementById('pause').innerHTML = "Pause";}else{clearInterval(interval);isPause = true;document.getElementById('pause').innerHTML = "Start";}break;}}//死亡判断function isDie(){if(snakes[snakecount - 1].x == -15 || snakes[snakecount - 1].x == size * 30|| snakes[snakecount - 1].y == -15 || snakes[snakecount - 1].y == size * 30){updataMes();clearInterval(interval);alert("Game Over!");}for(var i = 0; i < snakecount - 1; i++){if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){updataMes();clearInterval(interval);alert("Game Over!");}}}</script>
</html>

主要技术：
1.html5的新特性—canvas
2.webStroge—localStorage

html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）相关推荐

用JavaScript实现贪吃蛇游戏_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>J ...
java3d酷眩贪吃蛇下载,100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
基于单片机的贪吃蛇游戏设计_前端入门，基于html,css,javascript的贪吃蛇游戏
源代码: 贪吃蛇 .box1{ font-size: 15px; float:left; display: block; margin-right: 150px; } .box2{ font-size ...
JavaScript写贪吃蛇游戏，代码思路都有，想学的自己看
JavaScript写一个贪吃蛇的游戏(附源码) javascript群内每日课题-今日课题:JavaScript写一个贪吃蛇的游戏 PS:最近群内很多伙伴想要做游戏学学,练练自己的JavaScrip ...
eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...
使用 HTML5 Canvas 标签的贪吃蛇游戏
https://thoughtbot.com/blog/html5-canvas-snake-game 保罗·詹森 2009 年 12 月 31 日更新于 2019年3 月 9 日这篇文章最初发 ...
JavaScript 贪吃蛇游戏的实现
JavaScript 贪吃蛇游戏的实现前言游戏介绍:贪吃蛇游戏是一款经典小游戏,既简单又耐玩.通过控制蛇头方向吃蛋,使得蛇变长,从而获得积分. 游戏玩法:上下左右控制蛇的方向,寻找吃的东西,每吃一 ...
基于HTML5的贪吃蛇游戏的设计与实现
基于HTML5的贪吃蛇游戏的设计与实现功能要求: 贪吃蛇游戏是一款经典的单机休闲游戏,玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进,并吃掉随机位置上产生食物来获得分数.每吃掉一次食物,贪 ...
贪吃蛇javascript代码_源于Jquery开发贪吃蛇游戏——简单思路分析总结
前言刚开始是学习前端那会,在熟悉 HTML+CSS+JS 后,我开始尝试去做贪吃蛇游戏.没想到在一顿瞎搞后还真搞出来了一个简陋版的贪吃蛇.哈哈!因为这是我刚开始学习前端的时候做的,所以代码有点简陋, ...

html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）

html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）相关推荐

最新文章

热门文章