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