Skip to content

Commit

Permalink
Added modal to replace alert. Fixed laser collisions for the left sid…
Browse files Browse the repository at this point in the history 
…e of the laser hitting a player. Fixed players not getting placed properly on cached refresh. Renamed score.js to reset.js. Gave key listener functions global names so the listeners could be removed and re-added.
  • Loading branch information
@hugocowan
hugocowan committed Feb 26, 2019
1 parent c5ff180 commit 25578a3
Show file tree
Hide file tree
Showing 15 changed files with 302 additions and 212 deletions.
25 changes: 25 additions & 0 deletions css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added images/favicon-32x32.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 8 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@
<script type="text/javascript" src="js/constructors/Player.js"></script>
<script type="text/javascript" src="js/constructors/Arena.js"></script>
<script type="text/javascript" src="js/constructors/Laser.js"></script>
<script type="text/javascript" src="js/constructors/Modal.js"></script>
<script type="text/javascript" src="js/constructors/Ball.js"></script>
<script type="text/javascript" src="./js/collisions.js"></script>
<script type="text/javascript" src="./js/movement.js"></script>
<script type="text/javascript" src="js/collisions.js"></script>
<script type="text/javascript" src="js/movement.js"></script>
<script type="text/javascript" src="js/misc/audio.js"></script>
<script type="text/javascript" src="js/misc/score.js"></script>
<script type="text/javascript" src="./js/lasers.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="js/misc/reset.js"></script>
<script type="text/javascript" src="js/lasers.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
</head>
<body>
<div class="cover one"></div>
Expand Down
71 changes: 17 additions & 54 deletions js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,61 @@
//Global variables.
let arena, platforms, keypress, ball, playerOne, playerTwo;
let arena, platforms, modal, keydown, keyup, keypress = {}, ball, playerOne, playerTwo;

window.addEventListener('DOMContentLoaded', function setup() {

arena = new Arena('arena-1');
ball = new Ball();
playerOne = new Player('Player 1');
playerTwo = new Player('Player 2');
keypress = {};
platforms = [
new Platform('370px', '10%'),
new Platform('370px', '42%'),
new Platform('370px', '74.4%'),
new Platform('260px', '0'),
new Platform('260px', '84.4%'),
new Platform('150px', '5%', '209px'),
new Platform('150px', '62.4%', '209px')
];
arena = new Arena(1);

//Keydown events
window.addEventListener('keydown', function (event) {
keydown = function (event) {
event.preventDefault();

const key = event.key.length > 1 ? event.key : event.key.toLowerCase();
keypress[key] = true;

switch(key) {

//player shooting. noLasers gives the delay between shots.
//player shooting.
case 'Tab':
case 'e':
if (playerOne.noLasers) {

playSoundEffect('laser', 'mp3');
pewPew(playerOne, playerTwo);

}
break;

case 'Backspace':
case 'Shift':

if (playerTwo.noLasers) {

playSoundEffect('laser', 'mp3');
pewPew(playerTwo, playerOne);

}
pewPew(key);
break;


//player crouching.
case 's':

crouchDown(playerOne);
break;

case 'ArrowDown':

crouchDown(playerTwo);
crouch(false, key);
break;


//player jumping.
case 'ArrowUp':
!playerTwo.airborne ? characterJump(playerTwo) : null;
break;

case 'w':
!playerOne.airborne ? characterJump(playerOne) : null;

characterJump(key);
break;
}
});
};

//Keyup events
window.addEventListener('keyup', function (event) {
keyup = function (event) {

const key = event.key.length > 1 ? event.key : event.key.toLowerCase();
keypress[key] = false;

if (key === 's') {
crouchUp(playerOne);
if (key === 's' || key === 'ArrowDown') {
crouch(true, key);
}
};

if (key === 'ArrowDown') {
crouchUp(playerTwo);
}
});
window.addEventListener('keydown', keydown);
window.addEventListener('keyup', keyup);


//Update platform positions on window resize
window.addEventListener('resize', function(eee) {
window.addEventListener('resize', function() {

platforms.forEach(function (platform) {
platform.setRect();
Expand All @@ -101,7 +66,7 @@ window.addEventListener('DOMContentLoaded', function setup() {
});


//Movement Interval.
//Movement and collisions.
function movementAndCollision() {

playerCollisions(playerOne, playerTwo);
Expand All @@ -111,9 +76,7 @@ window.addEventListener('DOMContentLoaded', function setup() {
playerMovementCSS('ArrowLeft', 'ArrowRight', playerTwo);

requestAnimationFrame(movementAndCollision);

}

requestAnimationFrame(movementAndCollision);

});
13 changes: 6 additions & 7 deletions js/collisions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,17 @@ function pewPewCollisions(laser, opponent) {
const laserRect = laser.getRect(),
opponentRect = opponent.getRect();

if ((laserRect.right > opponentRect.left && laserRect.right < opponentRect.right &&
if (
(laserRect.right > opponentRect.left && laserRect.right < opponentRect.right &&
laserRect.top > opponentRect.top && laserRect.bottom < opponentRect.bottom) ||
(laserRect.left > opponentRect.right && laserRect.left < opponentRect.left &&
laserRect.top > opponentRect.top && laserRect.bottom < opponentRect.bottom)) {
(laserRect.left < opponentRect.right && laserRect.left > opponentRect.left &&
laserRect.top > opponentRect.top && laserRect.bottom < opponentRect.bottom)) {

playSoundEffect('hurt', 'wav');

laser.html.remove();

//Logic for scoreboard/win condition. In a setTimeout to allow pain sound to run before the alert does.
setTimeout(function () {
score(opponent);
}, 20);
//Logic for scoreboard/win condition.
reset(opponent);
}
}
63 changes: 53 additions & 10 deletions js/constructors/Arena.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,63 @@
class Arena {

constructor(arenaName) {
constructor(level) {

if (document.getElementsByTagName('main')[0]) {
document.getElementsByTagName('body')[0].removeChild(document.getElementsByTagName('main')[0]);
}


const arena = document.createElement('main'),
const oldArena = document.getElementsByTagName('main')[0],
arena = document.createElement('main'),
platformContainer = document.createElement('div'),
body = document.getElementsByClassName('border')[0];

arena.setAttribute('class', arenaName);
if (oldArena) {
document.getElementsByClassName('border')[0].removeChild(oldArena);
}

arena.setAttribute('class', level);
platformContainer.setAttribute('class', 'platforms');

body.appendChild(arena);
arena.appendChild(platformContainer);

function createPlatforms(platformData) {

platforms = [];
platformData.forEach(function (platform) {
platforms.push(new Platform(platform.top, platform.left, platform.width, platform.height));
});
}

if (level === 1) {

createPlatforms([
{top: '150px', left: '5%', width: '209px'}, {top: '150px', left: '62.4%', width: '209px'},
{top: '260px', left: '0'}, {top: '260px', left: '84.4%'},
{top: '370px', left: '10%'}, {top: '370px', left: '42%'}, {top: '370px', left: '74.4%'}
]);

} else if (level === 2) {

createPlatforms([
{top: '150px', left: '10%'}, {top: '150px', left: '42%'}, {top: '150px', left: '74.4%'},
{top: '260px', left: '0'}, {top: '260px', left: '84.4%'},
{top: '370px', left: '5%', width: '209px'}, {top: '370px', left: '62.4%', width: '209px'}
]);

} else if (level === 3) {

createPlatforms([
{top: '150px', left: '10%'}, {top: '150px', left: '42%'}, {top: '150px', left: '74.4%'},
{top: '260px', left: '5%', width: '209px'}, {top: '260px', left: '62.4%', width: '209px'},
{top: '370px', left: '0'}, {top: '370px', left: '84.4%'}
]);

}

this.html = arena;
this.rect = null;
this.level = level;

ball = new Ball(arena);
playerOne = new Player(arena, 'Player 1');
playerTwo = new Player(arena, 'Player 2');
}


Expand All @@ -30,7 +69,11 @@ class Arena {
return this.rect = this.html.getBoundingClientRect();
}

static getPlayableWidth() {
return arena.html.clientWidth - playerOne.html.clientWidth;
getPlayableWidth(player) {
return this.html.clientWidth - player.html.clientWidth;
}

getPlayableHeight(player) {
return this.html.clientHeight - player.html.clientHeight;
};
}
26 changes: 13 additions & 13 deletions js/constructors/Ball.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@

class Ball {

constructor() {
constructor(arena) {

const ball = document.createElement('div');
ball.setAttribute('class', 'ball');

const randomNumber = Math.floor(Math.random() * 10),
arenaName = arena.html.className;
const ball = document.createElement('div'),
oldBall = document.getElementsByClassName('ball')[0],
randomNumber = Math.floor(Math.random() * 10),
arenaName = arena.className;

if (arenaName === 'arena-1' && randomNumber <= 3) {
ball.style.left = '28px';
ball.style.top = '200px';
} else if (arenaName === 'arena-1' && randomNumber >= 7) {
ball.style.left = '570px';
ball.style.top = '200px';
if (oldBall) {
document.getElementsByTagName('main')[0].removeChild(oldBall);
}

arena.html.appendChild(ball);
ball.setAttribute('class', 'ball');

randomNumber <= 3 ? ball.style.left = '28px' : randomNumber >= 7 ? ball.style.left = '570px' : null;
randomNumber <= 3 || randomNumber >= 7 ? ball.style.top = '200px' : null;

arena.appendChild(ball);

this.html = ball;
this.rect = null;
Expand Down
Loading

0 comments on commit 25578a3

Please sign in to comment.