原生JavaScript贪吃蛇
2013-12-16 11:15
405 查看
在实例开发过程中还是能认识到很多不足的,并且加强了一些基础。
简单写一下制作过程:
1.创建画布
2.创建蛇和老鼠 坐标不能重叠
3.让蛇移动起来
4.添加死亡方法
5.添加转点坐标和方向
6.添加吃老鼠的方法
整个开发的难点有几个:
1.蛇身体的转向
2.吃老鼠添加蛇长度
总结:
1.原来玩的FC贪吃蛇100合一的小游戏其实就是根据画布大小/蛇的移动速度/蛇的长度来设置关卡。
2.最后测试时老有个bug就是删除了最后的转点但是蛇尾没转过去,一直找不到原因,虽然最后修复了,但不是很满意。
在线测试地址:http://jsfiddle.net/dtdxrk/aL9DF/embedded/result/
简单写一下制作过程:
1.创建画布
2.创建蛇和老鼠 坐标不能重叠
3.让蛇移动起来
4.添加死亡方法
5.添加转点坐标和方向
6.添加吃老鼠的方法
整个开发的难点有几个:
1.蛇身体的转向
2.吃老鼠添加蛇长度
总结:
1.原来玩的FC贪吃蛇100合一的小游戏其实就是根据画布大小/蛇的移动速度/蛇的长度来设置关卡。
2.最后测试时老有个bug就是删除了最后的转点但是蛇尾没转过去,一直找不到原因,虽然最后修复了,但不是很满意。
在线测试地址:http://jsfiddle.net/dtdxrk/aL9DF/embedded/result/
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>贪吃蛇JavaScript版</title> <style type="text/css"> *{margin:0;padding: 0;line-height: 1;} body{font-family: Arial, 'Microsoft Yahei', Simsun, sans-serif;background-color: #7bef70;} #con{width:400px;margin: 20px auto;} #con span.r{float: right;} #con h1{text-align: center;} #Canvas{margin: 20px auto;background-color: #f4f9f5;overflow: hidden;} #Canvas table{width: 100%;border:2px solid #000;border-collapse: collapse;} #Canvas table td{border-collapse: collapse;border:1px solid #bfcde9;width: 8px;height: 8px;} #Canvas table td.SnakeBody{background-color: #82f170} #Canvas table td.SnakeHead{background-color: #4ca72e;} #Canvas table td.Mouse{background-color: red;} /*#Canvas table td.SnakeBody, #Canvas table td.SnakeHead, #Canvas table td.Mouse{border:1px solid #000;*border:0;}*/ </style> </head> <body> <div id="con"> <h1>贪吃蛇JavaScript版</h1> <div id="Canvas"> </div> <div> <span>分数:<i id="integral">0</i></span> <span class="r">速度:<i id="speed">200</i></span> </div> </div> <script type="text/javascript"> var Snake = { time : "", mapX : 40, mapY : 40, speed : 200, mousePos : {}, //老鼠坐标 snakeStartPos : {"x":10,"y":20}, //蛇起始位置 snakeDirection : "Right", //起始方向 snakeLen : 5, //长度 snakeArr : [], //蛇身体的坐标 pointArr : [], //转点数组 $ : function(id){ return document.getElementById(id); }, init : function(){ this.CreateMap(); this.CreateSnake(); this.CreateMouse(); document.onkeydown = this.keyDirection; this.timer = setInterval(this.MoveSnake, this.speed); }, CreateMap : function(){ //创建画布 var x = this.mapX, y = this.mapY, html = ["<table>"]; for(var i=0; i<y; i++){ html.push("<tr>"); for(var j=0; j<x; j++){ html.push("<td id='map_"+j+"_"+i+"'></td>"); } html.push("</tr>"); } html.push("</table>"); this.$("Canvas").innerHTML = html.join(""); }, CreateMouse : function(){ //创建老鼠 var x,y,id, that = this, getMouse = function(){ for(var i in that.snakeArr){ if(x==that.snakeArr[i]["x"] && y==that.snakeArr[i]["y"]){ //如果坐标与snake身体重叠重置 return random(); } } that.mousePos.x = x; that.mousePos.y = y; that.$("map_"+x+"_"+y).className = "Mouse"; }, random = function(){ x = Math.floor(Math.random()*(that.mapX-1)); y = Math.floor(Math.random()*(that.mapY-1)); getMouse(); }; random(); }, CreateSnake : function(){ var $ = this.$, snakeArr = this.snakeArr, snakeLen = this.snakeLen, posX = this.snakeStartPos.x, posY = this.snakeStartPos.y, n = snakeLen + posX; for(var i = posX; i<n; i++){ if(i==n-1){ $("map_"+i+"_"+posY).className = "SnakeHead"; }else{ $("map_"+i+"_"+posY).className = "SnakeBody"; } snakeLen--; snakeArr[snakeLen] = []; snakeArr[snakeLen]["x"] = i; snakeArr[snakeLen]["y"] = posY; snakeArr[snakeLen]["d"] = this.snakeDirection; } }, MoveSnake : function(){ var body, _d, snakeLen = Snake.snakeLen, snakeArr = Snake.snakeArr; Snake.$('map_'+snakeArr[snakeLen-1]['x']+'_'+snakeArr[snakeLen-1]['y']).className = ""; //蛇尾去除css样式 for(var i=0,len =snakeLen; i<len; i++){ body = snakeArr[i]; if(i==0) { Snake.$("map_"+body['x']+"_"+body['y']).className = "SnakeBody"; } _d = Snake.getPoint(body['x'],body['y']); if(_d) body['d'] = _d; //获取转点改变蛇的方向 //bug 删除转点的时候蛇尾没有转过来 if(i==snakeLen-1 && Snake.pointArr.length>0) Snake.delPoint(body['x'],body['y']); //删除转点 switch(body['d']){ case "Left": if(i==0)Snake.GameOver(body['x']-1,body['y']), Snake.eatMouse(body['x']-1,body['y']); body['x']--; break; case "Up": if(i==0)Snake.GameOver(body['x'],body['y']-1), Snake.eatMouse(body['x'],body['y']-1); body['y']--; break; case "Right": if(i==0)Snake.GameOver(body['x']+1,body['y']), Snake.eatMouse(body['x']+1,body['y']); body['x']++; break; case "Down": if(i==0)Snake.GameOver(body['x'],body['y']+1), Snake.eatMouse(body['x'],body['y']+1); body['y']++; break; } } Snake.$("map_"+snakeArr[0]['x']+"_"+snakeArr[0]['y']).className = "SnakeHead"; }, GameOver : function(x,y){ //游戏结束 if(x<0 || y<0 || x>this.mapX-1 || y>this.mapY-1){ //超出边界 clearInterval(this.timer); return alert("GameOver"); } for(var i in this.snakeArr){ //碰到身体 if(x==this.snakeArr[i]['x'] && y==this.snakeArr[i]['y']){ clearInterval(this.timer); return alert("GameOver"); } } }, keyDirection : function(event){ //键盘控制方向 var event = event || window.event, key = event.which || event.keyCode, _snakeDirection = Snake.snakeDirection, pointArr = Snake.pointArr, pointNum = pointArr.length, snakeArr = Snake.snakeArr, bool = true; switch(key){ case 37: if(_snakeDirection=="Left"){ bool = false; }else{ Snake.snakeDirection="Left"; } break; case 38: if(_snakeDirection=="Up"){ bool = false; }else{ Snake.snakeDirection="Up"; } break; case 39: if(_snakeDirection=="Right"){ bool = false; }else{ Snake.snakeDirection="Right"; } break; case 40: if(_snakeDirection=="Down"){ bool = false; }else{ Snake.snakeDirection="Down"; } break; } if(bool){ if(pointNum>0){ if(pointArr[pointNum-1]['x']!= snakeArr[0]['x'] || pointArr[pointNum-1]['y'] != snakeArr[0]['y']) Snake.CreatePoint(); }else{ Snake.CreatePoint(); } } }, CreatePoint : function(){ //创建转点 var pointArr = this.pointArr, pointNum = pointArr.length; pointArr[pointNum] = []; pointArr[pointNum]['x'] = this.snakeArr[0]['x']; pointArr[pointNum]['y'] = this.snakeArr[0]['y']; pointArr[pointNum]['d'] = this.snakeDirection; }, getPoint : function(x,y){ var _d = "", pointArr = Snake.pointArr; for(var i in pointArr){ if(x==pointArr[i]['x'] && y==pointArr[i]['y']){ _d = pointArr[i]['d']; } } return _d; }, delPoint : function(x,y){ //删除转点 var pointArr = Snake.pointArr; if(x==pointArr[0]['x'] && y==pointArr[0]['y']){ var _a = Snake.snakeArr[Snake.snakeArr.length-2], _b = Snake.snakeArr[Snake.snakeArr.length-1]; if(_a['x']==_b['x'] && _a['y']==_b['y']) _b['d']=_a['d']; Snake.pointArr.shift(); } }, eatMouse : function(x,y){ if(x==this.mousePos.x && y==this.mousePos.y){ var _x, _y, _tail = this.snakeArr[this.snakeLen-1]; this.snakeArr[this.snakeLen]=[]; this.snakeArr[this.snakeLen]['x'] = _tail['x']; this.snakeArr[this.snakeLen]['y'] = _tail['y']; this.snakeArr[this.snakeLen]['d'] = _tail['d']; this.snakeLen++; this.speed-=5; clearInterval(this.timer); this.CreateMouse(); this.integral(); this.timer = setInterval(this.MoveSnake, this.speed); } }, integral : function(){ this.$("integral").innerHTML= Number(this.$("integral").innerHTML)+5; this.$("speed").innerHTML=this.speed; } } Snake.init(); </script> </body> </html>
相关文章推荐
- js数组操作
- HTML+CSS+JAVASCRIPT 总结
- 网页js加解密
- 译文:Javascript-function's return
- JS获取当前日期及计算两日期差
- javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
- js访问工程外部资源解决办法
- javascript cookie操作.
- JS 正则表达式用法
- js 返回一个随机数的方法
- Effective Javascript编写高质量JavaScript代码的68个有效方法
- js匿名函数
- js代码中实现页面跳转的几种方式
- 在写javascript时找不到哪里出错的可能原因
- js 未结束的字符串常量错误解决方法
- JS获取月的最后一天与JS得到一个月份最大天数的实例代码
- 将jsp中的所有中文提取替换。暂时只做了注解解析。正在开发...
- JS冒泡事件的快速解决方法
- js代码中实现页面跳转的几种方式
- js获取url参数值的两种方式