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.本文会讲一下不 ...
随机推荐
- Ajax请求安全性讨论
今天我们来讨论一下ajax请求的安全性,我相信各位在系统开发过程中肯定会绞尽脑汁的想怎样可以尽量少的防止伪造ajax请求进行攻击,尤其是开发跟用户交互比较多的互联网系统.那么就请大家来分享讨论一下你在 ...
- [工作中的设计模式]装饰模式decorator
一.模式解析 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式的要点主要是: 1.需要对已有对象扩展新的功能,又不希望改变原有对 ...
- [ACM训练] 数据结构----树、二叉树----c++ && python
树结构,尤其是二叉树结构是算法中常遇见的,这里根据学习过程做一个总结. 二叉树所涉及到的知识点有:满二叉树与完全二叉树.节点数目的关系.节点数与二叉树高度的关系.层次遍历.深度优先遍历.广度优先遍历等 ...
- PHP遍历、删除文件夹中的所有文件
<?php header("Content-type:text/html;charset=utf-8"); /** * getDirFile 遍历文件夹中的所有文件 * @p ...
- ZeroMQ接口函数之 ：zmq_recvmsg – 从一个socket上接收一个消息帧
ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq-recvmsg zmq_recvmsg(3) ØMQ Manual - ØMQ/4.1.0 Nam ...
- About_类与对象02
FCKeditor文本编辑程序(共享软件)为用户提供在线的文档编辑服务,其具有与微软office软件一样的功能,与之不同的是FCKeditor不需要用户安装任何形式的客户端,FCKeditor程序非常 ...
- js快速排序
function sort(arr){ if(arr.length<=1){ return arr; } var num = Math.floor(arr.length/2); var numV ...
- webform 简单控件
html中12个表单元素添加runat="server"后称为控件 Lable 编译之后是 <span></span> 属性:CssClass 编译成 c ...
- JVM内存区域异常分析
在Java虚拟机规范描述中,除程序计数器外,其他几个运行时区域都有可能发生OutOfMemoryError异常.接下来将对各区域分别进行分析介绍,内容包括触发各区域OutOfMemoryError异常 ...
- Oracle数据库坏块的恢复
模拟数据块坏块: 对于发生数据块不一致的数据块,如果当前数据库有备份且处于归档模式,那么就可以利用rman工具数据块恢复功能 对数据块进行恢复,这种方法最简单有效,而且可以在数据文件在线时进行,不会发 ...