formatted like my Boss wants it (help!)

This commit is contained in:
sageTheDM 2025-02-25 10:04:34 +01:00
parent 5d11f87dd3
commit b507a6b0ea
19 changed files with 1425 additions and 1136 deletions

View file

@ -1,7 +1,7 @@
"use strict";
// Canvas setup
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const targetFPS = 60;
const targetFrameTime = 1000 / targetFPS;
canvas.width = window.innerWidth;
@ -15,9 +15,9 @@ const player = {
y: canvas.height - 60,
width: 40,
height: 40,
color: 'white',
color: "white",
speed: 5,
dx: 0
dx: 0,
};
let bullets = [];
@ -48,14 +48,14 @@ let greenSphereCooldown = 0;
let rainbowSphereCooldown = 0;
// Sphere types
const sphereTypes = ['blue', 'yellow', 'green', 'rainbow'];
const sphereTypes = ["blue", "yellow", "green", "rainbow"];
/// Control for left button press and release
function btnMoveLeft(isPressed) {
if (isPressed) {
player.dx = -player.speed; // Start moving left
player.dx = -player.speed; // Start moving left
} else {
player.dx = 0; // Stop moving when button is released
player.dx = 0; // Stop moving when button is released
}
}
@ -70,37 +70,42 @@ function btnShoot() {
// Control for right button press and release
function btnMoveRight(isPressed) {
if (isPressed) {
player.dx = player.speed; // Start moving right
player.dx = player.speed; // Start moving right
} else {
player.dx = 0; // Stop moving when button is released
player.dx = 0; // Stop moving when button is released
}
}
document.getElementById('shootBtn').addEventListener('mouseup', () => {
document.getElementById("shootBtn").addEventListener("mouseup", () => {
canShoot = true; // Allow shooting again when button is released
});
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed;
if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed;
window.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed;
if (e.key === "ArrowRight" || e.key === "d") player.dx = player.speed;
// Shoot only if it's not a hold, and we can shoot
if (e.key === ' ' && canShoot && !isGameOver) {
if (e.key === " " && canShoot && !isGameOver) {
shootBullet();
canShoot = false; // Prevent shooting until the key is released
}
if (e.key === 'r' && isGameOver) restartGame();
if (e.key === "r" && isGameOver) restartGame();
});
window.addEventListener('keyup', (e) => {
window.addEventListener("keyup", (e) => {
// Stop moving when either the arrow keys or the 'a'/'d' keys are released
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') {
if (
e.key === "ArrowLeft" ||
e.key === "ArrowRight" ||
e.key === "a" ||
e.key === "d"
) {
player.dx = 0;
}
// Allow shooting again when the space key is released
if (e.key === ' ') {
if (e.key === " ") {
canShoot = true;
}
});
@ -124,8 +129,8 @@ function shootBullet() {
y: player.y,
width: 5,
height: 10,
color: 'yellow',
speed: 7
color: "yellow",
speed: 7,
});
}, i * 50); // Fire bullets with 50ms delay between shots
}
@ -137,9 +142,9 @@ function shootBullet() {
y: player.y,
width: 5,
height: 10,
color: 'yellow',
color: "yellow",
speed: 7,
angle: i * 10 // Spray the bullets at different angles
angle: i * 10, // Spray the bullets at different angles
});
}
} else {
@ -149,15 +154,15 @@ function shootBullet() {
y: player.y,
width: 5,
height: 10,
color: 'yellow',
speed: 7
color: "yellow",
speed: 7,
});
}
}
// Generate random color
function getRandomColor() {
const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink'];
const colors = ["red", "blue", "green", "orange", "purple", "pink"];
return colors[Math.floor(Math.random() * colors.length)];
}
@ -170,13 +175,14 @@ function createAsteroid() {
width: size,
height: size,
color: getRandomColor(),
speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed
speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed
});
}
// Item mechanics
function createItem() {
const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
const randomType =
sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
const size = 30;
const x = Math.random() * canvas.width;
items.push({
@ -185,8 +191,15 @@ function createItem() {
width: size,
height: size,
type: randomType,
color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow',
speed: 3
color:
randomType === "blue"
? "blue"
: randomType === "yellow"
? "yellow"
: randomType === "green"
? "green"
: "rainbow",
speed: 3,
});
}
@ -194,7 +207,8 @@ function createItem() {
function updatePlayer() {
player.x += player.dx;
if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
if (player.x + player.width > canvas.width)
player.x = canvas.width - player.width;
}
function updateBullets() {
@ -230,15 +244,15 @@ function updateItems() {
function applyItemEffect(type) {
let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
if (type === 'blue') {
if (type === "blue") {
rapidFireActive = true;
setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire
} else if (type === 'yellow') {
setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire
} else if (type === "yellow") {
shotgunActive = true;
setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun
} else if (type === 'green') {
setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun
} else if (type === "green") {
ammo = 100; // Refill ammo
} else if (type === 'rainbow') {
} else if (type === "rainbow") {
rapidFireActive = true;
shotgunActive = true;
setTimeout(() => {
@ -282,7 +296,7 @@ function checkCollisions() {
// Explosion effect
function createExplosion(x, y) {
ctx.fillStyle = 'yellow';
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
@ -313,33 +327,47 @@ function drawItems() {
items.forEach((item) => {
ctx.fillStyle = item.color;
ctx.beginPath();
ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2);
ctx.arc(
item.x + item.width / 2,
item.y + item.height / 2,
item.width / 2,
0,
Math.PI * 2
);
ctx.fill();
});
}
function drawScore() {
ctx.fillStyle = 'white';
ctx.font = '24px Arial';
ctx.fillStyle = "white";
ctx.font = "24px Arial";
ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner
}
function drawAmmo() {
ctx.fillStyle = 'white';
ctx.font = '24px Arial';
ctx.fillStyle = "white";
ctx.font = "24px Arial";
ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner
}
function drawGameOver() {
if (isGameOver) {
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.textAlign = 'center';
ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40);
ctx.font = '24px Arial';
ctx.fillStyle = "white";
ctx.font = "40px Arial";
ctx.textAlign = "center";
ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40);
ctx.font = "24px Arial";
ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2);
ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40);
ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80);
ctx.fillText(
`Bullets Fired: ${totalBulletsFired}`,
canvas.width / 2,
canvas.height / 2 + 40
);
ctx.fillText(
'Press "R" to Restart',
canvas.width / 2,
canvas.height / 2 + 80
);
}
}