zhaoyingbo/static_proj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update snake

Browse Source
This commit is contained in:
RainSun 2021-05-22 11:03:41 +08:00
parent 2ad6fab7b7
commit c29da285d3
2 changed files with 374 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
snake/button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

374
snake/snake.html Normal file
View File

@ -0,0 +1,374 @@
<!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>宁宁的新玩具</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) {
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('https://lacus.site/snake/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.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()
// let utils = new Utils()
// // function Map(width, height)
// let map = new Map(2)
// map.init()
// // function Snake(map, time, width, height)
// let snake = new Snake(map, 200,2)
// // function Food(map, width, height)
// let food = new Food(map,2)
// snake.init(food, utils)
// if(utils.isM() == true) {
// let bar = new Bar(map)
// bar.init(utils,snake)
// }
// snake.run(food, utils)
}
</script>
</head>
<body>
</body>
</html>