采纳的物理引擎是:Phaser.js
官网地点:http://phaser.io/
在这里对此引擎不做过量引见(由于我也是小白,嘿嘿)
效果展现:
源码(细致源码图片资本接见:https://github.com/ProsperLee)
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; }
以上就是怎样完成一个简朴的跑酷游戏?(代码详解)的细致内容,更多请关注ki4网别的相干文章!