Update
This commit is contained in:
parent
6232e81ab3
commit
c6d7ffc56f
29
Script.js
29
Script.js
@ -5,7 +5,6 @@ var canvasHeight = 650;
|
|||||||
var c = undefined;
|
var c = undefined;
|
||||||
var ctx = undefined;
|
var ctx = undefined;
|
||||||
|
|
||||||
// STATE GAME
|
|
||||||
let gameStarted = false;
|
let gameStarted = false;
|
||||||
let musicMuted = false;
|
let musicMuted = false;
|
||||||
|
|
||||||
@ -17,7 +16,7 @@ var game = {
|
|||||||
timer: 0,
|
timer: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
// INPUT
|
|
||||||
var keys = {
|
var keys = {
|
||||||
up: false,
|
up: false,
|
||||||
down: false,
|
down: false,
|
||||||
@ -26,7 +25,6 @@ var keys = {
|
|||||||
fire: false,
|
fire: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
// IMAGE ASSET
|
|
||||||
var playerShipImg = new Image();
|
var playerShipImg = new Image();
|
||||||
playerShipImg.src = "img/fighterShip.png";
|
playerShipImg.src = "img/fighterShip.png";
|
||||||
|
|
||||||
@ -42,17 +40,14 @@ bg2.src = "img/bg_0.png";
|
|||||||
var enemy1 = new Image();
|
var enemy1 = new Image();
|
||||||
enemy1.src = "img/alien_0.png";
|
enemy1.src = "img/alien_0.png";
|
||||||
|
|
||||||
// AUDIO
|
|
||||||
var backgroundMusic = document.createElement("audio");
|
var backgroundMusic = document.createElement("audio");
|
||||||
backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";
|
backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";
|
||||||
|
|
||||||
var laser = document.createElement("audio");
|
var laser = document.createElement("audio");
|
||||||
laser.src = "music/laser2.mp3";
|
laser.src = "music/laser2.mp3";
|
||||||
|
|
||||||
// MISILES & ENEMY
|
|
||||||
var missilesArray = [];
|
var missilesArray = [];
|
||||||
|
|
||||||
// INIT GAME
|
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -61,11 +56,9 @@ function init() {
|
|||||||
c = document.getElementById("canvas");
|
c = document.getElementById("canvas");
|
||||||
ctx = c.getContext("2d");
|
ctx = c.getContext("2d");
|
||||||
|
|
||||||
// INPUT HANDLER
|
|
||||||
document.addEventListener("keydown", keyDownPressed);
|
document.addEventListener("keydown", keyDownPressed);
|
||||||
document.addEventListener("keyup", keyUpPressed);
|
document.addEventListener("keyup", keyUpPressed);
|
||||||
|
|
||||||
// --- START MENU BUTTONS ---
|
|
||||||
document.getElementById("startBtn").onclick = () => {
|
document.getElementById("startBtn").onclick = () => {
|
||||||
document.getElementById("startMenu").style.display = "none";
|
document.getElementById("startMenu").style.display = "none";
|
||||||
gameStarted = true;
|
gameStarted = true;
|
||||||
@ -90,7 +83,6 @@ function init() {
|
|||||||
requestAnimationFrame(gameLoop);
|
requestAnimationFrame(gameLoop);
|
||||||
}
|
}
|
||||||
|
|
||||||
// MAIN GAME LOOP
|
|
||||||
function gameLoop() {
|
function gameLoop() {
|
||||||
if (gameStarted) {
|
if (gameStarted) {
|
||||||
clearGame();
|
clearGame();
|
||||||
@ -100,12 +92,11 @@ function gameLoop() {
|
|||||||
requestAnimationFrame(gameLoop);
|
requestAnimationFrame(gameLoop);
|
||||||
}
|
}
|
||||||
|
|
||||||
// INPUT HANDLER
|
|
||||||
function keyDownPressed(e) {
|
function keyDownPressed(e) {
|
||||||
if (e.keyCode == 87) keys.up = true; // W
|
if (e.keyCode == 87) keys.up = true;
|
||||||
if (e.keyCode == 83) keys.down = true; // S
|
if (e.keyCode == 83) keys.down = true;
|
||||||
if (e.keyCode == 65) keys.left = true; // A
|
if (e.keyCode == 65) keys.left = true;
|
||||||
if (e.keyCode == 68) keys.right = true; // D
|
if (e.keyCode == 68) keys.right = true;
|
||||||
|
|
||||||
if (e.keyCode == 87) {
|
if (e.keyCode == 87) {
|
||||||
backgroundMusic.play();
|
backgroundMusic.play();
|
||||||
@ -113,7 +104,6 @@ function keyDownPressed(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (e.keyCode == 32) {
|
if (e.keyCode == 32) {
|
||||||
// SPACE
|
|
||||||
keys.fire = true;
|
keys.fire = true;
|
||||||
missilesArray.push(
|
missilesArray.push(
|
||||||
new Missile(player1.x + 120, player1.y + 50, "white", 12)
|
new Missile(player1.x + 120, player1.y + 50, "white", 12)
|
||||||
@ -133,12 +123,10 @@ function keyUpPressed(e) {
|
|||||||
if (e.keyCode == 32) keys.fire = false;
|
if (e.keyCode == 32) keys.fire = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// CLEAR CANVAS
|
|
||||||
function clearGame() {
|
function clearGame() {
|
||||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// UPDATE GAME OBJECTS
|
|
||||||
function updateGame() {
|
function updateGame() {
|
||||||
addStarField();
|
addStarField();
|
||||||
|
|
||||||
@ -151,7 +139,6 @@ function updateGame() {
|
|||||||
game.frames++;
|
game.frames++;
|
||||||
}
|
}
|
||||||
|
|
||||||
// DRAW SPRITES
|
|
||||||
function drawGame() {
|
function drawGame() {
|
||||||
planet.draw();
|
planet.draw();
|
||||||
|
|
||||||
@ -164,7 +151,6 @@ function drawGame() {
|
|||||||
drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
|
drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
|
||||||
}
|
}
|
||||||
|
|
||||||
// PLAYER
|
|
||||||
class PlayerObject {
|
class PlayerObject {
|
||||||
constructor(x, y) {
|
constructor(x, y) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
@ -193,14 +179,12 @@ class PlayerObject {
|
|||||||
|
|
||||||
let player1 = new PlayerObject(100, 100);
|
let player1 = new PlayerObject(100, 100);
|
||||||
|
|
||||||
// TEXT
|
|
||||||
function drawNewText(txt, x, y, color) {
|
function drawNewText(txt, x, y, color) {
|
||||||
ctx.font = "20px Arial";
|
ctx.font = "20px Arial";
|
||||||
ctx.fillStyle = color;
|
ctx.fillStyle = color;
|
||||||
ctx.fillText(txt, x, y);
|
ctx.fillText(txt, x, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
// BACKGROUND
|
|
||||||
class backgroundObj {
|
class backgroundObj {
|
||||||
constructor(img, x, y, speed) {
|
constructor(img, x, y, speed) {
|
||||||
this.img = img;
|
this.img = img;
|
||||||
@ -239,7 +223,6 @@ function addStarField() {
|
|||||||
background2a.update();
|
background2a.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
// MISSILE
|
|
||||||
class Missile {
|
class Missile {
|
||||||
constructor(x, y, color, speed) {
|
constructor(x, y, color, speed) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
@ -260,7 +243,6 @@ class Missile {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ENEMY
|
|
||||||
class EnemyObj {
|
class EnemyObj {
|
||||||
constructor(x, y, speed) {
|
constructor(x, y, speed) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
@ -284,7 +266,6 @@ class EnemyObj {
|
|||||||
|
|
||||||
let enemy = new EnemyObj(800, 200, 12);
|
let enemy = new EnemyObj(800, 200, 12);
|
||||||
|
|
||||||
// PLANET
|
|
||||||
class PlanetObj {
|
class PlanetObj {
|
||||||
constructor(img, x, y, width, height, speed) {
|
constructor(img, x, y, width, height, speed) {
|
||||||
this.img = img;
|
this.img = img;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user