Do you Know WHAT IS HTML 5,
MOTHERFUCKER?
That might help
http://html5gameengine.com/
https://gist.github.com/bebraw/768272
<canvas id="canvas_layer" ></canvas>
var canvas = document.getElementById('canvas_layer');
canvas.width = window.innerWidth; //Or wathever
canvas.height = window.innerHeight; //Or wathever
var ctx = canvas.getContext('2d'); //We will draw here
function mainGameLoop(){
//Updating your entities goes here
requestAnimationFrame(mainGameLoop);
}
mainGameLoop();
more info: http://creativejs.com/resources/requestanimationframe/
var then = Date.now(); //Previously defined at game start
var animFramePID; //If you want to cancelAnimationFrame later on
function mainGameLoop(){
//Calculate time difference
var now = Date.now();
var dt = now - then;
then = now;
updateEntities(dt);
checkCollissions();
render();
animFramePID = requestAnimationFrame(mainGameLoop);
}
function updatePoints(dt){
points = hu.compact(
points
.map(updateTimeCounter(dt))
.map(moveUp(dt))
.map(removeIfTimeCounterGreaterThan(1))
);
}
function updateTimeCounter(dt){
return function(entity){
entity.timeAlive = entity.timeAlive ? entity.timeAlive + dt : dt;
return entity;
}
}
function removeIfOutsideScreen(entity){
if(!isOutsideScreen(entity.pos, entity.getSize())){
return entity;
}
}
function updateEntities(dt) {
updatePlayer(dt);
updateBosses(dt);
updateBullets(dt);
updateEnemies(dt);
updateSpecials(dt);
updateExplosions(dt);
updatePointsToRender(dt);
updateDialogs(dt);
updateMiscelanea_front(dt);
updateMiscelanea_back(dt);
updateBonuses(dt);
updateBonusWeapons(dt);
updateEnemyBullets(dt);
updateNeutralBullets(dt);
}
function Entity(options){
this.name = options.name;
/* ... */
}
Entity.prototype.getDimensions = function(){
//calculate things here
}
function shouldAddBoss(){ return isFinalStage() && !bossIsOut() && introHasEnded();
}
scene.renderEntity(myPlayer);
entity.render(getContext());
RenderableEntity.prototype.render = function(ctx){
this.getEnabledAnimation().render(ctx, this.rotateSprite);
}
/* ... Sprite.prototype.render ... */
ctx.drawImage( resources.get(this.url), Math.round(x), Math.round(y), this.size[0], this.size[1]); /* ... */
localStorage.setItem('myApplicationInfo', JSON.stringify(data));
localStorage.getItem('myApplicationInfo');
var data = {
lifes: 5,
maxPower: 1000,
timeSpent: 100.50,
maxPoints: 4050
/* ... */
}
var song = new Howl({
urls: ['sounds/songs/wendy_sulca_servesa.mp3'],
volume: 0.5
});
//It allows Play/Stop/Pause/Fade, events...
Free music list | http://opensourcemusic.com/free-music-list/ |
Free Sounds | http://freesounds.org |
Open game audio | http://opengameart.org/art-search-advanced?keys=&field_art_type_tid%5B%5D=13 |
Free Music archive | http://freemusicarchive.org/ |
Free sound effects generator | http://www.bfxr.net |
More free music | http://incompetech.com/music/ |
Free sound effects | http://creatingsound.com/sound-effects/free-sound-effects/ |
Fress sound effects | http://soundjay.com |
Open game art | http://opengameart.org/ |
Open Game Art Bundle | http://open.commonly.cc/ |
Free Game Arts | http://freegamearts.tuxfamily.org/ |
Free 3D models | http://www.blendswap.com |
Free game assets | http://kenney.nl/ |
Open Source Vectorial Cliparts | http://www.clker.com/ |
Free Vector Icons | http://www.flaticon.com/ |
Free mobile game UI | http://uidock.com/mobile-game-gui/ |