HTML5 Spieleprogrammierung #7

Quellcode und Demo

Demo

Quellcode

index.html

<!DOCTYPE HTML> 
<html>
<head>
<title>Das erste HTML5 Spiel</title>
</head>
<body>
<button onclick='start_loop()'>'starten</button>
<span id='x'></span> X <span id='y'></span> Y
<div id='game_object' style='position: relative'>
<canvas width='800px' height='600px' id='background_canvas' style='background: gray; position: absolute; top: 0px; left: 0px;'></canvas>
<canvas width='800px' height='600px' id='main_canvas' style='position: absolute; top: 0px; left: 0px;' onmousemove='mouse(event)'>Leider kann dieser Browser das Spiel nicht ausführen!</canvas>
</div>
<script type="text/javascript" src='game.js'></script>
</body>
</html>

game.js

var version ='0.0.7';
var is_playing = false;
init();
function init()
{
  background_canvas = document.getElementById('background_canvas');
  background_ctx = background_canvas.getContext('2d');
  main_canvas = document.getElementById('main_canvas');
  main_ctx = main_canvas.getContext('2d');
  
  document.addEventListener("keydown", key_down, false);
  document.addEventListener("keyup", key_up, false);
  
  requestaframe = (function() {
		return window.requestAnimationFrame	||
		  window.webkitRequestAnimationFrame	||
		  window.mozRequestAnimationFrame	||
		  window.oRequestAnimationFrame		||
		  window.msRequestAnimationFrame	||
		  function (callback) {
		    window.setTimeout(callback, 1000 / 60)
		  };
  })();
  
  player = new Player();
  enemies = new Array();
  bullets = new Array();
  load_media();
}
function load_media()
{
  bg_sprite = new Image();
  bg_sprite.src = 'images/bg_sprite.png';
  main_sprite = new Image();
  main_sprite.src = 'images/main_sprite.png';
}
function mouse(e)
{
  var x = e.pageX - document.getElementById('game_object').offsetLeft;
  var y = e.pageY - document.getElementById('game_object').offsetTop;
  document.getElementById('x').innerHTML = x;
  document.getElementById('y').innerHTML = y;
}

function Player()
{
  this.drawX = 0;
  this.drawY = 570 - 100;
  this.srcX = 0;
  this.srcY = 0;
  this.width = 100;
  this.height = 100;
  this.speed = 5;
  this.is_downkey = false;
  this.is_upkey = false;
  this.is_leftkey = false;
  this.is_rightkey = false;
}
Player.prototype.draw = function()
{
  this.check_keys();
  main_ctx.drawImage(main_sprite,this.srcX,this.srcY,this.width, this.height, this.drawX, this.drawY, this.width, this.height);
};
Player.prototype.check_keys = function()
{
  /*if (this.is_downkey == true)
    this.drawY += this.speed;
  if (this.is_upkey == true)
    this.drawY -= this.speed;
  */
  if (this.is_leftkey == true)
    this.drawX -= this.speed;
  if (this.is_rightkey == true)
    this.drawX += this.speed;
}


function Enemy()
{
  this.drawX = Math.round(Math.random()*300);
  this.drawY = Math.round(Math.random()*300);
  this.srcX = 0;
  this.srcY = 100;
  this.width = 180;
  this.height = 80;
  this.speed =  2 + Math.random() * 5;
}
Enemy.prototype.draw = function()
{
  this.ai();
  main_ctx.drawImage(main_sprite,this.srcX,this.srcY,this.width, this.height, this.drawX, this.drawY, this.width, this.height);
};
Enemy.prototype.ai = function()
{
  this.drawX += this.speed;
  if (this.drawX > 800)
    this.drawX = -this.width;
  
  
 if (Math.round(Math.random()*100) == 50)
   bullets[bullets.length] = new Bullet(this.drawX, this.drawY);
  
};

function Bullet(x, y)
{
  this.drawX = x;
  this.drawY = y;
  this.srcX = 100;
  this.srcY = 0;
  this.width = 20;
  this.height = 20;
  this.speed = 7;
  this.exploded = false;
}
Bullet.prototype.draw = function()
{
  main_ctx.drawImage(main_sprite,this.srcX,this.srcY,this.width, this.height, this.drawX, this.drawY, this.width, this.height);
  this.drawY += this.speed;
  
  if (this.drawX <= player.drawX + player.width && this.drawX + this.width >= player.drawX && 
      this.drawY <= player.drawY + player.height && this.drawY + this.height >= player.drawY)
    this.exploded = true;
  else
    this.exploded = false;
  
  if (this.exploded == true)
    main_ctx.drawImage(main_sprite, 120, 0, 20, 20, this.drawX, this.drawY, 50,50);
    
};


function spawn_enemy(n)
{
  for (var i = 0; i < n; i++)
  {
    enemies[enemies.length] = new Enemy();
  }
}
function loop()
{
  main_ctx.clearRect(0,0,800,600);
  
  player.draw();
  for (var i = 0; i < enemies.length; i++)
  {
    enemies[i].draw();
  }
  
  for (var i = 0; i < bullets.length; i++)
  {
    bullets[i].draw();
  }
  
  if (is_playing)
    requestaframe(loop);
}
function start_loop()
{
  is_playing = true;
  loop();
  background_ctx.drawImage(bg_sprite, 0, 0);
  spawn_enemy(3);
}
function stop_loop()
{
  is_playing = false;
}


function key_down(e)
{
  var key_id = e.keyCode || e.which;
  if (key_id == 40) //down key
  {
    player.is_downkey = true;
    e.preventDefault();
  }
  if (key_id == 38) //up key
  {
    player.is_upkey = true;
    e.preventDefault();
  }
  if (key_id == 37) //left key
  {
    player.is_leftkey = true;
    e.preventDefault();
  }
  if (key_id == 39) //right key
  {
    player.is_rightkey = true;
    e.preventDefault();
  }
}
function key_up(e)
{
  var key_id = e.keyCode || e.which;
  if (key_id == 40) //down key
  {
    player.is_downkey = false;
    e.preventDefault();
  }
  if (key_id == 38) //up key
  {
    player.is_upkey = false;
    e.preventDefault();
  }
  if (key_id == 37) //left key
  {
    player.is_leftkey = false;
    e.preventDefault();
  }
  if (key_id == 39) //right key
  {
    player.is_rightkey = false;
    e.preventDefault();
  }
}