Phaser.js实现简单的跑酷游戏附源码下载
程序员文章站
2022-10-08 13:20:42
采用的物理引擎是phaser.js
官网地址:
在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿)
效果展示:
源码(详细源码图片资源可点击文章下方或屏幕右上方...
采用的物理引擎是phaser.js
官网地址:
在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿)
效果展示:
源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone)
1.创建游戏舞台
var config = { type: phaser.auto, width: 800, height: 400, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var game = new phaser.game(config); // 创建游戏
2.载入资源
function 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, frameheight: 48 }); }
3.将资源创建到舞台上
var distancetext; // 路程文本 var distance = 0; // 路程 var platforms; // 地面 var player; // 玩家 var enemy; // 敌人 var enemys; // 敌人们 var enemytimer; // 敌人计时器 var distancetimer; // 路程计时器 function create() { // 添加画布背景 this.add.image(400, 200, 'sky'); // 添加分数文本 distancetext = this.add.text(16, 16, 'distance: 0m', { fontsize: '20px', fill: '#000' }); // 添加地面 platforms = this.physics.add.staticgroup(); platforms.create(400, 400, 'ground').setscale(3).refreshbody(); // 添加玩家(精灵) player = this.physics.add.sprite(100, 300, 'dude'); player.setbounce(0); // 设置阻力 player.setcollideworldbounds(true); // 禁止玩家走出世界 // 敌人 enemys = this.physics.add.group(); enemys.children.iterate(function (child) { child.setcollideworldbounds(false); }); // 动态创建敌人 enemytimer = setinterval(function () { enemy = enemys.create(1000, 300, 'dude'); enemy.settint(getcolor()); enemy.anims.play('left', true); enemy.setvelocityx(phaser.math.between(-300, -100)); }, phaser.math.between(4000, 8000)) distancetimer = setinterval(function () { distance += 1; distancetext.settext('distance: ' + distance + 'm'); }, 1000) this.physics.add.collider(player, platforms); //玩家在地面上 this.physics.add.collider(enemys, platforms); //敌人在地面上 this.physics.add.collider(player, enemys, hitbomb, null, this); }
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.写碰撞函数(当玩家与敌人碰撞的结果)
var gameover = false; // 游戏结束 function hitbomb(player, enemys) { this.physics.pause(); clearinterval(enemytimer); clearinterval(distancetimer); player.settint(0xff0000); gameover = true; alert('游戏结束,您跑了' + distance + 'm'); }
6.在update函数中写时间的执行(须注意的是此函数每一帧都在执行,1帧≠1秒)
function update() { if (cursors.up.isdown && player.body.touching.down) { player.setvelocityy(-220); } else { player.anims.play('right', true); } if (gameover) { player.setvelocityx(0); player.anims.play('turn'); return; } }
这里我给敌人上了颜色的,随机16进制颜色
function 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 }).join("").substr(0,6); return "0x" + color; }
整个源码奉上(建议去github上自己clone):
var config = { type: phaser.auto, width: 800, height: 400, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var game = new phaser.game(config); // 创建游戏 var distancetext; // 路程文本 var distance = 0; // 路程 var platforms; // 地面 var player; // 玩家 var enemy; // 敌人 var enemys; // 敌人们 var gameover = false; // 游戏结束 var enemytimer; // 敌人计时器 var distancetimer; // 路程计时器 var cursors; // 按键 // 载入资源 function preload() { this.load.image('sky', 'assets/sky.png'); this.load.image('ground', 'assets/platform.png'); 39 40 this.load.spritesheet('dude', 'assets/dude.png', { framewidth: 32, frameheight: 48 }); } // 将资源展示到画布创建资源 function create() { // 添加画布背景 this.add.image(400, 200, 'sky'); // 添加分数文本 distancetext = this.add.text(16, 16, 'distance: 0m', { fontsize: '20px', fill: '#000' }); // 添加地面 platforms = this.physics.add.staticgroup(); platforms.create(400, 400, 'ground').setscale(3).refreshbody(); // 添加玩家(精灵) player = this.physics.add.sprite(100, 300, 'dude'); player.setbounce(0); // 设置阻力 player.setcollideworldbounds(true); // 禁止玩家走出世界 // 敌人 enemys = this.physics.add.group(); enemys.children.iterate(function (child) { child.setcollideworldbounds(false); }); // 事件 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(); // 动态创建敌人 enemytimer = setinterval(function () { enemy = enemys.create(1000, 300, 'dude'); enemy.settint(getcolor()); enemy.anims.play('left', true); enemy.setvelocityx(phaser.math.between(-300, -100)); }, phaser.math.between(4000, 8000)) distancetimer = setinterval(function () { distance += 1; distancetext.settext('distance: ' + distance + 'm'); }, 1000) this.physics.add.collider(player, platforms); //玩家在地面上 this.physics.add.collider(enemys, platforms); this.physics.add.collider(player, enemys, hitbomb, null, this); } // 一直执行 function update() { if (cursors.up.isdown && player.body.touching.down) { player.setvelocityy(-220); } else { player.anims.play('right', true); } if (gameover) { player.setvelocityx(0); player.anims.play('turn'); return; } } function hitbomb(player, enemys) { this.physics.pause(); clearinterval(enemytimer); clearinterval(distancetimer); player.settint(0xff0000); gameover = true; alert('游戏结束,您跑了' + distance + 'm'); } function 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 }).join("").substr(0,6); return "0x" + color; }
github:fuck me on github fuck me on github
总结
以上所述是小编给大家介绍的phaser.js实现简单的跑酷游戏附源码下载,希望对大家有所帮助