Compare commits
No commits in common. "e73a4c76608dbf2eff46172915a9aca52f3a0e70" and "d42d1b039bb629c198b8b462dfec6d8251d398dd" have entirely different histories.
e73a4c7660
...
d42d1b039b
18 changed files with 71 additions and 824 deletions
|
|
@ -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/index.html'; // Open the secret.html file
|
window.location.href = 'secret/explenation.html'; // Open the secret.html file
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,15 +37,9 @@
|
||||||
<h1>Our Projects</h1>
|
<h1>Our Projects</h1>
|
||||||
|
|
||||||
<h2>Our Games</h2>
|
<h2>Our Games</h2>
|
||||||
<ul>
|
|
||||||
<a href="webGames/index.html" target="_blank" class="listElement">
|
|
||||||
<li>Web game collection</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<p>Previously we had more unfinished Games listed here.</p>
|
<p>Previously we had unfinished Games listed here.</p>
|
||||||
<p>We decided against displaying them and giving people the impression we are working on them currently.</p>
|
<p>We decided against displaying them and giving people the impression we are working on them currently.</p>
|
||||||
<p>In the Future we will display the released games here</p>
|
<p>In the Future we will display the released games here</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -1,376 +0,0 @@
|
||||||
"use strict";
|
|
||||||
// Canvas setup
|
|
||||||
const canvas = document.getElementById('gameCanvas');
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
canvas.width = window.innerWidth;
|
|
||||||
canvas.height = window.innerHeight;
|
|
||||||
|
|
||||||
// Game elements
|
|
||||||
const player = {
|
|
||||||
x: canvas.width / 2,
|
|
||||||
y: canvas.height - 60,
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
color: 'white',
|
|
||||||
speed: 5,
|
|
||||||
dx: 0
|
|
||||||
};
|
|
||||||
|
|
||||||
let bullets = [];
|
|
||||||
let asteroids = [];
|
|
||||||
let items = [];
|
|
||||||
let score = 0;
|
|
||||||
let totalBulletsFired = 0;
|
|
||||||
let isGameOver = false;
|
|
||||||
let lastBulletTime = 0;
|
|
||||||
let ammo = 100; // Ammo counter
|
|
||||||
|
|
||||||
// Difficulty control
|
|
||||||
let asteroidSpawnInterval = 800; // Faster spawn rate
|
|
||||||
let asteroidSpeedMultiplier = 1.5; // Faster asteroids from the start
|
|
||||||
let difficultyIncreaseRate = 0.2; // Faster scaling every 10 seconds
|
|
||||||
|
|
||||||
// Controls
|
|
||||||
let canShoot = true; // Flag to control shooting
|
|
||||||
let rapidFireActive = false;
|
|
||||||
let shotgunActive = false;
|
|
||||||
let rainbowActive = false;
|
|
||||||
let lastShotgunTime = 0;
|
|
||||||
|
|
||||||
// Controls for sphere effects
|
|
||||||
let blueSphereCooldown = 0;
|
|
||||||
let yellowSphereCooldown = 0;
|
|
||||||
let greenSphereCooldown = 0;
|
|
||||||
let rainbowSphereCooldown = 0;
|
|
||||||
|
|
||||||
// Sphere types
|
|
||||||
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
|
|
||||||
} 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;
|
|
||||||
|
|
||||||
// Shoot only if it's not a hold, and we can shoot
|
|
||||||
if (e.key === ' ' && canShoot && !isGameOver) {
|
|
||||||
shootBullet();
|
|
||||||
canShoot = false; // Prevent shooting until the key is released
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'r' && isGameOver) restartGame();
|
|
||||||
});
|
|
||||||
|
|
||||||
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') {
|
|
||||||
player.dx = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allow shooting again when the space key is released
|
|
||||||
if (e.key === ' ') {
|
|
||||||
canShoot = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Bullet mechanics with cooldown
|
|
||||||
function shootBullet() {
|
|
||||||
const now = Date.now();
|
|
||||||
if (now - lastBulletTime < 100) return; // Enforce cooldown of 0.1 seconds
|
|
||||||
if (ammo <= 0) return; // Prevent shooting if ammo is empty
|
|
||||||
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++) {
|
|
||||||
setTimeout(() => {
|
|
||||||
bullets.push({
|
|
||||||
x: player.x + player.width / 2 - 2.5,
|
|
||||||
y: player.y,
|
|
||||||
width: 5,
|
|
||||||
height: 10,
|
|
||||||
color: 'yellow',
|
|
||||||
speed: 7
|
|
||||||
});
|
|
||||||
}, i * 50); // Fire bullets with 50ms delay between shots
|
|
||||||
}
|
|
||||||
} else if (shotgunActive) {
|
|
||||||
// Shotgun effect, firing 3 bullets with a spread
|
|
||||||
for (let i = -1; i <= 1; i++) {
|
|
||||||
bullets.push({
|
|
||||||
x: player.x + player.width / 2 - 2.5,
|
|
||||||
y: player.y,
|
|
||||||
width: 5,
|
|
||||||
height: 10,
|
|
||||||
color: 'yellow',
|
|
||||||
speed: 7,
|
|
||||||
angle: i * 10 // Spray the bullets at different angles
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Normal bullet
|
|
||||||
bullets.push({
|
|
||||||
x: player.x + player.width / 2 - 2.5,
|
|
||||||
y: player.y,
|
|
||||||
width: 5,
|
|
||||||
height: 10,
|
|
||||||
color: 'yellow',
|
|
||||||
speed: 7
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate random color
|
|
||||||
function getRandomColor() {
|
|
||||||
const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink'];
|
|
||||||
return colors[Math.floor(Math.random() * colors.length)];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Asteroid mechanics
|
|
||||||
function createAsteroid() {
|
|
||||||
const size = Math.random() * 40 + 30; // Bigger asteroids (min: 30, max: 70)
|
|
||||||
asteroids.push({
|
|
||||||
x: Math.random() * canvas.width,
|
|
||||||
y: -size,
|
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
color: getRandomColor(),
|
|
||||||
speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Item mechanics
|
|
||||||
function createItem() {
|
|
||||||
const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
|
|
||||||
const size = 30;
|
|
||||||
const x = Math.random() * canvas.width;
|
|
||||||
items.push({
|
|
||||||
x: x,
|
|
||||||
y: -size,
|
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
type: randomType,
|
|
||||||
color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow',
|
|
||||||
speed: 3
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update game elements
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateBullets() {
|
|
||||||
bullets.forEach((bullet, index) => {
|
|
||||||
bullet.y -= bullet.speed;
|
|
||||||
if (bullet.y + bullet.height < 0) bullets.splice(index, 1);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateAsteroids() {
|
|
||||||
asteroids.forEach((asteroid, index) => {
|
|
||||||
asteroid.y += asteroid.speed;
|
|
||||||
if (asteroid.y > canvas.height) asteroids.splice(index, 1);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateItems() {
|
|
||||||
items.forEach((item, index) => {
|
|
||||||
item.y += item.speed;
|
|
||||||
if (item.y > canvas.height) items.splice(index, 1);
|
|
||||||
// Check if player collects the item
|
|
||||||
if (
|
|
||||||
player.x < item.x + item.width &&
|
|
||||||
player.x + player.width > item.x &&
|
|
||||||
player.y < item.y + item.height &&
|
|
||||||
player.y + player.height > item.y
|
|
||||||
) {
|
|
||||||
applyItemEffect(item.type);
|
|
||||||
items.splice(index, 1); // Remove the item after it is collected
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
} else if (type === 'yellow') {
|
|
||||||
shotgunActive = true;
|
|
||||||
setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun
|
|
||||||
} else if (type === 'green') {
|
|
||||||
ammo = 100; // Refill ammo
|
|
||||||
} else if (type === 'rainbow') {
|
|
||||||
rapidFireActive = true;
|
|
||||||
shotgunActive = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
rapidFireActive = false;
|
|
||||||
shotgunActive = false;
|
|
||||||
}, 15000); // 15 seconds with all effects
|
|
||||||
}
|
|
||||||
score += points; // Add points when an item is collected
|
|
||||||
}
|
|
||||||
|
|
||||||
// Collision detection
|
|
||||||
function checkCollisions() {
|
|
||||||
bullets.forEach((bullet, bIndex) => {
|
|
||||||
asteroids.forEach((asteroid, aIndex) => {
|
|
||||||
if (
|
|
||||||
bullet.x < asteroid.x + asteroid.width &&
|
|
||||||
bullet.x + bullet.width > asteroid.x &&
|
|
||||||
bullet.y < asteroid.y + asteroid.height &&
|
|
||||||
bullet.y + bullet.height > asteroid.y
|
|
||||||
) {
|
|
||||||
bullets.splice(bIndex, 1);
|
|
||||||
asteroids.splice(aIndex, 1);
|
|
||||||
score += Math.floor(Math.random() * 5) + 1; // Add points when an asteroid is destroyed
|
|
||||||
// Visual feedback for destroyed asteroid
|
|
||||||
createExplosion(asteroid.x, asteroid.y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
asteroids.forEach((asteroid) => {
|
|
||||||
if (
|
|
||||||
player.x < asteroid.x + asteroid.width &&
|
|
||||||
player.x + player.width > asteroid.x &&
|
|
||||||
player.y < asteroid.y + asteroid.height &&
|
|
||||||
player.y + player.height > asteroid.y
|
|
||||||
) {
|
|
||||||
isGameOver = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
ctx.fillRect(player.x, player.y, player.width, player.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawBullets() {
|
|
||||||
bullets.forEach((bullet) => {
|
|
||||||
ctx.fillStyle = bullet.color;
|
|
||||||
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawAsteroids() {
|
|
||||||
asteroids.forEach((asteroid) => {
|
|
||||||
ctx.fillStyle = asteroid.color;
|
|
||||||
ctx.fillRect(asteroid.x, asteroid.y, asteroid.width, asteroid.height);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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.fill();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawScore() {
|
|
||||||
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.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.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Restart game
|
|
||||||
function restartGame() {
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Main game loop
|
|
||||||
function gameLoop() {
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
if (!isGameOver) {
|
|
||||||
updatePlayer();
|
|
||||||
updateBullets();
|
|
||||||
updateAsteroids();
|
|
||||||
updateItems();
|
|
||||||
checkCollisions();
|
|
||||||
}
|
|
||||||
|
|
||||||
drawPlayer();
|
|
||||||
drawBullets();
|
|
||||||
drawAsteroids();
|
|
||||||
drawItems();
|
|
||||||
drawScore();
|
|
||||||
drawAmmo();
|
|
||||||
drawGameOver();
|
|
||||||
|
|
||||||
if (!isGameOver) {
|
|
||||||
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 game loop
|
|
||||||
gameLoop();
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
* {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 455 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 176 KiB |
|
|
@ -1,73 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Secret Game Collection</title>
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<h1>Secret Game Collection</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="grid-container">
|
|
||||||
<a href="asteroidDestroyer/explenation.html" target="_blank" class="item">
|
|
||||||
<img src="images/asteroid.png" alt="Image can't be displayed">
|
|
||||||
<h2>Secret Asteroid Shooter</h2>
|
|
||||||
<div class="description">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_blackjack_game" target="_blank" class="item">
|
|
||||||
<img src="images/blackjack.jpg" alt="Image can't be displayed">
|
|
||||||
<h2>Secret Blackjack</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>Try to beat the dealer by getting a hand value as close to 21 as possible without going over.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_snake_game" target="_blank" class="item">
|
|
||||||
<img src="images/snake.png" alt="Image can't be displayed">
|
|
||||||
<h2>Snake</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_solitaire_game" target="_blank" class="item">
|
|
||||||
<img src="images/solitaire.png" alt="Image can't be displayed">
|
|
||||||
<h2>Solitaire</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_minesweeper_game" target="_blank" class="item">
|
|
||||||
<img src="images/minesweeper.png" alt="Image can't be displayed">
|
|
||||||
<h2>Minesweeper</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_guess_my_number_game" target="_blank" class="item">
|
|
||||||
<img src="images/number.jpeg" alt="Image can't be displayed">
|
|
||||||
<h2>Guess My Number</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_endless_runner_game" target="_blank" class="item">
|
|
||||||
<img src="images/endless_runner.png" alt="Image can't be displayed">
|
|
||||||
<h2>Endless Runner</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2025 Game Collection</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -11,11 +11,11 @@
|
||||||
|
|
||||||
<!-- Virtual buttons for mobile -->
|
<!-- Virtual buttons for mobile -->
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button id="leftBtn" class="control-btn">Left</button>
|
<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="shootBtn" class="control-btn" onclick="btnShoot()">Shoot</button>
|
||||||
<button id="rightBtn" class="control-btn">Right</button>
|
<button id="rightBtn" class="control-btn" onmousedown="btnMoveRight(true)" onmouseup="btnMoveRight(false)">Right</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="game.js"></script>
|
<script src="game.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,120 +1,74 @@
|
||||||
/* Reset and box-sizing */
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* General Styles */
|
body, html {
|
||||||
body {
|
height: 100%;
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
background-color: #282c34;
|
|
||||||
color: #ffffff;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: #333;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid Styles */
|
|
||||||
.grid-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 20px; /* Space between items */
|
|
||||||
padding: 20px; /* Space around the grid */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Game Item */
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
|
|
||||||
width: 100%; /* Ensure it takes full width of the column */
|
|
||||||
height: 400px; /* Set a fixed height for all items */
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column; /* Stack children vertically */
|
justify-content: center;
|
||||||
}
|
align-items: center;
|
||||||
|
background-color: #000;
|
||||||
/* Ensure the image takes the top part of the card */
|
|
||||||
.item img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%; /* Set a height for the image */
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item .description {
|
|
||||||
padding: 30px;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #ddd;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 0 0 10px 10px;
|
|
||||||
flex-grow: 1; /* Allow description to take remaining space */
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover effect for scaling and glowing */
|
|
||||||
.item:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:hover img {
|
|
||||||
transform: scale(1.1); /* Slight zoom-in effect for the image */
|
|
||||||
filter: brightness(1.1); /* Increase image brightness */
|
|
||||||
}
|
|
||||||
|
|
||||||
.item h2 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.5rem;
|
overflow: hidden;
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
}
|
||||||
padding: 5px 15px;
|
|
||||||
border-radius: 5px;
|
.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;
|
text-align: center;
|
||||||
opacity: 0;
|
z-index: 1; /* Ensure content appears above the game background */
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
padding: 20px;
|
||||||
}
|
max-width: 600px; /* Limit the width of the content */
|
||||||
|
position: relative;
|
||||||
.item:hover h2 {
|
color: white;
|
||||||
opacity: 1;
|
backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */
|
||||||
transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */
|
}
|
||||||
}
|
|
||||||
|
h1 {
|
||||||
/* Mobile Optimization */
|
font-size: 2rem;
|
||||||
@media (max-width: 600px) {
|
margin-bottom: 20px;
|
||||||
header {
|
}
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
p {
|
||||||
|
font-size: 1.2rem;
|
||||||
.item {
|
margin-bottom: 30px;
|
||||||
height: auto; /* Allow auto height on mobile for better responsiveness */
|
}
|
||||||
width: auto;
|
|
||||||
}
|
button {
|
||||||
|
padding: 12px 24px;
|
||||||
.grid-container{
|
background-color: #ffcc00;
|
||||||
grid-template-columns: repeat(1, 1fr);
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Game Collection</title>
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<h1>Game Collection</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="grid-container">
|
|
||||||
<a href="link_to_snake_game" target="_blank" class="item">
|
|
||||||
<img src="../secret/../secret/images/snake.png" alt="Image can't be displayed">
|
|
||||||
<h2>Snake</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_solitaire_game" target="_blank" class="item">
|
|
||||||
<img src="../secret/images/solitaire.png" alt="Image can't be displayed">
|
|
||||||
<h2>Solitaire</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_minesweeper_game" target="_blank" class="item">
|
|
||||||
<img src="../secret/images/minesweeper.png" alt="Image can't be displayed">
|
|
||||||
<h2>Minesweeper</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_guess_my_number_game" target="_blank" class="item">
|
|
||||||
<img src="../secret/images/number.jpeg" alt="Image can't be displayed">
|
|
||||||
<h2>Guess My Number</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="link_to_endless_runner_game" target="_blank" class="item">
|
|
||||||
<img src="../secret/images/endless_runner.png" alt="Image can't be displayed">
|
|
||||||
<h2>Endless Runner</h2>
|
|
||||||
<div class="description">
|
|
||||||
<p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2025 Game Collection</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
/* Reset and box-sizing */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* General Styles */
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #282c34;
|
|
||||||
color: #ffffff;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: #333;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid Styles */
|
|
||||||
.grid-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 20px; /* Space between items */
|
|
||||||
padding: 20px; /* Space around the grid */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Game Item */
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
|
|
||||||
width: 100%; /* Ensure it takes full width of the column */
|
|
||||||
height: 400px; /* Set a fixed height for all items */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column; /* Stack children vertically */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure the image takes the top part of the card */
|
|
||||||
.item img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%; /* Set a height for the image */
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item .description {
|
|
||||||
padding: 30px;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #ddd;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 0 0 10px 10px;
|
|
||||||
flex-grow: 1; /* Allow description to take remaining space */
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover effect for scaling and glowing */
|
|
||||||
.item:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:hover img {
|
|
||||||
transform: scale(1.1); /* Slight zoom-in effect for the image */
|
|
||||||
filter: brightness(1.1); /* Increase image brightness */
|
|
||||||
}
|
|
||||||
|
|
||||||
.item h2 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
color: white;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
padding: 5px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:hover h2 {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile Optimization */
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
header {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
height: auto; /* Allow auto height on mobile for better responsiveness */
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-container{
|
|
||||||
grid-template-columns: repeat(1, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue