HTML5 Spieleprogrammierung #9

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.9';
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.life = 100;
  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;
  this.shoot_wait = 0;
}
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);
  main_ctx.drawImage(main_sprite, 100, 20, 10, 50, this.drawX + this.width - 5, this.drawY, 10, 50);
  
};
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;
  
  if (this.is_upkey == true && this.shoot_wait < 0)
    {
      bullets[bullets.length] = new Bullet(this.drawX + this.width - 5, this.drawY, true);
      this.shoot_wait = 20;
    }
  else
    this.shoot_wait--;
}


function Enemy()
{
  this.life = 30;
  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;
  this.is_dead = false;
  this.explode_wait = 0;
}
Enemy.prototype.draw = function()
{
  if (this.is_dead == false)
    {
    
      this.ai();
      main_ctx.drawImage(main_sprite,this.srcX,this.srcY,this.width, this.height, this.drawX, this.drawY, this.width, this.height);
      
      main_ctx.fillStyle = "black";
      main_ctx.font = "30px Arial";
      main_ctx.textBaseline = 'bottom';
      main_ctx.fillText(this.life, this.drawX, this.drawY);
      
      if (this.life <= 0)
	{
	  this.is_dead = true;
	  this.explode_wait = 50;
	}
    }
  else if (this.explode_wait > 0)
    {
      main_ctx.drawImage(main_sprite,120,0,20, 20, this.drawX, this.drawY, 120, 120);
      this.explode_wait--;
    }
};
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, is_player)
{
  if (is_player == true)
    this.is_player = true;
  else
    this.is_player = false;
  
  this.drawX = x;
  this.drawY = y;
  if (this.is_player)
    this.srcX = 140;
  else
    this.srcX = 100;
  
  this.srcY = 0;
  this.width = 20;
  this.height = 20;
  this.speed = 7;
  this.exploded = false;
  this.wait = 0;
}
Bullet.prototype.draw = function()
{
  if (this.exploded == false)
    main_ctx.drawImage(main_sprite,this.srcX,this.srcY,this.width, this.height, this.drawX, this.drawY, this.width, this.height);
  
  if (this.exploded == false)
    {
      if (this.is_player)
	this.drawY -= this.speed;
      else
	this.drawY += this.speed;
    }
  
  if (this.is_player == false && 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 == false)
    {
      player.life -= 10;
      this.exploded = true;
      this.wait = 50;
    }

  if (this.is_player == true)
    {
	for (var i = 0; i < enemies.length; i++)
	  {
	    if (this.drawX <= enemies[i].drawX + enemies[i].width && this.drawX + this.width >= enemies[i].drawX && 
		this.drawY <= enemies[i].drawY + enemies[i].height && this.drawY + this.height >= enemies[i].drawY && this.exploded == false
	        && enemies[i].is_dead == false)
	      {
		this.exploded = true;
		this.wait = 50;
		enemies[i].life-= 10;
		
	      }
	  }
    }
  
  if (this.exploded == true && this.wait > 0)
    {
      main_ctx.drawImage(main_sprite, 120, 0, 20, 20, this.drawX, this.drawY, 50,50);
      this.wait--;
    }
    
};


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();
  }
  
  main_ctx.fillStyle = "gray";
  main_ctx.font = "50px Arial";
  main_ctx.textBaseline = 'top';
  main_ctx.fillText(player.life, 0, 0);
  
  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();
  }
}