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.本文会讲一下不 ...
随机推荐
- Struts2 回顾总结
1.第一个Struts2入门案例 1.找jar包 Struts2-core xwork-core ognl javasist freemarker commons-lang commons-io co ...
- 手动编译安装docker环境，以及偶尔出现的bug
总结安装过程如下: 前提:安装git,go,make, docker(docker中编译docker) git clone https://git@github.com/docker/docker c ...
- MYSQL trigger 个人记录
同学要写个trigger,稍微帮他研究了下 以下主要是个人猜想理解的 主要讲update 我们在创建trigger时,数据库会对创建了trigger的表进行事件监听. 当表中的一条记录发生update ...
- 如何预览将要上传的图片-使用H5的FileAPI
这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
- 将一个Asp.Net网站改为MVC
背景: 网站已经开发的一部分 主要是Web服务和API 现在要做一些给人看的页面 转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/add-mvc-in-w ...
- Leetcode Construct Binary Tree from Inorder and Postorder Traversal
Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- 我的jQuery源码读后感
(function(window, undefined) { // 构造jQuery对象 var jQuery = (function() { var jQuery = function(select ...
- aps.net cored 新概念
Tag Helpers The EnvironmentTagHelper can be used to include different scripts in your views (for exa ...
- docker 配置文件引发的问题
好久没有配置 vmware / harbor 了,突然间来了兴趣,结果让我失望了,登陆反复的被refused; 这个是配置文件地址:https://github.com/vmware/harbor/b ...
- *HDU3172 并查集
Virtual Friends Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...