2526-web/Kelompok_09_Space-odyssey
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Pippo

Browse Source
This commit is contained in:
Hijau-dev 2025-12-08 16:28:37 +07:00
parent 634f614231
commit 94ebbd2d00
3 changed files with 112 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Main.html
View File

@ -7,10 +7,18 @@
<link rel="stylesheet" href="Style.css"> <link rel="stylesheet" href="Style.css">
</head> </head>
<body> <body>
<div id="startMenu">
<div class="title">SPACE GAME</div>
<button class="menuButton" id="startBtn">Start</button>
<button class="menuButton" id="costumeBtn">Costume</button>
<button class="menuButton" id="optionBtn">Options</button>
<button class="menuButton" id="exitBtn">Exit</button>
</div>
<div id="game"> <div id="game">
<canvas id="canvas" height="650" width="1280"></canvas> <canvas id="canvas" height="650" width="1280"></canvas>
</div> </div>
<script src="Script.js"></script> <script src="Script.js"></script>
</body> </body>
</html> </html>

125
Script.js
View File

@ -1,5 +1,6 @@
"use strict"; "use strict";
/* ------------- AUDIO & BGM ------------- */
const bgmList = [ const bgmList = [
{ normal: "music/Scary.mp3", gameover: "music/ScaryGO.mp3" }, { normal: "music/Scary.mp3", gameover: "music/ScaryGO.mp3" },
{ normal: "music/Fear.mp3", gameover: "music/FearGO.mp3" }, { normal: "music/Fear.mp3", gameover: "music/FearGO.mp3" },
@ -17,12 +18,11 @@ function pickRandomBGM() {
gameOverBGM.src = bgm.gameover; gameOverBGM.src = bgm.gameover;
} }
/* ------------- CANVAS / GAME VARS ------------- */
var canvasWidth = 1280; var canvasWidth = 1280;
var canvasHeight = 650; var canvasHeight = 650;
var c = undefined; var c = undefined;
var ctx = undefined; var ctx = undefined;
var gameStarted = false;
var musicMuted = false;
let lastFrameTime = 0; let lastFrameTime = 0;
const frameInterval = 1000 / 80; const frameInterval = 1000 / 80;
@ -35,6 +35,10 @@ var game = {
timer: 0, timer: 0,
}; };
/* gameState: "menu" | "playing" | "paused" */
let gameState = "menu";
/* ------------- INPUT STATE ------------- */
var keys = { var keys = {
up: false, up: false,
down: false, down: false,
@ -43,6 +47,7 @@ var keys = {
fire: false, fire: false,
}; };
/* ------------- IMAGES & ASSETS ------------- */
var playerShipImg = new Image(); var playerShipImg = new Image();
playerShipImg.src = "img/Player/pesawat22.png"; playerShipImg.src = "img/Player/pesawat22.png";
@ -55,24 +60,11 @@ bg1.src = "img/bg_1.png";
var bg2 = new Image(); var bg2 = new Image();
bg2.src = "img/bg_2.png"; bg2.src = "img/bg_2.png";
var enemy1 = new Image();
enemy1.src = "img/alien_0.png";
var enemyImgArray = []; var enemyImgArray = [];
enemyImgArray.length = 4; enemyImgArray.length = 4;
let audioStarted = false;
window.addEventListener("keydown", () => {
if (!audioStarted) {
currentBGM.play();
audioStarted = true;
}
});
for (var i = 0; i < enemyImgArray.length; i++) { for (var i = 0; i < enemyImgArray.length; i++) {
enemyImgArray[i] = new Image(); enemyImgArray[i] = new Image();
enemyImgArray[i].src = "img/alien_" + [i] + ".png"; enemyImgArray[i].src = "img/alien_" + i + ".png";
} }
var missilesArray = []; var missilesArray = [];
@ -92,26 +84,92 @@ for (let i = 1; i <= 4; i++) {
} }
window.onload = function () { window.onload = function () {
init(); setup();
}; };
function init() { function setup() {
c = document.getElementById("canvas"); c = document.getElementById("canvas");
ctx = c.getContext("2d"); ctx = c.getContext("2d");
window.addEventListener(
"keydown",
function (e) {
const block = ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
if (block.includes(e.code)) e.preventDefault();
},
{ passive: false }
);
document.addEventListener("keydown", keyDownPressed, false); document.addEventListener("keydown", keyDownPressed, false);
document.addEventListener("keyup", keyUpPressed, false); document.addEventListener("keyup", keyUpPressed, false);
gameStarted = true; const startBtn = document.getElementById("startBtn");
const costumeBtn = document.getElementById("costumeBtn");
const optionBtn = document.getElementById("optionBtn");
const exitBtn = document.getElementById("exitBtn");
if (startBtn) {
startBtn.onclick = function () {
startGame();
};
}
if (costumeBtn) {
costumeBtn.onclick = function () {
alert("Costume menu belum dibuat (kalau mau, aku bisa bikinin!)");
};
}
if (optionBtn) {
optionBtn.onclick = function () {
alert("Options menu belum dibuat.");
};
}
if (exitBtn) {
exitBtn.onclick = function () {
alert("Terima kasih telah bermain!");
};
}
clearGame();
}
let audioStarted = false;
function startGame() {
const menu = document.getElementById("startMenu");
if (menu) menu.style.display = "none";
game.gameOver = false;
game.frames = 0;
game.timer = 0;
player1.x = 100;
player1.y = canvasHeight / 2 - player1.height / 2;
player1.vx = 0;
player1.vy = 0;
player1.lives = 3;
player1.score = 0;
enemyShipArray.length = 0;
missilesArray.length = 0;
pickRandomBGM(); pickRandomBGM();
currentBGM.volume = 1; currentBGM.volume = 1;
currentBGM.play(); currentBGM.play().catch(() => {
});
audioStarted = true;
gameState = "playing";
requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop);
} }
let gameStarted = false;
function gameLoop(timestamp) { function gameLoop(timestamp) {
if (!gameStarted) return; if (gameState !== "playing") {
return;
}
if (!gameStarted) {
gameStarted = true;
lastFrameTime = timestamp;
}
if (game.gameOver) { if (game.gameOver) {
drawGameOver(); drawGameOver();
@ -130,6 +188,9 @@ function gameLoop(timestamp) {
} }
function keyDownPressed(e) { function keyDownPressed(e) {
if (gameState !== "playing") return;
if (e.keyCode == 87 || e.keyCode == 38) { if (e.keyCode == 87 || e.keyCode == 38) {
keys.up = true; keys.up = true;
} else if (e.keyCode == 83 || e.keyCode == 40) { } else if (e.keyCode == 83 || e.keyCode == 40) {
@ -145,18 +206,21 @@ function keyDownPressed(e) {
} }
if (e.keyCode == 32) { if (e.keyCode == 32) {
keys.fire = true; keys.fire = true;
missilesArray.push( missilesArray.push(
new LaserBullet(player1.x + player1.width, player1.y + player1.height / 2) new LaserBullet(player1.x + player1.width, player1.y + player1.height / 2)
); );
laser.currentTime = 0; laser.currentTime = 0;
laser.play();
laser.volume = 0.4; laser.volume = 0.4;
laser.play();
} }
} }
function keyUpPressed(e) { function keyUpPressed(e) {
if (gameState !== "playing") return;
if (e.keyCode == 87 || e.keyCode == 38) { if (e.keyCode == 87 || e.keyCode == 38) {
keys.up = false; keys.up = false;
} else if (e.keyCode == 83 || e.keyCode == 40) { } else if (e.keyCode == 83 || e.keyCode == 40) {
@ -176,11 +240,18 @@ function keyUpPressed(e) {
} }
} }
/* ------------- RENDER / UPDATE ------------- */
function clearGame() { function clearGame() {
// clear and draw solid background so canvas never transparent
ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
} }
function updateGame() { function updateGame() {
// Only update while playing (should already be true)
if (gameState !== "playing") return;
addStarField(); addStarField();
addShips(); addShips();
@ -238,17 +309,25 @@ function drawGame() {
m.draw(); m.draw();
m.update(); m.update();
let hit = false;
for (var j = 0; j < enemyShipArray.length; j++) { for (var j = 0; j < enemyShipArray.length; j++) {
var en = enemyShipArray[j]; var en = enemyShipArray[j];
if (Tabrakan(m, en)) { if (Tabrakan(m, en)) {
player1.score += 100; player1.score += 100;
explosion_enemy.play(); explosion_enemy.play();
missilesArray.splice(i, 1);
enemyShipArray.splice(j, 1); enemyShipArray.splice(j, 1);
missilesArray.splice(i, 1);
i--;
hit = true;
break;
} }
} }
if (hit) continue;
if (m.x > canvasWidth) { if (m.x > canvasWidth) {
missilesArray.splice(i, 1); missilesArray.splice(i, 1);
i--; i--;

2
Style.css
View File

@ -53,7 +53,7 @@ body {
.title { .title {
font-size: 90px; font-size: 90px;
margin-bottom: 40px; margin-bottom: 20px;
color: #ffffff; color: #ffffff;
letter-spacing: 4px; letter-spacing: 4px;
font-weight: 900; font-weight: 900;