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-简单的贪吃蛇小游戏的更多相关文章
- JavaScript实践-简单的贪吃蛇小游戏
实现逻辑: //获取Html中的格子(行,列) //建立数组存储所有格子(x,y) //建立数组用于存储蛇身(x,y) //生成随机坐标(x,y)的函数 //随机创建蛇身并存储到蛇身数组 //创建食物 ...
- 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游戏的库.了解了两天再参考了一些资料就开始写贪吃蛇这个小游戏. 毕竟最开始的练手 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
随机推荐
- Design Patterns Simplified - Part 3 (Simple Factory)【设计模式简述--第三部分（简单工厂）】
原文链接:http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part3-factory/ Design ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- 原生js可爱糖果数字时间特效
效果展示:http://hovertree.com/texiao/js/35/ 数字采用漂亮的糖果皮肤设计 效果图: 代码如下: <!DOCTYPE html> <html> ...
- WCF学习系列一【WCF Interview Questions-Part 1 翻译系列】
http://www.topwcftutorials.net/2012/08/wcf-faqs-part1.html WCF Interview Questions – Part 1 This WCF ...
- wampserver服务器无法启动（图标颜色不对）
1.服务器一直无法启动,图标颜色一直显示黄色,并且不可用. 2.解决办法: (1) C:\wamp\bin\apache\apache2.4.9\bin ->httpd.exe 找到该文件 ( ...
- HashMap 源码解析
HashMap简介: HashMap在日常的开发中应用的非常之广泛,它是基于Hash表,实现了Map接口,以键值对(key-value)形式进行数据存储,HashMap在数据结构上使用的是数组+链表. ...
- eCharts 数据转换json
public ActionResult ShowChart() { return View(); } <div id="main" style="width:600 ...
- 蓝牙Bluetooth技术小知识
蓝牙Bluetooth技术以及广泛的应用于各种设备,并将继续在物联网IoT领域担任重要角色.下面搜集整理了一些关于蓝牙技术的小知识,以备参考. 蓝牙Bluetooth技术始创于1994年,其名字来源于 ...
- UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线
一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...
- iOS --SQL的增加、删除、查找、修改
iOS对于数据库的操作:增加.删除.查找.修改 首先需要创建一个数据库:本程序的数据库是在火狐浏览器里的插件里写的微量型数据库 火狐找查找SQLite Manager的步骤: 第一步:在工具栏找到附加 ...