Phaser.js实现简单的跑酷游戏附源码下载

采用的物理引擎是Phaser.js

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

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

效果展示：

源码（详细源码图片资源可点击文章下方或屏幕右上方的开源代码库链接进行克隆)

1.创建游戏舞台

var config={ type: Phaser .AUTO，width: 800，height: 400，physics : {默认： ' arcade '，arcade : { gravity : { y : 300 }，debug: false } }，scene: { preload: preload，create: create，update: update } }var游戏=新相位器.游戏（配置);//创建游戏2.载入资源

函数preload() { this.load.image('sky '，' assets/sky。png ')；this.load.image('ground '，' assets/platform。png ')；5 6 this.load.spritesheet('dude '，' assets/dude.png '，{ frameWidth: 32，frame height : 48 })；}3.将资源创建到舞台上

var distanceText//路程文本定义变量距离=0;//路程定义变量平台；//地面定义变量玩家；//玩家定义变量敌人；//敌人var enemys敌人们var enemyTimer//敌人计时器var distanceTimer//路程计时器函数create() { //添加画布背景this.add.image(400，200，' sky ')；//添加分数文本distanceText=this.add.text(16，16，' Distance: '，{ fontSize: '20px '，fill : ' # 000 ' })；//添加地面平台=这个。物理学。添加。静态GrouP()；platforms.create(400，400，' ground ').setScale(3).刷新正文()；//添加玩家（精灵)玩家=这个。物理学。添加。雪碧(100300，‘哥们儿’；玩家。setbounce(0)；//设置阻力玩家。设置对撞世界范围(真)；//禁止玩家走出世界//敌人敌人s=这个。物理学。添加。group()；敌人的孩子。iterate(函数(子)){ child。设置对撞世界界限(假)；});//动态创建敌人enemyTimer=setInterval(function(){)敌人=敌人。create(1000，300，‘dude’)；敌人。设置(GetColor())；敌人。动漫。游戏('左，真);敌人。setVelocityX(移相器.数学。介于(-300,-100)之间);}，Phaser .数学。介于(4000,8000)之间)distanceTimer=setInterval(函数(){ distance=1；距离文本。setText('距离e : '距离' m ')；}，1000) this.physics.add。对撞机（播放器，平台);//玩家在地面上这个.物理.添加。对撞机(enemys，platforms)；//敌人在地面上这个.物理.添加。对撞机(玩家，敌人，hitBomb，null，这个)；}4.在创建场景过程中写键盘监听事件

定义变量游标；//按键//事件这个。动漫。创建({键： '左'，框架：这个。动漫。generateframenumbers(' dude '，{ start: 0，end: 3 })，frameRate: 10，repeat 3360-1 })；这个。动漫。创建({ key : ' right '，frame :这个。动漫。generateframenumbers(' dude '，{ start: 5，end: 8 })，frameRate: 10，repeat 3360-1 })；这个。动漫。create({ key : ' turn '，frame :[{ key : ' dude '，frame: 4 }]，帧率： 20 })；游标=这个。输入。键盘。createcursorkeys()；5.写碰撞函数（当玩家与敌人碰撞的结果)

var gameOver=false//游戏结束函数命中炸弹(玩家，敌人){这个。物理学。pause()；clearInterval(enemyTimer)；clearInterval(远程定时器);玩家。设置(0x ff 0000)；gameOver=真警报('游戏结束，您跑了距离m’)；}6.在更新函数中写时间的执行（须注意的是此函数每一帧都在执行，1帧1秒)

函数update(){ if(游标。起来。这是一个向下的播放器。尸体。感人。down){ player。setvelocity y(-220)；} else { player.anims.play('right '，true)；} if(GameOVer){ player。setvelocity x(0)；玩家。动漫。玩('转')；返回；}}这里我给敌人上了颜色的，随机16进制颜色

函数getColor() { var color=['0 '，' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 '，' a '，' b '，' c '，' d '，' e '，' f'].sort(function(){ return math。random()-0.5 }).连接("")。substr(0，6)；返回"0x "颜色；}整个源码奉上（建议去开源代码库上自己克隆):

var config={ type: Phaser .AUTO，width: 800，height: 400，physics : {默认： ' arcade '，arcade : { gravity : { y : 300 }，debug: false } }，scene: { preload: preload，create: create，update: update } }var游戏=新相位器.游戏（配置);//创建游戏var distanceText//路程文本定义变量距离=0;//路程定义变量平台；//地面定义变量玩家；//玩家定义变量敌人；//敌人var enemys敌人们var gameOver=false//游戏结束var enemyTimer//敌人计时器var distanceTimer//路程计时器定义变量游标；//按键//载入资源函数preload() { this.load.image('sky '，' assets/sky。png ')；this.load.image('ground '，' assets/platform。png ')；39 40这个。装载。sprite sheet(' dude '，' assets/dude.png '，{ frameWidth: 32，frame height : 48 })；}//将资源展示到画布创建资源函数create() { //添加画布背景this.add.image(400，200，' sky ')；//添加分数文本distanceText=this.add.text(16，16，' Distance: '，{ fontSize: '20px '，fill : ' # 000 ' })；//添加地面平台=这个。物理学。添加。静态GrouP()；platforms.create(400，400，' ground ').setScale(3).刷新正文()；//添加玩家（精灵)玩家=这个。物理学。添加。雪碧(100300，‘哥们儿’；玩家。setbounce(0)；//设置阻力玩家。设置对撞世界范围(真)；//禁止玩家走出世界//敌人敌人s=这个。物理学。添加。group()；敌人的孩子。iterate(函数(子)){ child。设置对撞世界界限(假)；});//事件这个。动漫。创建({键： '左'，框架：这个。动漫。generateframenumbers(' dude '，{ start: 0，end: 3 })，frameRate: 10，repeat 3360-1 })；这个。动漫。创建({ key : ' right '，frame :这个。动漫。generateframenumbers(' dude '，{ start: 5，end: 8 })，frameRate: 10，repeat 3360-1 })；这个。动漫。create({ key : ' turn '，frame :[{ key : ' dude '，frame: 4 }]，帧率： 20 })；游标=这个。输入。键盘。createcursorkeys()；//动态创建敌人enemyTimer=setInterval(function(){)敌人=敌人。create(1000，300，‘dude’)；敌人。设置(GetColor())；敌人。动漫。游戏('左，真);敌人。setVelocityX(移相器.数学。介于(-300,-100)之间);}，Phaser .数学。介于(4000,8000)之间)distanceTimer=setInterval(函数(){ distance=1；距离文本。setText('距离e : '距离' m ')；}，1000) this.physics.add。对撞机（播放器，平台);//玩家在地面上这个.物理.添加。对撞机(enemys，platforms)；这个.物理.添加。对撞机(玩家，敌人，hitBomb，null，这个)；}//一直执行函数update(){ if(游标。起来。这是一个向下的播放器。尸体。感人。down){ player。setvelocity y(-220)；} else { player.anims.play('right '，true)；} if(GameOVer){ player。setvelocity x(0)；玩家。动漫。玩('转')；返回；} }函数命中炸弹(玩家，敌人){这个。物理学。pause()；clearInterval(enemyTimer)；clearInterval(远程定时器);玩家。设置(0x ff 0000)；gameOver=真警报('游戏结束，您跑了距离m’)；}函数getColor() { var color=['0 '，' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 '，' a '，' b '，' c '，' d '，' e '，' f'].sort(function(){ return math。random()-0.5 }).连接("")。substr(0，6)；返回"0x "颜色；}GitHub:在开源代码库上干我在开源代码库上干我

总结

以上所述是小编给大家介绍的Phaser.js实现简单的跑酷游戏附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！