使用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 ...
随机推荐
- C#调用 ICSharpCode.SharpZipLib.Zip 实现解压缩功能公用类
最近想用个解压缩功能 从网上找了找 加自己修改,个人感觉还是比较好用的,直接上代码如下 using System; using System.Linq; using System.IO; using ...
- 记录在windows7上安装MongoDB
1.首先下载 官网地址 https://www.mongodb.com/download-center#community 选择 Windows Vista 32-bit, without SS ...
- Windows程序设再读笔记01-起步
1.从程序员角度看,统一的界面意味着编程人员可以使用windows自带的例程来构建许多的功能,例如菜单,对话框等.只用几行代码就可以实现很多复杂的功能.但是这同时也增加了一些限制,使得做出一个个性化的 ...
- 26. linux查看端口占用情况
linux系统下,查看端口占用情况的命令:lsof -i[root@www ~]# lsof -i
- 图解GitHub基本操作
目录 一.注册并登陆到github网站 1.1.打开github网站首页(https://github.com/) 1.2.注册一个自己的github账号 1.3.登陆自己的github账号 二.创建 ...
- python Tab自动补全命令设置
Mac/Windows下需要安装模块儿 pip install pyreadline pip install rlcompleter pip install readline 注意,需要先安装pyre ...
- C++：名字查找先于类型检查
Sub-Title: Name Hiding. "In C++, there is no overloading across scopes - derived class scopes a ...
- fcitx jdk maven profile配置
#小企鹅输入法配置 export GTK_IM_MODULE=fcitx export QT_IM_MODULE=fcitx export XMODIFIERS="@im=fcitx&quo ...
- Python全栈开发day5
一.lambda表达式 对于简单的函数,存在一种简便的表示方式,即:lambda表达式 1 2 3 >>> shaw = lambda x,y:x + y >>> ...
- Sharepoint 2010 splist url query for date range
after many attemps,i'v found that Filter feature support the greater than and less than. ie:http://s ...