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 ...
随机推荐
- 【百度地图API】怎样制作多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶小妹要从重庆驾车去北京.但是途中要去西安奶奶家拿牛奶饼干呢! 用百度地图API,能不能帮我实现这个愿望呢? ----------------------------------- ...
- Mongodb更新数组$sort操作符
db.students.update( { _id: 1 }, { $push: { quizzes: { $each: [ { id: 3, score: 8 }, { id: 4, score: ...
- (1)Smali系列学习之Smali函数调用语句分析
一.函数调用smali中的函数和成员变量也分为两种,分别为 direct 和 virtual.两者的区别如下: 1.direct method 是指调用private方法.2.virtual meth ...
- h5-文本框
h5-文本框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- linux学习笔记命令篇1---命令ls
前言: linux中接触最多的就是命令和文件. 命令 命令是有其格式的, 一般格式是command [option] parameter1 parameter2 [paramete3 ...]: 注 ...
- invalid comparison: java.util.ArrayList and java.lang.String——bug解决办法
今天碰到个问题,解决了很久才搞定,来记录下,希望可以帮助到大家 贴错误源码: 这是一个根据list集合的查找数据的 sql,在接收list的时候加了判断 list != ‘ ’ “”,引起了集合与St ...
- 2016-2017 ACM-ICPC CHINA-Final H Great Cells ans[i]*i看做整体，转化为期望理解来解题
/** 题目:2016-2017 ACM-ICPC CHINA-Final H Great Cells 链接:http://codeforces.com/gym/101194 题意:给定n*m的矩形, ...
- yum安装的JDK的没有配置环境变量但是在/usr/bin下面都做了软链接
[root@st152 /usr/bin]# ll |grep javalrwxrwxrwx 1 root root 22 Nov 28 22:14 java -> /et ...
- PHP中钩子函数的实现与认识
PHP中钩子函数的实现与认识 分类:PHP编程 作者:rming 时间:2014-09-21 假如有这么一段程序: function fun(){ fun1(); fun2(); } 首先程序 ...
- ubuntu14.04安装pycurl
一. 安装依赖项 sudo apt-get install libcurl4-gnutls-dev 二. 安装pycurl pip install pycurl 三. 检验是否安装成功 进入pytho ...