javascript实现贪吃蛇
JavaScript 实现 贪吃蛇
2023-09-27 14:27:01 时间
<html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; width:680px; height:680px; } .gridred { width:38px; height:38px; background:red; border:1px #555 solid; float:left } .gridgreen { width:38px; height:38px; background:green; border:1px #555 solid; float:left } .gridblue { width:38px; height:38px; background:blue; border:1px #555 solid; float:left } .st { width:100; height:40; font-size: 30; font-family:Georgia; color:#F40; margin:0.5cm; top:800px; background:#FFF; text-align:center; } h1.important { color:#FFFF00; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script> var Max=17;//格子数 var direction=3;//蛇正在爬行的方向1左 2上 3右 4下 var snack=new Array(); var arr=new Array(); var foodx,foody; var time; var gameover1=1; //获得下一个食物的坐标 function getrand() { foodx=Math.round(Math.random()*20)%Max; foody=Math.round(Math.random()*20)%Max; } //推断下一个食物的坐标合法性 function rand() { getrand(); while(arr[foodx][foody]) getrand(); var before=document.getElementById(foodx+"_"+foody); before.setAttribute("class","gridblue"); } //開始游戏 function begin() { if(!gameover1) return ; gameover1=0; console.log(foodx); var bu=document.getElementById("beg"); bu.disabled=true; snack.push([8,8]); var before=document.getElementById(8+"_"+8); arr[8][8]=1; before.setAttribute("class","gridred"); rand(); time=setInterval("go()",850); } //游戏结束 function gameover() { clearInterval(time); gameover1=1; alert("gameover!"); var bu=document.getElementById("beg"); bu.disabled=false; for(var i=0;i<snack.length;i++) { var x=snack[i][0]; var y=snack[i][1]; arr[x][y]=0; var bu=document.getElementById(x+"_"+y); bu.setAttribute("class","gridgreen"); } var bu=document.getElementById(foodx+"_"+foody); bu.setAttribute("class","gridgreen"); snack.length=0; } //推断是否出界 function legal(x,y) { if(x>=0&&x<Max&&y>=0&&y<Max) return true; return false; } //蛇行走 function go() { if(gameover1) return ; var x=snack[snack.length-1][0]; var y=snack[snack.length-1][1]; switch(direction) { case 1:y-=1;break; case 2:x-=1;break; case 3:y+=1;break; case 4:x+=1;break; } if(!legal(x,y)) { gameover(); return false; } if(arr[x][y]==1) { gameover(); return false; } arr[x][y]=1; snack.push([x,y]); var before=document.getElementById(x+"_"+y); before.setAttribute("class","gridred"); if(!(x==foodx&&y==foody)) { var point=snack.shift(); arr[point[0]][point[1]]=0; var last=document.getElementById(point[0]+"_"+point[1]); last.setAttribute("class","gridgreen"); } else { rand(); } return true; } function map()//生成地图 { arr.length=Max; for(var i=0;i<Max;i++) { arr[i]=new Array(); arr[i].length=Max; } for(var i=0;i<Max;i++) for(var j=0;j<Max;j++) { arr[i][j]=0; } var x=document.getElementById("body"); for(var i=0;i<Max*Max;i++) { var local=document.createElement("div"); local.setAttribute("class","gridgreen"); local.id=parseInt(i/Max)+'_'+parseInt(i%Max); x.appendChild(local); } } //监測键盘按键 $(document).ready(function(){ $("html").keydown(function(event){ keycommand(event.which); }); }); //按键命令触发 function keycommand(which) { if(which!=32&&(which<37||which>40)) return ; switch (which) { case 32:stop();break; case 37:changeDirection(1);break; case 38:changeDirection(2);break; case 39:changeDirection(3);break; case 40:changeDirection(4);break; } } //改变蛇的方向 function changeDirection(x) { if(Math.abs(x-direction)==2) return ; direction = x; clearInterval(time); if(go()) time=setInterval("go()",800-snack.length*15+50); } </script> </head> <body onload="map()" > <br/> <h1 align="center" class="important">贪吃蛇</h1> <div align="center"> <div class="rect" id="body" > </div> </div> <div align="center"> <button id="beg" onclick="begin()" class="st">start</button> </div> </body> </html>
相关文章
- javascript从定义到执行 你应知这些事
- 浅谈JavaScript中的接口实现
- javascript实现客户端兼容各浏览器 导出文件
- 找出字符串中第一个不重复的字符(JavaScript实现)
- JavaScript:优先级队列的实现案例
- JavaScript中的懒加载——概念,作用,原理,实现步骤,以及3种原生js实现方式
- JavaScript – Sort
- 网页设计与前端开发从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- Javascript实现的图片隐写术
- JavaScript(WebAPI)
- Baffle.js – 用于实现文本模糊效果的 JavaScript 库
- 服务端JavaScript之Rhino
- 4类 JavaScript 内存泄露及如何避免
- JavaScript系列——数组元素左右移动N位算法实现
- 使用百度地图JavaScript实现驾车/公交/步行导航功能
- 【JavaScript由浅入深】实现继承的方法
- JavaScript提高:003:easy UI实现tab页面自适应问题
- JavaScript(JS) string.blink( )
- JavaScript(JS) boolean.valueOf()
- javascript js 操作数组 增删改查的简单实现
- JavaScript巧学巧用
- 《JavaScript 代码优化指南》(*****************************************************************)
- 向ES6看齐,用更好的JavaScript(二)
- javascript二叉树基本功能实现
- 使用javascript的stack数据结构,实现进制转换
- javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承
- JavaScript原型初学者指南
- 通过Javascript调用微软认知服务情感检测接口的两种实现方式