jsp网页实现贪吃蛇小游戏
本文实例为大家分享了jsp网页实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下
一、主要思路
(1)第一步实现地图。
(2)第二步实现蛇身。
(3)第三步实现食物。
(4)第四步实现移动吃食物。
(5)第五步实现规则(撞墙游戏结束)。
二、代码实现
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>贪吃蛇</title> <style> #map{ width: 400px; height: 400px; border: 1px solid black; } /*地图颜色*/ .divmap{ width: 18px; height: 18px; margin: 1px; background-color: yellow; float: left; } /*蛇身颜色*/ .divsnake{ width: 18px; height: 18px; margin: 1px; background-color: red; float: left; } /*食物颜色*/ .divfood{ width: 18px; height: 18px; margin: 1px; background-color: green; float: left; } </style> <script> var mapx=20; var mapy=20; //地图边界,横向和纵向的div小格 var arrmap=new array();//地图数组 var snackex = [4,5,6,7],snackey=[2,2,2,2];//蛇身初始化坐标值 var foodx,foody; //创建食物坐标 var keycode = 39;//蛇身移动方向,默认向右 //创建地图 function createmap() { //获取地图外框div var map=document.getelementbyid("map"); //地图创建div小格,横纵各20个 for(y=0;y<mapy;y++) { arrmap[y]= new array(); for(x=0;x<mapx;x++) { //div小格 var div =document.createelement("div"); div.classname="divmap";//初始化样式 arrmap[y][x]=div;//将div小格放入地图数组中 map.appendchild(div);//页面绘制 } } } //创建蛇身 function createsnack(){ //改变地图中一串连续div底色 for(i=0;i<snackex.length;i++) { arrmap[snackey[i]][snackex[i]].classname ="divsnake"; } } //清除蛇身 function clearsnack() { for(i=0;i<snackex.length;i++) { arrmap[snackey[i]][snackex[i]].classname="divmap"; } } //创建食物 function createfood() { //arrmap[foody][foodx].classname="divfood"; var result;//判断是否要重新生成食物 do { result = false;//默认不重叠 //随机食物坐标 foodx=parseint(math.random()*mapx); foody=parseint(math.random()*mapy); //判断食物不能出现在蛇身上 for(i=0;i>snackex.length;i++) { if(snackex[1]==foodx&&snackey[1]==foody) { result = true;//需要重新生成 break; } } }while(result); arrmap[foody][foodx].classname="divfood"; } //蛇身运动 //1.清除蛇身 //2.移动蛇身坐标,增加蛇头,清除蛇尾一格 function snackmove() { //清除蛇身 clearsnack(); for (i = 0; i < snackex.length - 1; i++) { snackex[i] = snackex[i + 1]; snackey[i] = snackey[i + 1]; } //每次移动,蛇头增加一格, keycode匹配键盘方向 switch (keycode) { case 37://向左 snackex[snackex.length - 1]--; break; case 38://向上 snackey[snackey.length - 1]--; break; case 39://向右 snackex[snackex.length - 1]++; break; case 40://向下 snackey[snackey.length - 1]++; break; } //吃食物 if (snackex[snackex.length - 1] == foodx && snackey[snackey.length - 1] == foody) { //吃到食物 snackex[snackex.length]=snackex[snackex.length-1]; snackey[snackey.length]=snackey[snackey.length-1]; //重新排列蛇身 for(i=snackex.length-1;i>0;i--) { snackex[i]=snackex[i-1]; snackey[i]=snackey[i-1]; } createfood();//重新生成下一个食物 } //超出游戏边框 if(snackex[snackex.length-1]<0 || snackex[snackex.length-1]>mapx-1 || snackey[snackey.length-1]<0 || snackey[snackey.length-1]>mapy-1) { clearinterval(move);//停止移动 alert("游戏结束"); return ; } createsnack();//重新创建蛇身 } //键盘事件 function keydown(){ var newkey = event.keycode//键盘按键 if(keycode == 37 && newkey == 39|| keycode == 39 && newkey == 37|| keycode == 38 && newkey == 40|| keycode == 40 && newkey == 38 ) { //禁止掉头 return ; } else if(newkey>=37&&newkey<=40){ //用户按了某个方向键 keycode=newkey; } else{ //其他按键 } } //运行 window.onload =function () { createmap(); //创建地图 createsnack();//创建蛇身 createfood();//创建食物 move= setinterval("snackmove()",200)//蛇身移动 document.onkeydown = keydown;//获取方向键 } </script> </head> <body> <div id="map"></div> </body> </html>
三、实现效果
按方向键实现蛇身运动。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持硕编程。
相关文章
- jsp+servlet实现文件上传与下载功能
- EJB3.0部署消息驱动Bean抛javax.naming.NameNotFoundException异常
- 在JSP中使用formatNumber控制要显示的小数位数方法
- 秒杀系统Web层设计的实现方法
- 将properties文件的配置设置为整个Web应用的全局变量实现方法
- JSP使用过滤器防止Xss漏洞
- 在JSP页面中动态生成图片验证码的方法实例
- 详解JSP 内置对象request常见用法
- 使用IDEA编写jsp时EL表达式不起作用的问题及解决方法
- jsp实现局部刷新页面、异步加载页面的方法
- Jsp中request的3个基础实践
- JavaServlet的文件上传和下载实现方法
- JSP页面的静态包含和动态包含使用方法