Smile_and_life的博客

event时间的兼容性问题 var e=eve||window.event;

<!DOCTYPE html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body{ background-color:silver;/*设置页面的背景颜色为银色*/ } /*游戏界面的总体样式*/ #container{ text-align: center;width:600px;margin: auto;padding:10px;background-color:white;box-shadow: 10px 10px 15px gray; } /*状态栏样式*/ #status{ padding:10px;width:400px;height:20px;margin:auto; } /*状态栏中栏目的盒子样式*/ 。box{ float:left;width:200px; } /*设置游戏按钮样式*/ button{ width:200px;height:50px;margin:10px 0; border:0; outline: none; font-size:25px; font-weight: bold; color:white; background-color:lightcoral; } /*设置鼠标悬浮时的按钮样式*/ button{ background-color: coral; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; <div id="container"> <h3>贪吃蛇游戏的实现</h3> <hr> &lt;!--状态信息栏--&gt; <div id="status"> &lt;!--历史最高--&gt; <div class="box"> 历史最高分：<span id="bestScore">0</span> </div> &lt;!--当前分数--&gt; <div class="box"> 当前分数：<span id="currentScore">0</span> </div> &lt;!--设置游戏画布--&gt; <canvas id="myCanvas" width="400" height="400" 1px solid"></canvas> &lt;!--强调重点canvas 网上大量资料，这次的贪吃蛇重点用这个方法。我也没弄的很懂，套用的--&gt; <div> <button </div> </div> </div> &lt;/body&gt; [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&#40;"撞到了墙壁，游戏失败！当前得分："+score&#41;; } //返回值为2表示撞到了自身 else if(code==2){ alert&#40;"撞到了蛇身，游戏失败！当前得分："+score&#41;; } //重新加载页面 [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<snakeMap.length;i++){ if(snakeMap[i].x==x&&snakeMap;[i].y==y){ return 2; } } return 0; } /*十绘制食物函数*/ function drawFood(){ foodX=Math.floor(Math.random()*width/w)*w; foodY=Math.floor(Math.random()*height/w)*w; //内部填充颜色 ctx.fillStyle='#FF0000'; //绘制矩阵 ctx.fillRect(foodX,foodY,w,w); } [removed] &lt;/html&gt;