361 lines
14 KiB
HTML
361 lines
14 KiB
HTML
<!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> |