<html>
<head></head>
<body>
<script src="https://cdn.rawgit.com/photonstorm/phaser/master/build/phaser.min.js"></script>
</body>
</html>
var game = new Phaser.Game(250, 400, Phaser.AUTO, null, { create: create, update: update, render: render });
function create() {
//settings
game.time.advancedTiming = true;
game.physics.startSystem(Phaser.Physics.ARCADE);
// create texture for sprite
var boxTexture = game.add.graphics(0, 0)
.kill()
.beginFill(0x7a84fc)
.drawRect(0, 0, 40, 40)
.generateTexture();
// create floor
this.floor = game.add.sprite(0, 0, boxTexture);
this.floor.scale.setTo(8, 1);
this.floor.y = game.world.height - 80;
game.physics.arcade.enable(this.floor);
this.floor.body.immovable = true;
// create box group
this.boxGroup = game.add.physicsGroup(Phaser.Physics.ARCADE);
this.boxGroup.x = 100;
this.boxGroup.y = 100;
// add 3 box
for (var i = 0; i < 3; i++) {
var box = game.add.sprite(0, 0, boxTexture);
box.y = i * (box.width + 10); // + margin
this.boxGroup.add(box);
}
//
this.boxGroup.setAll('body.velocity.x', 0);
this.boxGroup.setAll('body.velocity.y', 500);
}
function update() {
game.physics.arcade.collide(this.boxGroup);
game.physics.arcade.collide(this.floor, this.boxGroup);
}
function render() {
game.debug.body(this.floor);
this.boxGroup.forEachAlive(function(box) {
game.debug.body(box);
}, this);
game.debug.text(game.time.fps, 5, 15, '#00ff00', '12px monospace');
}
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |