JavaScript实践-简单的贪吃蛇小游戏
实现逻辑：
//获取Html中的格子（行，列）
//建立数组存储所有格子（x，y）
//建立数组用于存储蛇身（x，y）
//生成随机坐标（x，y）的函数
//随机创建蛇身并存储到蛇身数组
//创建食物（不能与蛇身重合，利用不等于蛇身数组中任何数值实现）
//方向键控制蛇身运动方向
//蛇身运动规则---运动方式，判断是否碰到食物，判断是否撞墙
//游戏结束后清盘规则
一、Html，Css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
* { padding: 0; margin: 0; }
body { position: relative; width: 100%; height: 100%; background-color: #0c3857; font-family: 'Microsoft YaHei'; }
.gameBg { position: absolute; top: 20px; left: 50%; margin-left: -25%; width: 50%; height: 630px; background-color: #045994; }
.gameBg .title { margin-bottom: 15px; width: 100%; height: 30px; line-height: 30px; text-align: center; color: #ffffff; font-size: 30px; }
.gameBg .snakeAll { margin: 0 auto; width: 621px; height: 400px; }
.gameBg .snakeAll div {width: 100%; height: 100%; }
.gameBg .snakeAll .table ul { width: 100%; height: 20px; text-align: center; }
.gameBg .snakeAll .table ul li { display: inline-block; width: 20px; height: 20px; border: 1px solid #ffffff; border-right: none; border-bottom: none; }
.gameBg .snakeAll .table ul li:last-child { border-right: 1px solid #ffffff; width: 19px; }
.gameBg .snakeAll .table ul:last-child li { border-bottom: 1px solid #ffffff; height: 19px; } /*食物蛇头*/
.gameBg .snakeAll .table span {display: inline-block; width: 100%; height: 100%; }
span.food { background-color: #58890c; }
span.Snake { background-color: #00ffff; } /*控制按钮*/
.gameBg .button { margin-top: 15px; width: 100%; height: 30px; line-height: 30px; text-align: center; }
.gameBg .button button { width: 150px; height: 30px; border: none; font-size: 16px; outline: none; }
.gameBg .button button#start { background-color: greenyellow; }
.gameBg .button button#start:hover { background-color: #58890c; }
.gameBg .button button#reset { background-color: sandybrown; }
.gameBg .button button#reset:hover { background-color: #b0570c; }
.gameBg .button button:active { transform: translate(2px,2px); -ms-transform: translate(2px,2px); /* IE 9 */ -webkit-transform: translate(2px,2px); /* Safari and Chrome */ }
</style>
</head>
<body>
<div class="gameBg">
<div class="title">贪吃蛇游戏</div>
<p style="color:#00ffff; text-align:center"><span>当前时速:</span><span id="shut">800</span></p>
<div class="snakeAll">
<div class="table" id="tab">
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
</div>
<div class="button">
<button id="start" type="button" onclick = "csnake();">开始游戏</button>
<button id="reset" type="button" onclick="GameOver('你主动放弃了这场对决')">重新游戏</button>
</div>
</div>
<script src="snake.js"></script>
</body>
</html>
二、JavaScript
var table = document.getElementById("tab");//获取表格
var ul = table.getElementsByTagName("ul");//获取行
var li = ul[0].getElementsByTagName("li");//获取列
var c = [li.length, ul.length];//存储坐标x，y
var sn;//用于存储蛇身的数组
/*
cr 生成随机坐标x，y函数
coor 获取坐标对象方法函数
cn 新建节点函数
food 随机生成食物函数
*/
cr = function () { return r = [Math.floor(Math.random() * c[0]), Math.floor(Math.random() * c[1])]; }
coor = function (x, y) { return ul[y].childNodes[x]; }
cn = function (name) { sf = document.createElement("span"); sf.className = name; return sf; }
food = function () {
cr();
for (i = 0; i < sn.length / 2 - 1; i++) {
if (r[0] == sn[2 * i] && r[1] == sn[2 * i + 1]) {
cr();
} else {
break;
}
}
coor(r[0], r[1]).appendChild(cn("food"));
}
function csnake() {
//随机创建蛇身并存储蛇身坐标
cr(); sn = [r[0], r[1]]; coor(sn[0], sn[1]).appendChild(cn("Snake"));
//创建食物
food();
//方向键改变运动方向
var direction = "up";
document.onkeydown = function (e) {
e = window.event || e;
switch (e.keyCode) {
case 37: direction = "left"; return false; break;//左
case 38: direction = "up"; return false; break;//上
case 39: direction = "right"; return false; break;//右
case 40: direction = "down"; return false; break;//下
default: break;
}
}
//蛇规则运动函数
snakeGo = function () {
//判断运动方向并得到即将改变的坐标x，y
var cx, cy;
switch (direction) {
case "left": cx = sn[sn.length - 2] - 1; cy = sn[sn.length - 1]; break;
case "right": cx = sn[sn.length - 2] + 1; cy = sn[sn.length - 1]; break;
case "up": cx = sn[sn.length - 2]; cy = sn[sn.length - 1] - 1; break;
case "down": cx = sn[sn.length - 2]; cy = sn[sn.length - 1] + 1; break;
default: break;
}
//删除蛇尾
coor(sn[0], sn[1]).childNodes[0].remove();
//判断是否碰到蛇身
for (i = 0; i < sn.length / 2 - 1; i++) {
if (cx == sn[2 * i] && cy == sn[2 * i + 1]) {
GameOver("亲，你是不是头晕撞到自己了");
return false;
};
}
//向数组增加蛇头下一轨迹坐标
sn.push(cx, cy);
console.log(cy);
//判断蛇头是否撞墙
if (cx < 0 || cx > c[0]-1 || cy < 0 || cy > c[1]-1) {
GameOver("宝贝，你撞墙自裁了");
return false;
}
//判断是否吃到食物
if (cx == r[0] && cy == r[1]) {
coor(r[0], r[1]).childNodes[0].remove();//删除食物
coor(sn[0], sn[1]).appendChild(cn("Snake"));
coor(cx, cy).appendChild(cn("Snake"));
food();
} else {//删除蛇尾
sn.splice(0, 2);
coor(cx, cy).appendChild(cn("Snake"));
}
}
var t = 800;//存储蛇跑的速度
snakeItl = setInterval(function () {
snakeGo();
}, t)
weGo = setInterval(function () {
t -= 20;
if (t <= 5) { t = 5; }
clearInterval(snakeItl);
snakeItl = setInterval(function () {
snakeGo();
}, t);
document.getElementById("shut").innerHTML = t;
}, 5000);
weGo;
}
function GameOver(text) {
clearInterval(snakeItl);
clearInterval(weGo);
alert(text);
//循环遍历删除所有蛇身
for (u in ul) {
if (!isNaN(u)) {
var temp = ul[u].getElementsByTagName("li");
for (l in temp) {
if (!isNaN(l)) {
var span = ul[u].getElementsByTagName("li")[l].childNodes;
if (span != undefined && span.length) {
span[0].remove();
}
}
}
}
}
}
游戏demo下载地址：https://share.weiyun.com/bc9fbd4d0b83ac2c76fa3115522230fe （密码：ztLv）
作者：leona
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
JavaScript实践-简单的贪吃蛇小游戏的更多相关文章
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
- Java 用java GUI写一个贪吃蛇小游戏
目录 主要用到 swing 包下的一些类 上代码 游戏启动类 游戏数据类 游戏面板类 代码地址 主要用到 swing 包下的一些类 JFrame 窗口类 JPanel 面板类 KeyListener ...
- 用python+pygame写贪吃蛇小游戏
因为python语法简单好上手,前两天在想能不能用python写个小游戏出来,就上网搜了一下发现了pygame这个写2D游戏的库.了解了两天再参考了一些资料就开始写贪吃蛇这个小游戏. 毕竟最开始的练手 ...
- JavaScript-简单的贪吃蛇小游戏
实现逻辑: //获取Html中的格子(行,列) //建立数组存储所有格子(x,y) //建立数组用于存储蛇身(x,y) //生成随机坐标(x,y)的函数 //随机创建蛇身并存储到蛇身数组 //创建食物 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
随机推荐
- 代码收藏系列--jquery--筛选器、事件绑定技巧（转载）
代码收藏系列--jquery--筛选器.事件绑定技巧 Jquery筛选器的一些常用技巧,比如过滤属性等 /* 过滤获取没有含data-xsui-grid-colspan的节点 */$(this).fi ...
- 解决Win10系统下 C# DateTime 出现星期几的问题 解决ASP.NET MVC 接受Request Playload参数问题
解决Win10系统下 C# DateTime 出现星期几的问题 昨天晚上写代码的时候偶然发现 DateTime 里出现了星期几,当时一阵凌乱,去网上百度没有详细解决办法,很多人说可以用用 ToStri ...
- crc32 根据字符串获取校验值
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text; n ...
- IDirect3DDevice9::SetTexture的stage参数
HRESULT IDirect3DDevice9::SetTexture(DWORD Stage, IDirect3DBaseTexture9 *pTexture) 其中Stage并不是“阶段”的意思 ...
- 图解SQL inner join、left join、right join、full outer join、union、union all的区别
转于:http://justcoding.iteye.com/blog/2006487 这是一篇来自Coding Horror的文章. SQL的Join语法有很多:有inner的,有outer的,有l ...
- 关于阿里云ECS Centos 5/6/7 Linux Glibc库严重安全漏洞修复方法
日前Linux GNU glibc标准库的 gethostbyname函数爆出缓冲区溢出漏洞,漏洞编号为CVE-2015-0235.黑客可以通过gethostbyname系列函数实现远程代码执行,获取 ...
- Unix删除当前目录可执行文件
On GNU versions of find you can use -executable: find . -type f -executable -printFor BSD versions o ...
- C++语言基础(25)-C++格式化输出
一.使用控制符控制输出格式 #include <iostream> #include <iomanip>//不要忘记包含此头文件 using namespace std; in ...
- ZThread在Windows下打印若干DEBUG信息到console的原因
代码见这篇随笔 在Windows下的运行结果:ZThread打印了一堆东西(并不是我写的) 文件结构: 最开始我以为是编译选项没弄对,同样的代码放到Linux下编译,还是打印这些信息 注意我在Linu ...
- java+lucene中文分词，来看看百度究竟是怎么找到你想要的（十分重要，楼主幸苦之作）
我想只要是学过数据库的孩纸,不管是mysql,还是sqlsever,一提到查找,本能的想到的便是like关键字,其实去转盘网(分类模式)之前也是采用这种算法,但我可以告诉大家一个很不幸的事情,like ...