update
This commit is contained in:
Bluwww
parent
f83821447f
commit
6232e81ab3
548
Script.js
548
Script.js
@ -2,38 +2,36 @@
|
||||
|
||||
var canvasWidth = 1280;
|
||||
var canvasHeight = 650;
|
||||
var c = undefined
|
||||
var ctx = undefined
|
||||
var c = undefined;
|
||||
var ctx = undefined;
|
||||
|
||||
// STATE GAME
|
||||
let gameStarted = false;
|
||||
let musicMuted = false;
|
||||
|
||||
var game = {
|
||||
level: 1,
|
||||
speed: 1,
|
||||
gameOver: false,
|
||||
frames: 0,
|
||||
timer: 0,
|
||||
}
|
||||
level: 1,
|
||||
speed: 1,
|
||||
gameOver: false,
|
||||
frames: 0,
|
||||
timer: 0,
|
||||
};
|
||||
|
||||
// INPUT
|
||||
var keys = {
|
||||
up: false,
|
||||
down: false,
|
||||
left: false,
|
||||
right: false,
|
||||
fire: false
|
||||
}
|
||||
up: false,
|
||||
down: false,
|
||||
left: false,
|
||||
right: false,
|
||||
fire: false,
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Untuk background
|
||||
// IMAGE ASSET
|
||||
var playerShipImg = new Image();
|
||||
playerShipImg.src = 'img/fighterShip.png'
|
||||
playerShipImg.src = "img/fighterShip.png";
|
||||
|
||||
var bg0 = new Image();
|
||||
bg0.src = 'img/SpritesPlanet/BlueGiant.png';
|
||||
bg0.src = "img/SpritesPlanet/BlueGiant.png";
|
||||
|
||||
var bg1 = new Image();
|
||||
bg1.src = "img/bg_0.png";
|
||||
@ -41,367 +39,252 @@ bg1.src = "img/bg_0.png";
|
||||
var bg2 = new Image();
|
||||
bg2.src = "img/bg_0.png";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var enemyImgArray = [];
|
||||
enemyImgArray.length = 7;
|
||||
|
||||
var enemy1 = new Image();
|
||||
enemy1.src = "img/alien_0.png"
|
||||
enemy1.src = "img/alien_0.png";
|
||||
|
||||
|
||||
var missilesArray = [];
|
||||
|
||||
|
||||
|
||||
|
||||
var backgroundMusic = document.createElement('audio');
|
||||
// AUDIO
|
||||
var backgroundMusic = document.createElement("audio");
|
||||
backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";
|
||||
|
||||
var laser = document.createElement("audio");
|
||||
laser.src = "music/laser2.mp3";
|
||||
|
||||
// MISILES & ENEMY
|
||||
var missilesArray = [];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// INIT GAME
|
||||
window.onload = function () {
|
||||
init()
|
||||
}
|
||||
init();
|
||||
};
|
||||
|
||||
function init() {
|
||||
c = document.getElementById("canvas");
|
||||
ctx = c.getContext('2d');
|
||||
document.addEventListener('keydown', keyDownPressed, false);
|
||||
document.addEventListener('keyup', keyUpPressed, false);
|
||||
gameLoop();
|
||||
c = document.getElementById("canvas");
|
||||
ctx = c.getContext("2d");
|
||||
|
||||
// INPUT HANDLER
|
||||
document.addEventListener("keydown", keyDownPressed);
|
||||
document.addEventListener("keyup", keyUpPressed);
|
||||
|
||||
// --- START MENU BUTTONS ---
|
||||
document.getElementById("startBtn").onclick = () => {
|
||||
document.getElementById("startMenu").style.display = "none";
|
||||
gameStarted = true;
|
||||
};
|
||||
|
||||
document.getElementById("musicBtn").onclick = () => {
|
||||
musicMuted = !musicMuted;
|
||||
backgroundMusic.muted = musicMuted;
|
||||
document.getElementById("musicBtn").innerText = musicMuted
|
||||
? "Music: OFF"
|
||||
: "Music: ON";
|
||||
};
|
||||
|
||||
document.getElementById("optionsBtn").onclick = () => {
|
||||
alert("Options menu sedang dalam pengembangan.");
|
||||
};
|
||||
|
||||
document.getElementById("exitBtn").onclick = () => {
|
||||
window.close();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
document.getElementById("startBtn").onclick = () => {
|
||||
document.getElementById("startMenu").style.display = "none";
|
||||
gameStarted = true;
|
||||
gameLoop();
|
||||
};
|
||||
|
||||
document.getElementById("musicBtn").onclick = () => {
|
||||
musicMuted = !musicMuted;
|
||||
backgroundMusic.muted = musicMuted;
|
||||
|
||||
document.getElementById("musicBtn").innerText = musicMuted
|
||||
? "Music: OFF"
|
||||
: "Music: ON";
|
||||
};
|
||||
|
||||
document.getElementById("optionsBtn").onclick = () => {
|
||||
alert(
|
||||
"Options menu belum dibuat. Kamu bisa tambah difficulty, sensitivity, dll."
|
||||
);
|
||||
};
|
||||
|
||||
document.getElementById("exitBtn").onclick = () => {
|
||||
window.close();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function gameLoop() {
|
||||
if (!gameStarted) return;
|
||||
|
||||
clearGame();
|
||||
updateGame();
|
||||
drawGame();
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
|
||||
function keyDownPressed(e) {
|
||||
if (e.keyCode == 87) {
|
||||
keys.up = true;
|
||||
backgroundMusic.play();
|
||||
backgroundMusic.volume = 0.8;
|
||||
} else if (e.keyCode == 83) {
|
||||
keys.down = true
|
||||
}
|
||||
|
||||
if (e.keyCode == 65) {
|
||||
keys.left = true;
|
||||
}
|
||||
|
||||
if (e.keyCode == 68) {
|
||||
keys.right = true;
|
||||
}
|
||||
|
||||
if (e.keyCode == 32) {
|
||||
keys.fire = true;
|
||||
missilesArray.push(new Missile(player1.x + 120, player1.y + 50, 'white', 12));
|
||||
|
||||
|
||||
laser.currentTime = 0;
|
||||
laser.play();
|
||||
laser.volume = 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function keyUpPressed(e) {
|
||||
if (e.keyCode == 87) {
|
||||
keys.up = false;
|
||||
} else if (e.keyCode == 83) {
|
||||
keys.down = false;
|
||||
}
|
||||
|
||||
if (e.keyCode == 65) {
|
||||
keys.left = false;
|
||||
}
|
||||
|
||||
if (e.keyCode == 68) {
|
||||
keys.right = false;
|
||||
}
|
||||
|
||||
if (e.keyCode == 32) {
|
||||
keys.fire = false;
|
||||
}
|
||||
}
|
||||
|
||||
function clearGame() {
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function updateGame() {
|
||||
|
||||
addStarField();
|
||||
planet.update();
|
||||
|
||||
player1.update();
|
||||
|
||||
game.frames++;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function drawGame() {
|
||||
|
||||
planet.draw();
|
||||
|
||||
player1.draw();
|
||||
|
||||
enemy.draw();
|
||||
|
||||
enemy.update();
|
||||
|
||||
for(var i = 0; i < missilesArray.length; i++){
|
||||
var m = missilesArray[i];
|
||||
m.draw();
|
||||
m.update();
|
||||
}
|
||||
|
||||
|
||||
|
||||
drawNewText('Score: ' +player1.score, 30, 610, 'white');
|
||||
drawNewText('Player Lives: ' +player1.lives, 1100, 610, 'white');
|
||||
}
|
||||
|
||||
function gameLoop(timestamp){
|
||||
// MAIN GAME LOOP
|
||||
function gameLoop() {
|
||||
if (gameStarted) {
|
||||
clearGame();
|
||||
updateGame();
|
||||
drawGame();
|
||||
window.requestAnimationFrame(gameLoop);
|
||||
}
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
class PlayerObject{
|
||||
constructor(x, y){
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 170;
|
||||
this.height = 105;
|
||||
this.image = playerShipImg;
|
||||
this.speed = 8;
|
||||
this.lives = 3;
|
||||
this.score = 0;
|
||||
this.health = 100;
|
||||
}
|
||||
draw(){
|
||||
ctx.save();
|
||||
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
|
||||
ctx.restore();
|
||||
}
|
||||
// INPUT HANDLER
|
||||
function keyDownPressed(e) {
|
||||
if (e.keyCode == 87) keys.up = true; // W
|
||||
if (e.keyCode == 83) keys.down = true; // S
|
||||
if (e.keyCode == 65) keys.left = true; // A
|
||||
if (e.keyCode == 68) keys.right = true; // D
|
||||
|
||||
update(){
|
||||
if (keys.up) {
|
||||
if(this.y > 0){
|
||||
this.y -= this.speed;
|
||||
}
|
||||
}
|
||||
if (e.keyCode == 87) {
|
||||
backgroundMusic.play();
|
||||
backgroundMusic.volume = 0.8;
|
||||
}
|
||||
|
||||
else if (keys.down) {
|
||||
if (this.x < canvasWidth - this.width) {
|
||||
this.y += this.speed;
|
||||
}
|
||||
}
|
||||
if (e.keyCode == 32) {
|
||||
// SPACE
|
||||
keys.fire = true;
|
||||
missilesArray.push(
|
||||
new Missile(player1.x + 120, player1.y + 50, "white", 12)
|
||||
);
|
||||
|
||||
if (keys.right) {
|
||||
if (this.x < canvasWidth - this.width) {
|
||||
this.x += this.speed;
|
||||
}
|
||||
}
|
||||
laser.currentTime = 0;
|
||||
laser.play();
|
||||
laser.volume = 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
if (keys.left) {
|
||||
if (this.x > 10) {
|
||||
this.x -= this.speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
function keyUpPressed(e) {
|
||||
if (e.keyCode == 87) keys.up = false;
|
||||
if (e.keyCode == 83) keys.down = false;
|
||||
if (e.keyCode == 65) keys.left = false;
|
||||
if (e.keyCode == 68) keys.right = false;
|
||||
if (e.keyCode == 32) keys.fire = false;
|
||||
}
|
||||
|
||||
// CLEAR CANVAS
|
||||
function clearGame() {
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
}
|
||||
|
||||
// UPDATE GAME OBJECTS
|
||||
function updateGame() {
|
||||
addStarField();
|
||||
|
||||
planet.update();
|
||||
enemy.update();
|
||||
player1.update();
|
||||
|
||||
missilesArray.forEach((m) => m.update());
|
||||
|
||||
game.frames++;
|
||||
}
|
||||
|
||||
// DRAW SPRITES
|
||||
function drawGame() {
|
||||
planet.draw();
|
||||
|
||||
enemy.draw();
|
||||
player1.draw();
|
||||
|
||||
missilesArray.forEach((m) => m.draw());
|
||||
|
||||
drawNewText("Score: " + player1.score, 30, 610, "white");
|
||||
drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
|
||||
}
|
||||
|
||||
// PLAYER
|
||||
class PlayerObject {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 170;
|
||||
this.height = 105;
|
||||
this.image = playerShipImg;
|
||||
this.speed = 8;
|
||||
this.lives = 3;
|
||||
this.score = 0;
|
||||
this.health = 100;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
if (keys.up && this.y > 0) this.y -= this.speed;
|
||||
if (keys.down && this.y < canvasHeight - this.height) this.y += this.speed;
|
||||
|
||||
if (keys.right && this.x < canvasWidth - this.width) this.x += this.speed;
|
||||
if (keys.left && this.x > 10) this.x -= this.speed;
|
||||
}
|
||||
}
|
||||
|
||||
let player1 = new PlayerObject(100, 100);
|
||||
|
||||
function drawNewText(txt, x, y, color){
|
||||
ctx.font = "20px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(txt, x, y);
|
||||
// TEXT
|
||||
function drawNewText(txt, x, y, color) {
|
||||
ctx.font = "20px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(txt, x, y);
|
||||
}
|
||||
|
||||
// BACKGROUND
|
||||
class backgroundObj {
|
||||
constructor(img, x, y, speed) {
|
||||
this.img = img;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 2000;
|
||||
this.height = 1200;
|
||||
this.speed = speed;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class backgroundObj{
|
||||
constructor(img, x, y, speed) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 2000;
|
||||
this.height = 1200;
|
||||
this.img = img;
|
||||
this.speed = speed;
|
||||
}
|
||||
draw() {
|
||||
ctx.save();
|
||||
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x -= this.speed;
|
||||
|
||||
if (this.x < -2000) {
|
||||
this.x = 2000;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x -= this.speed;
|
||||
if (this.x < -2000) this.x = 2000;
|
||||
}
|
||||
}
|
||||
|
||||
let background2 = new backgroundObj(bg1, 0, 0, game.speed * 2);
|
||||
let background2a = new backgroundObj(bg1, 2000, 0, game.speed * 2);
|
||||
|
||||
let background2 = new backgroundObj(bg1, 0, 0, game.speed*2);
|
||||
let background2a = new backgroundObj(bg1, 2000, 0, game.speed*2);
|
||||
|
||||
let background3 = new backgroundObj(bg2, 0, 0, game.speed*1);
|
||||
let background3a = new backgroundObj(bg2, 2000, 0, game.speed*1);
|
||||
|
||||
let background3 = new backgroundObj(bg2, 0, 0, game.speed * 1);
|
||||
let background3a = new backgroundObj(bg2, 2000, 0, game.speed * 1);
|
||||
|
||||
function addStarField() {
|
||||
background3.draw();
|
||||
background3.update();
|
||||
background3a.draw();
|
||||
background3a.update();
|
||||
background3.draw();
|
||||
background3.update();
|
||||
background3a.draw();
|
||||
background3a.update();
|
||||
|
||||
background2.draw();
|
||||
background2.update();
|
||||
background2a.draw();
|
||||
background2a.update();
|
||||
background2.draw();
|
||||
background2.update();
|
||||
background2a.draw();
|
||||
background2a.update();
|
||||
}
|
||||
|
||||
class Missile{
|
||||
constructor(x, y, color, speed){
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 3;
|
||||
this.height = 10;
|
||||
this.color = color;
|
||||
this.speed = speed;
|
||||
}
|
||||
// MISSILE
|
||||
class Missile {
|
||||
constructor(x, y, color, speed) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 3;
|
||||
this.height = 10;
|
||||
this.color = color;
|
||||
this.speed = speed;
|
||||
}
|
||||
|
||||
draw(){
|
||||
ctx.save();
|
||||
ctx.fillStyle = this.color;
|
||||
ctx.fillRect(this.x, this.y, this.width, this.height);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = this.color;
|
||||
ctx.fillRect(this.x, this.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update(){
|
||||
this.x += this.speed
|
||||
}
|
||||
update() {
|
||||
this.x += this.speed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ENEMY
|
||||
class EnemyObj {
|
||||
constructor(x, y, speed) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 170;
|
||||
this.height = 105;
|
||||
this.image = enemy1;
|
||||
this.speed = speed;
|
||||
this.health = 100;
|
||||
this.damage = 10;
|
||||
}
|
||||
draw() {
|
||||
ctx.save();
|
||||
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
|
||||
ctx.restore();
|
||||
}
|
||||
constructor(x, y, speed) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 170;
|
||||
this.height = 105;
|
||||
this.image = enemy1;
|
||||
this.speed = speed;
|
||||
this.health = 100;
|
||||
this.damage = 10;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x -= this.speed;
|
||||
}
|
||||
draw() {
|
||||
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x -= this.speed;
|
||||
}
|
||||
}
|
||||
|
||||
let enemy = new EnemyObj(800, 200, 12);
|
||||
|
||||
|
||||
|
||||
|
||||
// PLANET
|
||||
class PlanetObj {
|
||||
constructor(img, x, y, width, height, speed) {
|
||||
this.img = img;
|
||||
@ -421,12 +304,9 @@ class PlanetObj {
|
||||
|
||||
update() {
|
||||
if (!this.visible) return;
|
||||
|
||||
this.x -= this.speed;
|
||||
|
||||
if (this.x < -this.width) {
|
||||
this.visible = false;
|
||||
}
|
||||
if (this.x < -this.width) this.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
60
Style.css
60
Style.css
@ -40,35 +40,67 @@ body {
|
||||
height: 650px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.85);
|
||||
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(6px);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
z-index: 10;
|
||||
font-family: Arial, sans-serif;
|
||||
|
||||
font-family: 'Poppins', Arial, sans-serif;
|
||||
|
||||
animation: fadeIn 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 60px;
|
||||
margin-bottom: 50px;
|
||||
color: white;
|
||||
letter-spacing: 3px;
|
||||
font-size: 70px;
|
||||
margin-bottom: 40px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 4px;
|
||||
|
||||
text-shadow:
|
||||
0 0 10px #00eaff,
|
||||
0 0 20px #00eaff,
|
||||
0 0 30px rgba(0, 234, 255, 0.7);
|
||||
|
||||
animation: glow 3s infinite alternate ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from { text-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
|
||||
to { text-shadow: 0 0 20px #00eaff, 0 0 40px #00eaff; }
|
||||
}
|
||||
|
||||
.menuButton {
|
||||
font-size: 30px;
|
||||
padding: 10px 40px;
|
||||
font-size: 28px;
|
||||
padding: 12px 50px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
background: #222;
|
||||
border: 2px solid white;
|
||||
|
||||
background: rgba(20, 20, 20, 0.8);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
transition: 0.2s;
|
||||
|
||||
border: 2px solid #00eaff;
|
||||
border-radius: 12px;
|
||||
|
||||
box-shadow: 0 0 10px rgba(0, 234, 255, 0.4);
|
||||
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.menuButton:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
background: #00eaff;
|
||||
color: #000;
|
||||
box-shadow: 0 0 20px #00eaff;
|
||||
transform: scale(1.05)
|
||||
}
|
||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user