js实现网页贪吃蛇
2015-09-12 19:06
836 查看
实现一个贪吃蛇小游戏主要思路是这样:
1、创建一个20*20的地图
2、实现一个snake对象 包括snake的移动函数
3、实现一个food 对象 ,包括随机生成food坐标点
4、添加键盘方向键事件
5、在蛇的每次移动中,每一步的时间间隔之间只允许输入一次键盘方向
6、附加功能:计分 、选择难易程度、
这个项目的项目地址:
github
1、创建一个20*20的地图
2、实现一个snake对象 包括snake的移动函数
3、实现一个food 对象 ,包括随机生成food坐标点
4、添加键盘方向键事件
5、在蛇的每次移动中,每一步的时间间隔之间只允许输入一次键盘方向
6、附加功能:计分 、选择难易程度、
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS</title> <style type="text/css"> body { margin: 0 auto; display: table; } td{ /*地图的样式*/ border: 1px solid black; padding: 5px; } button{ margin: 20px; } .snake{ /*snake的样式*/ background-color: black; } .food{/*food的样式*/ background-color: green; } </style> </head> <body> <button id ='easy' } >简单</button> <button id ='normal' >普通</button> <button id = 'hard' >困难</button> <p>你的得分:</p> <span id = 'score'>0</span> <div id='map'></div> <script type="text/javascript"> window.onload = function(){ var body =document.getElementsByTagName('body')[0]; var map=document.getElementById('map'); var table=document.createElement('table'); var tbody=document.createElement('tbody'); var tr = document.createElement('tr'); var td=document.createElement('td'); var grid = document.getElementsByTagName('td'); var showscore = document.getElementById('score') var easy = document.getElementById('easy') var normal = document.getElementById('normal') var hard = document.getElementById('hard') var map = document.getElementById('map') function initmap(){ //初始化地图 ,在map中插入20*20个的td元素 map.innerHTML= ""; for (var j=0;j<20;j++){ var col = document.createElement('tr'); for (var i=0;i<20 ;i++){ var row=document.createElement('td'); col.appendChild(row); } table.appendChild(col); } map.appendChild(table) } var score = 0; //实现计分功能 var snake ={ body:[[1,1],[1,2]], //蛇的身体坐标 dir:[0,0], //蛇的移动方向 第一个为行数 第二个为列数 move:function(){ //snake移动函数 var len = snake.body.length; delsnake();//先把上面一步绘制的蛇消去 if(snake.dir[1]!=0||snake.dir[0]!=0){ //当方向开始移动时 for (var i=0 ; i<len-1;i++){ snake.body[i][0]=snake.body[i+1][0]; snake.body[i][1]=snake.body[i+1][1]; }//snake身体的每一个坐标赋值给下一个节点 snake.body[len-1][0]+=snake.dir[0]; snake.body[len-1][1]+=snake.dir[1];//snake的头方向的x,y左边分别加上移动方向的增量,得到新的坐标 } var snakesign =(snake.body[len-1][0]-1)*20+snake.body[len-1][1]-1; var foodsign = food.y*20+food.x; //用来判断snake的头部将要移动到的点是否为食物所在点 if(snakesign == foodsign){ //如果头部和食物所在点重合 snake.body.push([food.y+1,food.x+1]);//snake的身体长度+1 把食物所在坐标压入body数组 snake.body[snake.body.length-1][0]=snake.body[snake.body.length-2][0]; snake.body[snake.body.length-1][0]=snake.body[snake.body.length-2][0]; for (var i=snake.body.length-2;i>0;i--){ snake.body[i][0]=snake.body[i-1][0]; snake.body[i][1]=snake.body[i-1][1]; } snake.body[0][0]=snake.body[1][0]; snake.body[0][1]=snake.body[1][1];//snake的坐标重新计算 score +=1;//得分增加 showscore.innerHTML = score;//显示得分 food.initfood();//重新生成food } for(var i = 0 ;i<len-2 ;i++){ //判断头部是否撞到身体 var snakebody =(snake.body[i][0]-1)*20+snake.body[i][1]-1; if (snakesign == snakebody){ alert("撞到身体啦 You lose!"); snake.body = [[1,1],[1,2]]; snake.dir = [0,0]; } } if(snake.body[len-1][0]<=0||snake.body[len-1][0]>20||snake.body[len-1][1]<=0||snake.body[len-1][1]>20){//判断头部是否撞到墙壁 alert("撞到墙啦 You lose!"); snake.body = [[1,1],[1,2]]; snake.dir = [0,0]; } initsnake();//重新绘制snake } } var food = { x:0, y:0, initfood:function (){ //随机生成food坐标 food.x=parseInt(Math.random()*20); food.y=parseInt(Math.random()*20); var foodsign = food.y*20+food.x; for(var flag = 0;flag<snake.body.length ;flag++){ //如果生成坐标与snake身体重合,则重新生成 var snakesign =(snake.body[flag][0]-1)*20+snake.body[flag][1]-1; if(foodsign==snakesign){ food.initfood(); break; } } grid[food.y*20+food.x].className='food'; } } function initsnake(){ //给snake所在的坐标格数添加snake样式 for(var flag = 0;flag<snake.body.length ;flag++){ var sign =(snake.body[flag][0]-1)*20+snake.body[flag][1]-1; grid[sign].className='snake' } } function delsnake(){ //删除显示的snake for(var flag = 0;flag<snake.body.length ;flag++){ var sign =(snake.body[flag][0]-1)*20+snake.body[flag][1]-1; grid[sign].className='' } } var flag =0; //用来判断snake一步的移动内 只允许输入一个方向键 document.onkeydown = keyDown; function keyDown(e){ //给键盘方向键添加事件 if(flag==0){ switch(e.keyCode){ case 37: if(snake.dir[1]!=1){ //只有输入方向和原来方向不为反方向,才能输入成功 snake.dir = [0,-1]; } break; case 38: if(snake.dir[0]!=1){//只有输入方向和原来方向不为反方向,才能输入成功 snake.dir = [-1,0]; } break; case 39: if(snake.dir[1]!=-1){//只有输入方向和原来方向不为反方向,才能输入成功 snake.dir=[0,1]; } break; case 40: if(snake.dir[0]!=-1){//只有输入方向和原来方向不为反方向,才能输入成功 snake.dir = [1,0]; } break; } } flag++; } initmap(); food.initfood(); var interval; easy.onclick = function(){ //给容易按钮添加时间 score=0; showscore.innerHTML=score; delsnake(); snake.body = [[1,1],[1,2]]; snake.dir = [0,0]; //重新设置snake interval=clearInterval(interval) interval =interval =setInterval( function(){ flag=0; //重置flag ,可以进行下一次输入 snake.move() },500)//每隔500ms走一步 } normal.onclick = function(){ score=0; showscore.innerHTML=score; delsnake(); snake.body = [[1,1],[1,2]]; snake.dir = [0,0]; interval=clearInterval(interval) interval =setInterval( function(){ flag=0; snake.move() },300)//每隔300ms走一步 } hard.onclick = function(){ score=0; showscore.innerHTML=score; delsnake(); snake.body = [[1,1],[1,2]]; snake.dir = [0,0]; interval=clearInterval(interval) interval =setInterval( function(){ flag=0; snake.move() },100)//每隔100ms走一步 } } </script> </body> </html>
这个项目的项目地址:
github
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- js可突破windows弹退效果代码
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- JSP脚本漏洞面面观
- C#自写的一个HTML解析类(类似XElement语法)
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 没有文件大小限制并免费的PDF到HTML转换工具
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码