Update Pippo
This commit is contained in:
Hijau-dev
parent
634f614231
commit
94ebbd2d00
10
Main.html
10
Main.html
@ -7,10 +7,18 @@
|
||||
<link rel="stylesheet" href="Style.css">
|
||||
</head>
|
||||
<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">
|
||||
<canvas id="canvas" height="650" width="1280"></canvas>
|
||||
</div>
|
||||
|
||||
<script src="Script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
125
Script.js
125
Script.js
@ -1,5 +1,6 @@
|
||||
"use strict";
|
||||
|
||||
/* ------------- AUDIO & BGM ------------- */
|
||||
const bgmList = [
|
||||
{ normal: "music/Scary.mp3", gameover: "music/ScaryGO.mp3" },
|
||||
{ normal: "music/Fear.mp3", gameover: "music/FearGO.mp3" },
|
||||
@ -17,12 +18,11 @@ function pickRandomBGM() {
|
||||
gameOverBGM.src = bgm.gameover;
|
||||
}
|
||||
|
||||
/* ------------- CANVAS / GAME VARS ------------- */
|
||||
var canvasWidth = 1280;
|
||||
var canvasHeight = 650;
|
||||
var c = undefined;
|
||||
var ctx = undefined;
|
||||
var gameStarted = false;
|
||||
var musicMuted = false;
|
||||
|
||||
let lastFrameTime = 0;
|
||||
const frameInterval = 1000 / 80;
|
||||
@ -35,6 +35,10 @@ var game = {
|
||||
timer: 0,
|
||||
};
|
||||
|
||||
/* gameState: "menu" | "playing" | "paused" */
|
||||
let gameState = "menu";
|
||||
|
||||
/* ------------- INPUT STATE ------------- */
|
||||
var keys = {
|
||||
up: false,
|
||||
down: false,
|
||||
@ -43,6 +47,7 @@ var keys = {
|
||||
fire: false,
|
||||
};
|
||||
|
||||
/* ------------- IMAGES & ASSETS ------------- */
|
||||
var playerShipImg = new Image();
|
||||
playerShipImg.src = "img/Player/pesawat22.png";
|
||||
|
||||
@ -55,24 +60,11 @@ bg1.src = "img/bg_1.png";
|
||||
var bg2 = new Image();
|
||||
bg2.src = "img/bg_2.png";
|
||||
|
||||
var enemy1 = new Image();
|
||||
enemy1.src = "img/alien_0.png";
|
||||
|
||||
var enemyImgArray = [];
|
||||
enemyImgArray.length = 4;
|
||||
|
||||
let audioStarted = false;
|
||||
|
||||
window.addEventListener("keydown", () => {
|
||||
if (!audioStarted) {
|
||||
currentBGM.play();
|
||||
audioStarted = true;
|
||||
}
|
||||
});
|
||||
|
||||
for (var i = 0; i < enemyImgArray.length; i++) {
|
||||
enemyImgArray[i] = new Image();
|
||||
enemyImgArray[i].src = "img/alien_" + [i] + ".png";
|
||||
enemyImgArray[i].src = "img/alien_" + i + ".png";
|
||||
}
|
||||
|
||||
var missilesArray = [];
|
||||
@ -92,26 +84,92 @@ for (let i = 1; i <= 4; i++) {
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
init();
|
||||
setup();
|
||||
};
|
||||
|
||||
function init() {
|
||||
function setup() {
|
||||
c = document.getElementById("canvas");
|
||||
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("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();
|
||||
currentBGM.volume = 1;
|
||||
currentBGM.play();
|
||||
currentBGM.play().catch(() => {
|
||||
});
|
||||
audioStarted = true;
|
||||
|
||||
gameState = "playing";
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
let gameStarted = false;
|
||||
|
||||
function gameLoop(timestamp) {
|
||||
if (!gameStarted) return;
|
||||
if (gameState !== "playing") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!gameStarted) {
|
||||
gameStarted = true;
|
||||
lastFrameTime = timestamp;
|
||||
}
|
||||
|
||||
if (game.gameOver) {
|
||||
drawGameOver();
|
||||
@ -130,6 +188,9 @@ function gameLoop(timestamp) {
|
||||
}
|
||||
|
||||
function keyDownPressed(e) {
|
||||
|
||||
if (gameState !== "playing") return;
|
||||
|
||||
if (e.keyCode == 87 || e.keyCode == 38) {
|
||||
keys.up = true;
|
||||
} else if (e.keyCode == 83 || e.keyCode == 40) {
|
||||
@ -145,18 +206,21 @@ function keyDownPressed(e) {
|
||||
}
|
||||
|
||||
if (e.keyCode == 32) {
|
||||
|
||||
keys.fire = true;
|
||||
missilesArray.push(
|
||||
new LaserBullet(player1.x + player1.width, player1.y + player1.height / 2)
|
||||
);
|
||||
|
||||
laser.currentTime = 0;
|
||||
laser.play();
|
||||
laser.volume = 0.4;
|
||||
laser.play();
|
||||
}
|
||||
}
|
||||
|
||||
function keyUpPressed(e) {
|
||||
if (gameState !== "playing") return;
|
||||
|
||||
if (e.keyCode == 87 || e.keyCode == 38) {
|
||||
keys.up = false;
|
||||
} else if (e.keyCode == 83 || e.keyCode == 40) {
|
||||
@ -176,11 +240,18 @@ function keyUpPressed(e) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------- RENDER / UPDATE ------------- */
|
||||
function clearGame() {
|
||||
// clear and draw solid background so canvas never transparent
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||||
}
|
||||
|
||||
function updateGame() {
|
||||
// Only update while playing (should already be true)
|
||||
if (gameState !== "playing") return;
|
||||
|
||||
addStarField();
|
||||
addShips();
|
||||
|
||||
@ -238,17 +309,25 @@ function drawGame() {
|
||||
m.draw();
|
||||
m.update();
|
||||
|
||||
let hit = false;
|
||||
for (var j = 0; j < enemyShipArray.length; j++) {
|
||||
var en = enemyShipArray[j];
|
||||
|
||||
if (Tabrakan(m, en)) {
|
||||
player1.score += 100;
|
||||
explosion_enemy.play();
|
||||
missilesArray.splice(i, 1);
|
||||
|
||||
enemyShipArray.splice(j, 1);
|
||||
missilesArray.splice(i, 1);
|
||||
|
||||
i--;
|
||||
hit = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (hit) continue;
|
||||
|
||||
if (m.x > canvasWidth) {
|
||||
missilesArray.splice(i, 1);
|
||||
i--;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user