今天学习贪吃蛇
代码(优化后的,但还有bug):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#map {
width: 600px;
height: 600px;
background-color: silver;
float: left;
position: relative;
/*overflow: hidden;*/
}
#dv {
width: 200px;
height: 600px;
background: blue;
float: left;
position: relative;
text-align: center;
}
#btn {
position: relative;
top: 20px;
}
.p1 {
margin-top: 34px;
}
li {
list-style: none;
margin-left: -38px;
}
.color {
background-color: red;
}
.dv {
width: 100%;
height: 100px;
color: gold;
}
#box {
width: 800px;
height: 600px;
margin: 10px auto;
position: relative;
}
</style>
</head>
<body>
<div id="box">
<div id="map"></div>
<div id="dv">
<button id="btn">开始游戏</button>
<p class="p1">游戏难度</p>
<ul>
<li class="color">简单</li>
<li>困难</li>
<li>极难</li>
<li>噩梦</li>
<li>地狱</li>
</ul>
<p>分数</p>
<div class="dv" id="fen">0</div>
</div>
</div>
<script>
var num = 500;
//食物
((function () {
var elements = [];
//1.构造函数
function Food(width, height, color, x, y) {
this.width = width || 20;
this.height = height || 20;
this.color = color || "green"
this.x = x || 0;
this.y = y || 0;
}
//2.初始化
Food.prototype.init = function () {
remove();
var box = document.createElement("div");
map.appendChild(box);
box.style.width = this.width + "px";
box.style.height = this.height + "px";
box.style.backgroundColor = this.color;
box.style.position = "absolute";
this.x = Math.floor(Math.random() * (map.offsetWidth / box.offsetWidth)) * box.offsetWidth;
this.y = Math.floor(Math.random() * (map.offsetHeight / box.offsetHeight)) * box.offsetHeight;
box.style.left = this.x + "px";
box.style.top = this.y + "px";
elements.push(box)
}
//3.封装一个删除食物的函数
function remove() {
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];
ele.parentElement.removeChild(ele);
elements.splice(i, 1)
}
}
//把Food暴露给window
window.Food = Food;
})());
//蛇
((function () {
var elemenrs = [];
var fen = 0;
//1.蛇的构造函数
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: "gold"},
{x: 1, y: 1, color: "gold"}
]
}
//2.初始化
Snake.prototype.init = function (map) {
remove();
for (var i = 0; i < this.body.length; i++) {
var box = document.createElement("div")
map.appendChild(box);
box.style.width = this.width + "px";
box.style.height = this.height + "px"
box.style.position = "absolute"
box.style.backgroundColor = this.body[i].color;
box.style.left = this.body[i].x * this.width + "px";
box.style.top = this.body[i].y * this.height + "px";
elemenrs.push(box)
}
}
//3.添加一个让蛇移动的方法--->在地图上移动
Snake.prototype.run = function (map, food) {
for (var i = this.body.length - 1; i > 0; i--) {
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
switch (this.direction) {
case "right":
this.body[0].x += 1;
break;
case "left":
this.body[0].x -= 1;
break;
case "top":
this.body[0].y -= 1;
break;
case "bottom":
this.body[0].y += 1;
break;
}
//最后判断小蛇是否吃到食物, 即判断蛇头的坐标
//获取蛇头的坐标
var snakeHeadX = this.body[0].x * this.width;
var snakeHeadY = this.body[0].y * this.height;
//食物的坐标
var foodX = food.x;
var foodY = food.y;
//判断是否吃到食物
if (snakeHeadX == foodX && snakeHeadY == foodY) {
fen++;
food.init(map)
var list = this.body[this.body.length - 1]
this.body.push(
{
x: list.x,
y: list.y,
color: list.color
}
)
document.getElementById("fen").innerHTML=fen;
}
}
//4.删除小蛇的函数
function remove() {
for (var i = elemenrs.length - 1; i >= 0; i--) {
var ele = elemenrs[i];
ele.parentElement.removeChild(ele)
elemenrs.splice(i, 1)
}
}
window.Snake = Snake;
})());
//游戏对象---> 显示蛇,显示食物,并自动的跑起来
((function () {
//1.游戏的构造函数
function Game() {
this.food = new Food();
this.snake = new Snake();
this.map = document.getElementById("map")
}
//2.初始化游戏对象
Game.prototype.init = function () {
this.food.init(this.map);
this.snake.init(this.map);
this.runSnake(this.map, this.food);
this.keyDown();
}
//3.添加原型方法--->使蛇自动跑起来
Game.prototype.runSnake = function (map, food) {
var timeId = setInterval(function () {
this.snake.run(map, food);
this.snake.init(map, food);
//判断横纵坐标的最大值
var maxX = map.offsetWidth / this.snake.width;
var maxY = map.offsetHeight / this.snake.height;
//获取蛇头的坐标
var snakeHeadX = this.snake.body[0].x;
var snakeHeadY = this.snake.body[0].y;
if (snakeHeadX < 0 || snakeHeadX >= maxX) {
clearInterval(timeId)
alert("游戏结束")
}
if (snakeHeadY < 0 || snakeHeadY >= maxY) {
clearInterval(timeId)
alert("游戏结束")
}
var headX=snakeHeadX*this.snake.width;
var headY=snakeHeadY*this.snake.height;
for (var j=1;j<this.snake.body.length-1;j++){
var bodyX=this.snake.body[j].x*this.snake.width;
var bodyY=this.snake.body[j].y*this.snake.height;
if (headX==bodyX&&headY==bodyY){
clearInterval(timeId);
alert("游戏结束")
}
}
}.bind(this), num)
Game.prototype.keyDown = function () {
document.addEventListener("keydown", function (e) {
// console.log(e.keyCode)
switch (e.keyCode) {
case 37:
this.snake.direction = this.snake.direction=="right"?"right":"left";
break;
case 38:
this.snake.direction = this.snake.direction=="bottom"?"bottom":"top";
break;
case 39:
this.snake.direction = this.snake.direction=="left"?"left":"right";
break;
case 40:
this.snake.direction = this.snake.direction=="top"?"top":"bottom";
break;
}
}.bind(this))
}
}
window.Game = Game;
})());
document.getElementById("btn").onclick = function () {
var game = new Game();
game.init();
}
var lis = document.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
for (var j = 0; j < lis.length; j++) {
lis[j].className = "li";
}
this.className = "li color";
switch (this.innerHTML) {
case "简单":
num = 500;
break;
case "困难":
num = 200;
break;
case "极难":
num = 100;
break;
case "噩梦":
num = 50;
break;
case "地狱":
num = 10;
break;
}
}
}
</script>
</body>
</html>