148 lines
3.6 KiB
HTML
148 lines
3.6 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;
|
||
}
|
||
.map {
|
||
width: 800px;
|
||
height: 600px;
|
||
background: gray;
|
||
position: relative;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="map">
|
||
|
||
</div>
|
||
|
||
</body>
|
||
<script type="text/javascript">
|
||
// 创建随机数
|
||
(function () {
|
||
// 创建随机数对象
|
||
function Random() {
|
||
|
||
}
|
||
Random.prototype.getRandom = (min, max) => {
|
||
// 0~5整数
|
||
return Math.floor(Math.random() * (max - min) + min)
|
||
}
|
||
window.Random = Random
|
||
}());
|
||
|
||
// 食物对象
|
||
(function(){
|
||
function Food(width, height, color, x, y) {
|
||
this.width = width || 20
|
||
this.height = height || 20
|
||
this.color = color || 'orange'
|
||
this.x = x || 0
|
||
this.y = y || 0
|
||
this.ele = document.createElement('div')
|
||
}
|
||
// 食物初始化
|
||
Food.prototype.init = function(map) {
|
||
// 设置div的样式
|
||
this.ele.style.width = this.width + 'px'
|
||
this.ele.style.height = this.height + 'px'
|
||
this.ele.style.background = this.color
|
||
this.ele.style.position = 'absolute'
|
||
// 设置横纵坐标
|
||
this.render(map)
|
||
// 把小方块放进map中
|
||
map.appendChild(this.ele)
|
||
}
|
||
Food.prototype.render = function(map) {
|
||
remove()
|
||
var random = new Random()
|
||
var maxX = map.offsetWidth / this.width
|
||
var maxY = map.offsetHeight / this.height
|
||
|
||
// 坐标
|
||
this.x = random.getRandom(0, maxX)
|
||
this.y = random.getRandom(0, maxY)
|
||
|
||
this.ele.style.left = this.x * this.width + 'px'
|
||
this.ele.style.top = this.y * this.height + 'px'
|
||
}
|
||
// 创建私有方法
|
||
remove = (ele, eleParent) => {
|
||
eleParent.removeChild(ele)
|
||
}
|
||
window.Food = Food
|
||
}());
|
||
// 小蛇
|
||
(function(){
|
||
// 创建蛇的对象 --- 宽 高 方向
|
||
function Snake(width, height, direction) {
|
||
this.width = width || 20
|
||
this.height = height || 20
|
||
this.direction = direction || 'right'
|
||
// 设置一下蛇的身体 默认就三块
|
||
this.body = [
|
||
{
|
||
x: 3,
|
||
y: 1,
|
||
color: 'red'
|
||
},
|
||
{
|
||
x: 2,
|
||
y: 1,
|
||
color: 'blue'
|
||
},
|
||
{
|
||
x: 1,
|
||
y: 1,
|
||
color: 'blue'
|
||
}
|
||
]
|
||
}
|
||
// 给小蛇初始化
|
||
Snake.prototype.init = function(map) {
|
||
// 创建蛇身体的每一个元素
|
||
// 批量创建蛇身体，每一块都是一个div
|
||
for(var i = 0; i < this.body.length ; i++) {
|
||
// 创建一个div元素
|
||
var div = document.createElement('div')
|
||
// 元素放入map里边
|
||
map.appendChild(div)
|
||
// 设置div 的样式 设置蛇身体的某一个位置额样式
|
||
div.position = 'absolute'
|
||
// 设置蛇的宽和高
|
||
div.style.width = this.width + 'px'
|
||
div.style.height = this.height + 'px'
|
||
// 设置蛇
|
||
div.style.background = this.body[i].color
|
||
div.style.left = this.body[i].x * this.width + 'px'
|
||
div.style.top = this.body[i].y * this.height + 'px'
|
||
|
||
}
|
||
}
|
||
}());
|
||
|
||
if(true) this.body.pop() //没吃到苹果
|
||
var cache = this.body[0]
|
||
this.body[0].color = this.body[1].color
|
||
switch(this.direction){
|
||
case 'right': cache.x++; break
|
||
case 'left': cache.x--; break
|
||
case 'top': cache.y--; break
|
||
case 'bottom': cache.y++; break
|
||
}
|
||
this.body.shift(cache)
|
||
</script>
|
||
|
||
</html>
|
||
|
||
|