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.本文会讲一下不 ...
随机推荐
- Git Push 避免用户名和密码方法
参考这里: http://www.cnblogs.com/ballwql/p/3462104.html 亲测第一种方法有效
- 创建好Android Application Project 后运行就报错。
如图: 这个问题有可能是有可能是没导入Android support库,简单了解一下: google提供了Android Support Library package 系列的包来保证来高版本sdk开 ...
- DataTable.RowFilter 用法
/// <summary> /// 处理DataRow筛选条件的特殊字符 /// </summary> /// <param name="rowFilter&q ...
- 北京电子科技学院（BESTI）实验报告3
北京电子科技学院(BESTI)实验报告3 课程: 信息安全系统设计基础 班级:1452.1453 姓名:(按贡献大小排名)周恩德 .郑凯杰 学号:(按贡献大小排名)20145217 .201453 指 ...
- 基于RXTX的串口通讯 windows64位系统可用
项目地址 http://download.csdn.net/detail/xqshishen/7739539
- 【Cocos2d-x游戏开发】Cocos2d-x中的数据存储技术
一.引言 数据存储和网络功能可以说是一款游戏中必不可少的功能,如果一款游戏不能保存进度那么它的可玩性必然大打折扣(试想一下,玩家辛辛苦苦玩了一整天的游戏,结果退出时告诉人家不能保存关卡信息,你明天还得 ...
- React-Native android在windows下的踩坑记
坑很多,跳之前做好准备.没有VPN的同学请浏览完本文后慎行. 你需要先安装最新版本的node.js(我最后使用的是v4.1.2),前往官网下载>> 注:我win7已经安装过Visual ...
- 【PostgreSQL】PostGreSQL数据库，时间数据类型
---"17:10:13.236"time without time zone:时:分:秒.毫秒 ---"17:10:13.236+08"time with t ...
- MySQL 事务
MySQL 事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数据库操作语句就构成 ...
- [ZZ] A Proposal For Compiling Direct3D HLSL With LLVM (Written by Michael Larabel )
http://www.phoronix.com/scan.php?page=news_item&px=OTI2NA Note: Something very instersting to w ...