external js
This commit is contained in:
parent
cdb0f435b7
commit
0bc8b2df94
2 changed files with 154 additions and 157 deletions
184
herzle.html
184
herzle.html
|
|
@ -1,167 +1,37 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript" src="herzle.js"></script>
|
||||||
|
|
||||||
player_pos = [300, 0];
|
<style type="text/css">
|
||||||
enemy_pos = [300, 0];
|
* {
|
||||||
pewpew = 0;
|
font-size: 2em;
|
||||||
|
color: #ff00ff;
|
||||||
document.onkeydown = onKeyDown;
|
font-family: helvetica, arial;
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
#player {
|
||||||
|
position: absolute;
|
||||||
// render shoots
|
bottom: 10%;
|
||||||
for(var i = 0; i < shoots.length; i++) {
|
/* -webkit-transform: rotate(90deg);
|
||||||
if (shoots[i]) {
|
-moz-transform: rotate(90deg); */
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
#enemy {
|
||||||
|
position: absolute;
|
||||||
// render pew pew
|
top: 10%;
|
||||||
var pewpewdiv = document.getElementById("pewpew");
|
/* -webkit-transform: rotate(90deg);
|
||||||
if (pewpew > 0) {
|
-moz-transform: rotate(90deg); */
|
||||||
pewpewdiv.innerHTML = "pew! pew!";
|
border-style: solid; border-width: 1px;
|
||||||
} 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]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
#pewpew {
|
||||||
|
position:absolute;
|
||||||
// animate pew pew
|
top: 10%;
|
||||||
if (pewpew > 0) {
|
right: 10%;
|
||||||
pewpew -= 1;
|
}
|
||||||
}
|
div.shoot {
|
||||||
|
position:absolute;
|
||||||
// animate enemy
|
border-style: solid; border-width: 1px;
|
||||||
var min = -50;
|
}
|
||||||
var max = +50;
|
</style>
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
</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>
|
</head>
|
||||||
|
|
||||||
<body onload="gameLoop();">
|
<body onload="gameLoop();">
|
||||||
|
|
|
||||||
127
herzle.js
Normal file
127
herzle.js
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
Reference in a new issue