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 ...
随机推荐
- Java变成思想--多线程
Executor :线程池 CatchedThreadPool:创建与所需数量相同的线程,在回收旧线程是停止创建新县城. FixedThreadPool:创建一定数量的线程,所有任务公用这些线程. S ...
- Qt Creator快捷键设置
QT Creator 下载地址 http://download.qt.io/ 一.快捷键配置方法: 进入“工具->选项->环境->键盘”即可配置快捷键. 二.常用默认快捷键: 编 ...
- MFC对话框和属性表
对话框主要有两类,分为模式和无模式,它们的功能都被封装在了CDialog中.与对话框相近的是属性表,属性表实际上是具有制表页(TAB 页)的对话框,将对话框中控件更好的组织在一起.借助Cpropert ...
- 看CES 2017上有哪些好玩的物联网设备
2017年国际消费类电子产品展览会(CES)已于昨天在拉斯维加斯正式开幕,多款新一代智能手机和平板电脑亮相本届CES大展,智能家居.穿戴等设备更成为外界普遍关注的焦点.今天笔者将带大家一览CES 20 ...
- Android WebView 超大字号适配问题
目前在使用 Android WebView 展示H5页面的时候,存在当系统字号设置超大的时候,出现页面内容展示不全的问题. 此问题是因为Android WebView 默认使用系统字号进行展示. 解决 ...
- C++ 知识回顾总结 -- queue 队列容器
一.说明 queue 是一种队列适配器,专门设计用于FIFO中操作(先进先出),元素从一端插入容器并从另一端提取. 相关API地址为:http://www.cplusplus.com/referenc ...
- 每天学点SpringCloud（十四）：Zipkin使用SpringCloud Stream以及Elasticsearch
在前面的文章中,我们已经成功的使用Zipkin收集了项目的调用链日志.但是呢,由于我们收集链路信息时采用的是http请求方式收集的,而且链路信息没有进行保存,ZipkinServer一旦重启后就会所有 ...
- java初级笔记
1:java核心优势:跨平台,一次编译,四处运行,只要安装了对应的jvm虚拟机: 2:JVM其实就是一种规范,就是一个虚拟的用于执行bytecode字节码的计算机: 3:数据类型分为四类八种,整数型( ...
- 卷积神经网络CNN的原理（一）－－－基本概念
什么是卷积神经网络呢?这个的确是比较难搞懂的概念,特别是一听到神经网络,大家脑海中第一个就会想到复杂的生物学,让人不寒而栗,那么复杂啊．卷积神经网络是做什么用的呢?它到底是一个什么东东呢? 卷积神经网 ...
- 史上最全阿里 Java 面试题总结
以下为大家整理了阿里巴巴史上最全的 Java 面试题,涉及大量 Java 面试知识点和相关试题. JAVA基础 JAVA中的几种基本数据类型是什么,各自占用多少字节. String类能被继承吗,为什么 ...