interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'Some minor changes' (#17) from sageTheDm/pages:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/17
This commit is contained in:
Patrick 2024-12-17 14:45:21 +01:00
commit d42d1b039b
7 changed files with 204 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
footer.js
View file

@ -38,7 +38,7 @@ class Footer extends HTMLElement {
// Add event listener for button click // Add event listener for button click
this.querySelector('.secret-button').addEventListener('click', () => { this.querySelector('.secret-button').addEventListener('click', () => {
window.location.href = 'secret/secret.html'; // Open the secret.html file window.location.href = 'secret/explenation.html'; // Open the secret.html file
}); });
} }
} }

26
secret/explenation.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="landing-page">
<div class="game-background">
<!-- Game is embedded or shown as background -->
<canvas id="gameCanvas"></canvas>
</div>
<div class="content">
<h1>Welcome to the Asteroid Game!</h1>
<p>In this game, you control a spaceship that shoots at asteroids to avoid destruction and collect items for power-ups.</p>
<p>Your goal is to survive as long as possible while scoring points!</p>
<button onclick="window.location.href='secret.html'">Play Game</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

66
secret/game.js
View file

@ -1,3 +1,4 @@
"use strict";
// Canvas setup // Canvas setup
const canvas = document.getElementById('gameCanvas'); const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -45,7 +46,36 @@ let rainbowSphereCooldown = 0;
// Sphere types // Sphere types
const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; const sphereTypes = ['blue', 'yellow', 'green', 'rainbow'];
// Controls /// Control for left button press and release
function btnMoveLeft(isPressed) {
if (isPressed) {
player.dx = -player.speed; // Start moving left
} else {
player.dx = 0; // Stop moving when button is released
}
}
// Control for shoot button click (simulates spacebar press)
function btnShoot() {
if (canShoot && !isGameOver) {
shootBullet();
canShoot = false; // Prevent shooting until the button is "released"
}
}
// Control for right button press and release
function btnMoveRight(isPressed) {
if (isPressed) {
player.dx = player.speed; // Start moving right
} else {
player.dx = 0; // Stop moving when button is released
}
}
document.getElementById('shootBtn').addEventListener('mouseup', () => {
canShoot = true; // Allow shooting again when button is released
});
window.addEventListener('keydown', (e) => { window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed; if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed;
if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed; if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed;
@ -79,6 +109,8 @@ function shootBullet() {
lastBulletTime = now; lastBulletTime = now;
ammo--; // Decrease ammo ammo--; // Decrease ammo
totalBulletsFired++; // Increment total bullets fired
if (rapidFireActive) { if (rapidFireActive) {
// If rapid fire is active, fire bullets continuously with a short delay // If rapid fire is active, fire bullets continuously with a short delay
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
@ -193,6 +225,7 @@ function updateItems() {
} }
function applyItemEffect(type) { 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; rapidFireActive = true;
setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire
@ -209,6 +242,7 @@ function applyItemEffect(type) {
shotgunActive = false; shotgunActive = false;
}, 15000); // 15 seconds with all effects }, 15000); // 15 seconds with all effects
} }
score += points; // Add points when an item is collected
} }
// Collision detection // Collision detection
@ -223,7 +257,9 @@ function checkCollisions() {
) { ) {
bullets.splice(bIndex, 1); bullets.splice(bIndex, 1);
asteroids.splice(aIndex, 1); asteroids.splice(aIndex, 1);
score++; score += Math.floor(Math.random() * 5) + 1; // Add points when an asteroid is destroyed
// Visual feedback for destroyed asteroid
createExplosion(asteroid.x, asteroid.y);
} }
}); });
}); });
@ -240,6 +276,15 @@ function checkCollisions() {
}); });
} }
// Explosion effect
function createExplosion(x, y) {
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
setTimeout(() => ctx.clearRect(x - 20, y - 20, 40, 40), 200); // Clear explosion after 200ms
}
// Draw elements // Draw elements
function drawPlayer() { function drawPlayer() {
ctx.fillStyle = player.color; ctx.fillStyle = player.color;
@ -320,23 +365,12 @@ function gameLoop() {
drawGameOver(); drawGameOver();
if (!isGameOver) { if (!isGameOver) {
if (Math.random() < 0.02) { if (Math.random() < 0.01) createAsteroid(); // 1% chance every frame to spawn an asteroid
createAsteroid(); if (Math.random() < 0.005) createItem(); // 0.5% chance to spawn an item
}
if (Math.random() < 0.02) {
createItem();
}
}
// Difficulty increase over time
if (score > 0 && score % 50 === 0) {
asteroidSpawnInterval -= difficultyIncreaseRate; // Increase spawn rate (faster asteroids)
asteroidSpeedMultiplier += difficultyIncreaseRate; // Increase speed multiplier
} }
requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop);
} }
// Start the game // Start game loop
gameLoop(); gameLoop();

8
secret/secret.html
View file

@ -8,6 +8,14 @@
</head> </head>
<body> <body>
<canvas id="gameCanvas"></canvas> <canvas id="gameCanvas"></canvas>
<!-- Virtual buttons for mobile -->
<div class="controls">
<button id="leftBtn" class="control-btn" onmousedown="btnMoveLeft(true)" onmouseup="btnMoveLeft(false)">Left</button>
<button id="shootBtn" class="control-btn" onclick="btnShoot()">Shoot</button>
<button id="rightBtn" class="control-btn" onmousedown="btnMoveRight(true)" onmouseup="btnMoveRight(false)">Right</button>
</div>
<script src="game.js"></script> <script src="game.js"></script>
</body> </body>
</html> </html>

49
secret/style.css
View file

@ -1,10 +1,43 @@
body { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
}
canvas {
display: block;
background: black;
width: 100%;
height: 100%;
}
.controls {
display: none;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
width: 80%;
}
.control-btn {
display: none;
padding: 10px;
font-size: 18px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
border: 1px solid #fff;
border-radius: 5px;
cursor: pointer;
flex-grow: 1;
margin: 0 5px;
}
@media (max-width: 600px) {
.control-btn {
display: block;
font-size: 16px;
padding: 12px;
} }
}
canvas {
display: block;
background: black;
}

74
secret/styles.css Normal file
View file

@ -0,0 +1,74 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
color: white;
overflow: hidden;
}
.landing-page {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.game-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
backdrop-filter: blur(8px); /* Apply blur effect to the background */
z-index: -1; /* Ensures it's in the background */
pointer-events: none; /* Prevent interaction with the blurred background */
}
.content {
text-align: center;
z-index: 1; /* Ensure content appears above the game background */
padding: 20px;
max-width: 600px; /* Limit the width of the content */
position: relative;
color: white;
backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */
}
h1 {
font-size: 2rem;
margin-bottom: 20px;
}
p {
font-size: 1.2rem;
margin-bottom: 30px;
}
button {
padding: 12px 24px;
background-color: #ffcc00;
color: black;
border: none;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff9900;
}

4
styles.css
View file

@ -410,4 +410,8 @@ footer {
height: 60px; height: 60px;
width: 60px; width: 60px;
} }
.project-name{
font-size: 1.3em;
}
} }