HTML5 Spieleprogrammierung #2

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='background: gray; 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.2';
var is_playing = false;
init();
function init()
{
  background_canvas = document.getElementById('background_canvas');
  backround_ctx = main_canvas.getContext('2d');
  main_canvas = document.getElementById('main_canvas');
  main_ctx = main_canvas.getContext('2d');
  
  document.addEventListener("keydown", key_down, false);
}
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;
}
var r_y = 0;
var r_x = 0;

function loop()
{
  main_ctx.clearRect(0,0,800,600);
  main_ctx.fillStyle = "red";
  main_ctx.fillRect(r_x,r_y,50,50);
  if (is_playing)
    window.setTimeout(loop, 10);
}
function start_loop()
{
  is_playing = true;
  loop();
}
function stop_loop()
{
  is_playing = false;
}


function key_down(e)
{
  var key_id = e.keyCode || e.which;
  if (key_id == 40) //down key_down
  {
    r_y++;
    e.preventDefault();
  }
}