181 lines
5.9 KiB
HTML
181 lines
5.9 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>
|
|
* {
|
|
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> |