H5 贪吃蛇源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪食蛇</title>
<style type="text/css">
table {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 10px;
height: 13px;
}
</style>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
var size = 20;//格子的行数和列数
var snake = new Array();//蛇数组
function createSnake() {
var x = parseInt(Math.random() * (size - 2));//右边留出来两个格子
var y = parseInt(Math.random() * size);
snake[0] = new Array(x, y);//蛇数组的第一个格子
$("#x" + x + "y" + y).attr("type", "snake");
$("#x" + x + "y" + y).css("background-color", "#ccc");
for (var i = 1; i <= 2; i++) {
x++;
snake[i] = new Array(x, y);//蛇数组的第二个和第三个格子
$("#x" + x + "y" + y).attr("type", "snake");
$("#x" + x + "y" + y).css("background-color", "#ccc");
}
}
var food = new Array();
function createFood() {
var x = parseInt(Math.random() * size);
var y = parseInt(Math.random() * size);
while ($("#x" + x + "y" + y).attr("type") == "snake") {//食物出现在了蛇身上 则重新随机
x = parseInt(Math.random() * size);
y = parseInt(Math.random() * size);
}
food = new Array(x, y);
$("#x" + x + "y" + y).attr("type", "food");
$("#x" + x + "y" + y).css("background-color", "red");
}
var isLive = false;//表示蛇是否活着
var row = 0;//行的移动
var column = 0;//列的移动
function die() {//死了
isLive = false;
window.alert("Game Over!!!");
window.location.reload();
}
function move() {
//蛇的移动方法
if (!isLive) {
return;//已经死了
}
var x = snake[0][0] + row;//加给行
var y = snake[0][1] + column;//加给列
snake.unshift(new Array(x, y));//将x和y的位置作为新的蛇头，插入数组的最前面
var type = $("#x" + x + "y" + y).attr("type");
if (type == "snake") {//如果蛇头前方的格子是蛇
die();//死了
} else if (type == "food") {//蛇头前方的格子是食物
$("#x" + x + "y" + y).attr("type", "snake");//该位置变成蛇的头
$("#x" + x + "y" + y).css("background-color", "#ccc");
createFood();//重新随机一个食物
} else if (type == "map") {//蛇头前方的格子是普通的白色格子
var tmp = snake.pop();//删掉蛇数组的最后一个格子
$("#x" + tmp[0] + "y" + tmp[1]).attr("type", "map");//将原来蛇尾巴的位置变成普通的白色格子
$("#x" + tmp[0] + "y" + tmp[1]).css("background-color", "#fff");
$("#x" + x + "y" + y).attr("type", "snake");//将原来蛇头前方的格子变成新的蛇头
$("#x" + x + "y" + y).css("background-color", "#ccc");
} else {//蛇头前方的格子既不是蛇也不是普通的白格子，也不是食物，那肯定是到表格的边框了
die();//死了
}
}
var direction = '';//增加一个变量表示方向
var timer = 0;//用于暂停
$(function () {
createSnake();//随机出一个三个格子的横躺着的蛇
createFood();//随机出一个格子的食物
$(document).keydown(function (e) {//有键按下
var key = e.keyCode;
switch (key) {
case 32:
//空格键（控制暂停和继续）
if (timer != 0) {
window.clearInterval(timer);
timer = 0;
} else {
if (isLive) {
timer = window.setInterval("move()", 200);
}
}
return;
case 37://左
if (direction == 'right') {
return;//往反方向走则没有效果
}
row = -1;
column = 0;
direction = 'left'
break;
case 38://下
if (direction == 'up') {
return;//往反方向走则没有效果
}
row = 0;
column = -1;
direction = 'down'
break;
case 39://右
if (direction == 'left') {
return;//往反方向走则没有效果
}
row = 1;
column = 0;
direction = 'right'
break;
case 40://上
if (direction == 'down') {
return;//往反方向走则没有效果
}
row = 0;
column = 1;
direction = 'up'
break;
default:
return;
}
if (!isLive) {
isLive = true;
if (row == 1 && column == 0) {
//最开始就往右侧移动，因为蛇头默认是最左边的一个格子，则给蛇头调换到最右侧
//否则最开始不能往右移动
snake.reverse();
}
timer = window.setInterval("move()", 200);
}
});
});
</script>
</head>
<body>
<script type="text/javascript">
//生成格子
document.writeln("<table cellspacing='0' align='center'>");
for (var i = 0; i < size; i++) {
document.writeln("<tr>");
for (var j = 0; j < size; j++) {
document.writeln("<td id='x" + j + "y" + i + "' type='map'></td>");
}
document.writeln("</tr>");
}
document.writeln("</table>");
</script>
<h2>请按上下左右方向键开始，按空格键暂停和继续</h2>
</body>
</html>
H5 贪吃蛇源码的更多相关文章
- Winfrom 极简版贪吃蛇源码
该源码是我在百度知识库借助前辈的的经验,加上自己的一点小改动写的一个非常简陋的贪吃蛇小程序.如果你们有更好的改动方案,欢迎评论. 进入主题吧! 1.创建一个桌面应运程序,拖一个定时器控件.这样,程序界 ...
- c# 贪吃蛇源码
using UnityEngine; using System.Collections;using System.Diagnostics;using UnityEngine.SceneManageme ...
- js贪吃蛇源码
1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...
- C语言实现贪吃蛇源码
先放效果 源代码 //2016-2-12 //zhaoyu //Gmail:zhaoyu1995.com@gmail.com //Language: C //Platform:Code::Blocks ...
- [C语言]贪吃蛇_结构数组实现
一.设计思路 蛇身本质上就是个结构数组,数组里存储了坐标x.y的值,再通过一个循环把它打印出来,蛇的移动则是不断地刷新重新打印.所以撞墙.咬到自己只是数组x.y值的简单比较. 二.用上的知识点 结构数 ...
- Android源码50例汇总，欢迎各位下载（转载）
下载中心好资料很多,藏在各个角落,小弟在此帮大家做了一个整理,做了一个下载目录,方便大家选择性下载. 源码实例如下: <Android应用开发揭秘>源代码推荐 http://down.51 ...
- JS小游戏：贪吃蛇（附源码）
javascript小游戏:贪吃蛇 此小游戏采用的是面向对象的思想,将蛇,食物,和游戏引擎分为3个对象来写的. 为方便下载,我把js写在了html中, 源码中暂时没有注释,等有空我在添加点注释吧. 游 ...
- Unity 3D游戏-贪吃蛇类游戏源码：重要方法和功能的实现
贪吃蛇类游戏源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 头部移动方式 2 生成 Shit 道具 ...
- iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码
iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCel ...
随机推荐
- 我的C#跨平台之旅（五）：使用IoC之依赖注入实现
引入NuGet包:Unity 实现接口:IDependencyResolver 在启动类中注入依赖的类: 注意:左框中的内容为接口或抽象类,右框中为实际要注入的类. 修改控制类,使用构造方法注入类: ...
- Java学习前知识补充
1 Java 面向对象的编程语言:为了实现人机交互需要语言的过渡(翻译)这时就需要Java虚拟机! 不同系统需要不同的虚拟机 2 学习语言第一件事 搭建环境(运行 Java需要的环境) 在甲骨文 ...
- Android中自定义Preference
一.需求 开发横屏设备的app时,发现preference显示的都是上下结构,因此需要自定义preference实现横屏显示. 二.layout实现 <?xml version="1. ...
- DOS 命令 os系统（windows）
一.cd 相关操作 1."cd .. "or "cd ..\" --返回上一级 2.cd E:\Python -- 进入目录 二.dir --drectory ...
- FPGA跨时钟域握手信号的结构
FPGA跨时钟数据传输,是我们经常遇到的问题的,下面给出一种跨时钟握手操作的电路结构.先上图 先对与其他人的结构,这个结构最大的特点是使用 req 从低到高或者高到低的变化 来表示DIN数据有效并开始 ...
- [转]Rapidly detecting large flows, sFlow vs. NetFlow/IPFIX
Figure 1: Low latency software defined networking control loop The articles SDN and delay and Delay ...
- 【腾讯Bugly干货分享】Android 新一代多渠道打包神器
关于作者: 李涛,腾讯Android工程师,14年加入腾讯SNG增值产品部,期间主要负责手Q动漫.企鹅电竞等项目的功能开发和技术优化.业务时间喜欢折腾新技术,写一些技术文章,个人技术博客:www.lt ...
- Spring理解IOC,DI,AOP作用，概念，理解。
IOC控制反转:创建实例对象的控制权从代码转换到Spring容器.实际就是在xml中配置.配置对象 实例化对象时,进行强转为自定义类型.默认返回类型是Object强类型. ApplicationCon ...
- 数字音频处理的瑞士军刀sox的音效算法以及用法
SoX可以明确的写出需要的音频处理的效果,可以方便的重复使用,在目前的条件下是一个比较方便使用的项目.不过相信随着Audacity的发展,很有可能在未来可以逐渐替代SoX的功能. 对于SoX主要关心的 ...
- 【app】自动化必备之adb使用
1.1 Adb介绍 adb(android debug bridge)是android sdk自带的一个工具 Adb是用来连接android设备和PC端的桥梁,通过adb工具,用户可以在PC端对手机进 ...