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 ...
随机推荐
- vuex简单使用
1.创建src/store/index.js----仓库所在地----暴露store 2.main.js入口文件处引入store,挂载到Vue根实例中 3.创建store/movie.js-----电 ...
- openGL-计算机图形大作业中出现的几个错误及解决
错误一 错误现象:按动相应按键i和o无法在x轴和y轴移动camera,但按相应按键p可以在z轴移动camera. 错误原因:为了移动camera,设置了三个全局变量x.y.z,用于gluLookAt( ...
- zookeeper原理与安装
Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目. 1. Zookerper工作机制 2. Zookeeper工作特点 3. Zookeeper文件系统: ...
- autotrace执行计划中，统计信息详解
全表扫描是怎么扫描的? oracle最小的存储单位是block 物理上连续的block组成了extent(也就是说一个区中的所有块在物理上是连续的) 很多个extent组成了segment(一个seg ...
- 第61节:Java中的DOM和Javascript技术
Java中的DOM和Javascript技术 DOM是一门技术,是文档对象模型.所需的文档只有标记型文档,如我们所学的html文档(文档中的所有标签都封装成为对象了) DOM: 为Document O ...
- Silverlight多重表头实现
效果: 实现主要逻辑:通过动态拼接XML生成表头样式,绑定到列上. 主要是动态拼接XML时要仔细核对对应的占位行,具体可以看代码,注释很详细 两个类一个接口 NTree<T>:定义表头树形 ...
- extends的使用
继承extends的使用 继承(extends): 继承让我们可以更好的实现类的扩展. 继承的使用要点: 1.父类也称作超类.基类. ...
- 机器学习（Machine Learning）算法总结-K临近算法
一.算法详解 1.什么是K临近算法 Cover 和 Hart在1968年提出了最初的临近算法 属于分类(classification)算法 邻近算法,或者说K最近邻(kNN,k-NearestNeig ...
- Go Slice 使用中的小陷阱
go中的切片有两个特性: 底层的数据结构是数组 type slice struct { array unsafe.Pointer len int cap int } 包括从切片和数组派生出来的切片都是 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...