原生JavaScript贪吃蛇
在实例开发过程中还是能认识到很多不足的，并且加强了一些基础。
简单写一下制作过程：
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>
原生JavaScript贪吃蛇的更多相关文章
- html+css+JavaScript贪吃蛇
写文记录一下最近新完成的贪吃蛇游戏案例,用到了html.css和JavaScript,难度不高,适合刚入坑的同学练习,欢迎大家交流. 下面贴源码: <!DOCTYPE html> < ...
- 原生Js贪吃蛇游戏实战开发笔记
前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
- 原生js贪吃蛇
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- JavaScript原生实现《贪吃蛇》
概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- javascript 编写的贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- javascript实现贪吃蛇
<html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...
随机推荐
- 常见的meta标签属性
meta标签是网页元标签.可以定义一些网站的功能. 1. name属性 name属性的通用格式如下: <meta name="xxx" content="xxxx, ...
- PostgreSQL 分区索引演进
PostgreSQL 分区表,操作性相当便捷. 但只能在创建时决定是否为分区表,并决定分区条件字段,普通表创建后,不能在修改为分区表. Note:通过其他方法也可转化为分区表. 和其他数据库一样,分区 ...
- Kubernetes 学习22 kubernetes容器资源需求资源限制及HeapSter（翻车章节）
一.概述 1.接下来介绍在k8s上运行pod对象时我们如何去监控我们系统级的资源指标以及业务级别的资源指标.数据如何获取和监控.在此之前先介绍一下Pod对象的资源请求和资源限制.即容器的资源需求和资源 ...
- 【mysql】知识点
mysql执行原理 只要是B/S架构,都是会有客户端与服务端,mysql也不例外. 首先客户端发出一个请求,这个请求就是一个查询请求(Select),而它请求的对象就是服务端,服务端是怎么处理这项查询 ...
- snmp-trap
snmpd作为一个服务,本身有系统的一些信息,外部可以通过snmp -get ,walk来获取,前提是被控主机开启了snmpd服务, snmptrap理解为一个陷阱,等着掉进来猎物,就是一个收数据的服 ...
- luogu P1046 陶陶摘苹果
二次联通门 : luoguP1046 /* 这个题好难..... 由苹果树可知 这应该是个树结构的题 所以很自然的想到了用树链剖分来搞一下 连边 最后查询以1为根节点的子树的权值和... 从前闲的没事 ...
- Spark（五十二）：Spark Scheduler模块之DAGScheduler流程
导入 从一个Job运行过程中来看DAGScheduler是运行在Driver端的,其工作流程如下图: 图中涉及到的词汇概念: 1. RDD——Resillient Distributed Datase ...
- Redux遵循的三个原则是什么？
(1)单一事实来源: 整个应用的状态存储在单个 store 中的对象/状态树里.单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序. (2)状态是只读的: 改变状态的唯一方法是去触发一个动作 ...
- WebSocket——SuperWebSocket实现服务端和客户端
WebSocket——SuperWebSocket实现服务端和客户端具体实现如下: 注:本作者是基于vs2019 enterprise版本,所有项目均为.Net Framwork4.7版本(因为Web ...
- [Java.File]如果写 File filesFolder = new File("/") ,在windows系统中,filesFolder 会去找哪个盘符? 答案:程序运行路径的根盘符.
首先这段代码在Unix/Linux系统上会去找根路径,但在Windows系统上会去找C:盘还是D:盘还是其它盘呢? 其实它会去找user.dir所在盘符的根目录,user.dir即用户的当前工作目录, ...