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 ...
随机推荐
- poj1164 The Castle
有一个n*m的城堡,由一个个小房间组成,每个房间由一个零和四面的墙组成,每个房间都有一个价值, 价值的计算方式是:west_walls价值为1,north_walls价值为2,east_walls价值 ...
- XML学习总结一
1.声明 <?xml version="1.0" encoding="gb2312"?> version属性指定该文档遵守的版本号,通常为1.0X ...
- UltraISO制作CentOS 7.6 U盘引导安装盘
一.制作准备: 1.UltraISO下载安装 2.CentOS镜像文件下载(阿里镜像下载) 二.制作引导盘: 1.电脑插入U盘 2.UltraISO加载镜像文件: 文件->打开->选择对应 ...
- JAVA程序CPU 100%问题排查
做JAVA开发的同学一定遇到过的爆表问题,看这里解决 https://www.cnblogs.com/qcloud1001/p/9773947.html 本文由净地发表于云+社区专栏 记一次Ja ...
- chat.css
*, *:before, *:after { box-sizing: border-box;}body, html { height: 100%; overflow: hidden;}body, ul ...
- Android开发 - 掌握ConstraintLayout（八）障碍线(Barrier)
本文我们来介绍障碍线(Barrier)的使用,平常在开发中用的相对要少一些,但是在需要时会非常方便. 它的作用是将多个元素放到这个障碍线里面使时,其中的任何元素的大小或位置变化时都会使它的位置进行改变 ...
- python 操作 MD5
MD5是什么! Message Digest Algorithm MD5(中文名为消息摘要算法第五版)为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.该算法的文件号为RFC 1321 ...
- 基于HTTP的长轮询简单实现
Web客户端与服务器之间基于Ajax(http)的常用通信方式,分为短连接与长轮询. 短连接:客户端和服务器每进行一次HTTP操作,就建立一次连接,任务结束就中断连接. 在长轮询机制中,客户端像传统轮 ...
- Drools规则引擎入门指南(三)——使用Docker部署Workbench
其实本来我也是打算使用Tomcat来部署Workbench的,但是在网上看了几篇文章,超级繁琐的配置.各种版本.实在看不下去了索性就直接使用Docker来部署了.本次部署的版本是最新稳定版,对应dro ...
- 【详记MySql问题大全集】一、安装MySql
最近公司要从SqlServer转到MySql,期间在安装环境和数据迁移的过程中,遇到了一些不大不小问题,比如怎么重置密码.怎么设置大小写敏感等等. 这些问题都比较细比较杂,这边解决完可能过几天就忘了, ...