游戏中有三个对象:地图(map),食物(food),蛇(snack)
1.先设计地图,一个简单的div;
2.设计蛇的属性:宽,高,方向,状态(有多少节),方法:显示,跑;
3.设计食物的属性:宽,高;
4.显示蛇:根据状态向地图里加元素
5.蛇动起来:下一节到前一节的位置,蛇头根据方向变化,删除原来的蛇,新建蛇;当蛇吃到自己的时候,死亡;
6.食物被吃掉,蛇加一节,去掉原来的食物,生产新的食物
7.添加定时器,绑定按键事件;
代码实现如下:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
* 画地图
* */
var map;
var snack;
var food;
var times;
function getMap() {
var instance = null;
function Map() {
this.width = 900;
this.height = 600;
this.bgColor = "#000";
this._map = null;
this.createMap = function () {
if (this._map == null) {
this._map = document.createElement("div");
this._map.style.background = this.bgColor;
this._map.style.position = "relative";
this._map.style.height = this.height + "px";
this._map.style.width = this.width + "px";
document.body.appendChild(this._map);
}
}
}
if (instance == null) {
//实例化
instance = new Map();
}
return instance;
}
function getSnack() {
var instance = null;
function Snack() {
this.width = 30;
this.height = 30;
this._snack = [[3, 1, "red", null], [2, 1, "yellow", null], [1, 1, "yellow", null]];
this.direct = "right";
this.createSnack = function () {
for (var i = 0; i < this._snack.length; i++) {
if (this._snack[i][3] == null) {
this._snack[i][3] = document.createElement("div");
this._snack[i][3].style.width = this.width + "px";
this._snack[i][3].style.height = this.height + "px";
this._snack[i][3].style.position = "absolute";
this._snack[i][3].style.background = this._snack[i][2];
map._map.appendChild(this._snack[i][3]);
}
this._snack[i][3].style.left = this._snack[i][0] * this.width + "px";
this._snack[i][3].style.top = this._snack[i][1] * this.height + "px";
}
}
this.snackMove = function () {
//属性传递
var len = this._snack.length - 1;
for (var i = len; i > 0; i--) {
this._snack[i][0] = this._snack[i - 1][0];
this._snack[i][1] = this._snack[i - 1][1];
}
//蛇头移动 方向
switch (this.direct) {
case "right":
this._snack[0][0] += 1;
break;
case "left":
this._snack[0][0] -= 1;
break;
case "up":
this._snack[0][1] -= 1;
break;
case "down":
this._snack[0][1] += 1;
break;
}
//判断蛇有没有吃到食物
if (this._snack[0][0] == food.x && this._snack[0][1] == food.y) {
food.createfood();
this._snack.push([
this._snack[this._snack.length - 1][0],
this._snack[this._snack.length - 1][1],
"yellow",
null
]);
}
//判断蛇穿墙
if (this._snack[0][0] >= 30) {
this._snack[0][0] = 0;
}
if (this._snack[0][0] < 0) {
this._snack[0][0] = 29;
}
if (this._snack[0][1] >= 20) {
this._snack[0][1] = 0;
}
if (this._snack[0][1] < 0) {
this._snack[0][1] = 19;
}
//撞自己撞死
for (var i = 1; i < this._snack.length; i++) {
if (this._snack[0][0] == this._snack[i][0] && this._snack[0][1] == this._snack[i][1]) {
clearInterval(times);
alert("GAME OVER!");
return;
}
}
this.createSnack();
}
}
if (instance == null) {
instance = new Snack();
}
return instance;
}
function getFood() {
var instance = null;
function food() {
this.width = 30;
this.height = 30;
this.bgcolor = "green";
this._food = null;
this.x;
this.y;
this.createfood = function () {
this.x = Math.floor(Math.random() * 30);
this.y = Math.floor(Math.random() * 20);
if (this._food == null) {
this._food = document.createElement("div");
this._food.style.position = "absolute";
this._food.style.width = this.width + "px";
this._food.style.height = this.height + "px";
this._food.style.background = this.bgcolor;
map._map.appendChild(this._food);
}
this._food.style.left = this.x * this.width + "px";
this._food.style.top = this.y * this.height + "px";
}
}
if (instance == null) {
instance = new food();
}
return instance;
}
window.onload = function () {
map = getMap();
map.createMap();
snack = getSnack();
snack.createSnack();
food = getFood();
food.createfood();
times = setInterval(function () {
snack.snackMove();
}, 200);
//按键
document.body.onkeypress = function (e) {
switch (e.key) {
case "w":
if (snack.direct != "down") {
snack.direct = "up";
}
break;
case "a":
if (snack.direct != "right") {
snack.direct = "left";
}
break;
case "d":
if (snack.direct != "left") {
snack.direct = "right";
}
break;
case "s":
if (snack.direct != "up") {
snack.direct = "down";
}
break;
}
}
}
</script>
</body>
</html>