152 lines
3.8 KiB
JavaScript
152 lines
3.8 KiB
JavaScript
debug = true;
|
|
|
|
player_pos = [0.5 * window.innerWidth, 0.9 * window.innerHeight];
|
|
enemy_pos = [0.5 * window.innerWidth, 0.1 * window.innerHeight];
|
|
pewpew = 0;
|
|
|
|
document.onkeydown = onKeyDown;
|
|
|
|
function onKeyDown(e) {
|
|
e = e || window.event;
|
|
|
|
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(pos) {
|
|
shoots[shoots.length] = [pos[0], pos[1]];
|
|
// pewpew = 5;
|
|
}
|
|
|
|
function isCollided(a, b) {
|
|
var a_left = a.getClientRects()[0].left;
|
|
var a_right = a.getClientRects()[0].right;
|
|
var a_top = a.getClientRects()[0].top;
|
|
var a_bottom = a.getClientRects()[0].bottom;
|
|
|
|
var b_left = b.getClientRects()[0].left;
|
|
var b_right = b.getClientRects()[0].right;
|
|
var b_top = b.getClientRects()[0].top;
|
|
var b_bottom = b.getClientRects()[0].bottom;
|
|
|
|
return !(
|
|
(a_left > b_right) ||
|
|
(a_right < b_left) ||
|
|
(a_top > b_bottom) ||
|
|
(a_bottom < b_top)
|
|
);
|
|
}
|
|
|
|
function detectCollisions() {
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
// 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 = 'i';
|
|
|
|
var body = document.getElementsByTagName('body')[0];
|
|
body.appendChild(shootdiv);
|
|
}
|
|
|
|
shootdiv.style.left = (shoots[i][0]
|
|
- Math.round(shootdiv.getClientRects()[0].width/2)) + 'px';
|
|
shootdiv.style.top = shoots[i][1];
|
|
if (debug)
|
|
shootdiv.style.border = "1px solid";
|
|
} 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]
|
|
- Math.round(playerdiv.getClientRects()[0].width/2)) + 'px';
|
|
playerdiv.style.top = (player_pos[1]
|
|
- Math.round(playerdiv.getClientRects()[0].height/2)) + 'px';
|
|
if (debug)
|
|
playerdiv.style.border = "1px solid";
|
|
|
|
// render enemy
|
|
var enemydiv = document.getElementById("enemy");
|
|
enemydiv.style.left = (enemy_pos[0]
|
|
- Math.round(enemydiv.getClientRects()[0].width/2)) + 'px';
|
|
enemydiv.style.top = (enemy_pos[1]
|
|
- Math.round(enemydiv.getClientRects()[0].height/2)) + 'px';
|
|
if (debug)
|
|
enemydiv.style.border = "1px solid";
|
|
}
|
|
|
|
function animate() {
|
|
// 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] > window.innerWidth) enemy_pos[0] = window.innerWidth;
|
|
}
|
|
|
|
function gameLoop() {
|
|
detectCollisions();
|
|
render();
|
|
animate();
|
|
|
|
setTimeout("gameLoop()", 100);
|
|
}
|
|
|
|
function init() {
|
|
gameLoop();
|
|
}
|