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.本文会讲一下不 ...
随机推荐
- 水晶报表初体验（Visual Studio 2010）
安装水晶报表后如下使用: 配置rpt文件,如图 前台(Asp.net页面): <%@ Register Assembly="CrystalDecisions.Web, Version= ...
- matlab学习第一天
>> x=linspace(-,,); >> y=x.^.*sin(x); >> plot(x,y,) >> plot(x,y,) 分析: linspa ...
- web api :Action Results in Web API 2
原文:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/action-results Web api 返回 ...
- CentOS6.7安装Python3.4
1.下载Python3.4安装包 wget https://www.python.org/ftp/python/3.4.4/Python-3.4.4.tgz 2.解压.编译.安装 .tgz cd Py ...
- 【NOIP考前模拟赛】纯数学方法推导——旅行者问题
一.写在前面 这题似乎是一道原创题目(不是博主原创),所以并不能在任何OJ上评测,博主在网盘上上传了数据(网盘地址:http://pan.baidu.com/s/1mibdMXi),诸位看官需者自取. ...
- 用于异步的BackgroundWorker
XAML代码: <Window x:Class="backgroundtest.MainWindow" xmlns="http://schemas.microsof ...
- Jquery_类选择器笔记
$("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- wifi 破解
基础的知识: ESSID :无线网络的名字 BSSID :是AP的mac地址 CH: 工作信道 AP :无线访问接入点 WEP WPA/WPA2 STATION :客户机mac DHCP ...
- Oracle数据库坏块的恢复
模拟数据块坏块: 对于发生数据块不一致的数据块,如果当前数据库有备份且处于归档模式,那么就可以利用rman工具数据块恢复功能 对数据块进行恢复,这种方法最简单有效,而且可以在数据文件在线时进行,不会发 ...