first commit
jpez
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Assignment 2</title>
|
||||
<link rel="stylesheet" href="game.css" />
|
||||
<script src="scripts/launch.js"></script>
|
||||
<script src="scripts/control.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="hud">
|
||||
<ul class="health">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="start" id="start">
|
||||
Start
|
||||
</div>
|
||||
|
||||
<div class="sky">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="player" class="character stand down">
|
||||
<div class="head">
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
</div>
|
||||
|
||||
<div class="weapon bow">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="alien" id="alien">
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
var upPressed = false;
|
||||
var downPressed = false;
|
||||
var leftPressed = false;
|
||||
var rightPressed = false;
|
||||
var lastPressed = false;
|
||||
|
||||
function keyup(event) {
|
||||
var player = document.getElementById('player');
|
||||
if (event.keyCode == 37) {
|
||||
leftPressed = false;
|
||||
lastPressed = 'left';
|
||||
}
|
||||
if (event.keyCode == 39) {
|
||||
rightPressed = false;
|
||||
lastPressed = 'right';
|
||||
}
|
||||
if (event.keyCode == 38) {
|
||||
upPressed = false;
|
||||
lastPressed = 'up';
|
||||
}
|
||||
if (event.keyCode == 40) {
|
||||
downPressed = false;
|
||||
lastPressed = 'down';
|
||||
}
|
||||
|
||||
player.className = 'character stand ' + lastPressed;
|
||||
}
|
||||
|
||||
|
||||
function move() {
|
||||
var player = document.getElementById('player');
|
||||
var positionLeft = player.offsetLeft;
|
||||
var positionTop = player.offsetTop;
|
||||
if (downPressed) {
|
||||
var newTop = positionTop+1;
|
||||
|
||||
var element = document.elementFromPoint(player.offsetLeft, newTop+32);
|
||||
if (element.classList.contains('sky') == false) {
|
||||
player.style.top = newTop + 'px';
|
||||
}
|
||||
|
||||
if (leftPressed == false) {
|
||||
if (rightPressed == false) {
|
||||
player.className = 'character walk down';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (upPressed) {
|
||||
var newTop = positionTop-1;
|
||||
|
||||
var element = document.elementFromPoint(player.offsetLeft, newTop);
|
||||
if (element.classList.contains('sky') == false) {
|
||||
player.style.top = newTop + 'px';
|
||||
}
|
||||
|
||||
if (leftPressed == false) {
|
||||
if (rightPressed == false) {
|
||||
player.className = 'character walk up';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (leftPressed) {
|
||||
var newLeft = positionLeft-1;
|
||||
|
||||
var element = document.elementFromPoint(newLeft, player.offsetTop);
|
||||
if (element.classList.contains('sky') == false) {
|
||||
player.style.left = newLeft + 'px';
|
||||
}
|
||||
|
||||
|
||||
player.className = 'character walk left';
|
||||
}
|
||||
if (rightPressed) {
|
||||
var newLeft = positionLeft+1;
|
||||
|
||||
var element = document.elementFromPoint(newLeft+32, player.offsetTop);
|
||||
if (element.classList.contains('sky') == false) {
|
||||
player.style.left = newLeft + 'px';
|
||||
}
|
||||
|
||||
player.className = 'character walk right';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function keydown(event) {
|
||||
if (event.keyCode == 37) {
|
||||
leftPressed = true;
|
||||
}
|
||||
if (event.keyCode == 39) {
|
||||
rightPressed = true;
|
||||
}
|
||||
if (event.keyCode == 38) {
|
||||
upPressed = true;
|
||||
}
|
||||
if (event.keyCode == 40) {
|
||||
downPressed = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function myLoadFunction() {
|
||||
timeout = setInterval(move, 10);
|
||||
document.addEventListener('keydown', keydown);
|
||||
document.addEventListener('keyup', keyup);
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', myLoadFunction);
|
||||
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 522 B |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 362 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 960 B |
|
After Width: | Height: | Size: 916 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 560 B |
|
After Width: | Height: | Size: 300 B |
|
After Width: | Height: | Size: 293 B |
|
After Width: | Height: | Size: 345 B |
|
After Width: | Height: | Size: 362 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 941 B |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 228 B |
|
After Width: | Height: | Size: 253 B |
|
After Width: | Height: | Size: 278 B |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -0,0 +1 @@
|
|||
/* logic for enemy movement and firing */
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/* player movement logic */
|
||||
|
||||
function setVars() {
|
||||
let player = document.getElementById("player");
|
||||
}
|
||||
|
||||
document.onloadend = setVars;
|
||||
|
||||
function verticalMovement(keyCode) {
|
||||
var playerLeft = player.offsetLeft;
|
||||
var playerTop = player.offsetTop;
|
||||
switch(keyCode) {
|
||||
case 38: /*Up*/
|
||||
case 87: /*W*/
|
||||
var element = document.elementFromPoint(playerLeft, playerTop-10);
|
||||
if (element.classList.contains("sky") == false) { /*change to only trigger when not grass*/
|
||||
player.style.top = (playerTop - 10) + "px";
|
||||
}
|
||||
player.className = "character walk up";
|
||||
console.log("Up");
|
||||
break;
|
||||
case 40: /*Down*/
|
||||
case 83: /*S*/
|
||||
var element = document.elementFromPoint(playerLeft, playerTop+10);
|
||||
if (element.classList.contains("sky") == false) {
|
||||
player.style.top = (playerTop + 10) + "px";
|
||||
}
|
||||
player.className = "character walk down";
|
||||
console.log("Down");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function horizontalMovement(keyCode) {
|
||||
var playerLeft = player.offsetLeft;
|
||||
var playerTop = player.offsetTop;
|
||||
switch(keyCode) {
|
||||
case 37: /*Left*/
|
||||
case 65: /*A*/
|
||||
var element = document.elementFromPoint(playerLeft-10, playerTop);
|
||||
if (element.classList.contains("sky") == false) {
|
||||
player.style.left = (playerLeft - 10) + "px";
|
||||
}
|
||||
player.className = "character walk left";
|
||||
console.log("Left");
|
||||
break;
|
||||
case 39: /*Right*/
|
||||
case 68: /*D*/
|
||||
var element = document.elementFromPoint(playerLeft+10, playerTop);
|
||||
if (element.classList.contains("sky") == false) {
|
||||
player.style.left = (playerLeft + 10) + "px";
|
||||
}
|
||||
player.className = "character walk right";
|
||||
console.log("Right");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function move(event) {
|
||||
verticalMovement(event.keyCode);
|
||||
horizontalMovement(event.keyCode);
|
||||
}
|
||||
|
||||
function stop(event) {
|
||||
switch(event.keyCode) {
|
||||
case 38: /*Up*/
|
||||
case 87: /*W*/
|
||||
player.className = "character stand up";
|
||||
break;
|
||||
case 40: /*Down*/
|
||||
case 83: /*S*/
|
||||
player.className = "character stand down";
|
||||
break;
|
||||
case 37: /*Left*/
|
||||
case 65: /*A*/
|
||||
player.className = "character stand left";
|
||||
break;
|
||||
case 39: /*Right*/
|
||||
case 68: /*D*/
|
||||
player.className = "character stand right";
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
/* enemy spawning logic */
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/*Add events to webpage*/
|
||||
|
||||
function loadScripts() {
|
||||
document.addEventListener("keydown", move)
|
||||
document.addEventListener("keyup", stop)
|
||||
document.getElementById("start").addEventListener("click", startGame)
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
var button = document.getElementById("start");
|
||||
button.style.display = "none";
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", loadScripts);
|
||||
|
|
@ -0,0 +1 @@
|
|||
/*Logic for player lives and firing ability */
|
||||
|
|
@ -0,0 +1 @@
|
|||
/* logic for bombs */
|
||||
|
|
@ -0,0 +1 @@
|
|||
/* score tracking and scoreboard logic */
|
||||