I am making a flappy bird game using phaser.js
.
My problem is that it doesn't collide with the ledges. And how do you change the camera (you know in flappy bird they like move the camera)?
Any other tips on making my game would be greatly appreciated!
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-demo', {
preload: preload,
create: create,
update: update,
render: render
});
var player;
var starfield;
var cursors;
var fireButton;
var gameOver;
var upLedge;
var vaRandomUpLedgeSize;
var bottomLedge;
function preload() {
game.load.image('starfield', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAEACAYAAABcV/9PAAAEWklEQVR42u3ZsW7UShSA4XltxAMgxGPwHHSwRSQaKpR0FCDRQY+AgAzeiccej8fesf0Vn8Llru2zJ//aubnh+bv3P6FUsAQEhIAQEAICASEgBISAQEAIiJYDevv7D1BIQAgIASEgBAQCQkDsKCC/DMNvohEQAkJAICAEhIAQEAgIASEgBAQCQkAICAGBgBAQAkJACAgEhIAQEAICASEgBISAQEAICAEhIBAQAkJACAgBgYAQEAJCQCAgBISAEBAICAEhIAQEAkJACAgBISBLQEAICAEhIBAQAkJACAgEhIAQEAICASEgBISAQEAICAEhIAQEAkJACAgBgYAQEAJCQCAgBISAEBAICAEhIASEgEBACAgBISAQEAJCQAgIBISAEBACAgEhIASEgEBACAgBISAEBAJCQAgIAYGAEBACQkAgIASEgBAQCAgBISAEhIBAQAgIATHD1x8PgwREUTh7Cykc9ZPR6t0iN5y97D0c9ZNxi7vF1F5K42l552FPn4ytZ6j5zV4aT+p93vr7EvbwyVhjjqlz1PiGd+erda6S+db8gD7+u1D7jbVwB1jzMbJXtT+g3d+FrYbc8vGx1iPkaBHVOGeTAd3qdn+miGqdL2xxq6zxWtq0akBrHsNBA0JAICAEhICuvfly+ef1x/snzjbHEXayeUAP3+/+eByq+3P3z2eb4wg7WRTQp28fnki9dqjqx+G6wZcsq5U5zriTUGu4nCH7VcdKltXKHGfeSZj7vE0NN1Rx/7xx1fHXuc/+VuY4+07CnNvlWN1DFXc/kOUOmTtLK3PYSXQHmio+Z8j+D2NDQ47dJnNnaWUOO7n/fwcaOih+fs65NZbcJnNmaWUOO/lrcUCpavu/U9hiWVvPYSdRQEMH5SwrdXx/yKk3FA85Nksrc9jJZbuAuq+3XlbNOezkst4jLPW83fp2veYcdrLiIywevv93OUPW+rStOYedzHyEpf7zcGzIscGXPDpaneOMO8l+hOX+gqr/P+OmBi99dLQ6xxl3ErqDh752wzy7e3El/l1DfFx/+PjY1PXi1835tKWOzTl36WNjbCdTj4742NT1au+k/70p3Ul87GhA3Ytefn51pR9DKqCpY+Nhxl6XWtbUsbkzzHls5OwkFdDedzJ0bBi61aUukvvGc46fe41uYTWvEX9D4jvC2XfSjyZ1XIhvYzlvYG7VU+fIOWfNawxdZ+haJTtZY94WdpI6dyj5BJR+YsbeyJJl5F5jzfd4lJ3MPXfIufBQlaWfyrl3sKXXyLlOSRhH3EnJucNat+Ean6yly6o9v51kBlTjFrnlebe4jp1kBlTrFrn0vEuXVfP1dpJ+TSgdCCZ/BgIBISAEhIBAQAgIASEgEBACQkAICAGBgBAQAkJAICAEhIAQEAgIASEgBAQCQkAICAEhIBAQAkJACAgEhIAQEAICASEgBISAQEAICAEhIBAQAkJACAgBgYAQEAJCQCAgBISAEBAICAHRlF+C+UHwNeMuEwAAAC10RVh0U29mdHdhcmUAYnkuYmxvb2RkeS5jcnlwdG8uaW1hZ2UuUE5HMjRFbmNvZGVyqAZ/7gAAAABJRU5ErkJggg==');
game.load.image('player', 'https://i.imgur.com/JArA3tQ.png');
game.load.image('upLedge', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAACGCAYAAADZ0np4AAAAiklEQVR42u3UsQ2DQAwF0FslPT0jpE+BmIQBaLMDw2QUSpY45IIrTggFQVK94tvds2TJTnN+52npS4ZPU/q36cZH6ZFX+8wJDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgM3oej/CJpm3J30pUVHK0DDP4nHCd9JjG8fgP1Swh4Bcd7BZH+S2fyAAAALXRFWHRTb2Z0d2FyZQBieS5ibG9vZGR5LmNyeXB0by5pbWFnZS5QTkcyNEVuY29kZXKoBn/uAAAAAElFTkSuQmCC');
game.load.image('bottomLedge', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAB6CAYAAABQtRgZAAAAgklEQVR42u3TsQmAMBQFwKxib+8I9hbiJA5g6w4O4yiWLhFRUERslAgWF3h5pDmSwA9VUcbUCVPs45MMc3P0Xdoxj+F82PtN6i47GgpNja5b6oTPxvQ6Zk+/4fz07aZQKBQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhUKhUCj0n+gXawGd+WGo+T+h1gAAAC10RVh0U29mdHdhcmUAYnkuYmxvb2RkeS5jcnlwdG8uaW1hZ2UuUE5HMjRFbmNvZGVyqAZ/7gAAAABJRU5ErkJggg==');
}
function create() {
// The scrolling starfield background
game.physics.startSystem(Phaser.Physics.ARCADE);
starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');
starfield.scale.setTo(1, 2.5);
starfield.enableBody = true;
// The hero!
player = game.add.sprite(50, 400, 'player');
player.anchor.setTo(0.5, 0.5);
player.scale.setTo(1.25, 1.5);
game.physics.arcade.enable(player);
game.physics.enable(player, Phaser.Physics.ARCADE);
player.body.gravity.y = 450;
player.body.collideWorldBounds = true;
upLedge = game.add.sprite(400, 0, 'upLedge');
bottomLedge = game.add.sprite(400, 365, 'bottomLedge');
randomLedgeSize();
upLedge.scale.setTo(1, vaRandomUpLedgeSize);
randomLedgeSize();
bottomLedge.scale.setTo(1, vaRandomUpLedgeSize);
fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
// And some controls to play the game with
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Scroll the background
starfield.tilePosition.x -= 2;
player.x++;
//SPACEBAR
if (player.y >= 591.75) {
player.y = 591.75;
player.x--;
}
if (fireButton.isDown) {
player.body.velocity.y = -250;
}
game.physics.arcade.collide(player, upLedge);
game.physics.arcade.collide(player, bottomLedge);
}
function render() {
}
function randomLedgeSize() {
vaRandomUpLedgeSize = Math.floor(Math.random() * (3 - 1)) + 1;
if (vaRandomUpLedgeSize <= 1.5) {
vaRandomUpLedgeSize = 1;
} else {
vaRandomUpLedgeSize = 2;
}
}
function randomLedgeSizeBot() {
vaRandomUpLedgeSize = Math.floor(Math.random() * (3 - 1)) + 1;
if (vaRandomUpLedgeSize <= 1.5) {
bottomLedge.y = 500;
} else {
vaRandomUpLedgeSize = 2;
}
}
See here:
The collisions only fire if the sprite.body has velocity.
So what I did was change the update()
function: I removed the call to player.x++;
and in the create()
function I added an X velocity to the player.
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-demo', {
preload: preload,
create: create,
update: update,
render: render
});
var player;
var starfield;
var cursors;
var fireButton;
var gameOver;
var ledges;
function preload() {
game.load.image('starfield', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAEACAYAAABcV/9PAAAEWklEQVR42u3ZsW7UShSA4XltxAMgxGPwHHSwRSQaKpR0FCDRQY+AgAzeiccej8fesf0Vn8Llru2zJ//aubnh+bv3P6FUsAQEhIAQEAICASEgBISAQEAIiJYDevv7D1BIQAgIASEgBAQCQkDsKCC/DMNvohEQAkJAICAEhIAQEAgIASEgBAQCQkAICAGBgBAQAkJACAgEhIAQEAICASEgBISAQEAICAEhIBAQAkJACAgBgYAQEAJCQCAgBISAEBAICAEhIAQEAkJACAgBISBLQEAICAEhIBAQAkJACAgEhIAQEAICASEgBISAQEAICAEhIAQEAkJACAgBgYAQEAJCQCAgBISAEBAICAEhIASEgEBACAgBISAQEAJCQAgIBISAEBACAgEhIASEgEBACAgBISAEBAJCQAgIAYGAEBACQkAgIASEgBAQCAgBISAEhIBAQAgIATHD1x8PgwREUTh7Cykc9ZPR6t0iN5y97D0c9ZNxi7vF1F5K42l552FPn4ytZ6j5zV4aT+p93vr7EvbwyVhjjqlz1PiGd+erda6S+db8gD7+u1D7jbVwB1jzMbJXtT+g3d+FrYbc8vGx1iPkaBHVOGeTAd3qdn+miGqdL2xxq6zxWtq0akBrHsNBA0JAICAEhICuvfly+ef1x/snzjbHEXayeUAP3+/+eByq+3P3z2eb4wg7WRTQp28fnki9dqjqx+G6wZcsq5U5zriTUGu4nCH7VcdKltXKHGfeSZj7vE0NN1Rx/7xx1fHXuc/+VuY4+07CnNvlWN1DFXc/kOUOmTtLK3PYSXQHmio+Z8j+D2NDQ47dJnNnaWUOO7n/fwcaOih+fs65NZbcJnNmaWUOO/lrcUCpavu/U9hiWVvPYSdRQEMH5SwrdXx/yKk3FA85Nksrc9jJZbuAuq+3XlbNOezkst4jLPW83fp2veYcdrLiIywevv93OUPW+rStOYedzHyEpf7zcGzIscGXPDpaneOMO8l+hOX+gqr/P+OmBi99dLQ6xxl3ErqDh752wzy7e3El/l1DfFx/+PjY1PXi1835tKWOzTl36WNjbCdTj4742NT1au+k/70p3Ul87GhA3Ytefn51pR9DKqCpY+Nhxl6XWtbUsbkzzHls5OwkFdDedzJ0bBi61aUukvvGc46fe41uYTWvEX9D4jvC2XfSjyZ1XIhvYzlvYG7VU+fIOWfNawxdZ+haJTtZY94WdpI6dyj5BJR+YsbeyJJl5F5jzfd4lJ3MPXfIufBQlaWfyrl3sKXXyLlOSRhH3EnJucNat+Ean6yly6o9v51kBlTjFrnlebe4jp1kBlTrFrn0vEuXVfP1dpJ+TSgdCCZ/BgIBISAEhIBAQAgIASEgEBACQkAICAGBgBAQAkJAICAEhIAQEAgIASEgBAQCQkAICAEhIBAQAkJACAgEhIAQEAICASEgBISAQEAICAEhIBAQAkJACAgBgYAQEAJCQCAgBISAEBAICAHRlF+C+UHwNeMuEwAAAC10RVh0U29mdHdhcmUAYnkuYmxvb2RkeS5jcnlwdG8uaW1hZ2UuUE5HMjRFbmNvZGVyqAZ/7gAAAABJRU5ErkJggg==');
game.load.image('player', 'https://i.imgur.com/JArA3tQ.png');
game.load.image('upLedge', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAACGCAYAAADZ0np4AAAAiklEQVR42u3UsQ2DQAwF0FslPT0jpE+BmIQBaLMDw2QUSpY45IIrTggFQVK94tvds2TJTnN+52npS4ZPU/q36cZH6ZFX+8wJDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgM3oej/CJpm3J30pUVHK0DDP4nHCd9JjG8fgP1Swh4Bcd7BZH+S2fyAAAALXRFWHRTb2Z0d2FyZQBieS5ibG9vZGR5LmNyeXB0by5pbWFnZS5QTkcyNEVuY29kZXKoBn/uAAAAAElFTkSuQmCC');
game.load.image('bottomLedge', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAB6CAYAAABQtRgZAAAAgklEQVR42u3TsQmAMBQFwKxib+8I9hbiJA5g6w4O4yiWLhFRUERslAgWF3h5pDmSwA9VUcbUCVPs45MMc3P0Xdoxj+F82PtN6i47GgpNja5b6oTPxvQ6Zk+/4fz07aZQKBQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhUKhUCj0n+gXawGd+WGo+T+h1gAAAC10RVh0U29mdHdhcmUAYnkuYmxvb2RkeS5jcnlwdG8uaW1hZ2UuUE5HMjRFbmNvZGVyqAZ/7gAAAABJRU5ErkJggg==');
}
function create() {
// The scrolling starfield background
game.physics.startSystem(Phaser.Physics.ARCADE);
starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');
starfield.scale.setTo(1, 2.5);
// The hero!
player = game.add.sprite(50, 400, 'player');
player.anchor.setTo(0.5, 0.5);
player.scale.setTo(1.25, 1.5);
game.physics.arcade.enable(player);
game.physics.enable(player, Phaser.Physics.ARCADE);
player.enableBody = true;
player.body.gravity.y = 450;
player.body.collideWorldBounds = true;
player.body.velocity.x = 100;
// The ledges
ledges = game.add.group();
ledges.enableBody = true;
var upLedge = ledges.create(200, 0, 'upLedge');
upLedge.body.immovable = true;
var bottomLedge = ledges.create(200, 465, 'bottomLedge');
bottomLedge.body.immovable = true;
// Controls to play the game with
fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Scroll the background
starfield.tilePosition.x -= 2;
// If spacebar is pressed, increase Y velocity
if (fireButton.isDown) {
player.body.velocity.y = -250;
}
// Check for collisions
game.physics.arcade.collide(player, ledges);
}
function render() {
}