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 ...
随机推荐
- MyCat源码分析系列之——SQL下发
更多MyCat源码分析,请戳MyCat源码分析系列 SQL下发 SQL下发指的是MyCat将解析并改造完成的SQL语句依次发送至相应的MySQL节点(datanode)的过程,该执行过程由NonBlo ...
- Get radio selected value
先看下面 foreach得到的radio list: 现在想实现把选择的选项值Post至服务端:
- 绑定一个值给radio
在ASP.NET MVC程序中,需要给一个radio list表绑定一个值. 下面是Insus.NET实现的方法: 使用foreach来循环radio每一个选项,如果值与选项的值相同,那这个选项为选中 ...
- jquery对单选和下拉框的操作
jquery 对表单的操作: 对单选框的操作: 一.对单选框的操作: 1.$('input
- volatile
Volatile修饰的成员变量在每次被线程访问时,都强迫从共享内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到共享内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的 ...
- 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...
- Jquery 页面间传值（非QuerryString）
实现原理: 实现方式不是很复杂,父页面A打开一个子页面 A1,并同时写一个带参数的接收数据函数Receive(result),在A1页面进行逻辑操作,然后调用父页面A的Receive(result)函 ...
- Atitit java集成内嵌浏览器与外嵌浏览器attilax总结
Atitit java集成内嵌浏览器与外嵌浏览器attilax总结 HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟 ...
- SharePoint 2013 沙盒解决方案不能激活(激活按钮不可用)
把沙盒解决方案上传到目标站点的"解决方案"库中,发现"激活"按钮是灰掉的,不可用. 首先,我想到的是权限不足,所以 "以管理员身份"启动IE ...
- 函数的使用顺序---TABLES，USING，CHANGING
SAP使用PERFORM的时候: ... [TABLES itab1 itab2 ...] [USING a1 a2 ...] [CHANGING a1 a2 ...]. E ...