level rendering

var levels = [{
  name:"Mario Level 1",
  background: '#5c94fc',
  template:[
    "      13           13      1223
    "      46           46      4556           13                  13
    "                                          46                  46
    "    y                                             y
    "                        ?
    "                                                              y
    "
    "                ?     #?#?#                       qw          qw
    "    ^                                     qw      as    ^     as
    "   /ü`            ^              qw       as      as   /ü`    as
    "  /ügü`      {=} /ü`  p          as       as p{=} as p/ügü`p  as  {==}
    "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx]
}

Level Rendering

Mapping

var blocks = {};
blocks['#'] = {sx:5, sy:0}
blocks['x'] = {sx:0, sy:0}
blocks['H'] = {sx:2, sy:2}

      

LEVEL RENDERING

Result

Player

Animation

Player

Physics

var speed = {
  player:{
    velocity_x:1.5, velocity_y:25, gravity:2, friction:0.8
  }
}

// run
if (held.right) {
  actor.speed.x += speed.player.velocity_x;
}

// jump
if (held.up) { actor.speed.y -= speed.player.velocity_y; }

// apply gravity.
actor.speed.y += speed.player.gravity;

Player

Movement Demo

Scrolling

Interacting objects

Interacting objects

Collision detection:
simple checking for overlap of tiles

function checkCollision(actor, object) {
  var collides = {top:false, bottom:false, left:false, right:false};

  if ((actor.pos.y + actor.height).inRange(object.y, object.y + object.height)) {
    collides.bottom = true;
  }

  if ((actor.pos.x + actor.width).inRange(object.x, object.x + object.width)) {
    collides.right = true;
  }

  return collides;
}

Interacting objects

Putting it all together

function gameLoop() {
    drawLevel()
    updateCharacters()
    updateElements()
    drawElements()
    drawActors()
    drawControls()
}

Interacting objects

Controls

Touch controls for mobile devices

Controls

Menu

Themes

var levels = [{
  name:"SUSE",
  theme:'suse',
  background: '#207720'
  ...
}]