使用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 ...
随机推荐
- 习课的视频播放器 video.js
jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- php 判断文件或目录是否存在
判断文件或目录是否存在有自带的函数 file_exists:文件是否存在 $file = "check.txt"; if(file_exists($file)) { ech ...
- [转载]SVN-主干/分支
一个大项目在开发中可能会拆分成几个小项目,分别分去,同时共通的部分再由人做,做完后再统一合并.同时,在开发中,共通的部分修改后,其它人要保持同步. 这种情况反应到SVN的分支/合并功能上,再贴切不过了 ...
- Ninject之旅之八：Ninject插件模型（附程序下载）
摘要 在前面的章节中,我们看了在单一的绑定条件下Ninject能够处理依赖类型,就是说,每个服务类型只绑定到单一的实现类型.然而,有些情况下我们需要绑定一个抽象服务类型到多个实现,这叫多个绑定.多个绑 ...
- Android IOS WebRTC 音视频开发总结（八十三）-- 使用WebRTC广播网络摄像头视频（上）
本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:bl ...
- 查看python api
以下方法可以查看python 的api,包括selenium webdriver,requests等 1.cmd进入dos命令行窗口,输入python -m pydoc -p 2345 (2345 ...
- LSTM 分类器笔记及Theano实现
相关讨论 http://tieba.baidu.com/p/3960350008 基于教程http://deeplearning.net/tutorial/lstm.html LSTM基本原理http ...
- mysql系统数据库
mysql系统数据库主要存储了一些存储MySQL服务的系统信息表.一般情况下mysql库的表都是MYASIM引擎,除非个别情况.mysql库的表的作用大致可以分为以下几类: (1)授权系统表 (2)系 ...
- webpack配置备份
package.json: { "name": "webpackTest", "version": "1.0.0", & ...
- VR发展的最大障碍在于内容？
VR目前基本处于半死不活的状态,国内基本就是一堆的VR“盒子”在浑水摸鱼,就小米有点自知之明,冠以“玩具”的定位.但是说到VR发展的最大问题,居然说是什么内容没有吸引力,真让人无语啊.另外,还有什么价 ...