add snake
This commit is contained in:
parent
4d48ca940d
commit
ec512bea57
@ -2,3 +2,51 @@
|
||||
|
||||
|
||||
|
||||
```js
|
||||
// 整体思想，一个数除一个数就能分成商和余数两部分，用商和余数分别存储x和y的坐标
|
||||
let map_width = 400
|
||||
let map_height = 400
|
||||
let ele_width = 20
|
||||
let ele_height = 20
|
||||
|
||||
// 随机生成坐标,以x坐标为基准， ~~在此处相当于parseInt
|
||||
// 横向能放几个格子
|
||||
let x_unit = map_width / ele_width
|
||||
// 纵向能放几个格子
|
||||
let y_unit = map_height / ele_height
|
||||
// 生成x坐标，也就是余数 [0, x_unit)
|
||||
ele_seat_x = ~~(Math.random() * x_unit)
|
||||
// 生成y坐标，也就是商 [0, y_unit) 被除数就是 x_unit 就放大至 [0, y_unit * x_unit)
|
||||
ele_seat_y = ~~(Math.random() * y_unit) * x_unit
|
||||
// ele_seat 就是完整的坐标，[0, y_unit * x_unit - 1)
|
||||
ele_seat = ele_seat_x + ele_seat_y
|
||||
|
||||
// 逆向解析成单独的 x坐标（像素）和 y坐标（像素）
|
||||
let x = ele_seat % x_unit * ele_width
|
||||
let y = ~~(ele_seat / x_unit) * ele_height
|
||||
|
||||
// 正向生成一个坐标，上边那一大堆其实都是分析hhhh
|
||||
let seat = ~~(Math.random() * y_unit * x_unit)
|
||||
|
||||
// 这样生成的坐标进行位置改变的时候也很简单
|
||||
// 上下 -+ x_unit 左右 -+ 1
|
||||
|
||||
// 这样判断会不会和自身相撞只需要进行蛇身的Array.indexOf(新蛇头坐标)看看是不是得-1就ok
|
||||
// 这样把蛇身图片和蛇的坐标分来为两个数组进行维护超级香
|
||||
|
||||
// 判断撞墙
|
||||
// 上墙壁 seat < 0
|
||||
// 下墙壁 seat >= y_unit * x_unit
|
||||
// 左墙壁 方向向左 且 计算蛇头位置 seat % x_unit == x_unit - 1
|
||||
// 右墙壁 方向向右 且 计算蛇头位置 seat % x_unit == 0
|
||||
// 蛇身体坐标数组
|
||||
let snake = [1, 0]
|
||||
// 方向
|
||||
let direction = 1 //1表示向右，-1表示向左，20表示向下，-20表示向上
|
||||
// 蛇头下一步位置，顺手放进数组
|
||||
snake.unshift(seat = snake[0] + direction);
|
||||
// 判断撞到自己或者撞到墙壁
|
||||
if(snake.indexOf(seat, 1) > 0 || seat < 0 || seat > y_unit * x_unit || direction == 1 && seat % x_unit == 0 || direction == -1 && seat % x_unit == x_unit - 1) {
|
||||
// 游戏结束的系列操作
|
||||
}
|
||||
```
|
||||
BIN
20191201/button.png
Normal file
BIN
20191201/button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
361
20191201/index.html
Normal file
361
20191201/index.html
Normal file
@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
(function () {
|
||||
// 定义地图构造函数
|
||||
function Map(type, width, height) {
|
||||
this.width = width || document.body.clientWidth
|
||||
this.height = height || window.innerHeight
|
||||
this.ele = document.createElement('div')
|
||||
this.type = type || 1
|
||||
}
|
||||
Map.prototype.init = function () {
|
||||
console.log('1111')
|
||||
document.body.innerHTML = ""
|
||||
this.ele.style.height = this.height + 'px'
|
||||
this.ele.style.width = this.width + 'px'
|
||||
this.ele.style.position = 'relative'
|
||||
switch (this.type) {
|
||||
case 1: this.ele.style.background = '#839d80'; break
|
||||
case 2: this.ele.style.background = 'black'; break
|
||||
case 3: this.ele.style.background = 'black'; break
|
||||
}
|
||||
document.body.appendChild(this.ele)
|
||||
}
|
||||
window.Map = Map
|
||||
}());
|
||||
|
||||
(function () {
|
||||
//定义小蛇
|
||||
function Snake(map, time, type, width, height) {
|
||||
this.width = width || 20
|
||||
this.height = height || 20
|
||||
this.seat = [2, 1, 0]
|
||||
this.body = []
|
||||
this.color = []
|
||||
this.direction = 1
|
||||
this.x_unit = ~~(map.width / this.width)
|
||||
this.y_unit = ~~(map.height / this.height)
|
||||
this.parent = map.ele
|
||||
this.timer = null
|
||||
this.time = time || 200
|
||||
this.type = type || 1
|
||||
}
|
||||
Snake.prototype.init = function (food, utils) {
|
||||
for (let i in this.seat) {
|
||||
let color
|
||||
switch (this.type) {
|
||||
case 1: color = color = '#141a18'; break
|
||||
case 2: color = utils.color16(); break
|
||||
case 3: color = utils.color16(); break
|
||||
}
|
||||
let ele = utils.createEle(this, this.seat[i], color, this.type)
|
||||
utils.addEle(ele, this.parent)
|
||||
this.body.push(ele)
|
||||
this.color.push(color)
|
||||
food.init(this.seat, utils)
|
||||
}
|
||||
document.onkeydown = function (evt) {
|
||||
this.direction = this.seat[1] - this.seat[0] == (n = [-1, -this.x_unit, 1, this.x_unit][(evt || event).keyCode - 37] || this.direction) ? this.direction : n;
|
||||
}.bind(this)
|
||||
}
|
||||
Snake.prototype.run = function (food, utils) {
|
||||
this.timer = setInterval(function () {
|
||||
this.seat.unshift(new_seat = this.seat[0] + this.direction)
|
||||
if (this.seat.indexOf(new_seat, 1) > 0 || new_seat < 0 || new_seat > this.y_unit * this.x_unit || this.direction == 1 && new_seat % this.x_unit == 0 || this.direction == -1 && new_seat % this.x_unit == this.x_unit - 1) {
|
||||
// if (this.seat.indexOf(new_seat, 1) > 0 || new_seat < 0 || new_seat > this.y_unit * this.x_unit) {
|
||||
clearInterval(this.timer)
|
||||
alert('Game Over')
|
||||
let home_page = new HomePage()
|
||||
home_page.init()
|
||||
return
|
||||
}
|
||||
for (let i in this.body) {
|
||||
utils.delEle(this.body[i])
|
||||
}
|
||||
this.body = []
|
||||
if (new_seat !== food.seat)
|
||||
// 没吃到食物
|
||||
this.seat.pop()
|
||||
else {
|
||||
// 吃到食物
|
||||
switch (this.type) {
|
||||
case 1: this.color.push('#141a18'); break
|
||||
case 2: this.color.push(utils.color16()); break
|
||||
case 3: this.color.push(utils.color16()); break
|
||||
}
|
||||
food.init(this.seat, utils)
|
||||
}
|
||||
for (let i in this.seat) {
|
||||
let ele = utils.createEle(this, this.seat[i], this.color[i], this.type)
|
||||
utils.addEle(ele, this.parent)
|
||||
this.body.push(ele)
|
||||
}
|
||||
}.bind(this), this.time)
|
||||
}
|
||||
window.Snake = Snake
|
||||
}());
|
||||
|
||||
// 食物------------------------------------------
|
||||
(function () {
|
||||
function Food(map, type, width, height) {
|
||||
this.seat = null
|
||||
this.ele = null
|
||||
this.width = width || 20
|
||||
this.height = height || 20
|
||||
this.x_unit = ~~(map.width / this.width)
|
||||
this.y_unit = ~~(map.height / this.height)
|
||||
this.parent = map.ele
|
||||
this.type = type || 1
|
||||
}
|
||||
Food.prototype.init = function (seat, utils) {
|
||||
if (this.ele) utils.delEle(this.ele)
|
||||
do
|
||||
this.seat = ~~(Math.random() * this.y_unit * this.x_unit)
|
||||
while (seat.indexOf(this.seat) !== -1)
|
||||
switch (this.type) {
|
||||
case 1: this.ele = utils.createEle(this, this.seat, '#141a18', this.type); break
|
||||
case 2: this.ele = utils.createEle(this, this.seat, 'red', this.type); break
|
||||
case 3: this.ele = utils.createEle(this, this.seat, 'red', this.type); break
|
||||
}
|
||||
utils.addEle(this.ele, this.parent)
|
||||
}
|
||||
window.Food = Food
|
||||
}());
|
||||
|
||||
// 工具函数 --------------------------------------
|
||||
(function () {
|
||||
function Utils() { }
|
||||
// 创建16进制随机颜色
|
||||
Utils.prototype.color16 = () => {
|
||||
let r = ~~(Math.random() * 70 + 186);
|
||||
let g = ~~(Math.random() * 70 + 186);
|
||||
let b = ~~(Math.random() * 70 + 186);
|
||||
let color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
|
||||
return color;
|
||||
}
|
||||
// 创建身体对象
|
||||
Utils.prototype.createEle = function (that, seat, color, type) {
|
||||
let ele = document.createElement('div')
|
||||
// 设置ele
|
||||
ele.style.width = that.width - 2 + 'px'
|
||||
ele.style.height = that.height - 2 + 'px'
|
||||
ele.style.margin = '1px'
|
||||
ele.style.position = 'absolute'
|
||||
ele.style.left = seat % that.x_unit * that.width + 'px'
|
||||
ele.style.top = ~~(seat / that.x_unit) * that.height + 'px'
|
||||
switch (type) {
|
||||
case 1: {
|
||||
// 镂空
|
||||
ele.style.boxSizing = 'border-box'
|
||||
ele.style.border = `1px ${color} solid`
|
||||
// inner放进镂空块
|
||||
let inner = document.createElement('div')
|
||||
inner.style.height = that.height - 8 + 'px'
|
||||
inner.style.width = that.width - 8 + 'px'
|
||||
inner.style.background = color
|
||||
inner.style.margin = '2px'
|
||||
ele.appendChild(inner)
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
// 镂空
|
||||
ele.style.boxSizing = 'border-box'
|
||||
ele.style.border = `1px ${color} solid`
|
||||
// inner放进镂空块
|
||||
let inner = document.createElement('div')
|
||||
inner.style.height = that.height - 8 + 'px'
|
||||
inner.style.width = that.width - 8 + 'px'
|
||||
inner.style.background = color
|
||||
inner.style.margin = '2px'
|
||||
ele.appendChild(inner)
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
ele.style.background = color
|
||||
}
|
||||
}
|
||||
return ele
|
||||
}
|
||||
// 添加对象
|
||||
Utils.prototype.addEle = function (inner, parent) {
|
||||
parent.appendChild(inner)
|
||||
}
|
||||
// 删除对象
|
||||
Utils.prototype.delEle = function (inner) {
|
||||
inner.parentNode.removeChild(inner)
|
||||
}
|
||||
// 判断是不是手机
|
||||
Utils.prototype.isM = function () {
|
||||
let userAgentInfo = navigator.userAgent;
|
||||
let Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
|
||||
let flag = false;
|
||||
for (let v = 0; v < Agents.length; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
|
||||
}
|
||||
return flag
|
||||
}
|
||||
window.Utils = Utils
|
||||
}());
|
||||
|
||||
// 手机摇杆-------------------------------------
|
||||
(function () {
|
||||
function Bar(map) {
|
||||
this.ele = document.createElement('div')
|
||||
this.parent = map.ele
|
||||
}
|
||||
Bar.prototype.init = function (utils, snake) {
|
||||
let top = document.createElement('div')
|
||||
let bottom = document.createElement('div')
|
||||
let left = document.createElement('div')
|
||||
let right = document.createElement('div')
|
||||
let width = ~~(this.parent.offsetWidth * 0.4)
|
||||
this.ele.style.width = width + 'px'
|
||||
this.ele.style.height = width + 'px'
|
||||
this.ele.style.position = 'absolute'
|
||||
this.ele.style.bottom = '20px'
|
||||
this.ele.style.left = '50%'
|
||||
this.ele.style.marginLeft = `-${~~(width / 2)}px`
|
||||
this.ele.style.background = "url('./button.png')"
|
||||
this.ele.style.backgroundSize = '100% 100%'
|
||||
this.ele.style.overflow = 'hidden'
|
||||
this.ele.style.borderRadius = '50%'
|
||||
this.ele.style.opacity = '0.5'
|
||||
let s_width = ~~(width / Math.SQRT2);
|
||||
[top.style.width, top.style.height, bottom.style.width, bottom.style.height, left.style.width, left.style.height, right.style.width, right.style.height] = Array.from({ length: 8 }, () => s_width + 'px');
|
||||
[top.style.position, bottom.style.position, left.style.position, right.style.position] = Array.from({ length: 4 }, () => 'absolute');
|
||||
[top.style.transform, bottom.style.transform, left.style.transform, right.style.transform] = Array.from({ length: 4 }, () => 'rotate(45deg)');
|
||||
[top.style.top, bottom.style.bottom, left.style.left, right.style.right] = Array.from({ length: 4 }, () => `-${~~(s_width / 2)}px`);
|
||||
[top.style.left, bottom.style.left, left.style.top, right.style.top] = Array.from({ length: 4 }, () => `${~~((width - s_width) / 2)}px`);
|
||||
top.onclick = () => {
|
||||
snake.direction = snake.seat[1] - snake.seat[0] == -snake.x_unit ? snake.direction : -snake.x_unit;
|
||||
}
|
||||
bottom.onclick = () => {
|
||||
snake.direction = snake.seat[1] - snake.seat[0] == snake.x_unit ? snake.direction : snake.x_unit;
|
||||
}
|
||||
left.onclick = () => {
|
||||
snake.direction = snake.seat[1] - snake.seat[0] == -1 ? snake.direction : -1;
|
||||
}
|
||||
right.onclick = () => {
|
||||
snake.direction = snake.seat[1] - snake.seat[0] == 1 ? snake.direction : 1;
|
||||
}
|
||||
utils.addEle(top, this.ele)
|
||||
utils.addEle(left, this.ele)
|
||||
utils.addEle(right, this.ele)
|
||||
utils.addEle(bottom, this.ele)
|
||||
utils.addEle(this.ele, this.parent)
|
||||
}
|
||||
window.Bar = Bar
|
||||
}());
|
||||
|
||||
// 首页 -------------------------------------
|
||||
(function () {
|
||||
function HomePage(type, time) {
|
||||
this.type = type || ~~(Math.random()*3+1)
|
||||
// this.time = time || ~~(Math.random()*300+200)
|
||||
this.time = time || ~~(100)
|
||||
this.seat = []
|
||||
}
|
||||
HomePage.prototype.init = function () {
|
||||
let utils = new Utils()
|
||||
if (utils.isM() == true) {
|
||||
let map = new Map(this.type)
|
||||
map.init()
|
||||
let snake = new Snake(map, this.time, this.type)
|
||||
let food = new Food(map, this.type)
|
||||
snake.init(food, utils)
|
||||
if (utils.isM() == true) {
|
||||
let bar = new Bar(map)
|
||||
bar.init(utils, snake)
|
||||
}
|
||||
snake.run(food, utils)
|
||||
return
|
||||
}
|
||||
let map = new Map(this.type)
|
||||
map.init()
|
||||
let snake = new Snake(map, this.time, this.type)
|
||||
let x_unit = snake.x_unit
|
||||
let s = [2, 3, 4, 1 + x_unit, 1 + x_unit * 2, 2 + x_unit * 3, 3 + x_unit * 3, 4 + x_unit * 4, 4 + x_unit * 5, 3 + x_unit * 6, 2 + x_unit * 6, 1 + x_unit * 6]
|
||||
let n = [6, 6 + x_unit, 6 + x_unit * 2, 6 + x_unit * 3, 6 + x_unit * 4, 6 + x_unit * 5, 6 + x_unit * 6, 7 + x_unit, 8 + x_unit * 2, 9, 9 + x_unit, 9 + x_unit * 2, 9 + x_unit * 3, 9 + x_unit * 4, 9 + x_unit * 5, 9 + x_unit * 6]
|
||||
let a = [11 + x_unit, 11 + x_unit * 2, 11 + x_unit * 3, 11 + x_unit * 4, 11 + x_unit * 5, 11 + x_unit * 6, 12, 12 + x_unit * 3, 13, 13 + x_unit * 3, 14 + x_unit, 14 + x_unit * 2, 14 + x_unit * 3, 14 + x_unit * 4, 14 + x_unit * 5, 14 + x_unit * 6]
|
||||
let k = [16, 16 + x_unit, 16 + x_unit * 2, 16 + x_unit * 3, 16 + x_unit * 4, 16 + x_unit * 5, 16 + x_unit * 6, 17 + x_unit * 2, 17 + x_unit * 4, 18 + x_unit * 1, 18 + x_unit * 5, 19, 19 + x_unit * 6]
|
||||
let e = [21 + x_unit, 21 + x_unit * 2, 21 + x_unit * 3, 21 + x_unit * 4, 21 + x_unit * 5, 22, 23, 24, 22 + x_unit * 3, 23 + x_unit * 3, 24 + x_unit * 3, 22 + x_unit * 6, 23 + x_unit * 6, 24 + x_unit * 6]
|
||||
let arr = s.concat(n, a, k, e)
|
||||
for (let i in arr) {
|
||||
let color
|
||||
switch (this.type) {
|
||||
case 1: color = color = '#141a18'; break
|
||||
case 2: color = utils.color16(); break
|
||||
case 3: color = utils.color16(); break
|
||||
}
|
||||
let ele = utils.createEle(snake, arr[i], color, this.type)
|
||||
utils.addEle(ele, map.ele)
|
||||
}
|
||||
let start = createStart(utils, map, snake, this.type)
|
||||
start.onclick = function () {
|
||||
let map = new Map(this.type)
|
||||
map.init()
|
||||
let snake = new Snake(map, this.time, this.type)
|
||||
let food = new Food(map, this.type)
|
||||
snake.init(food, utils)
|
||||
if (utils.isM() == true) {
|
||||
let bar = new Bar(map)
|
||||
bar.init(utils, snake)
|
||||
}
|
||||
snake.run(food, utils)
|
||||
}.bind(this)
|
||||
}
|
||||
let createStart = (utils, map, snake, type) => {
|
||||
let start = document.createElement('div')
|
||||
start.innerText = '开始游戏'
|
||||
start.style.width = snake.width * 4 + 'px'
|
||||
start.style.height = snake.height + 'px'
|
||||
start.style.textAlign = 'center'
|
||||
start.style.lineHeight = snake.height + 'px'
|
||||
start.style.position = 'absolute'
|
||||
let seat = 1 + snake.x_unit * 10
|
||||
start.style.left = seat % snake.x_unit * snake.width + 'px'
|
||||
start.style.top = ~~(seat / snake.x_unit) * snake.height + 'px'
|
||||
start.style.boxSizing = 'border-box'
|
||||
let color
|
||||
if (type == 1) {
|
||||
color = '#141a18'
|
||||
}
|
||||
else {
|
||||
color = utils.color16()
|
||||
}
|
||||
start.style.border = `1px ${color} solid`
|
||||
start.style.color = `${color}`
|
||||
utils.addEle(start, map.ele)
|
||||
return start
|
||||
}
|
||||
window.HomePage = HomePage
|
||||
}());
|
||||
|
||||
|
||||
window.onload = () => {
|
||||
let home_page = new HomePage()
|
||||
home_page.init()
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
71
20191201/test.html
Normal file
71
20191201/test.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.box {
|
||||
background: red;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 300px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.top {
|
||||
background: yellow;
|
||||
height: 283px;
|
||||
width: 283px;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: -142px;
|
||||
left: 59px;
|
||||
}
|
||||
.bottom {
|
||||
background: green;
|
||||
height: 283px;
|
||||
width: 283px;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
bottom: -142px;
|
||||
left: 59px;
|
||||
}
|
||||
.left {
|
||||
background: indigo;
|
||||
height: 283px;
|
||||
width: 283px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
position: absolute;
|
||||
left: -142px;
|
||||
top: 59px;
|
||||
}
|
||||
.right {
|
||||
background: orange;
|
||||
height: 283px;
|
||||
width: 283px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
position: absolute;
|
||||
right: -142px;
|
||||
top: 59px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="top"></div>
|
||||
<div class="bottom"></div>
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
181
20191208/index.html
Normal file
181
20191208/index.html
Normal file
@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// 创建小蛇构造函数
|
||||
(function(){
|
||||
function Snake(map, time, width, height) {
|
||||
this.width = width || 20
|
||||
this.height = height || 20
|
||||
this.parent = map.ele
|
||||
this.body = [2, 1]
|
||||
this.color = []
|
||||
this.eles = []
|
||||
this.direction = 1
|
||||
this.x_unit = ~~(map.width/this.width)
|
||||
this.y_unit = ~~(map.height/this.height)
|
||||
this.timer = null
|
||||
this.time = time || 50
|
||||
}
|
||||
Snake.prototype.init = function(utils) {
|
||||
// 画小蛇
|
||||
for( let i in this.body) {
|
||||
let color = utils.color()
|
||||
let ele = utils.createEle(this.body[i],color,this)
|
||||
utils.addEle(this.parent, ele)
|
||||
this.color.push(color)
|
||||
this.eles.push(ele)
|
||||
}
|
||||
// 绑定点击事件
|
||||
document.onkeydown = function(evt) {
|
||||
this.direction = this.body[1] - this.body[0] == (n = [-1, -this.x_unit, 1, this.x_unit][(evt || event).keyCode - 37] || this.direction) ? this.direction : n;
|
||||
if(evt.keyCode == 13) location.reload()
|
||||
}.bind(this)
|
||||
}
|
||||
Snake.prototype.run = function(utils,food) {
|
||||
// 设置定时函数
|
||||
this.timer = setInterval(function(){
|
||||
// 先把蛇头推进数组
|
||||
this.body.unshift(new_body = this.body[0] + this.direction)
|
||||
// 判断撞墙
|
||||
if (this.body.indexOf(new_body, 1) > 0 || new_body < 0 || new_body > this.y_unit * this.x_unit || this.direction == 1 && new_body % this.x_unit == 0 || this.direction == -1 && new_body % this.x_unit == this.x_unit - 1) {
|
||||
// 撞墙或者撞到自己
|
||||
clearInterval(this.timer)
|
||||
alert('Game Over')
|
||||
return
|
||||
}
|
||||
// 判断有没有吃到苹果
|
||||
if(new_body != food.body) {
|
||||
// 没吃到苹果
|
||||
this.body.pop()
|
||||
} else {
|
||||
// 吃到了苹果
|
||||
food.init(this.body, utils)
|
||||
let color = utils.color()
|
||||
this.color.push(color)
|
||||
}
|
||||
// 删除旧元素
|
||||
for(let i in this.eles) {
|
||||
utils.delEle(this.eles[i])
|
||||
}
|
||||
this.eles = []
|
||||
// 画小蛇
|
||||
for( let i in this.body) {
|
||||
let ele = utils.createEle(this.body[i],this.color[i],this)
|
||||
utils.addEle(this.parent, ele)
|
||||
this.eles.push(ele)
|
||||
}
|
||||
}.bind(this),this.time)
|
||||
}
|
||||
window.Snake = Snake
|
||||
}());
|
||||
|
||||
// 苹果
|
||||
(function(){
|
||||
function Food(map, width, height) {
|
||||
this.width = width || 20
|
||||
this.height = height || 20
|
||||
this.parent = map.ele
|
||||
this.body = null
|
||||
this.x_unit = ~~(map.width / this.width)
|
||||
this.y_unit = ~~(map.height / this.height)
|
||||
this.ele = null
|
||||
}
|
||||
Food.prototype.init = function (body, utils) {
|
||||
if (this.ele) utils.delEle(this.ele)
|
||||
do
|
||||
this.body = ~~(Math.random() * this.y_unit * this.x_unit)
|
||||
while (body.indexOf(this.body) !== -1)
|
||||
this.ele = utils.createEle(this.body, 'red', this)
|
||||
utils.addEle(this.parent,this.ele)
|
||||
}
|
||||
window.Food = Food
|
||||
}());
|
||||
|
||||
// 地图
|
||||
(function () {
|
||||
// 定义地图构造函数
|
||||
function Map(width, height) {
|
||||
this.width = width || document.body.clientWidth
|
||||
this.height = height || window.innerHeight
|
||||
this.ele = document.createElement('div')
|
||||
}
|
||||
Map.prototype.init = function () {
|
||||
document.body.innerHTML = ""
|
||||
this.ele.style.height = this.height + 'px'
|
||||
this.ele.style.width = this.width + 'px'
|
||||
this.ele.style.position = 'relative'
|
||||
this.ele.style.background = 'black'
|
||||
document.body.appendChild(this.ele)
|
||||
}
|
||||
window.Map = Map
|
||||
}());
|
||||
|
||||
// 游戏
|
||||
(function(){
|
||||
function Game() {
|
||||
}
|
||||
Game.prototype.init = function() {
|
||||
let map = new Map()
|
||||
map.init()
|
||||
let snake = new Snake(map)
|
||||
let food = new Food(map)
|
||||
let utils = new Utils()
|
||||
snake.init(utils)
|
||||
food.init(snake.body, utils)
|
||||
snake.run(utils, food)
|
||||
}
|
||||
window.Game = Game
|
||||
}());
|
||||
|
||||
|
||||
// 工具函数
|
||||
(function(){
|
||||
function Utils() {
|
||||
}
|
||||
Utils.prototype.color = function() {
|
||||
let r = ~~(Math.random() * 70 + 186);
|
||||
let g = ~~(Math.random() * 70 + 186);
|
||||
let b = ~~(Math.random() * 70 + 186);
|
||||
let color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
|
||||
return color;
|
||||
}
|
||||
Utils.prototype.addEle = function(parent, ele) {
|
||||
parent.appendChild(ele)
|
||||
}
|
||||
Utils.prototype.createEle = function(body, color, that) {
|
||||
let ele = document.createElement('div')
|
||||
ele.style.position = 'absolute'
|
||||
ele.style.width = that.width - 2 + 'px'
|
||||
ele.style.height = that.height - 2 + 'px'
|
||||
ele.style.margin = '1px'
|
||||
ele.style.left = body % that.x_unit * that.width + 'px'
|
||||
ele.style.top = ~~(body / that.x_unit) * that.height + 'px'
|
||||
ele.style.background = color
|
||||
return ele
|
||||
}
|
||||
Utils.prototype.delEle = function(inner) {
|
||||
inner.parentNode.removeChild(inner)
|
||||
}
|
||||
window.Utils = Utils
|
||||
}());
|
||||
window.onload = function() {
|
||||
let game = new Game()
|
||||
game.init()
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -86,6 +86,10 @@ server {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /api/photo/show/ {
|
||||
alias /data/yiban/backend/upload/;
|
||||
}
|
||||
|
||||
location /api {
|
||||
proxy_pass http://127.0.0.1:8000;
|
||||
}
|
||||
@ -115,6 +119,10 @@ server {
|
||||
index index.html index.htm;
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /api/photo/show/ {
|
||||
alias /data/yiban/backend/upload/;
|
||||
}
|
||||
|
||||
location /api {
|
||||
proxy_pass http://127.0.0.1:8000;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user