Responsive
This commit is contained in:
parent
418c2a30e8
commit
3051b3f3d9
7 changed files with 204 additions and 25 deletions
|
|
@ -38,7 +38,7 @@ class Footer extends HTMLElement {
|
|||
|
||||
// Add event listener for button 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
26
secret/explenation.html
Normal 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>
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
"use strict";
|
||||
// Canvas setup
|
||||
const canvas = document.getElementById('gameCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
|
@ -45,7 +46,36 @@ let rainbowSphereCooldown = 0;
|
|||
// Sphere types
|
||||
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) => {
|
||||
if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed;
|
||||
if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed;
|
||||
|
|
@ -79,6 +109,8 @@ function shootBullet() {
|
|||
lastBulletTime = now;
|
||||
ammo--; // Decrease ammo
|
||||
|
||||
totalBulletsFired++; // Increment total bullets fired
|
||||
|
||||
if (rapidFireActive) {
|
||||
// If rapid fire is active, fire bullets continuously with a short delay
|
||||
for (let i = 0; i < 3; i++) {
|
||||
|
|
@ -193,6 +225,7 @@ function updateItems() {
|
|||
}
|
||||
|
||||
function applyItemEffect(type) {
|
||||
let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
|
||||
if (type === 'blue') {
|
||||
rapidFireActive = true;
|
||||
setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire
|
||||
|
|
@ -209,6 +242,7 @@ function applyItemEffect(type) {
|
|||
shotgunActive = false;
|
||||
}, 15000); // 15 seconds with all effects
|
||||
}
|
||||
score += points; // Add points when an item is collected
|
||||
}
|
||||
|
||||
// Collision detection
|
||||
|
|
@ -223,7 +257,9 @@ function checkCollisions() {
|
|||
) {
|
||||
bullets.splice(bIndex, 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
|
||||
function drawPlayer() {
|
||||
ctx.fillStyle = player.color;
|
||||
|
|
@ -320,23 +365,12 @@ function gameLoop() {
|
|||
drawGameOver();
|
||||
|
||||
if (!isGameOver) {
|
||||
if (Math.random() < 0.02) {
|
||||
createAsteroid();
|
||||
}
|
||||
|
||||
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
|
||||
if (Math.random() < 0.01) createAsteroid(); // 1% chance every frame to spawn an asteroid
|
||||
if (Math.random() < 0.005) createItem(); // 0.5% chance to spawn an item
|
||||
}
|
||||
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
// Start the game
|
||||
// Start game loop
|
||||
gameLoop();
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@
|
|||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,43 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
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
74
secret/styles.css
Normal 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;
|
||||
}
|
||||
|
||||
|
|
@ -410,4 +410,8 @@ footer {
|
|||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.project-name{
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue