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 ...
随机推荐
- jsp版本的环境变量集合
System.out.println("Protocol: " + request.getProtocol());System.out.println("Scheme: ...
- 本体论与OWL
http://semanticweb.org/wiki/Main_Page.html http://owl.man.ac.uk/documentation.shtml https://zh.wiki ...
- python 安装 pyinstall 编译exe文件
$ pip install future 安装PyInstaller之前需确认首先安装了pywin32 下载地址:http://nchc.dl.sourceforge.net/project/pywi ...
- unity, trail renderer gone black on iOS
给物体加了个trail renderer,使用了Legacy Shaders/Transparent/Diffuse,并将颜色调成白色半透明.在编辑器里效果是对的,但在ios上真机测试变成黑色的.然后 ...
- NIO - Selector源码分析
1. 背景 SelectableChannel对象的多路复用器. 可以通过调用Selector.open()方法创建Selector对象.Selector.open()方法会利用系统默认的Select ...
- [k8s]组件日志级别说明
kubectl 执行命令时候 --v 调试, 也可以用作其他组件的 --v配置 参考: https://kubernetes.io/docs/user-guide/kubectl-cheatsheet ...
- C#新特性, dynamic, ExpandObject
http://msdn.microsoft.com/en-us/library/system.dynamic.expandoobject.aspx using System; using System ...
- 选择如何的系统更能适合App软件开发人员？
手机这个词早已经同吃喝玩乐一样.成为了人们生活中的必备元素. 尤其是iPhone一炮走红之后,不但手机世界发生了巨大变化,整个科技产业似乎都格局性的改变.直至今日,手机市场的竞争更是日趋白炽化,这就给 ...
- linux学习笔记14--命令which和whereis
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. ...
- 1.2 Activity
Activity是个应用组件,它给用户提供了为了完成某些工作而可以进行交互操作的界面,例如,电话详情,打电 话,发邮件,或是浏览地图.每一个Activity都有一个窗口来绘制自已的用户界面.通常来说, ...