使用javascript实现贪吃蛇游戏
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
border: 1px solid #0094ff;
width: 20px;
height: 20px;
background-color: yellow;
} table {
margin: 10px auto;
}
</style>
<script type="text/javascript">
//全局变量
var colCount = 12; //12列
var rowCount = 14; //14行 //--------------window.onload在这里-------------
window.onload=function () {
//画小方块12x14
for (var i = 0; i < rowCount; i++) {
var createtr = document.createElement("tr");
for (var j = 0; j < colCount; j++) {
var createtd = document.createElement("td");
createtd.appendChild(CreateDiv(i, j));
createtr.appendChild(createtd);
}
document.getElementById("tabMain").appendChild(createtr);
}
//游戏逻辑方法
GameController();
} //--------------封装的方法以及自定义的类--------------- //获得指定rowIndex和colIndex的div
function GetDiv(rowIndex, colIndex) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].getAttribute("rowIndex") == rowIndex && divs[i].getAttribute("colIndex") == colIndex) {
return divs[i]; }
}
return undefined;
} //生成小方块的方法
function CreateDiv(rowIndex, colIndex) {
var xdiv = document.createElement("div");
//添加自定义属性，为每个单元格做标记.
xdiv.setAttribute("rowIndex", rowIndex);
xdiv.setAttribute("colIndex",colIndex);
xdiv.setAttribute("food", false);
return xdiv;
} //单元格
var Unit = {
colIndex: 0,
rowIndex: 0,
//单元格方向
dir: "Left",
olddir: "Left",
Draw: function (rowIndex, colIndex) {
GetDiv(rowIndex, colIndex).style.backgroundColor = "red";
},
Wipe: function (rowIndex, colIndex) {
GetDiv(rowIndex, colIndex).style.backgroundColor = "yellow";
},
MoveLeft: function () {
this.colIndex--;
},
MoveRight: function () {
this.colIndex++;
},
MoveUp: function () {
this.rowIndex--;
},
MoveDown: function () {
this.rowIndex++;
}
} //存放单元格集合类
var UnitList = {
//存放单元格的数组
body: new Array(),
//添加三个单元格到数组，这里代码写的不好，本想每次吃到食物就调用AddBody方法的，后来就把这个方法写死了。
AddBody: function () {
var unit = Object.create(Unit);
unit.rowIndex = 8;
unit.colIndex = 8;
this.body[this.body.length] = unit;
//测试代码
var unit2 = Object.create(Unit);
unit2.rowIndex = 8;
unit2.colIndex = 9;
this.body[this.body.length] = unit2;
var unit3 = Object.create(Unit);
unit3.rowIndex = 8;
unit3.colIndex = 10;
this.body[this.body.length] = unit3; }, Draw: function () {
for (var i = 0; i < this.body.length; i++) {
this.body[i].Draw(this.body[i].rowIndex, this.body[i].colIndex);
}
},
Wipe: function () {
for (var i = 0; i < this.body.length; i++) {
this.body[i].Wipe(this.body[i].rowIndex, this.body[i].colIndex);
}
},
AutoMoveTo: function () {
//先擦除
this.Wipe();
//移动
for (var i = 0; i < this.body.length; i++) {
switch (this.body[i].dir) {
case "Left":
this.body[i].MoveLeft();
break;
case "Right":
this.body[i].MoveRight();
break;
case "Down":
this.body[i].MoveDown();
break;
case "Up":
this.body[i].MoveUp();
break;
}
this.body[i].olddir = this.body[i].dir;
if (this.body[i - 1] != undefined) {
this.body[i].dir = this.body[i - 1].olddir;
}
}
//重画
this.Draw();
}
} //----------------游戏逻辑方法-------------
function GameController() {
var U = Object.create(UnitList);
U.AddBody();
U.Draw();
AddFood();
var set = window.setInterval(function () { MoveMove() }, 500);
//移动方法
function MoveMove() {
//判断是否能移动
if (IsAbleMove()) {
//判断是否吃到自己
if (IsEatMySelf()) {
window.clearInterval(set);
alert("吃到自己了");
}
//判断是否吃到食物
if (IsEatFood()) {
//新增一个unit
var newU = Object.create(Unit);
newU.rowIndex = U.body[U.body.length - 1].rowIndex;
newU.colIndex = parseInt(U.body[U.body.length - 1].colIndex) + 1;
U.body[U.body.length] = newU;
//新增一个食物
AddFood();
}
U.AutoMoveTo();
}
else {
// 关闭setInterval
window.clearInterval(set);
alert("结束");
} }
//判断越界
function IsAbleMove() {
var rowIndex = U.body[0].rowIndex;
var colIndex = U.body[0].colIndex;
switch (U.body[0].dir) {
case "Left":
colIndex--;
break;
case "Right":
colIndex++;
break;
case "Down":
rowIndex++;
break;
case "Up":
rowIndex--;
break; }
if (rowIndex < 0 || colIndex < 0 || rowIndex > 13 || colIndex > 11) {
return false;
}
return true;
}
//生成食物
function AddFood() {
var rowIndex;
var colIndex;
random();
function random() {
rowIndex = parseInt(Math.random() * 14);
colIndex = parseInt(Math.random() * 12);
for (var i = 0; i < U.body.length; i++) {
if (rowIndex == U.body[i].rowIndex && colIndex == U.body[i].colIndex) {
// alert("haha");
random(); } }
};
GetDiv(rowIndex, colIndex).style.backgroundColor = "green";
GetDiv(rowIndex, colIndex).setAttribute("food", true);
}
//是否吃到食物
function IsEatFood() {
if (GetDiv(U.body[0].rowIndex, U.body[0].colIndex).getAttribute("food") == "true") {
GetDiv(U.body[0].rowIndex, U.body[0].colIndex).setAttribute("food", false);
return true;
}
return false;
}
//是否吃到自己
function IsEatMySelf() {
var rowIndex = U.body[0].rowIndex;
var colIndex = U.body[0].colIndex;
for (var i = 1; i < U.body.length; i++) {
if (U.body[i].rowIndex == rowIndex && U.body[i].colIndex == colIndex) {
return true;
}
}
return false;
}
//监听键盘事件
window.onkeydown = function () {
switch (event.keyCode) {
case 37:
//alert("你按了左方向键");
if (U.body[0].dir != "Right") {
U.body[0].dir = "Left";
}
break;
case 38:
//alert("你按了上");
if (U.body[0].dir != "Down") {
U.body[0].dir = "Up";
}
break;
case 39:
//alert("你按了右方向键");
if (U.body[0].dir != "Left") {
U.body[0].dir = "Right";
}
break;
case 40:
//alert("你按了下方向键");
if (U.body[0].dir != "Up") {
U.body[0].dir = "Down";
}
break;
}
}
}
</script>
</head>
<body>
<table id="tabMain">
</table>
</body>
</html>
使用javascript实现贪吃蛇游戏的更多相关文章
- javascript写贪吃蛇游戏（20行代码！）
<!doctype html> <html> <body> <canvas id="can" width="400" ...
- 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏
回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...
- WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- 100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- 用C++实现的贪吃蛇游戏
我是一个C++初学者,控制台实现了一个贪吃蛇游戏. 代码如下: //"贪吃蛇游戏"V1.0 //李国良于2016年12月29日编写完成 #include <iostream& ...
- H5实现的可自定义贪吃蛇游戏
原创游戏,使用lufylegend.js开发 用canvas实现的贪吃蛇游戏,与一般的贪吃蛇游戏不同,图片经过美工设计,代码设计支持扩展和自定义. 游戏元素丰富,包括障碍物(仙人掌),金币(奖励),苹 ...
- JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 剑指offer-二叉树的深度
题目: 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 链接: http://www.nowcoder.com/practic ...
- Scorpio-CSharp总链接
简介 源码目录介绍
- 我刚知道的WAP app中meta的属性
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
- c代码读取目录信息
#include <stdio.h> #include <sys/types.h> #include <dirent.h> int main(void) { DIR ...
- 关于iOS10的允许访问用户数据产生的问题
不知道这个问题是什么时候出现的,直到我重写项目已应对IPv6的审核. 先前没有加引导页面,打开app直接进入主控制器.当弹出允许访问用户数据窗口的时候,主页面的数据是不加载的. 当用户未允许访问数据之 ...
- RTC,登陆后添加权限值
修改单元:rtcMW.DM.Main; 修改组件:fnLogin 在方法中添加: 服务端: const SQL_SELECT_USER = 'SELECT * FROM Users WHERE Use ...
- 开发《基于Arcgis Online的家政管理服务信息系统》随笔2
解决了三天的一个问题终于搞定了,和大家分享一下... 1.来点开胃菜, 在Sql server 2008中想要增加修改字段,有时不能修改,作如下操作即可搞定此问题, 启动MSSQL SERVER 2 ...
- iOS9中的App Transport Security
问题:webView加载网页加载不出来 原因:苹果在iOS9 sdk中加入了App Transport Security限制(iOS9以前的iOS sdk默认关闭ATS),默认强制使用https,并且 ...
- SQL Server 数据库的维护(四)__游标(cursor)
--维护数据库-- --游标(cursor)-- --概述: 注:使用select语句查询结果的结果集是一个整体,如果想每次处理一行或一部分行数据,游标可以提供这种处理机制.可以将游标理解为指针.指针 ...
- 微信支付开发-当前页面的URL未注册
微信支付的开发设置要求设置微信支付可以发起的目录. 当出现“当前页面的URL未注册”的错误时,检查你的授权目录(一般是未填写或填写有误),注意要二级或者三级目录完全匹配.