使用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 ...
随机推荐
- nvm
nvm install stable #安装最新稳定版 node,现在是 5.0.0 nvm install 4.2.2 #安装 4.2.2 版本 nvm install 0.12.7 #安装 0.1 ...
- openstack vm_lifecycle
nova instance状态:power_state, vm_state, task_state 2015-09-22 Openstack 185 nova instance有3种状态:power_ ...
- C#如何分割多个空格分隔的字符串？
using System; using System.Text; using System.Text.RegularExpressions; namespace test { class Progra ...
- python常用库
本文由 伯乐在线 - 艾凌风 翻译,Namco 校稿.未经许可,禁止转载!英文出处:vinta.欢迎加入翻译组. Awesome Python ,这又是一个 Awesome XXX 系列的资源整理,由 ...
- VS中基于对话框的MFC利用换肤改变边框颜色及格式
第一版本: http://ishare.iask.sina.com.cn/f/13836420.html?from=like 2. http://www.cnblogs.com/phinecos/ar ...
- 微软第四题 给定cost能遍历的最大城市数
有向图中N*N矩阵 cost:M, 最多可以遍历的结点个数 例如A可以有0->1->2->0->1 代价:2+2+3+2=9<10 输出4 #include <io ...
- 实时消息平台NSQ的特性
NSQ是GO语言开发的可用于大规模系统中的实时消息服务,但是和RabbitMQ等相比,它具有什么特色,什么场景下选择NSQ呢? NSQ的自身特色很明显,最主要的优势在如下三个方面: 1,性能.在多个著 ...
- EM算法（2）：GMM训练算法
目录 EM算法(1):K-means 算法 EM算法(2):GMM训练算法 EM算法(3):EM算法运用 EM算法(4):EM算法证明 EM算法(2):GMM训练算法 1. 简介 GMM模型全称为Ga ...
- C# MVC ( 添加路由规则以及路由的反射机制 )
在项目文件夹下找到 App_Start 下 找到 RouteConfig.cs文件 打开 (1) 约束的规则 从上往下 贪婪性 (2) 用 routes.MapRoute(...) 添加 ...
- 转：python中对list去重的多种方法
对一个list中的新闻id进行去重,去重之后要保证顺序不变. 直观方法 最简单的思路就是: ids = [1,2,3,3,4,2,3,4,5,6,1] news_ids = [] for id in ...