diff --git a/herzle.html b/herzle.html
index a328bf4..d3350ef 100644
--- a/herzle.html
+++ b/herzle.html
@@ -1,167 +1,37 @@
-
-player_pos = [300, 0];
-enemy_pos = [300, 0];
-pewpew = 0;
-
-document.onkeydown = onKeyDown;
-
-function onKeyDown(e) {
- e = e || window.event;
-
- var player = document.getElementById("player");
-
- if (e.keyCode == '37') { // left
- player_pos[0] -= 10;
- }
- if (e.keyCode == '39') { // right
- player_pos[0] += 10;
- }
- if (e.keyCode == '32') { // space = fire
- shoot(player_pos);
- }
-}
-
-shoots = [];
-function shoot(player_pos) {
- shoots[shoots.length] = [player_pos[0], 500];
- // pewpew = 5;
-}
-
-function isCollided(a, b) {
- var a_left = parseInt(a.style.left);
- var a_right = a_left + a.offsetWidth;
- var a_top = parseInt(a.style.top);
- var a_bottom = a_top + a.offsetHeight;
-
- var b_left = parseInt(b.style.left);
- var b_right = b_left + b.offsetWidth;
- var b_top = parseInt(b.style.top);
- var b_bottom = b_top + b.offsetHeight;
-
- return !(
- (a_left > b_right) ||
- (a_right < b_left) ||
- (a_top > b_bottom) ||
- (a_bottom < b_top)
- );
-}
-
-function gameLoop() {
- // detect collision
- var enemydiv = document.getElementById("enemy");
- for(var i = 0; i < shoots.length; i++) {
- if (shoots[i]) {
- var shootdiv = document.getElementById('shoot' + i);
- if (shootdiv && isCollided(shootdiv, enemydiv)) {
- pewpew = 5;
- }
+
+ #pewpew {
+ position:absolute;
+ top: 10%;
+ right: 10%;
+ }
+ div.shoot {
+ position:absolute;
+ border-style: solid; border-width: 1px;
+ }
+
diff --git a/herzle.js b/herzle.js
new file mode 100644
index 0000000..92f809a
--- /dev/null
+++ b/herzle.js
@@ -0,0 +1,127 @@
+player_pos = [300, 0];
+enemy_pos = [300, 0];
+pewpew = 0;
+
+document.onkeydown = onKeyDown;
+
+function onKeyDown(e) {
+ e = e || window.event;
+
+ var player = document.getElementById("player");
+
+ if (e.keyCode == '37') { // left
+ player_pos[0] -= 10;
+ }
+ if (e.keyCode == '39') { // right
+ player_pos[0] += 10;
+ }
+ if (e.keyCode == '32') { // space = fire
+ shoot(player_pos);
+ }
+}
+
+shoots = [];
+function shoot(player_pos) {
+ shoots[shoots.length] = [player_pos[0], 500];
+ // pewpew = 5;
+}
+
+function isCollided(a, b) {
+ var a_left = parseInt(a.style.left);
+ var a_right = a_left + a.offsetWidth;
+ var a_top = parseInt(a.style.top);
+ var a_bottom = a_top + a.offsetHeight;
+
+ var b_left = parseInt(b.style.left);
+ var b_right = b_left + b.offsetWidth;
+ var b_top = parseInt(b.style.top);
+ var b_bottom = b_top + b.offsetHeight;
+
+ return !(
+ (a_left > b_right) ||
+ (a_right < b_left) ||
+ (a_top > b_bottom) ||
+ (a_bottom < b_top)
+ );
+}
+
+function gameLoop() {
+ // detect collision
+ var enemydiv = document.getElementById("enemy");
+ for(var i = 0; i < shoots.length; i++) {
+ if (shoots[i]) {
+ var shootdiv = document.getElementById('shoot' + i);
+ if (shootdiv && isCollided(shootdiv, enemydiv)) {
+ pewpew = 5;
+ }
+ }
+ }
+
+ // render shoots
+ for(var i = 0; i < shoots.length; i++) {
+ if (shoots[i]) {
+ var shootdiv = document.getElementById('shoot' + i);
+
+ if (!shootdiv) {
+ shootdiv = document.createElement('div');
+ shootdiv.setAttribute('id', 'shoot' + i);
+ shootdiv.setAttribute('class', 'shoot');
+ shootdiv.innerHTML = '|';
+
+ var body = document.getElementsByTagName('body')[0];
+ body.appendChild(shootdiv);
+ }
+
+ shootdiv.style.left = shoots[i][0];
+ shootdiv.style.top = shoots[i][1];
+ } else {
+ if (deldiv = document.getElementById('shoot' + i)) {
+ var body = document.getElementsByTagName('body')[0];
+ body.removeChild(deldiv);
+ }
+ }
+ }
+
+ // render pew pew
+ var pewpewdiv = document.getElementById("pewpew");
+ if (pewpew > 0) {
+ pewpewdiv.innerHTML = "pew! pew!";
+ } else {
+ pewpewdiv.innerHTML = "";
+ }
+
+ // render player
+ var playerdiv = document.getElementById("player");
+ playerdiv.style.left = player_pos[0];
+ // FIXME playerdiv.style.top = player_pos[1];
+
+ // render enemy
+ var enemydiv = document.getElementById("enemy");
+ enemydiv.style.left = enemy_pos[0];
+ enemydiv.style.top = enemy_pos[1];
+
+ // animate shoots
+ for(var i = 0; i < shoots.length; i++) {
+ if (shoots[i]) {
+ shoots[i][1] -= 20;
+ if (shoots[i][1] < 0) {
+ delete(shoots[i]);
+ }
+ }
+ }
+
+ // animate pew pew
+ if (pewpew > 0) {
+ pewpew -= 1;
+ }
+
+ // animate enemy
+ var min = -50;
+ var max = +50;
+ var off = min + parseInt(Math.random() * (max-min));
+ enemy_pos[0] += off;
+ if (enemy_pos[0] < 0) enemy_pos[0] = 0;
+ if (enemy_pos[0] > 600) enemy_pos[0] = 600;
+
+ setTimeout("gameLoop()", 100);
+}