JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://examples.phaser.io/_site/js/phaser.js"></script>
JavaScript
// TODO: When mouse is going out of canvas, you need to click into canvas to get game react again
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
preload: preload,
create: create,
update: update,
render: render
});
var enemies, buildings, environment, worldStage, ui;
var enemyBullets, towerBullets;
var gameBounds = {
x1: 0,
y1: 0,
x2: 2560,
y2: 1280
}
function preload() {
game.load.image('backdrop', 'http://wakeskaterstudio.com/images/bkg_Space.png');
game.load.image('test', 'http://png-3.findicons.com/files/icons/1588/farm_fresh_web/32/box.png');
}
function create() {
game.world.setBounds(gameBounds.x1, gameBounds.y1, gameBounds.x2, gameBounds.y2);
setupGroups();
setupGUI();
if (CAMERA) {
game.input.mouse.mouseWheelCallback = function (event) {
CAMERA.zoom_mousewheel.call(CAMERA, game.input.mouse);
};
}
environment.add(game.add.sprite(0, 0, 'backdrop'));
enemies.add(game.add.sprite(300, 300, 'test'));
enemies.add(game.add.sprite(1000, 900, 'test'));
}
function update() {
//Check for our Camera Functions
if (CAMERA) {
CAMERA.drag_camera(game.input.mousePointer);
CAMERA.drag_camera(game.input.pointer1);
CAMERA.update_camera();
}
}
function render() {
game.debug.text('Camera Velocity X: ' + CAMERA.velX, 32, 24 * 1, '#FFF');
game.debug.text('Camera Velocity Y: ' + CAMERA.velY, 32, 24 * 2, '#FFF');
game.debug.text('Camera Left X: ' + game.camera.x, 256, 24 * 1, '#FFF');
game.debug.text('Camera Top Y: ' + game.camera.y, 256, 24 * 2, '#FFF');
game.debug.text('Camera Width: ' + game.camera.screenView.width, 480, 24 * 1, '#FFF');
game.debug.text('Camera Height: ' + game.camera.screenView.height, 480, 24 * 2, '#FFF');
game.debug.text('Camera...