Javascript基础示例：用JS写简易版贪吃蛇（面向对象）
废话不多说，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<script>
var map; //地图类对象
var snake; //蛇类对象
var food; //食物类对象
var timer; //定时器对象
var sum=0; //分数 //地图类
function Map()
{
this.width=800; //地图宽度
this.height=400; //地图高度
this.position='absolute'; //定位方式
this.color='#cccccc'; //地图颜色
this._map=null; //保存地图dom元素 this.show=function()
{
//用于显示地图
//创建地图div元素
this._map = document.createElement('div');
//设置地图样式
this._map.style.width = this.width + 'px';
this._map.style.height = this.height + 'px';
this._map.style.position = this.position ;
this._map.style.backgroundColor = this.color ; //将地图div元素追加到body标签之间
document.getElementsByTagName('body')[0].appendChild(this._map);
};
} //食物类
function Food()
{
this.width=20; //宽度
this.height=20; //高度
this.position='absolute'; //定位方式
this.color='#00ff00'; //食物颜色
this._food=null; //用于保存食物dom元素
this.x=0; //横向第几个格
this.y=0; //纵向第几个格 this.show=function()
{
//用于显示食物
if(this._food==null)
{
this._food=document.createElement('div'); //设置食物样式
this._food.style.width = this.width + 'px';
this._food.style.height = this.height + 'px';
this._food.style.position = this.position ;
this._food.style.backgroundColor = this.color ; map._map.appendChild(this._food);
}
//如果之前创建过，只需要重新设置坐标
this.x=Math.floor(Math.random()*40);
this.y=Math.floor(Math.random()*20);
this._food.style.left = this.x*this.width+'px';
this._food.style.top = this.y*this.height+'px';
};
} //蛇类
function Snake()
{
this.width=20; //蛇节宽度
this.height=20; //蛇节高度
this.position='absolute'; //蛇节定位方式
this.direct=''; //蛇的移动方向
//所有蛇节全部信息
this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]]; this.setDirect = function(code)
{
switch(code)
{
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
}
} this.show=function()
{
//用于显示蛇
for(var i=0;i<this.body.length;i++)
{
if(this.body[i][3]==null)
{
this.body[i][3] = document.createElement('div');
this.body[i][3].style.width = this.width +'px';
this.body[i][3].style.height = this.height +'px';
this.body[i][3].style.position = this.position;
this.body[i][3].style.backgroundColor = this.body[i][2];
map._map.appendChild(this.body[i][3]);
}
//设置蛇节的横纵坐标
this.body[i][3].style.left=this.body[i][0]*this.width+'px';
this.body[i][3].style.top=this.body[i][1]*this.height+'px';
}
} this.move = function()
{
//移动蛇身
var length = this.body.length-1;
for(var i=length;i>0;i--)
{
//让后面的蛇节的坐标等于前面蛇节的坐标
this.body[i][0]=this.body[i-1][0]; //横坐标
this.body[i][1]=this.body[i-1][1]; //纵坐标 }
switch(this.direct)
{
case 'right':
this.body[0][0]=this.body[0][0]+1;
break;
case 'down':
this.body[0][1]=this.body[0][1]+1;
break;
case 'left':
this.body[0][0]=this.body[0][0]-1;
break;
case 'up':
this.body[0][1]=this.body[0][1]-1;
break;
default:
return;
} //判断蛇吃到食物
if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
{
var x=this.body[length][0];
var y=this.body[length][1];
sum++;
document.title='分数:'+sum+'分';
this.body.push([x,y,'blue',null]);
food.show();
} //判断撞墙死
if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
{
alert('撞墙死');
clearTimeout(timer);
return;
} //吃到自己死
for(var i=1;i<this.body.length;i++)
{
if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
{
alert('吃到自己死');
clearTimeout(timer);
return;
}
} this.show();
}
} window.onload = function()
{
map = new Map(); //实例化地图类对象
map.show(); //显示地图 food=new Food(); //实例化食物类对象
food.show(); //显示食物 snake = new Snake(); //实例化蛇类对象
snake.show();
timer = setInterval('snake.move()',100); document.onkeydown = function()
{
var code;
if(window.event)
{
code=window.event.keyCode;
}else
{
code = event.keyCode;
}
snake.setDirect(code);
}; }
</script>
</head>
<body> </body>
</html>
运行截图：
Javascript基础示例：用JS写简易版贪吃蛇（面向对象）的更多相关文章
- JavaScript 实现简易版贪吃蛇（Day_13）
时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript 概述 运用JavaScript 实现简易版<贪吃蛇>. Html 页面 1 <!DOCTYPE htm ...
- javascript基础入门之js中的结构分支与循环语句
javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...
- javascript基础入门之js中的数据类型与数据转换01
javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM) js中的打印语句: 数据类型 变量 ...
- 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏
回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...
- OC版贪吃蛇
昨天写了一个js版贪吃蛇,今天突然想写一个OC版的,来对比一下两种语言的区别 oc版功能,适配所有尺寸iphone,可暂停,可设置地图和蛇的比例,可加速 对比一下会发现js版的相对OC版的会简单一些, ...
- TOJ 3973 Maze Again && TOJ 3128 简单版贪吃蛇
TOJ3973传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=3973 时间限制(普通 ...
- 如何用python制作贪吃蛇以及AI版贪吃蛇
用python制作普通贪吃蛇 哈喽,大家不知道是上午好还是中午好还是下午好还是晚上好! 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很 ...
- Netty核心组件介绍及手写简易版Tomcat
Netty是什么: 异步事件驱动框架,用于快速开发高i性能服务端和客户端 封装了JDK底层BIO和NIO模型,提供高度可用的API 自带编码解码器解决拆包粘包问题,用户只用关心业务逻辑 精心设计的Re ...
- js实现简易版validate
需求分析 项目中需要根据选择不同的类型,显示不同的表单,采用的方法是css隐藏显示不需要的表单,但是这个表单字段都是必填的,尝试把不同的表单放在不同的form里,提交时根据不同的类型调用miniui自 ...
随机推荐
- 警惕：利用Dropbox链接散播的恶意软件
趋势科技近期发现好几起利用热门文档代管服务Dropbox的垃圾邮件.邮件的内嵌链接会下载UPATRE恶意软件变种.UPATRE下面载恶意软件而恶名昭彰,当中包含ZBOT恶意软件.CryptoLocke ...
- UIButton 设置字体大小
btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlS ...
- jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
- JSP（一）
开宗明义:JSP本质上就是一个Servlet scriplet JSP 变量和函数的声明 局部变量 <% int a = 3;> 全局变量和函数 <%! int a = 3;> ...
- 预定义变量 - PHP手册笔记
预定义变量将所有的外部变量表示成内建环境变量,并且将错误信息表示成返回头.超全局变量是在全部作用域中始终可用的内置变量.在函数或方法中无需执行global $variable,就可以访问它们. $GO ...
- CSS自学笔记（9）:CSS拓展（二）
CSS图片 当一个网页上有一张或多张图片,而且这些图片的尺寸比较大时,为了是网页布局更紧凑合理,我们可以将这些图片放到一个图片库里,可以有效的防止图片过大可能会对网页布局造成的不良影响. 通过CSS我 ...
- (极简)linux安装QT4.7.3
1.下载QT http://download.qt.io/ 我用的:qt-everywhere-opensource-src-4.7.3.tar.gz 2.解压安装QT 建议解压到/use/local ...
- python 学习day5（模块）
一.模块介绍 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能 ...
- DataTables warning 错误警告
今天使用 Charisma 框架的 jquery datatable 插件时出现如下错误: 搜索才发现 DataTables 目前不支持有单元格合并的表格.而且只要单元格数目不同就会有错误,不能使用搜 ...
- 常用在线工具及API网址总结
1.小图标在线查找 https://www.iconfinder.com/ 2.在线做图,Flowchart流程图,BPMN图,Org组织结构图等 http://www.processon.com/ ...