js贪吃蛇源码
1、注意，自己引入jquery,这个demo基于jquery的，我的jquery是写的本地的
2、没有写注释，看不懂的再问我吧，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} div.wrap {
text-align: center;
padding-top: 50px;
} div.container {
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.2);
} div.row {
display: flex;
} div.row div {
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.2);
} div.row div.snake {
background: #26376b;
} div.row div.snakeHeader {
background: red;
} div.row div.food {
background: greenyellow;
} div.grade {}
</style>
</head>
<body>
<div class="wrap">
<button class="btn">从新开始</button>
<div class="grade">
0
</div>
<div class="container">
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function snakeCreate(wrap, grade) {
var fn = {},
$wrap = $(wrap),
$row = null;
var direct = "up";
var count = 0;
var data = [];
var food = {
x: 0,
y: 0
};
var gameRun = true;
var snake = [{
x: 9,
y: 10
}, {
x: 10,
y: 10
}, {
x: 11,
y: 10
}, {
x: 12,
y: 10
}];
fn.init = function() {
fn.keyCode();
fn.createDom();
fn.config();
fn.createFood();
fn.display();
};
fn.createDom = function() {
for(var i = 0; i < 21; i++) {
$wrap.append('<div class="row"></div>');
for(var j = 0; j < 21; j++) {
$wrap.find(".row").last().append("<div></div>");
}
}
$row = $wrap.find(".row");
};
fn.config = function() {
for(var i = 0; i < 21; i++) {
var temp = [];
for(var j = 0; j < 21; j++) {
temp.push(0);
}
data.push(temp);
}
for(var i = 0; i < snake.length; i++) {
data[snake[i].x][snake[i].y] = 2;
}
};
fn.display = function() {
for(var i = 0; i < data.length; i++) {
for(var j = 0; j < data.length; j++) {
var className = "";
if(data[i][j] == 0) {
className = "";
} else if(data[i][j] == 2) {
className = "snake";
} else if(data[i][j] == 1) {
className = "food";
} else {
className = "";
}
$row.eq(i).find("div").eq(j)[0].className = className;
$row.eq(snake[0].x).find("div").eq(snake[0].y)[0].className = "snakeHeader";
}
}
};
fn.keyCode = function() {
$(window).on("keydown", function(event) {
if(gameRun) {
switch(event.key) {
case "w":
fn.moveToUp();
break;
case "s":
fn.moveToDown();
break;
case "a":
fn.moveToLeft();
break;
case "d":
fn.moveToRight();
break;
default:
break;
}
}
});
};
fn.change = function(x, y) {
fn.judegDeth(x, y);
if(gameRun) {
data[snake[snake.length - 1].x][snake[snake.length - 1].y] = 0;
data[x][y] = 2;
if(x == food.x && y == food.y) {
var feed = {
x: x,
y: y
}
$(grade).html($(grade).html() * 1 + 1);
snake.push(feed);
fn.createFood();
}
for(var i = snake.length - 1; i > 0; i--) {
snake[i].x = snake[i - 1].x;
snake[i].y = snake[i - 1].y;
}
for(var i = 0; i < snake.length; i++) {
data[snake[i].x][snake[i].y] = 2;
}
snake[0].x = x;
snake[0].y = y;
fn.display();
}
};
fn.moveToUp = function() {
if(direct != "down") {
direct = "up";
fn.outMove(-1, 0);
}
};
fn.moveToDown = function() {
if(direct != "up") {
direct = "down";
fn.outMove(1, 0);
}
};
fn.moveToLeft = function() {
if(direct != "right") {
direct = "left";
fn.outMove(0, -1);
}
};
fn.moveToRight = function() {
if(direct != "left") {
direct = "right";
fn.outMove(0, 1);
}
};
fn.outMove = function(speedx, speedy) {
clearInterval(fn.timer);
fn.change(snake[0].x + speedx, snake[0].y + speedy);
fn.timer = setInterval(function() {
fn.change(snake[0].x + speedx, snake[0].y + speedy);
}, 400);
};
fn.createFood = function() {
var x = Math.floor(Math.random() * 21);
var y = Math.floor(Math.random() * 21);
while(data[x][y] != 0) {
x = Math.floor(Math.random() * 21);
y = Math.floor(Math.random() * 21);
}
food.x = x;
food.y = y;
data[x][y] = 1;
};
fn.judegDeth = function(x, y) {
if(gameRun) {
fn.judegBound(x, y);
fn.judgeOver(x, y);
}
};
fn.judegBound = function(x, y) {
if(x >= 21 || x < 0 || y >= 21 || y < 0) {
clearInterval(fn.timer);
gameRun = false;
alert("game over1!");
}
};
fn.judgeOver = function(x, y) {
for(var i = 0; i < snake.length; i++) {
if(snake[i].x == x && snake[i].y == y) {
clearInterval(fn.timer);
gameRun = false;
alert("game over2!");
break;
}
}
};
fn.clear = function() {
clearInterval(fn.timer);
count = 0;
direct = "up";
food = {
x: 0,
y: 0
};
$(grade).html(0);
gameRun = true;
snake = [{
x: 9,
y: 10
}, {
x: 10,
y: 10
}, {
x: 11,
y: 10
}, {
x: 12,
y: 10
}];
for(var i = 0; i < data.length; i++) {
for(var j = 0; j < data.length; j++) {
data[i][j] = 0;
}
}
for(var i = 0; i < snake.length; i++) {
data[snake[i].x][snake[i].y] = 2;
}
fn.createFood();
fn.display();
};
return fn;
}
var snakeOne = snakeCreate(".container", ".grade");
snakeOne.init();
$(".btn").on("click", function() {
snakeOne.clear();
});
</script>
</html>
js贪吃蛇源码的更多相关文章
- Winfrom 极简版贪吃蛇源码
该源码是我在百度知识库借助前辈的的经验,加上自己的一点小改动写的一个非常简陋的贪吃蛇小程序.如果你们有更好的改动方案,欢迎评论. 进入主题吧! 1.创建一个桌面应运程序,拖一个定时器控件.这样,程序界 ...
- H5 贪吃蛇源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- c# 贪吃蛇源码
using UnityEngine; using System.Collections;using System.Diagnostics;using UnityEngine.SceneManageme ...
- C语言实现贪吃蛇源码
先放效果 源代码 //2016-2-12 //zhaoyu //Gmail:zhaoyu1995.com@gmail.com //Language: C //Platform:Code::Blocks ...
- PureMVC(JS版）源码解析：总结
PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...
- JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- PureMVC(JS版）源码解析
PureMVC(JS版)源码解析:总结 PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...
- Vue.js 2.0源码解析之前端渲染篇
一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...
- 从发布订阅模式入手读懂Node.js的EventEmitter源码
前面一篇文章setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop详细讲解了浏览器和Node.js的异步API及其底层原理Event Loop.本文会讲一下不 ...
随机推荐
- uboot的编译
在我拿到开发板以后,uboot都是编译好的,但是我不知道它是如何生成uboot.bin文件的.经过一番摸索.我也会编译uboot了. #cd /home #mkdir study //创建工作目录 * ...
- HDU 2045 不容易系列之(3)―― LELE的RPG难题（递推）
题意:有排成一行的n个方格,用红(Red).粉(Pink).绿(Green)三色涂每个格子,每格涂一色,要求任何相邻的方格不能同色,且首尾两格也不同色．求全部的满足要求的涂法. 题解:本来当n=1时, ...
- android 得到缩略图
转载至 http://blog.csdn.net/dxh040431104/article/details/6667448 怎样获取图片的大小?思路很简单:首先我们把这个图片转成Bitmap,然后再利 ...
- Mysql与PostgreSql数据库学习笔记---打酱油的日子
mysql 从最基础的数据引擎,到进程结构,都不能支持数据版本.导致其职能阻塞“并发”,不支持最基本的事务,innodb达不到基本事务要求,任何写数据,都导致整个表锁住.充其量只能算是一个玩具,或者说 ...
- Python for Infomatics 第12章 网络编程六（译）
注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 12.9 词汇表 Beautif ...
- mysql数据去除重复及相关优化（转）
由于mysql不支持同时对一张表进行操作,即子查询和要进行的操作不能是同一张表,因此需要通过临时表中专以下. 1.单字段重复 生成临时表,其中uid是需要去重的字段 create table tmp_ ...
- 【BZOJ】3751: [NOIP2014]解方程
题意 求\(\sum_{i=0}^{n} a_i x^i = 0\)在\([1, m]\)内的整数解.(\(0 < n \le 100, |a_i| \le 10^{10000}, a_n \n ...
- 基础DOS命令
DOS命令: 1. 切换盘符:d: 2. 查看文件目录清单: dir dir/s 查看所有目录及子目录下的所有内容 dir/p 分屏显示 dir/s/p 分屏显示所有内容 提前结束:ctr ...
- ZeroMQ接口函数之 ：zmq - 0MQ 轻量级消息传输内核
官方网址:http://api.zeromq.org/4-0:zmq zmq(7) 0MQ Manual - 0MQ/3.2.5 Name zmq – ØMQ 轻量级消息传输内核 Synopsis # ...
- ASP.NET页面的字符编码设置
在用ASP.NET写网上支付的接口程序时,遇到一个奇怪问题,通过表单提交过去的中文全是乱码,英文正常.而用asp程序进行测试,可以正常提交中文,asp页面中有这样的HTML代码: <meta h ...