近来在学习JS进阶,便学习着做个网页版贪吃蛇项目。
- index.html
<!DOCTYPEtml
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="map"></div>
<script src="js/tools.js"></script>
<script src="js/food.js"></script>
<script src="js/snake.js"></script>
<script src="js/game.js"></script>
</body>
</html>
- style.css
#map{
width: 800px;
height: 600px;
background-color: lightgray;
position: relative;
}
- 该项目需要随机生成食物的位置,故先准备好相关函数
tools.js
(function () {
var Tools = {
getRandom:function (min,max) {
return Math.floor(Math.random()*(max - min + 1)) + min;
}
}
window.Tools = Tools;
})()
- 对食物的相关操作
food.js
(function () {
var that;
function Game(map) {
this.food = new Food();
this.snake = new Snake();
this.map = map;
that = this;
}
Game.prototype.start = function () {
//渲染蛇和食物
this.food.render(map);
this.snake.render(map);
//开始游戏
//蛇移动
runSnake();
//键盘控制蛇移动
bindKey();
//蛇吃到食物,在移动的时候吃到食物,所以在移动方法中写
}
function runSnake() {
var timerId = setInterval(function () {
//定时器的this指的是window,所以需要借助一个that
that.snake.move(that.food,that.map);
that.snake.render(that.map);
var headX = that.snake.body[0].x;
var headY = that.snake.body[0].y;
var maxX = that.map.offsetWidth / that.snake.width;
var maxY = that.map.offsetHeight / that.snake.height;
if(headX < 0 || headX >= maxX) {
alert('Game Over');
clearInterval(timerId);
}
if(headY < 0 || headY >= maxY) {
alert('Game Over');
clearInterval(timerId);
}
},150)
}
function bindKey(){
document.addEventListener('keydown',function (e) {
switch (e.keyCode) {
case 37:
that.snake.direction = 'left';
break;
case 38:
that.snake.direction = 'bottom';
break;
case 39:
that.snake.direction = 'right';
break;
case 40:
that.snake.direction = 'top';
break;
}
})
}
window.Game = Game;
}) ()
/*
var map = document.getElementById('map');
var game = new Game(map);
game.start();*/
- 对蛇的相关操作
snake.js
(function () {
var position = 'absolute';
var element = [];
function Snake(e) {
e = e || {};
this.width = e.width || 20;
this.height = e.height || 20;
this.direction = e.direction || 'right';
//蛇身
this.body = [
{x: 3, y: 2, color: 'red'},
{x: 2, y: 2, color: 'blue'},
{x: 1, y: 2, color: 'blue'}
];
}
Snake.prototype.render = function (map) {
for(var i = 0, len = this.body.length; i < len; i ++) {
var o = this.body[i];
var div = document.createElement('div');
map.appendChild(div);
element.push(div);
div.style.position = position;
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = o.x * this.width + 'px';
div.style.top = o.y * this.height + 'px';
div.style.backgroundColor = o.color;
}
}
Snake.prototype.move = function(food,map) {
//删掉前一次的蛇
remove();
//蛇身的移动位置
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;
}
//蛇头的移动方向
var head = this.body[0];
switch (this.direction) {
case 'right':
head.x += 1;
break;
case 'left':
head.x -= 1;
break;
case 'top':
head.y += 1;
break;
case 'bottom':
head.y -= 1;
break;
}
//判断是否吃到食物(食物座标与蛇头座标是否相同)
var headX = head.x * this.width;
var headY = head.y * this.height;
if (headX === food.x && headY === food.y) {
//蛇增加一节
var last = this.body[this.body.length - 1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
})
//食物消失再随机生成
food.render(map);
}
}
function remove() {
for(var i = element.length - 1; i >= 0; i--){
//删除div
element[i].parentNode.removeChild(element[i]);
//删除数组中的元素
element.splice(i,1);
}
}
window.Snake = Snake;
})()
//调用
/*var map = document.getElementById('map');
var snake = new Snake();
snake.render(map);*/
/*
snake.move();
snake.render(map);
snake.move();
snake.render(map);
snake.move();
snake.render(map);
snake.move();
snake.render(map);*/
- 游戏操作角度,实现对食物和蛇的同时操作
game.js(
function () {
var that;
function Game(map) {
this.food = new Food();
this.snake = new Snake();
this.map = map;
that = this;
}
Game.prototype.start = function () {
//渲染蛇和食物
this.food.render(map);
this.snake.render(map);
//开始游戏
//蛇移动
runSnake();
//键盘控制蛇移动
bindKey();
//蛇吃到食物,在移动的时候吃到食物,所以在移动方法中写
}
function runSnake() {
var timerId = setInterval(function () {
//定时器的this指的是window,所以需要借助一个that
that.snake.move(that.food,that.map);
that.snake.render(that.map);
var headX = that.snake.body[0].x;
var headY = that.snake.body[0].y;
var maxX = that.map.offsetWidth / that.snake.width;
var maxY = that.map.offsetHeight / that.snake.height;
if(headX < 0 || headX >= maxX) {
alert('Game Over');
clearInterval(timerId);
}
if(headY < 0 || headY >= maxY) {
alert('Game Over');
clearInterval(timerId);
}
},150)
}
function bindKey(){
document.addEventListener('keydown',function (e) {
switch (e.keyCode) {
case 37:
that.snake.direction = 'left';
break;
case 38:
that.snake.direction = 'bottom';
break;
case 39:
that.snake.direction = 'right';
break;
case 40:
that.snake.direction = 'top';
break;
}
})
}
window.Game = Game;
}) ()
/*
var map = document.getElementById('map');
var game = new Game(map);
game.start();*/
- 实现整体操作
main.js
(function () {
var map = document.getElementById('map');
var game = new Game(map);
game.start();
})()
代码已经整理完,后期还可以继续压缩完善。