贪吃蛇游戏的实现
[removed] /*** 贪吃蛇游戏的整体思路 1。显示历史最高分记录，（网上查的没有做出来） 2.启动游戏 3.游戏画面刷新函数 记录小蛇的位置 绘制贪吃蛇 根据方向移动蛇头的下一个 碰撞检测，返回值0表示没有撞到障碍物 吃到食物判定 4.绘制贪吃蛇函数 5.改变蛇方向的按键监听 6.碰撞检测函数 7.绘制食物函数 ****/ //一 var游戏参数设置 //游戏界面刷新的间隔时间（数字越大蛇的速度越慢） var time=200; //蛇的身长 var t=3; //记录蛇的运行轨迹，并用数组记录每一个坐标点 var snakeMap=[]; //蛇的单元大小 var w=10; //方向代码：左37，上38，右39，下40 var direction=37; //蛇的初始坐标 var x=0; var y=0; //食物的初始化坐标 var foodX=0; var foodY=0; //当前的分 var score=0; //历史最高分记录 var bestScore=0; //画布的宽高 var width=400; var height=400; //获取画布的节点 var c=document.getElementById(myCanvas); //创建context对象 var ctx=c.getContext("2d"); /*Canvas元素 在新的HTML标准HTML5中Canvas 元素用于在网页上绘制图形， 该元素标签强大之处在于可以直接在HTML上进行图形操作，具 有极大的应用价值。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的 方法，可以创建丰富的图形引用。 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成: var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");//创建对象 cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); JavaScript 使用 id 来寻找 canvas 元素: var c=document.getElementById("myCanvas");然后，创建 context 对象: var cxt=c.getContext("2d");getContext("2d") 对象是内建的 HTML5 对象， 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 */ //获取历史最高分记录 showBestScore(); //开始游戏 Gamestart(); //二显示历史最高分记录 function showBestScore(){ bestScore=localStorage.getItem("bestSore");//localStorage.getItem(key):获取指定key本地存储的值 //在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储 //空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 //如果没有记录最高分，将最高分设置为0； if(bestScore==null) bestScore=0; //将历史最高分更新到状态栏中 var best=document.getElementById(bestScore); best[removed]=bestScore; } //三.启动游戏 function Gamestart(){ //调用drawFood()函数，在随机位置绘制第一个食物 drawFood(); //随机生成贪吃蛇的蛇头坐标 x=Math.floor(Math.random()*width/w)*w; y=Math.floor(Math.random()*height/w)*w; //随机生成蛇的前进方向 direction=37+Math.floor(Math.random()*4); //每隔time毫秒刷新一次游戏内容 setInterval("gameRefresh()",time); } //主要函数 /*四游戏画面刷新函数*/ function gameRefresh(){ //将当前坐标数据添加到贪吃蛇的运动轨迹坐标组中 snakeMap.push({ x:x, y:y }) //绘制贪吃蛇 drawSnake();//191行 //根据方向移动蛇头的下一个位置 switch(direction){ case 37://左 x-=w; break; case 38://上 y-=w; break; case 39://右 x+=w; break; case 40://下 y+=w; break; } /*五。碰撞检测，返回值0表示没有撞到障碍物*/ var code=detectCollision();//215行 // console.log(code); //如果返回值为0，表示游戏失败 if(code!=0){ //如果当前分数高于历史最高分，则更新历史最高分 if(score>bestScore) localStorage.setItem("bestScore",score); //返回值为1表示撞到墙 if(code==1){ //if(x<0 || y<0 || x>39 || y> 39){ alert("撞到了墙壁，游戏失败！当前得分："+score); } //返回值为2表示撞到了自身 else if(code==2){ alert("撞到了蛇身，游戏失败！当前得分："+score); } //重新加载页面 [removed].reload() } /*六.吃到食物的判定*/ if(foodX==x && foodY==y){ //吃到一次食物加10分 score+=10; //更新状态栏中当前的分数 var currentScore=document.getElementById("currentScore"); currentScore[removed]=score; //在随机位置绘制下一个食物 drawFood(); //蛇身长度加1 t++; } } /*七绘制贪吃蛇的函数*/ function drawSnake(){ //设置蛇身内部的填充颜色 ctx.fillStyle="lightblue"; //绘制最新位置的舍身矩形 ctx.fillRect(x,y,w,w); //数组只保留蛇身长度数据，如果蛇前进了则删除最旧的坐标数据 if(snakeMap.length>t){ //删除数组的第一项，即蛇的尾部的最后一个位置的坐标记录 var lastBox=snakeMap.shift(); //清楚蛇的尾部的最后一个位置，从而实现移动效果 ctx.clearRect(lastBox[x],lastBox[y],w,w); } } /*八改变蛇方向的按键监听*/ document.onkeydown=function(e){ // var e=eve||window.event; //根据案件更新前进方向code:左37，上38，右39，下40 if(e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40) direction=e.keyCode; } /*九碰撞检测函数*/ function detectCollision(){ //蛇头碰到四周的墙壁，游戏失败 if( x<0 || y<0 || x>width || y> height){ // console.log(0) return 1; } //蛇头碰到蛇身，游戏失败 for(var i=0;i
