Talking about Tipsy Tower game, Game development, HTML5, Javascript and Reviews.
Do you remember Panda.js? It was a promising HTML5 framework, I used it to create a demo version of Circle Chain and a physics demo. I said “it was a promising HTML5 framework” because now we don’t have a framework but a whole game development platform called Panda 2.
In the above picture, you can see Panda2 running a Tipsy Tower script. And there’s a Three.js powered 3D version on its way, check this video to see how it’s working.
Look at the 2D game at the moment, powered by p2.js physics
Click to drop a crate.
Back to Panda 2, it includes all the features you may expect from a game development platform, such as:
* Panda game engine, a powerful open source framework to create HTML5 games.
* a powerful JavaScript code editor with multiple themes, keyboard shortcuts and auto-complete.
* a game view to see your game running right next to the code editor and see changes instantly with live updates as you save your code, along with Game view it’s own JavaScript console for easy debugging.
* a Panda Remote app allowing you to see your project as a fullscreen native app on unlimited number of tablets and mobile devices on the same Wifi network.
* a sidebar to see all your classes, scenes, and assets.
* different way to export your projects, such as a web build to make your games run in browsers or as Cordova project if you want to wrap your game as native app for platforms like Android and iOS.
Do you want to have a look at the source code of Tipsy Tower to see how easy it was to create it? Here it is:
game.module(
'game.main'
)
.require(
'plugin.p2'
)
.body(function() {
game.addAsset('crate.png');
game.addAsset('ground.png');
game.createScene('Main', {
backgroundColor: '#003a72',
canDrop: true,
crates: [],
init: function() {
this.world = new game.Physics();
var ground = new game.PhysicsSprite('ground.png', game.width / 2, 960);
ground.addTo(this.stage);
this.moving = new game.Sprite('crate.png');
this.moving.anchorCenter();
this.moving.position.set(77);
game.Tween.add(this.moving.position, {
x: game.width - this.moving.width
}, 1300, {
repeat: Infinity,
yoyo: true
}).start();
this.moving.addTo(this.stage);
},
mousedown: function() {
if (!this.canDrop) return;
this.canDrop = false;
this.moving.visible = false;
var crate = new game.PhysicsSprite('crate.png', this.moving.x, this.moving.y, {
mass: 1
});
crate.addTo(this.stage);
this.crates.push(crate);
game.Timer.add(500, this.reset.bind(this));
},
reset: function() {
this.canDrop = true;
this.moving.visible = true;
},
update: function() {
for (var i = this.crates.length - 1; i >= 0; i--) {
if (this.crates[i].y > game.height + this.crates[i].height) {
this.crates[i].remove();
this.crates.splice(i, 1);
}
}
}
});
});
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.