<html> <head> <script type="text/javascript"> player_pos = 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 -= 10; player.style.left = player_pos; } if (e.keyCode == '39') { // right player_pos += 10; player.style.left = player_pos; } if (e.keyCode == '32') { // space = fire shoot(player_pos); } } shoots = []; function shoot(player_pos) { shoots[shoots.length] = [player_pos, 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 = 10; } } } // 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 enemy var enemydiv = document.getElementById("enemy"); enemydiv.style.left = 300; enemydiv.style.top = 10; // animate shoots for(var i = 0; i < shoots.length; i++) { if (shoots[i]) { shoots[i][1] -= 10; if (shoots[i][1] < 0) { delete(shoots[i]); } } } // animate pew pew if (pewpew > 0) { pewpew -= 1; } setTimeout("gameLoop()", 100); } </script> <style type="text/css"> * { font-size: 2em; color: #ff00ff; font-family: helvetica, arial; } #player { position: absolute; bottom: 10%; /* -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); */ } #enemy { position: absolute; top: 10%; /* -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); */ border-style: solid; border-width: 1px; } #pewpew { position:absolute; top: 10%; right: 10%; } div.shoot { position:absolute; border-style: solid; border-width: 1px; } </style> </head> <body onload="gameLoop();"> <div id="enemy">3</div> <div id="player"><</div> <div id="pewpew"></div> </body> </html>