neingeist
/
30shooter
Archived
1
0
Fork 0
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

119 lines
2.3 KiB
HTML

12 years ago
<html>
<head>
<script type="text/javascript">
12 years ago
player_pos = 0;
12 years ago
pewpew = 0;
12 years ago
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
12 years ago
shoot(player_pos);
12 years ago
}
12 years ago
}
12 years ago
shoots = [];
function shoot(player_pos) {
shoots[shoots.length] = [player_pos, 500];
pewpew = 5;
}
function gameLoop() {
// 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 = "";
}
// 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);
}
12 years ago
</script>
12 years ago
<style type="text/css">
* {
font-size: 20pt;
color: #ff00ff;
font-family: helvetica, arial;
}
#player {
position: absolute;
bottom: 10%;
12 years ago
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
12 years ago
}
#pewpew {
position:absolute;
top: 10%;
right: 10%;
}
12 years ago
div.shoot {
position:absolute;
}
12 years ago
</style>
12 years ago
</head>
12 years ago
<body onload="gameLoop();">
12 years ago
<span id="herzle">&lt;3</span>
<span id="player">&lt;</span>
12 years ago
<div id="pewpew"></div>
12 years ago
</body>
</html>