用Phaser.js制作贪吃蛇游戏
1、首先到 github上 下载Phaser.js的文件库。
2、用笔记本或者Dreamweaver，新建一个index.html文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Snake</title>
<script src="assets/js/phaser.min.js"></script>
<script src="assets/js/menu.js"></script>
<script src="assets/js/game.js"></script>
<script src="assets/js/game_over.js"></script>
<script src="assets/js/main.js"></script>
</head>
<body>
</body>
</html>
使得你的文件目录结构如下图
3、在main.js里设置游戏对象
var game;//创建一个新游戏界面为600px的宽和高大450像素：
game = new Phaser.Game(600, 450, Phaser.AUTO, '');
//第一个参数是我们的状态将被调用。
//第二个参数是包含状态功能
game.state.add('Menu', Menu);
game.state.add('Game', Game);
game.state.start('Menu');
game.state.add('Game_Over', Game_Over);
在menu.js里设置Game_Over等状态
var Menu = {
preload : function() {
game.load.image('menu', './assets/images/menu.png');
//加载图片是必需的，自己PS制作一个开始菜单的图片
}, create: function () {
this.add.button(0, 0, 'menu', this.startGame, this);
//添加一个你的游戏，这里将是游戏的标志
} ，startGame: function () {
this.state.start('Game');
//将状态更改为实际游戏。
}
};
在game.js绘制蛇
var snake, apple, squareSize, score, speed,updateDelay, direction, new_direction,addNew, cursors, scoreTextValue, speedTextValue,textStyle_Key, textStyle_Value;
var Game = {
preload : function() {
game.load.image('snake', './assets/images/snake.png');
//插入蛇的图片
game.load.image('apple', './assets/images/apple.png');
//插入苹果的图片
},
create : function() {
snake = [];
apple = {};
squareSize = 15;//一个方块为15x15像素
score = 0;
speed = 0;
updateDelay = 0;
direction = 'right';
//游戏开始方向向右
new_direction = null;
addNew = false;
cursors = game.input.keyboard.createCursorKeys();
//游戏由小键盘上下左右控制
game.stage.backgroundColor = '#061f27';
//设置游戏背景颜色
for(var i = 0; i < 10; i++){
snake[i] = game.add.sprite(150+i*squareSize, 150, 'snake');
}
this.generateApple();
//定义第一个苹果
textStyle_Key = { font: "bold 14px sans-serif", fill: "#46c0f9", align: "center" };
textStyle_Value = { font: "bold 18px sans-serif", fill: "#fff", align: "center" };
game.add.text(30, 20, "SCORE", textStyle_Key);
scoreTextValue = game.add.text(90, 18, score.toString(), textStyle_Value);
game.add.text(500, 20, "SPEED", textStyle_Key);
speedTextValue = game.add.text(558, 18, speed.toString(), textStyle_Value);
},update: function() {
//左右上下控制定义
if (cursors.right.isDown && direction!='left')
{ new_direction = 'right'; }
else if (cursors.left.isDown && direction!='right')
{ new_direction = 'left'; }
else if (cursors.up.isDown && direction!='down')
{ new_direction = 'up'; }
else if (cursors.down.isDown && direction!='up')
{ new_direction = 'down'; }
speed = Math.min(10, Math.floor(score/5));
speedTextValue.text = '' + speed;
//每吃10个苹果，速度+1
updateDelay++;
if (updateDelay % (10 - speed) == 0) {
var firstCell = snake[snake.length - 1],
lastCell = snake.shift(),
oldLastCellx = lastCell.x,
oldLastCelly = lastCell.y;
if(new_direction){
direction = new_direction;
new_direction = null;
}
if(direction == 'right'){
lastCell.x = firstCell.x + 15;
lastCell.y = firstCell.y;
}
else if(direction == 'left'){
lastCell.x = firstCell.x - 15;
lastCell.y = firstCell.y;
}
else if(direction == 'up'){
lastCell.x = firstCell.x;
lastCell.y = firstCell.y - 15;
}
else if(direction == 'down'){
lastCell.x = firstCell.x;
lastCell.y = firstCell.y + 15;
}
snake.push(lastCell);
firstCell = lastCell;
}
if(addNew){
snake.unshift(game.add.sprite(oldLastCellx, oldLastCelly, 'snake')); addNew = false;
}
this.appleCollision();
this.selfCollision(firstCell);
this.wallCollision(firstCell);
}
}，
generateApple: function(){
var randomX = Math.floor(Math.random() * 40 ) * squareSize,
//X轴可生成最多39个苹果坐标39*15不超过600像素
randomY = Math.floor(Math.random() * 30 ) * squareSize;
//Y轴可生成最多29个苹果坐标29*15不超过400像素
apple = game.add.sprite(randomX, randomY, 'apple');
//吃掉一个苹果后，生成一个新的
}，
appleCollision: function() {
for(var i = 0; i < snake.length; i++){
if(snake[i].x == apple.x && snake[i].y == apple.y){
addNew = true;
apple.destroy();
this.generateApple();
score++;
scoreTextValue.text = score.toString();
}
}
}，
selfCollision: function(head) {
for(var i = 0; i < snake.length - 1; i++){
if(head.x == snake[i].x && head.y == snake[i].y){
game.state.start('Game_Over');
}
}
}，
wallCollision: function(head) {
if(head.x >= 600 || head.x < 0 || head.y >= 450 || head.y < 0){
game.state.start('Game_Over');
//撞到四周的墙也是游戏结束
}
}
}；
最后是编辑game_over.js
var Game_Over = {
preload : function() {
game.load.image('gameover', './assets/images/gameover.png');
},
create : function() {
this.add.button(0, 0, 'gameover', this.startGame, this);
game.add.text(235, 350, "LAST SCORE", { font: "bold 16px sans-serif", fill: "#46c0f9", align: "center"});
game.add.text(350, 348, score.toString(), { font: "bold 20px sans-serif", fill: "#fff", align: "center" });
},
startGame: function () {
this.state.start('Game');
}
}；
最后完成的游戏画面如下
资源 下载地址：https://download.csdn.net/download/weixin_42552969/10501218
