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 ...
随机推荐
- future项目上报
private String name;//预警名称 private String detail;//详细 用于定义位置和报错信息,越多越好private String code;//编码 1001是 ...
- CSU1333最短路问题SPFA
fastvj.rainng.com/contest/236779#problem/I Description: n个点m条路每条路 l,r,t:表示这条路开l秒,关r秒,通过要t秒,问你车辆从s到t最 ...
- Android逆向之smali学习
Smali是Android虚拟机Dalvik反汇编的结果. Dalvik指令集 指令格式为:[op]-[type](可选)/[位宽,默认4位] [目标寄存器],[源寄存器](可选) 赋值:move* ...
- Mapreduce操作HBase
这个操作和普通的Mapreduce还不太一样,比如普通的Mapreduce输入可以是txt文件等,Mapreduce可以直接读取Hive中的表的数据(能够看见是以类似txt文件形式),但Mapredu ...
- Android-引导用户指纹录入
根据不同的手机,跳转到指纹录入界面,如果没有检测到手机的品牌,就提醒用户手动去指纹录入: 首先描述手机信息检测对象,PhoneInfoCheck.java: package com.esandinfo ...
- 前端开发掌握nginx常用功能之rewrite
上一篇博文对nginx最常用功能的server及location的匹配规则进行了讲解,这也是nginx实现控制访问和反向代理的基础.掌握请求的匹配规则算是对nginx有了入门,但是这些往往还是不能满足 ...
- PHP7 ?:和??的区别
?:和??是PHP添加的新特性,我们可以通过下面的代码来理解 $z = $x ?? $y; //等价于下面 $z = isset($x) ? $x : $y; $z = $x ?: $y; //等价于 ...
- 第44节：Java当中的JVM
Java当中JVM 01 在使用控制面板时的实质: Hello.java使用javac,然后变成为Hello.class通过运行java这个命令,在类加载器中(含有加载,验证,准备,解析,初始化,使用 ...
- 简单读！spring-mvc源码之url的暴露之路
spring中,注册controller的url有多种方式: 1. 你可以啥都不都干,直接使用 @RequestMapping 注解上体路径,然后加上 <component-scan>, ...
- nginx+lua学习
1. nginx+lua学习 1.1. 网关架构 1.2. nginx命令和信号控制 nginx -s stop 快速关闭,不管有没有正在处理的请求 nginx -s quit 优雅关闭方式,推出前完 ...