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 */
|
||||||