Phaser.js之简单的跑酷游戏

采用的物理引擎是Phaser.js

官网地址:http://phaser.io/

在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿)

效果展示:

源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone)

1.创建游戏舞台

 1 var config = {
 2     type: Phaser.AUTO,
 3     width: 800,
 4     height: 400,
 5     physics: {
 6         default: 'arcade',
 7         arcade: {
 8             gravity: {
 9                 y: 300
10             },
11             debug: false
12         }
13     },
14     scene: {
15         preload: preload,
16         create: create,
17         update: update
18     }
19 };
20 
21 var game = new Phaser.Game(config); // 创建游戏

2.载入资源

 1 function preload() {
 2     this.load.image('sky', 'assets/sky.png');
 3     this.load.image('ground', 'assets/platform.png');
 4      5      6     this.load.spritesheet('dude', 'assets/dude.png', {
 7         frameWidth: 32,
 8         frameHeight: 48
 9     });
10 }

3.将资源创建到舞台上

 1 var distanceText; // 路程文本
 2 var distance = 0; // 路程
 3 var platforms; // 地面
 4 var player; // 玩家
 5 var enemy; // 敌人
 6 var enemys; // 敌人们
 7 var enemyTimer; // 敌人计时器
 8 var distanceTimer; // 路程计时器
 9 
10 function create() {
11     // 添加画布背景
12     this.add.image(400, 200, 'sky');
13     // 添加分数文本
14     distanceText = this.add.text(16, 16, 'Distance: 0m', {
15         fontSize: '20px',
16         fill: '#000'
17     });
18     // 添加地面
19     platforms = this.physics.add.staticGroup();
20     platforms.create(400, 400, 'ground').setScale(3).refreshBody();
21     // 添加玩家(精灵)
22     player = this.physics.add.sprite(100, 300, 'dude');
23     player.setBounce(0); // 设置阻力
24     player.setCollideWorldBounds(true); // 禁止玩家走出世界
25 
26     // 敌人
27     enemys = this.physics.add.group();
28     enemys.children.iterate(function (child) {
29         child.setCollideWorldBounds(false);
30     });
31     // 动态创建敌人
32     enemyTimer = setInterval(function () {
33         enemy = enemys.create(1000, 300, 'dude');
34         enemy.setTint(getColor());
35         enemy.anims.play('left', true);
36         enemy.setVelocityX(Phaser.Math.Between(-300, -100));
37     }, Phaser.Math.Between(4000, 8000))
38 
39     distanceTimer = setInterval(function () {
40         distance += 1;
41         distanceText.setText('Distance: ' + distance + 'm');
42     }, 1000)
43 
44     this.physics.add.collider(player, platforms); //玩家在地面上
45     this.physics.add.collider(enemys, platforms); //敌人在地面上
46     this.physics.add.collider(player, enemys, hitBomb, null, this);
47 }

4.在创建场景过程中写键盘监听事件

var cursors; // 按键
    // 事件
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', {
            start: 0,
            end: 3
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', {
            start: 5,
            end: 8
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'turn',
        frames: [{
            key: 'dude',
            frame: 4
        }],
        frameRate: 20
    });

    cursors = this.input.keyboard.createCursorKeys();

5.写碰撞函数(当玩家与敌人碰撞的结果)

1 var gameOver = false; // 游戏结束
2 function hitBomb(player, enemys) {
3     this.physics.pause();
4     clearInterval(enemyTimer);
5     clearInterval(distanceTimer);
6     player.setTint(0xff0000);
7     gameOver = true;
8     alert('游戏结束,您跑了' + distance + 'm');
9 }

6.在update函数中写时间的执行(须注意的是此函数每一帧都在执行,1帧≠1秒)

 1 function update() {
 2     if (cursors.up.isDown && player.body.touching.down) {
 3         player.setVelocityY(-220);
 4     } else {
 5         player.anims.play('right', true);
 6     }
 7     if (gameOver) {
 8         player.setVelocityX(0);
 9         player.anims.play('turn');
10         return;
11     }
12 }

这里我给敌人上了颜色的,随机16进制颜色

1 function getColor() {
2     var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
3         return Math.random() - 0.5
4     }).join("").substr(0,6);
5     
6     return "0x" + color;
7 }

整个源码奉上(建议去github上自己clone):

  1 var config = {
  2     type: Phaser.AUTO,
  3     width: 800,
  4     height: 400,
  5     physics: {
  6         default: 'arcade',
  7         arcade: {
  8             gravity: {
  9                 y: 300
 10             },
 11             debug: false
 12         }
 13     },
 14     scene: {
 15         preload: preload,
 16         create: create,
 17         update: update
 18     }
 19 };
 20 
 21 var game = new Phaser.Game(config); // 创建游戏
 22 
 23 var distanceText; // 路程文本
 24 var distance = 0; // 路程
 25 var platforms; // 地面
 26 var player; // 玩家
 27 var enemy; // 敌人
 28 var enemys; // 敌人们
 29 var gameOver = false; // 游戏结束
 30 var enemyTimer; // 敌人计时器
 31 var distanceTimer; // 路程计时器
 32 
 33 var cursors; // 按键 
 34 // 载入资源
 35 function preload() {
 36     this.load.image('sky', 'assets/sky.png');
 37     this.load.image('ground', 'assets/platform.png');
 38      39      40     this.load.spritesheet('dude', 'assets/dude.png', {
 41         frameWidth: 32,
 42         frameHeight: 48
 43     });
 44 }
 45 
 46 // 将资源展示到画布创建资源
 47 function create() {
 48     // 添加画布背景
 49     this.add.image(400, 200, 'sky');
 50     // 添加分数文本
 51     distanceText = this.add.text(16, 16, 'Distance: 0m', {
 52         fontSize: '20px',
 53         fill: '#000'
 54     });
 55     // 添加地面
 56     platforms = this.physics.add.staticGroup();
 57     platforms.create(400, 400, 'ground').setScale(3).refreshBody();
 58     // 添加玩家(精灵)
 59     player = this.physics.add.sprite(100, 300, 'dude');
 60     player.setBounce(0); // 设置阻力
 61     player.setCollideWorldBounds(true); // 禁止玩家走出世界
 62 
 63     // 敌人
 64     enemys = this.physics.add.group();
 65     enemys.children.iterate(function (child) {
 66 
 67         child.setCollideWorldBounds(false);
 68     });
 69 
 70     // 事件
 71     this.anims.create({
 72         key: 'left',
 73         frames: this.anims.generateFrameNumbers('dude', {
 74             start: 0,
 75             end: 3
 76         }),
 77         frameRate: 10,
 78         repeat: -1
 79     });
 80 
 81     this.anims.create({
 82         key: 'right',
 83         frames: this.anims.generateFrameNumbers('dude', {
 84             start: 5,
 85             end: 8
 86         }),
 87         frameRate: 10,
 88         repeat: -1
 89     });
 90 
 91     this.anims.create({
 92         key: 'turn',
 93         frames: [{
 94             key: 'dude',
 95             frame: 4
 96         }],
 97         frameRate: 20
 98     });
 99 
100     cursors = this.input.keyboard.createCursorKeys();
101 
102     // 动态创建敌人
103     enemyTimer = setInterval(function () {
104         enemy = enemys.create(1000, 300, 'dude');
105         enemy.setTint(getColor());
106         enemy.anims.play('left', true);
107         enemy.setVelocityX(Phaser.Math.Between(-300, -100));
108     }, Phaser.Math.Between(4000, 8000))
109 
110     distanceTimer = setInterval(function () {
111         distance += 1;
112         distanceText.setText('Distance: ' + distance + 'm');
113     }, 1000)
114 
115 
116 
117     this.physics.add.collider(player, platforms); //玩家在地面上
118     this.physics.add.collider(enemys, platforms);
119     this.physics.add.collider(player, enemys, hitBomb, null, this);
120 
121 }
122 // 一直执行
123 function update() {
124     if (cursors.up.isDown && player.body.touching.down) {
125         player.setVelocityY(-220);
126     } else {
127         player.anims.play('right', true);
128     }
129     if (gameOver) {
130         player.setVelocityX(0);
131         player.anims.play('turn');
132         return;
133     }
134 }
135 
136 function hitBomb(player, enemys) {
137     this.physics.pause();
138     clearInterval(enemyTimer);
139     clearInterval(distanceTimer);
140     player.setTint(0xff0000);
141     gameOver = true;
142     alert('游戏结束,您跑了' + distance + 'm');
143 }
144 
145 function getColor() {
146     var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
147         return Math.random() - 0.5
148     }).join("").substr(0,6);
149     
150     return "0x" + color;
151 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏理论坞

【教程】C4D样条字设计终极版 | 附源文件工程

在站酷关于C4D的样条约束文字设计教程自己注到的共有三篇, 设计文章写的都非常细致,效果也都是各有长的,有很多学习点 然后最近本人也在国外设计B站看到了几位国外...

12520
来自专栏华章科技

为什么歪果仁的Excel表格这么漂亮?

兰色说:其实Excel漂亮并不意味着花梢,表格设计就是要突出和展示数据,达到这个目的,又能看上去很舒服。就是完美又好看的Excel表格。

9010
来自专栏腾讯社交用户体验设计

玩转HTML5移动页面(动效篇)- 腾讯ISUX

66130
来自专栏進无尽的文章

多媒体-图片、音频、视频的基本实现

AVFoundation的录音和播放 音频的录制与播放主要和三个类有关AVAudioSession,AVAudioRecorder,AVAudioPlayer...

10310
来自专栏移动开发之家

Android 拍摄(横\竖屏)视频的懒人之路

请捂着你的良心说话,对于贫穷的作者(我)不是应该打赏么 ̄へ ̄!,接下来工作又要忙起来了,更新应该是放缓了呢╮(╯_╰)╭,好伤心。

47330
来自专栏程序员的SOD蜜

常用前端资源收集

经常看到很多好的前端框架,今天起凡是遇到就整理到这里,此文会不断更新。 1,avalon 组件--作者司徒正美,国产MVVM JS组件 https://segm...

30390
来自专栏Coding迪斯尼

使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

23350
来自专栏帮你学MatLab

如何记笔记

Step1. 在听讲过程中,在左侧内尽量多记有意义的论据、概念等讲课内容。 Step2. 下课以后,尽可能及早将这些论据、概念简明扼要地概括(简化)在右侧。 ...

29460
来自专栏BestSDK

一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。 苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边...

47670
来自专栏V站

PHP神注释记录一番,一个程序员专用的注释包

20120

扫码关注云+社区

领取腾讯云代金券