HTML5 Spieleprogrammierung #1

Quellcode und Demo

Demo

Quellcode

index.html

<!DOCTYPE HTML> 
<html>
<head>
<title>Das erste HTML5 Spiel</title>
</head>
<body>
<span id='x'></span> X <span id='y'></span> Y
<div id='game_object' style='position: relative'>
<canvas id='background_canvas' style='background: gray; position: absolute; top: 0px; left: 0px; width: 800px; height: 600px;'></canvas>
<canvas id='main_canvas' style='background: gray; position: absolute; top: 0px; left: 0px; width: 800px; height: 600px;' 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.1';

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');
  main_ctx.fillStyle = "red";
  main_ctx.fillRect(10,10,50,50);
}
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;
}