bpierre/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>SUPER #7</title>
	<style>
		html { display: table; width: 100%; height: 100%; background: #000; }
		body { display: table-cell; vertical-align:middle; text-align:center; margin: 0; }
		canvas { margin: 0; }
		h1 { color: #fff; margin: 0 0 10px; font:24px sans-serif; }
	</style>
</head>
<body>
	<h1>SUPER #7<span id="lvl"></span></h1>
	<canvas width="500" height="500" id="c"></canvas>
	<script src="http://pierrebertet.net/tmp/7/raf.js"></script>
	<script src="main.js"></script>
</body>
</html>

## main.js
(function(window, document){
  'use strict';

  var canv = document.getElementById('c'),
      ctx = canv.getContext('2d'),
      levelElt = document.getElementById('lvl'),
      baseUrl = 'http://pierrebertet.net/tmp/7/',
      MUTE_SOUND = false,
      MAX_FPS = 60,
      GAME_SPEED = 20,
      INSTRUCTIONS = [
        'YOU ARE THE GREEN GUY.',
        'THERE IS A GREY BOSS.',
        'YOU HAVE TO KILL HIM.',
        'BUT HE HAS TO KILL YOU TOO.',
        'AVOID ITS BULLETS. KILL HIM FIRST.',
        'GOOD LUCK.',
        'PRESS [SPACE]'
      ],
      PLAYER_SPEED = 4,
      BULLET_MIN_SPEED = 3,
      BULLET_MAX_SPEED = 3,
      BULLET_RATE = 200,
      MONSTER_MIN_SPEED = 1,
      MONSTER_MAX_SPEED = 3,
      MONSTER_RATE = 1000,
      BOSS_SPEED = 1,
      LEVELS = [
        [BULLET_MIN_SPEED, BULLET_MAX_SPEED, BULLET_RATE, MONSTER_MIN_SPEED, MONSTER_MAX_SPEED, MONSTER_RATE, BOSS_SPEED],
        [3,                3,                200,         2,                 3,                 800,          1],
        [3,                3,                300,         2,                 3,                 600,          1],
        [3,                3,                300,         2,                 4,                 500,          1],
        [3,                3,                400,         2,                 4,                 400,          2],
        [3,                3,                500,         3,                 5,                 300,          2],
        [3,                3,                600,         3,                 5,                 200,          2],
        [3,                3,                700,         3,                 5,                 100,          2],
        [3,                3,                800,         3,                 5,                 100,          2],
        [3,                3,                900,         3,                 5,                 80,           2]
      ],
      KEYS = {
        LEFT: 37,
        RIGHT: 39,
        UP: 38,
        DOWN: 40,
        SPACE: 32
      },
      PLAYER_SIZE = 11,
      BULLET_SIZE = 5,
      BOSS_SIZE = 11,
      MONSTER_SIZE = 5,
      IMAGES = ['boss', 'player', 'bullet', 'monster'],
      SOUNDS = ['bullet', 'monster', 'death', 'level', 'win'],
      level = {},
      pressedKeys = {
        left: false,
        right: false,
        up: false,
        down: false
      },
      canvWidth = canv.width,
      canvHeight = canv.height,
      getRandomInt = function(min, max, excludes) {
        var result = Math.floor(Math.random() * (max - min + 1)) + min;
        if (excludes && excludes.indexOf(result) !== -1) {
          return getRandomInt(min, max, excludes);
        }
        return result;
      },
      lastRenderTime = null,
      game = null;

  canv.style.background = '#1D1F23';

  document.addEventListener('keydown', function(e){
    switch (e.keyCode) {
      case KEYS.LEFT:
        pressedKeys.left = true;
        break;
      case KEYS.RIGHT:
        pressedKeys.right = true;
        break;
      case KEYS.UP:
        pressedKeys.up = true;
        break;
      case KEYS.DOWN:
        pressedKeys.down = true;
        break;
    }
  }, false);
  document.addEventListener('keyup', function(e){
    switch (e.keyCode) {
      case KEYS.LEFT:
        pressedKeys.left = false;
        break;
      case KEYS.RIGHT:
        pressedKeys.right = false;
        break;
      case KEYS.UP:
        pressedKeys.up = false;
        break;
      case KEYS.DOWN:
        pressedKeys.down = false;
        break;
    }
  }, false);

  var setLevel = function(levelNum) {
    if (LEVELS.length < levelNum + 1) {
      return false;
    }
    levelElt.innerHTML = ' - LEVEL ' + (levelNum + 1);
    level.num = levelNum;
    level.BULLET_MIN_SPEED  = LEVELS[levelNum][0];
    level.BULLET_MAX_SPEED  = LEVELS[levelNum][1];
    level.BULLET_RATE       = LEVELS[levelNum][2];
    level.MONSTER_MIN_SPEED = LEVELS[levelNum][3];
    level.MONSTER_MAX_SPEED = LEVELS[levelNum][4];
    level.MONSTER_RATE      = LEVELS[levelNum][5];
    level.BOSS_SPEED        = LEVELS[levelNum][6];
    return true;
  };

  var getImage = (function(){
    var loadedImages = {};
    for (var i=0; i < IMAGES.length; i++) {
      loadedImages[IMAGES[i]] = document.createElement('img');
      loadedImages[IMAGES[i]].src = baseUrl + 'img/' + IMAGES[i] + '.png';
    }
    return function(name){
      return loadedImages[name];
    };
  })();

  var playSound = (function(){
    var loadedSounds = {};
    if (!MUTE_SOUND) {
      for (var i=0; i < SOUNDS.length; i++) {
        loadedSounds[SOUNDS[i]] = document.createElement('audio');
        loadedSounds[SOUNDS[i]].preload = 'auto';
        loadedSounds[SOUNDS[i]].controls = false;
        loadedSounds[SOUNDS[i]].src = baseUrl + 'sound/' + SOUNDS[i] + '.ogg';
      }
    }
    return function(name){
      if (MUTE_SOUND) {
        return;
      }
      if (loadedSounds[name].readyState > 0) {
        loadedSounds[name].pause();
        loadedSounds[name].currentTime = 0;
      }
      loadedSounds[name].play();
    };
  })();

  var drawOverlay = function(text, base) {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvWidth, canvHeight);
    ctx.fillStyle = '#FFF';
    ctx.font = "24px sans-serif";
    ctx.textAlign = 'center';
    for (var i = text.length - 1; i >= 0; i--){
      ctx.fillText(text[i], canvWidth/2, canvHeight/2 - 150 + (base || 0) + (50 * i));
    }
  };

  var Entity = function(x, y){
    this.x = 0;
    this.y = 0;
    this.width = 10;
    this.height = 10;
    this.limits = {
      top: 0,
      bottom: canvHeight - this.height,
      left: 0,
      right: canvWidth - this.width
    };
    if (x) {
      this.setX(x);
    }
    if (y) {
      this.setY(y);
    }
  };
  Entity.prototype.setX = function(x) {
    if (x < this.limits.left) {
      this.x = this.limits.left;
      return false;
    } else if (x > this.limits.right) {
      this.x = this.limits.right;
      return false;
    } else {
      this.x = x;
      return true;
    }
  };
  Entity.prototype.setY = function(y) {
    if (y < this.limits.top) {
      this.y = this.limits.top;
      return false;
    } else if (y > this.limits.bottom) {
      this.y = this.limits.bottom;
      return false;
    } else {
      this.y = y;
      return true;
    }
  };
  Entity.prototype.addX = function(x) {
    return this.setX(this.x + x);
  };
  Entity.prototype.addY = function(y) {
    return this.setY(this.y + y);
  };
  Entity.prototype.collide = function(entity) {
    if ((this.x + this.width) < entity.x) {
      return false;
    }
    if (this.x > (entity.x + entity.width)) {
      return false;
    }
    if ((this.y + this.height) < entity.y) {
      return false;
    }
    if (this.y > (entity.y + entity.height)) {
      return false;
    }
    return true;
  };

  var nextLevel = 0;

  var startGame = function(gameover, win) {

    setLevel(nextLevel);

    // Player
    var player = (function(){
      var entity = new Entity(PLAYER_SIZE, PLAYER_SIZE);
      entity.bullets = [];
      entity.width = entity.height = PLAYER_SIZE;
      entity.popRate = level.BULLET_RATE;
      entity.lastPop = null;
      entity.popBullet = function(xSpeed, ySpeed){
        var bulletPos = [entity.x + Math.round(entity.width/2 - BULLET_SIZE/2), entity.y + Math.round(entity.height/2 - BULLET_SIZE/2)],
            bullet = null;

        if (xSpeed > 0) {
          bulletPos[0] = entity.x + entity.width;
        } else if (xSpeed < 0) {
          bulletPos[0] = entity.x - BULLET_SIZE;
        }
        if (ySpeed > 0) {
          bulletPos[1] = entity.y + entity.height;
        } else if (ySpeed < 0) {
          bulletPos[1] = entity.y - BULLET_SIZE;
        }

        bullet = new Entity(bulletPos[0], bulletPos[1]);
        bullet.width = bullet.height = BULLET_SIZE;
        bullet.limits.left = -bullet.width;
        bullet.limits.right = canvWidth;
        bullet.limits.top = -bullet.height;
        bullet.limits.bottom = canvHeight;
        bullet.xSpeed = xSpeed;
        bullet.ySpeed = ySpeed;
        bullet.draw = function(){
          ctx.drawImage(getImage('bullet'), bullet.x, bullet.y, bullet.width, bullet.height);
        };
        entity.bullets.push(bullet);
        playSound('bullet');
      };
      entity.draw = function(){
        ctx.drawImage(getImage('player'), entity.x, entity.y, entity.width, entity.height);
      };
      return entity;
    })();

    // Boss
    var boss = (function(){
      var initialPosition = (function(){
        if (getRandomInt(0, 1)) {
          return [getRandomInt(100, canvWidth - BOSS_SIZE), getRandomInt(0, canvHeight - BOSS_SIZE)];
        } else {
          return [getRandomInt(0, canvWidth - BOSS_SIZE), getRandomInt(100, canvHeight - BOSS_SIZE)];
        }
      })();
      var entity = new Entity(initialPosition[0], initialPosition[1]);
      entity.monsters = [];
      entity.width = entity.height = BOSS_SIZE;
      entity.popRate = level.MONSTER_RATE;
      entity.lastPop = null;
      entity.target = {
        x: entity.x,
        y: entity.y
      };
      entity.popMonster = function(){
        var xSpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [level.BOSS_SPEED]),
            ySpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [level.BOSS_SPEED]),
            pos = [entity.x + Math.round(entity.width/2 - MONSTER_SIZE/2), entity.y + Math.round(entity.height/2 - MONSTER_SIZE/2)],
            monster = null;

        // Force movement
        if (!xSpeed && !ySpeed) {
          if (getRandomInt(0, 1)) {
            xSpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [0, level.BOSS_SPEED]);
          } else {
            ySpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [0, level.BOSS_SPEED]);
          }
        }

        if (xSpeed > 0) {
          pos[0] = entity.x + entity.width + MONSTER_SIZE;
        } else if (xSpeed < 0) {
          pos[0] = entity.x - BULLET_SIZE;
        }
        if (ySpeed > 0) {
          pos[1] = entity.y + entity.height + MONSTER_SIZE;
        } else if (ySpeed < 0) {
          pos[1] = entity.y - MONSTER_SIZE;
        }

        monster = new Entity(pos[0], pos[1]);
        monster.width = monster.height = MONSTER_SIZE;
        monster.limits.left = -MONSTER_SIZE;
        monster.limits.right = canvWidth;
        monster.limits.top = -MONSTER_SIZE;
        monster.limits.bottom = canvHeight;
        monster.xSpeed = xSpeed;
        monster.ySpeed = ySpeed;
        monster.draw = function() {
          ctx.drawImage(getImage('monster'), monster.x, monster.y, monster.width, monster.height);
        };
        entity.monsters.push(monster);
        playSound('monster');
      };
      entity.draw = function(){
        ctx.drawImage(getImage('boss'), entity.x, entity.y, entity.width, entity.height);
      };
      return entity;
    })();

    var loopTimer = 0, reqAnimId = 0;

    var game = {
      loop: function(){

        var now = Date.now();

        var plSpeed = PLAYER_SPEED;
        if ((pressedKeys.left || pressedKeys.right) && (pressedKeys.up || pressedKeys.down)) {
          plSpeed = plSpeed / 2;
        }
        if (pressedKeys.left) {
          player.addX(-plSpeed);
        } else if (pressedKeys.right) {
          player.addX(plSpeed);
        }
        if (pressedKeys.up) {
          player.addY(-plSpeed);
        } else if (pressedKeys.down) {
          player.addY(plSpeed);
        }

        // Add bullet
        var bulletSpeedX = 0, bulletSpeedY = 0;
        if (!player.lastPop || now - player.lastPop > player.popRate) {
          if (pressedKeys.left) {
            bulletSpeedX = getRandomInt(-level.BULLET_MAX_SPEED, -level.BULLET_MIN_SPEED);
          } else if (pressedKeys.right) {
            bulletSpeedX = getRandomInt(level.BULLET_MIN_SPEED, level.BULLET_MAX_SPEED);
          }
          if (pressedKeys.up) {
            bulletSpeedY = getRandomInt(-level.BULLET_MAX_SPEED, -level.BULLET_MIN_SPEED);
          } else if (pressedKeys.down) {
            bulletSpeedY = getRandomInt(level.BULLET_MIN_SPEED, level.BULLET_MAX_SPEED);
          }

          if (bulletSpeedX || bulletSpeedY) {
            player.popBullet(bulletSpeedX, bulletSpeedY);
          }

          player.lastPop = now;
        }

        // Move bullets
        var bulletsMoveX, bulletsMoveY, bullets = player.bullets;
        for (var bi = bullets.length - 1; bi >= 0; bi--) {

          if (bullets[bi].xSpeed !== 0 && bullets[bi].ySpeed !== 0) {
            bulletsMoveX = bullets[bi].addX(bullets[bi].xSpeed/2);
            bulletsMoveY = bullets[bi].addY(bullets[bi].ySpeed/2);
          } else {
            bulletsMoveX = bullets[bi].addX(bullets[bi].xSpeed);
            bulletsMoveY = bullets[bi].addY(bullets[bi].ySpeed);
          }

          // Bullet / boss collision
          if (bullets[bi].collide(boss)) {
            return win();
          }
          if (!bulletsMoveX || !bulletsMoveY) {
            // Remove the bullet from the bullets list
            bullets.splice(bullets.indexOf(bullets[bi]), 1);
          }
        }

        // Move monsters
        var xMove, yMove, monsters = boss.monsters;
        for (var i = monsters.length - 1; i >= 0; i--) {

          if (monsters[i].xSpeed !== 0 && monsters[i].xSpeed !== 0) {
            xMove = monsters[i].addX(monsters[i].xSpeed/2);
            yMove = monsters[i].addY(monsters[i].ySpeed/2);
          } else {
            xMove = monsters[i].addX(monsters[i].xSpeed);
            yMove = monsters[i].addY(monsters[i].ySpeed);
          }

          // Player / monster collision
          if (player.collide(monsters[i])) {
            return gameover();
          }

          if (!xMove || !yMove) {
            // Remove the monster from the monsters list
            monsters.splice(monsters.indexOf(monsters[i]), 1);
          }
        }

        // Add monster
        if (!boss.lastPop || now - boss.lastPop > boss.popRate) {
          boss.popMonster();
          boss.lastPop = now;
        }

        // Move boss
        if (boss.target.x === boss.x || boss.target.y === boss.y) {
          boss.target.x = getRandomInt(boss.limits.left, boss.limits.right);
          boss.target.y = getRandomInt(boss.limits.top, boss.limits.bottom);
        } else {
          if (boss.target.x < boss.x) {
            boss.addX(-level.BOSS_SPEED);
            // Prevent boss hover
            if (boss.target.x > boss.x) {
              boss.x = boss.target.x;
            }
          } else if (boss.target.x > boss.x) {
            boss.addX(level.BOSS_SPEED);
            // Prevent boss hover
            if (boss.target.x < boss.x) {
              boss.x = boss.target.x;
            }
          }
          if (boss.target.y < boss.y) {
            boss.addY(-level.BOSS_SPEED);
            // Prevent boss hover
            if (boss.target.y > boss.y) {
              boss.y = boss.target.y;
            }
          } else if (boss.target.y > boss.y) {
            boss.addY(level.BOSS_SPEED);
            // Prevent boss hover
            if (boss.target.y < boss.y) {
              boss.y = boss.target.y;
            }
          }
        }

        // Boss / player collision
        if (player.collide(boss)) {
          return gameover();
        }

        loopTimer = window.setTimeout(game.loop, GAME_SPEED);
      },
      draw: function(last){
        var now = Date.now();

        // Max fps
        if (last !== true && lastRenderTime && now - lastRenderTime < 1000 / MAX_FPS) {
          reqAnimId = window.requestAnimationFrame(game.draw);
          return;
        }
        // Save the last rendering time (to lock the max. framerate)
        lastRenderTime = now;

        // Clear
        canv.width = canv.width;

        // Bullets
        for (var i = player.bullets.length - 1; i >= 0; i--) {
          player.bullets[i].draw();
        }

        // Player
        player.draw();

        // Monsters
        for (var j = boss.monsters.length - 1; j >= 0; j--) {
          boss.monsters[j].draw();
        }

        // Boss
        boss.draw();

        if (last !== true) {
          reqAnimId = window.requestAnimationFrame(game.draw);
        }
      },
      stop: function(){
        game.draw(true);
        window.clearTimeout(loopTimer);
        window.cancelAnimationFrame(reqAnimId);
        lastRenderTime = 0;
      }
    };

    return game;
  };

  var initOverlay = function(text, base) {
    drawOverlay(text, base);
    document.addEventListener('keypress', initGame, false);
  };

  var initGame = function(e){
    if (e.charCode === KEYS.SPACE) {
      document.removeEventListener('keypress', initGame, false);
      game = startGame(
        // Game over
        function(){
          playSound('death');
          game.stop();
          game = null;
          nextLevel = 0;
          initOverlay(['YOU LOSE AT LEVEL', 'HE WINS.', 'HA HA HA.'], 80);
        },
        // Win
        function(){
          game.stop();
          game = null;
          if (level.num < LEVELS.length-1) {
            playSound('level');
            nextLevel = level.num + 1;
            initOverlay(['YOU WIN!', 'READY FOR THE NEXT LEVEL?', 'PRESS [SPACE]'], 60);
          } else {
            playSound('win');
            nextLevel = 0;
            initOverlay(['★★★ THE END ★★★', 'START AGAIN?', 'PRESS [SPACE]'], -40);
          }
        });
      game.loop();
      game.draw();
    }
  };

  initOverlay(INSTRUCTIONS);

})(window, document);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>SUPER #7</title>
	<style>
	html { display: table; width: 100%; height: 100%; background: #000; }
	body { display: table-cell; vertical-align:middle; text-align:center; margin: 0; }
	canvas { margin: 0; }
	h1 { color: #fff; margin: 0 0 10px; font:24px sans-serif; }
	</style>
	</head>
	<body>
	<h1>SUPER #7<span id="lvl"></span></h1>
	<canvas width="500" height="500" id="c"></canvas>
	<script src="http://pierrebertet.net/tmp/7/raf.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	(function(window, document){
	'use strict';

	var canv = document.getElementById('c'),
	ctx = canv.getContext('2d'),
	levelElt = document.getElementById('lvl'),
	baseUrl = 'http://pierrebertet.net/tmp/7/',
	MUTE_SOUND = false,
	MAX_FPS = 60,
	GAME_SPEED = 20,
	INSTRUCTIONS = [
	'YOU ARE THE GREEN GUY.',
	'THERE IS A GREY BOSS.',
	'YOU HAVE TO KILL HIM.',
	'BUT HE HAS TO KILL YOU TOO.',
	'AVOID ITS BULLETS. KILL HIM FIRST.',
	'GOOD LUCK.',
	'PRESS [SPACE]'
	],
	PLAYER_SPEED = 4,
	BULLET_MIN_SPEED = 3,
	BULLET_MAX_SPEED = 3,
	BULLET_RATE = 200,
	MONSTER_MIN_SPEED = 1,
	MONSTER_MAX_SPEED = 3,
	MONSTER_RATE = 1000,
	BOSS_SPEED = 1,
	LEVELS = [
	[BULLET_MIN_SPEED, BULLET_MAX_SPEED, BULLET_RATE, MONSTER_MIN_SPEED, MONSTER_MAX_SPEED, MONSTER_RATE, BOSS_SPEED],
	[3, 3, 200, 2, 3, 800, 1],
	[3, 3, 300, 2, 3, 600, 1],
	[3, 3, 300, 2, 4, 500, 1],
	[3, 3, 400, 2, 4, 400, 2],
	[3, 3, 500, 3, 5, 300, 2],
	[3, 3, 600, 3, 5, 200, 2],
	[3, 3, 700, 3, 5, 100, 2],
	[3, 3, 800, 3, 5, 100, 2],
	[3, 3, 900, 3, 5, 80, 2]
	],
	KEYS = {
	LEFT: 37,
	RIGHT: 39,
	UP: 38,
	DOWN: 40,
	SPACE: 32
	},
	PLAYER_SIZE = 11,
	BULLET_SIZE = 5,
	BOSS_SIZE = 11,
	MONSTER_SIZE = 5,
	IMAGES = ['boss', 'player', 'bullet', 'monster'],
	SOUNDS = ['bullet', 'monster', 'death', 'level', 'win'],
	level = {},
	pressedKeys = {
	left: false,
	right: false,
	up: false,
	down: false
	},
	canvWidth = canv.width,
	canvHeight = canv.height,
	getRandomInt = function(min, max, excludes) {
	var result = Math.floor(Math.random() * (max - min + 1)) + min;
	if (excludes && excludes.indexOf(result) !== -1) {
	return getRandomInt(min, max, excludes);
	}
	return result;
	},
	lastRenderTime = null,
	game = null;

	canv.style.background = '#1D1F23';

	document.addEventListener('keydown', function(e){
	switch (e.keyCode) {
	case KEYS.LEFT:
	pressedKeys.left = true;
	break;
	case KEYS.RIGHT:
	pressedKeys.right = true;
	break;
	case KEYS.UP:
	pressedKeys.up = true;
	break;
	case KEYS.DOWN:
	pressedKeys.down = true;
	break;
	}
	}, false);
	document.addEventListener('keyup', function(e){
	switch (e.keyCode) {
	case KEYS.LEFT:
	pressedKeys.left = false;
	break;
	case KEYS.RIGHT:
	pressedKeys.right = false;
	break;
	case KEYS.UP:
	pressedKeys.up = false;
	break;
	case KEYS.DOWN:
	pressedKeys.down = false;
	break;
	}
	}, false);

	var setLevel = function(levelNum) {
	if (LEVELS.length < levelNum + 1) {
	return false;
	}
	levelElt.innerHTML = ' - LEVEL ' + (levelNum + 1);
	level.num = levelNum;
	level.BULLET_MIN_SPEED = LEVELS[levelNum][0];
	level.BULLET_MAX_SPEED = LEVELS[levelNum][1];
	level.BULLET_RATE = LEVELS[levelNum][2];
	level.MONSTER_MIN_SPEED = LEVELS[levelNum][3];
	level.MONSTER_MAX_SPEED = LEVELS[levelNum][4];
	level.MONSTER_RATE = LEVELS[levelNum][5];
	level.BOSS_SPEED = LEVELS[levelNum][6];
	return true;
	};

	var getImage = (function(){
	var loadedImages = {};
	for (var i=0; i < IMAGES.length; i++) {
	loadedImages[IMAGES[i]] = document.createElement('img');
	loadedImages[IMAGES[i]].src = baseUrl + 'img/' + IMAGES[i] + '.png';
	}
	return function(name){
	return loadedImages[name];
	};
	})();

	var playSound = (function(){
	var loadedSounds = {};
	if (!MUTE_SOUND) {
	for (var i=0; i < SOUNDS.length; i++) {
	loadedSounds[SOUNDS[i]] = document.createElement('audio');
	loadedSounds[SOUNDS[i]].preload = 'auto';
	loadedSounds[SOUNDS[i]].controls = false;
	loadedSounds[SOUNDS[i]].src = baseUrl + 'sound/' + SOUNDS[i] + '.ogg';
	}
	}
	return function(name){
	if (MUTE_SOUND) {
	return;
	}
	if (loadedSounds[name].readyState > 0) {
	loadedSounds[name].pause();
	loadedSounds[name].currentTime = 0;
	}
	loadedSounds[name].play();
	};
	})();

	var drawOverlay = function(text, base) {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
	ctx.fillRect(0, 0, canvWidth, canvHeight);
	ctx.fillStyle = '#FFF';
	ctx.font = "24px sans-serif";
	ctx.textAlign = 'center';
	for (var i = text.length - 1; i >= 0; i--){
	ctx.fillText(text[i], canvWidth/2, canvHeight/2 - 150 + (base \|\| 0) + (50 * i));
	}
	};

	var Entity = function(x, y){
	this.x = 0;
	this.y = 0;
	this.width = 10;
	this.height = 10;
	this.limits = {
	top: 0,
	bottom: canvHeight - this.height,
	left: 0,
	right: canvWidth - this.width
	};
	if (x) {
	this.setX(x);
	}
	if (y) {
	this.setY(y);
	}
	};
	Entity.prototype.setX = function(x) {
	if (x < this.limits.left) {
	this.x = this.limits.left;
	return false;
	} else if (x > this.limits.right) {
	this.x = this.limits.right;
	return false;
	} else {
	this.x = x;
	return true;
	}
	};
	Entity.prototype.setY = function(y) {
	if (y < this.limits.top) {
	this.y = this.limits.top;
	return false;
	} else if (y > this.limits.bottom) {
	this.y = this.limits.bottom;
	return false;
	} else {
	this.y = y;
	return true;
	}
	};
	Entity.prototype.addX = function(x) {
	return this.setX(this.x + x);
	};
	Entity.prototype.addY = function(y) {
	return this.setY(this.y + y);
	};
	Entity.prototype.collide = function(entity) {
	if ((this.x + this.width) < entity.x) {
	return false;
	}
	if (this.x > (entity.x + entity.width)) {
	return false;
	}
	if ((this.y + this.height) < entity.y) {
	return false;
	}
	if (this.y > (entity.y + entity.height)) {
	return false;
	}
	return true;
	};

	var nextLevel = 0;

	var startGame = function(gameover, win) {

	setLevel(nextLevel);

	// Player
	var player = (function(){
	var entity = new Entity(PLAYER_SIZE, PLAYER_SIZE);
	entity.bullets = [];
	entity.width = entity.height = PLAYER_SIZE;
	entity.popRate = level.BULLET_RATE;
	entity.lastPop = null;
	entity.popBullet = function(xSpeed, ySpeed){
	var bulletPos = [entity.x + Math.round(entity.width/2 - BULLET_SIZE/2), entity.y + Math.round(entity.height/2 - BULLET_SIZE/2)],
	bullet = null;

	if (xSpeed > 0) {
	bulletPos[0] = entity.x + entity.width;
	} else if (xSpeed < 0) {
	bulletPos[0] = entity.x - BULLET_SIZE;
	}
	if (ySpeed > 0) {
	bulletPos[1] = entity.y + entity.height;
	} else if (ySpeed < 0) {
	bulletPos[1] = entity.y - BULLET_SIZE;
	}

	bullet = new Entity(bulletPos[0], bulletPos[1]);
	bullet.width = bullet.height = BULLET_SIZE;
	bullet.limits.left = -bullet.width;
	bullet.limits.right = canvWidth;
	bullet.limits.top = -bullet.height;
	bullet.limits.bottom = canvHeight;
	bullet.xSpeed = xSpeed;
	bullet.ySpeed = ySpeed;
	bullet.draw = function(){
	ctx.drawImage(getImage('bullet'), bullet.x, bullet.y, bullet.width, bullet.height);
	};
	entity.bullets.push(bullet);
	playSound('bullet');
	};
	entity.draw = function(){
	ctx.drawImage(getImage('player'), entity.x, entity.y, entity.width, entity.height);
	};
	return entity;
	})();

	// Boss
	var boss = (function(){
	var initialPosition = (function(){
	if (getRandomInt(0, 1)) {
	return [getRandomInt(100, canvWidth - BOSS_SIZE), getRandomInt(0, canvHeight - BOSS_SIZE)];
	} else {
	return [getRandomInt(0, canvWidth - BOSS_SIZE), getRandomInt(100, canvHeight - BOSS_SIZE)];
	}
	})();
	var entity = new Entity(initialPosition[0], initialPosition[1]);
	entity.monsters = [];
	entity.width = entity.height = BOSS_SIZE;
	entity.popRate = level.MONSTER_RATE;
	entity.lastPop = null;
	entity.target = {
	x: entity.x,
	y: entity.y
	};
	entity.popMonster = function(){
	var xSpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [level.BOSS_SPEED]),
	ySpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [level.BOSS_SPEED]),
	pos = [entity.x + Math.round(entity.width/2 - MONSTER_SIZE/2), entity.y + Math.round(entity.height/2 - MONSTER_SIZE/2)],
	monster = null;

	// Force movement
	if (!xSpeed && !ySpeed) {
	if (getRandomInt(0, 1)) {
	xSpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [0, level.BOSS_SPEED]);
	} else {
	ySpeed = getRandomInt(-level.MONSTER_MAX_SPEED, level.MONSTER_MAX_SPEED, [0, level.BOSS_SPEED]);
	}
	}

	if (xSpeed > 0) {
	pos[0] = entity.x + entity.width + MONSTER_SIZE;
	} else if (xSpeed < 0) {
	pos[0] = entity.x - BULLET_SIZE;
	}
	if (ySpeed > 0) {
	pos[1] = entity.y + entity.height + MONSTER_SIZE;
	} else if (ySpeed < 0) {
	pos[1] = entity.y - MONSTER_SIZE;
	}

	monster = new Entity(pos[0], pos[1]);
	monster.width = monster.height = MONSTER_SIZE;
	monster.limits.left = -MONSTER_SIZE;
	monster.limits.right = canvWidth;
	monster.limits.top = -MONSTER_SIZE;
	monster.limits.bottom = canvHeight;
	monster.xSpeed = xSpeed;
	monster.ySpeed = ySpeed;
	monster.draw = function() {
	ctx.drawImage(getImage('monster'), monster.x, monster.y, monster.width, monster.height);
	};
	entity.monsters.push(monster);
	playSound('monster');
	};
	entity.draw = function(){
	ctx.drawImage(getImage('boss'), entity.x, entity.y, entity.width, entity.height);
	};
	return entity;
	})();

	var loopTimer = 0, reqAnimId = 0;

	var game = {
	loop: function(){

	var now = Date.now();

	var plSpeed = PLAYER_SPEED;
	if ((pressedKeys.left \|\| pressedKeys.right) && (pressedKeys.up \|\| pressedKeys.down)) {
	plSpeed = plSpeed / 2;
	}
	if (pressedKeys.left) {
	player.addX(-plSpeed);
	} else if (pressedKeys.right) {
	player.addX(plSpeed);
	}
	if (pressedKeys.up) {
	player.addY(-plSpeed);
	} else if (pressedKeys.down) {
	player.addY(plSpeed);
	}

	// Add bullet
	var bulletSpeedX = 0, bulletSpeedY = 0;
	if (!player.lastPop \|\| now - player.lastPop > player.popRate) {
	if (pressedKeys.left) {
	bulletSpeedX = getRandomInt(-level.BULLET_MAX_SPEED, -level.BULLET_MIN_SPEED);
	} else if (pressedKeys.right) {
	bulletSpeedX = getRandomInt(level.BULLET_MIN_SPEED, level.BULLET_MAX_SPEED);
	}
	if (pressedKeys.up) {
	bulletSpeedY = getRandomInt(-level.BULLET_MAX_SPEED, -level.BULLET_MIN_SPEED);
	} else if (pressedKeys.down) {
	bulletSpeedY = getRandomInt(level.BULLET_MIN_SPEED, level.BULLET_MAX_SPEED);
	}

	if (bulletSpeedX \|\| bulletSpeedY) {
	player.popBullet(bulletSpeedX, bulletSpeedY);
	}

	player.lastPop = now;
	}

	// Move bullets
	var bulletsMoveX, bulletsMoveY, bullets = player.bullets;
	for (var bi = bullets.length - 1; bi >= 0; bi--) {

	if (bullets[bi].xSpeed !== 0 && bullets[bi].ySpeed !== 0) {
	bulletsMoveX = bullets[bi].addX(bullets[bi].xSpeed/2);
	bulletsMoveY = bullets[bi].addY(bullets[bi].ySpeed/2);
	} else {
	bulletsMoveX = bullets[bi].addX(bullets[bi].xSpeed);
	bulletsMoveY = bullets[bi].addY(bullets[bi].ySpeed);
	}

	// Bullet / boss collision
	if (bullets[bi].collide(boss)) {
	return win();
	}
	if (!bulletsMoveX \|\| !bulletsMoveY) {
	// Remove the bullet from the bullets list
	bullets.splice(bullets.indexOf(bullets[bi]), 1);
	}
	}

	// Move monsters
	var xMove, yMove, monsters = boss.monsters;
	for (var i = monsters.length - 1; i >= 0; i--) {

	if (monsters[i].xSpeed !== 0 && monsters[i].xSpeed !== 0) {
	xMove = monsters[i].addX(monsters[i].xSpeed/2);
	yMove = monsters[i].addY(monsters[i].ySpeed/2);
	} else {
	xMove = monsters[i].addX(monsters[i].xSpeed);
	yMove = monsters[i].addY(monsters[i].ySpeed);
	}

	// Player / monster collision
	if (player.collide(monsters[i])) {
	return gameover();
	}

	if (!xMove \|\| !yMove) {
	// Remove the monster from the monsters list
	monsters.splice(monsters.indexOf(monsters[i]), 1);
	}
	}

	// Add monster
	if (!boss.lastPop \|\| now - boss.lastPop > boss.popRate) {
	boss.popMonster();
	boss.lastPop = now;
	}

	// Move boss
	if (boss.target.x === boss.x \|\| boss.target.y === boss.y) {
	boss.target.x = getRandomInt(boss.limits.left, boss.limits.right);
	boss.target.y = getRandomInt(boss.limits.top, boss.limits.bottom);
	} else {
	if (boss.target.x < boss.x) {
	boss.addX(-level.BOSS_SPEED);
	// Prevent boss hover
	if (boss.target.x > boss.x) {
	boss.x = boss.target.x;
	}
	} else if (boss.target.x > boss.x) {
	boss.addX(level.BOSS_SPEED);
	// Prevent boss hover
	if (boss.target.x < boss.x) {
	boss.x = boss.target.x;
	}
	}
	if (boss.target.y < boss.y) {
	boss.addY(-level.BOSS_SPEED);
	// Prevent boss hover
	if (boss.target.y > boss.y) {
	boss.y = boss.target.y;
	}
	} else if (boss.target.y > boss.y) {
	boss.addY(level.BOSS_SPEED);
	// Prevent boss hover
	if (boss.target.y < boss.y) {
	boss.y = boss.target.y;
	}
	}
	}

	// Boss / player collision
	if (player.collide(boss)) {
	return gameover();
	}

	loopTimer = window.setTimeout(game.loop, GAME_SPEED);
	},
	draw: function(last){
	var now = Date.now();

	// Max fps
	if (last !== true && lastRenderTime && now - lastRenderTime < 1000 / MAX_FPS) {
	reqAnimId = window.requestAnimationFrame(game.draw);
	return;
	}
	// Save the last rendering time (to lock the max. framerate)
	lastRenderTime = now;

	// Clear
	canv.width = canv.width;

	// Bullets
	for (var i = player.bullets.length - 1; i >= 0; i--) {
	player.bullets[i].draw();
	}

	// Player
	player.draw();

	// Monsters
	for (var j = boss.monsters.length - 1; j >= 0; j--) {
	boss.monsters[j].draw();
	}

	// Boss
	boss.draw();

	if (last !== true) {
	reqAnimId = window.requestAnimationFrame(game.draw);
	}
	},
	stop: function(){
	game.draw(true);
	window.clearTimeout(loopTimer);
	window.cancelAnimationFrame(reqAnimId);
	lastRenderTime = 0;
	}
	};

	return game;
	};

	var initOverlay = function(text, base) {
	drawOverlay(text, base);
	document.addEventListener('keypress', initGame, false);
	};

	var initGame = function(e){
	if (e.charCode === KEYS.SPACE) {
	document.removeEventListener('keypress', initGame, false);
	game = startGame(
	// Game over
	function(){
	playSound('death');
	game.stop();
	game = null;
	nextLevel = 0;
	initOverlay(['YOU LOSE AT LEVEL', 'HE WINS.', 'HA HA HA.'], 80);
	},
	// Win
	function(){
	game.stop();
	game = null;
	if (level.num < LEVELS.length-1) {
	playSound('level');
	nextLevel = level.num + 1;
	initOverlay(['YOU WIN!', 'READY FOR THE NEXT LEVEL?', 'PRESS [SPACE]'], 60);
	} else {
	playSound('win');
	nextLevel = 0;
	initOverlay(['★★★ THE END ★★★', 'START AGAIN?', 'PRESS [SPACE]'], -40);
	}
	});
	game.loop();
	game.draw();
	}
	};

	initOverlay(INSTRUCTIONS);

	})(window, document);