From 0bc8b2df942771218e04cdfc3fc1755c35a9afea Mon Sep 17 00:00:00 2001 From: neingeist Date: Tue, 14 Aug 2012 23:08:49 +0200 Subject: [PATCH] external js --- herzle.html | 184 ++++++++-------------------------------------------- herzle.js | 127 ++++++++++++++++++++++++++++++++++++ 2 files changed, 154 insertions(+), 157 deletions(-) create mode 100644 herzle.js 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); +}