formatted like my Boss wants it (help!)
This commit is contained in:
parent
5d11f87dd3
commit
b507a6b0ea
19 changed files with 1425 additions and 1136 deletions
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue