Upload files to "/"
This commit is contained in:
parent
ba009c5f7f
commit
cb941b6d3a
184
script.js
184
script.js
@ -4,6 +4,8 @@ let score = 0;
|
||||
let running = false;
|
||||
let ball, paddle, bricks, rows, cols, speed;
|
||||
let currentDiff = "easy";
|
||||
let balls = []; // Array untuk multiple balls
|
||||
let powerUps = []; // Array untuk power-ups
|
||||
|
||||
const brickColors = ["#FF5733", "#33FF57", "#3357FF", "#FF33F5", "#33FFF5", "#F5FF33"];
|
||||
|
||||
@ -31,13 +33,14 @@ if (saveScoreBtn) {
|
||||
});
|
||||
}
|
||||
|
||||
function lockSpeed() {
|
||||
let currentSpeedSq = ball.dx * ball.dx + ball.dy * ball.dy;
|
||||
// Modifikasi: lockSpeed sekarang menerima objek bola
|
||||
function lockSpeed(b) {
|
||||
let currentSpeedSq = b.dx * b.dx + b.dy * b.dy;
|
||||
if (currentSpeedSq > 0.0001) {
|
||||
let currentSpeed = Math.sqrt(currentSpeedSq);
|
||||
let ratio = speed / currentSpeed;
|
||||
ball.dx *= ratio;
|
||||
ball.dy *= ratio;
|
||||
b.dx *= ratio;
|
||||
b.dy *= ratio;
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,7 +67,9 @@ function startGame(){
|
||||
|
||||
paddle = { x:200, w:80, h:10 };
|
||||
ball = { x:240, y:200, dx:speed, dy:-speed, r:6 };
|
||||
balls = [ball]; // Reset ke satu bola
|
||||
bricks = [];
|
||||
powerUps = []; // Reset power-ups
|
||||
|
||||
let brickW = (canvas.width - cols * 5) / cols;
|
||||
let brickH = 15;
|
||||
@ -99,57 +104,85 @@ function update(){
|
||||
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
|
||||
ball.x += ball.dx;
|
||||
ball.y += ball.dy;
|
||||
|
||||
// Gambar paddle
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillRect(paddle.x, canvas.height-paddle.h, paddle.w, paddle.h);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI*2);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
// Update semua bola
|
||||
balls.forEach((b, index) => {
|
||||
b.x += b.dx;
|
||||
b.y += b.dy;
|
||||
|
||||
if(ball.x + ball.r > canvas.width || ball.x - ball.r < 0){
|
||||
ball.dx *= -1; lockSpeed();
|
||||
wallSound.currentTime = 0; wallSound.play();
|
||||
}
|
||||
if(ball.y - ball.r < 0){
|
||||
ball.dy *= -1; lockSpeed();
|
||||
wallSound.currentTime = 0; wallSound.play();
|
||||
}
|
||||
// Gambar bola
|
||||
ctx.beginPath();
|
||||
ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
|
||||
if(ball.y + ball.r > canvas.height - paddle.h && ball.x > paddle.x && ball.x < paddle.x + paddle.w){
|
||||
let deltaX = ball.x - (paddle.x + paddle.w/2);
|
||||
let dy_abs = Math.abs(speed) * -1;
|
||||
ball.dx = deltaX * 0.15;
|
||||
ball.dy = dy_abs;
|
||||
lockSpeed();
|
||||
wallSound.currentTime = 0; wallSound.play();
|
||||
}
|
||||
// Collision dengan dinding
|
||||
if(b.x + b.r > canvas.width || b.x - b.r < 0){
|
||||
b.dx *= -1; lockSpeed(b);
|
||||
// wallSound.currentTime = 0; wallSound.play();
|
||||
}
|
||||
if(b.y - b.r < 0){
|
||||
b.dy *= -1; lockSpeed(b);
|
||||
// wallSound.currentTime = 0; wallSound.play();
|
||||
}
|
||||
|
||||
bricks.forEach(b =>{
|
||||
if(!b.hit && ball.x > b.x && ball.x < b.x+b.w && ball.y > b.y && ball.y < b.y+b.h){
|
||||
b.health--;
|
||||
ball.dy *= -1;
|
||||
lockSpeed();
|
||||
// Collision dengan paddle
|
||||
if(b.y + b.r > canvas.height - paddle.h && b.x > paddle.x && b.x < paddle.x + paddle.w){
|
||||
let deltaX = b.x - (paddle.x + paddle.w/2);
|
||||
let dy_abs = Math.abs(speed) * -1;
|
||||
b.dx = deltaX * 0.15;
|
||||
b.dy = dy_abs;
|
||||
lockSpeed(b);
|
||||
// wallSound.currentTime = 0; wallSound.play();
|
||||
}
|
||||
|
||||
if (b.health <= 0) {
|
||||
b.hit = true;
|
||||
score += 10;
|
||||
winSound.currentTime = 0; winSound.play();
|
||||
} else {
|
||||
hitSound.currentTime = 0; hitSound.play();
|
||||
if (b.health === 4) b.color = '#B22222';
|
||||
if (b.health === 3) b.color = '#CD853F';
|
||||
if (b.health === 2) b.color = '#FFA07A';
|
||||
if (b.health === 1) b.color = '#F08080';
|
||||
}
|
||||
document.getElementById("score").textContent = score;
|
||||
// Jika bola jatuh, hapus
|
||||
if(b.y > canvas.height){
|
||||
balls.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
// Jika tidak ada bola lagi, game over
|
||||
if(balls.length === 0){
|
||||
loseSound.currentTime = 0; loseSound.play();
|
||||
running = false;
|
||||
showModal("GAME OVER!", score);
|
||||
return;
|
||||
}
|
||||
|
||||
// Collision bola dengan bricks
|
||||
balls.forEach(b => {
|
||||
bricks.forEach(br => {
|
||||
if(!br.hit && b.x > br.x && b.x < br.x+br.w && b.y > br.y && b.y < br.y+br.h){
|
||||
br.health--;
|
||||
b.dy *= -1;
|
||||
lockSpeed(b);
|
||||
|
||||
if (br.health <= 0) {
|
||||
br.hit = true;
|
||||
score += 10;
|
||||
// winSound.currentTime = 0; winSound.play();
|
||||
// Spawn power-up
|
||||
if (Math.random() < 0.3) {
|
||||
spawnPowerUp(br.x + br.w/2, br.y + br.h/2);
|
||||
}
|
||||
} else {
|
||||
// hitSound.currentTime = 0; hitSound.play();
|
||||
if (br.health === 4) br.color = '#B22222';
|
||||
if (br.health === 3) br.color = '#CD853F';
|
||||
if (br.health === 2) br.color = '#FFA07A';
|
||||
if (br.health === 1) br.color = '#F08080';
|
||||
}
|
||||
document.getElementById("score").textContent = score;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Gambar bricks
|
||||
bricks.forEach(b =>{
|
||||
if(!b.hit){
|
||||
ctx.fillStyle = b.color;
|
||||
@ -158,18 +191,27 @@ function update(){
|
||||
ctx.strokeRect(b.x,b.y,b.w,b.h);
|
||||
}
|
||||
});
|
||||
|
||||
// Update power-ups
|
||||
powerUps.forEach((pu, index) => {
|
||||
pu.y += 2;
|
||||
ctx.fillStyle = pu.color;
|
||||
ctx.fillRect(pu.x - 5, pu.y - 5, 10, 10);
|
||||
if (pu.y + 5 > canvas.height - paddle.h && pu.x > paddle.x && pu.x < paddle.x + paddle.w) {
|
||||
activatePowerUp(pu.type);
|
||||
powerUps.splice(index, 1);
|
||||
}
|
||||
if (pu.y > canvas.height) {
|
||||
powerUps.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
if(bricks.every(b => b.hit)){
|
||||
winSound.currentTime = 0; winSound.play();
|
||||
winSound.currentTime = 0;
|
||||
winSound.play();
|
||||
running = false;
|
||||
showModal("YOU WIN!", score);
|
||||
}
|
||||
|
||||
if(ball.y > canvas.height){
|
||||
loseSound.currentTime = 0; loseSound.play();
|
||||
running = false;
|
||||
showModal("GAME OVER!", score);
|
||||
}
|
||||
}
|
||||
|
||||
canvas.addEventListener("mousemove", e =>{
|
||||
@ -205,7 +247,6 @@ function saveScore(fromModal = false){
|
||||
saveScoreBtn.style.opacity = '0.7';
|
||||
}
|
||||
|
||||
// Perubahan: Menambahkan &diff=... ke URL
|
||||
fetch(`save.php?score=${score}&diff=${currentDiff}`)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
@ -232,4 +273,41 @@ function saveScore(fromModal = false){
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fungsi spawn power-up
|
||||
function spawnPowerUp(x, y) {
|
||||
const types = ['multiBall', 'largeBall', 'largePaddle', 'fastBall'];
|
||||
const type = types[Math.floor(Math.random() * types.length)];
|
||||
let color;
|
||||
switch (type) {
|
||||
case 'multiBall': color = '#FF0000'; break;
|
||||
case 'largeBall': color = '#00FF00'; break;
|
||||
case 'largePaddle': color = '#0000FF'; break;
|
||||
case 'fastBall': color = '#FFFF00'; break;
|
||||
}
|
||||
powerUps.push({ x: x, y: y, type: type, color: color });
|
||||
}
|
||||
|
||||
// Fungsi activate power-up
|
||||
function activatePowerUp(type) {
|
||||
switch (type) {
|
||||
case 'multiBall':
|
||||
// Tambah bola baru dari posisi bola pertama
|
||||
if (balls.length > 0) {
|
||||
let newBall = { x: balls[0].x, y: balls[0].y, dx: -balls[0].dx, dy: balls[0].dy, r: balls[0].r };
|
||||
balls.push(newBall);
|
||||
}
|
||||
break;
|
||||
case 'largeBall':
|
||||
balls.forEach(b => b.r += 2);
|
||||
break;
|
||||
case 'largePaddle':
|
||||
paddle.w += 20;
|
||||
break;
|
||||
case 'fastBall':
|
||||
speed += 1;
|
||||
balls.forEach(b => lockSpeed(b));
|
||||
break;
|
||||
}
|
||||
}
|
||||
213
style.css
213
style.css
@ -1,28 +1,39 @@
|
||||
/* Import pixelated font from Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
|
||||
/* General body styles with pixelated feel */
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-family: 'Press Start 2P', monospace; /* Pixelated font for retro look */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: radial-gradient(circle at top, #6a85f1, #4834d4);
|
||||
color: white;
|
||||
background: #000; /* Solid black background for pixel style */
|
||||
color: #FFF; /* White text */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
image-rendering: pixelated; /* Force pixelated rendering */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: crisp-edges; /* Safari */
|
||||
}
|
||||
|
||||
/* Header with pixel shadow */
|
||||
h1 {
|
||||
font-size: 2.7rem;
|
||||
margin-top: 25px;
|
||||
text-shadow: 3px 3px 10px rgba(0,0,0,0.4);
|
||||
text-shadow: 2px 2px 0px #FF0000; /* Red pixel shadow */
|
||||
letter-spacing: 1px;
|
||||
color: #FFFF00; /* Yellow for retro feel */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-top: 20px;
|
||||
text-shadow: 3px 3px 10px rgba(0,0,0,0.4);
|
||||
text-shadow: 2px 2px 0px #FF0000;
|
||||
color: #FFFF00;
|
||||
}
|
||||
|
||||
/* Menu with pixelated buttons */
|
||||
.menu {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
@ -33,21 +44,22 @@ h2 {
|
||||
|
||||
.menu a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
color: #FFF;
|
||||
padding: 10px 18px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
border-radius: 30px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
transition: 0.3s ease;
|
||||
background: #333; /* Dark gray for pixel button */
|
||||
border: 2px solid #FFF; /* White border for pixel edge */
|
||||
border-radius: 0; /* No rounded corners for pixel style */
|
||||
box-shadow: 4px 4px 0px #000; /* Raised pixel effect */
|
||||
transition: none; /* Remove smooth transitions for instant pixel feel */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 0.8rem; /* Smaller font for pixel look */
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
transform: translateY(-3px);
|
||||
background: rgba(255,255,255,0.35);
|
||||
background: #555; /* Lighter gray on hover */
|
||||
box-shadow: 2px 2px 0px #000; /* Slightly less raised */
|
||||
}
|
||||
|
||||
.user-info {
|
||||
@ -56,34 +68,40 @@ h2 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: #00FF00; /* Green for user info */
|
||||
}
|
||||
|
||||
/* Game container with pixelated border */
|
||||
.game-container {
|
||||
margin-top: 20px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
background: #111; /* Dark background */
|
||||
padding: 25px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
box-shadow: 0px 10px 25px rgba(0,0,0,0.25);
|
||||
border: 4px solid #FFF; /* Thick white border for pixel */
|
||||
border-radius: 0; /* Square corners */
|
||||
box-shadow: 8px 8px 0px #000; /* Heavy shadow for 3D pixel effect */
|
||||
text-align: center;
|
||||
width: 95%;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border-radius: 12px;
|
||||
border: 3px solid rgba(255,255,255,0.8);
|
||||
background: #111;
|
||||
box-shadow: 0px 8px 25px rgba(0,0,0,0.6);
|
||||
border: 4px solid #FFF; /* Pixel border */
|
||||
border-radius: 0; /* Square */
|
||||
background: #000; /* Black canvas background */
|
||||
box-shadow: 4px 4px 0px #000; /* Pixel shadow */
|
||||
image-rendering: pixelated; /* Ensure canvas renders pixelated */
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
#score {
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
color: #FFFF00; /* Yellow score */
|
||||
}
|
||||
|
||||
/* Controls with pixel buttons */
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -94,29 +112,34 @@ canvas {
|
||||
|
||||
select {
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 0;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
background: #333;
|
||||
color: #FFF;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 22px;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
background: linear-gradient(45deg, #ff6b6b, #ff4757);
|
||||
box-shadow: 0px 5px 15px rgba(255,76,76,0.4);
|
||||
transition: 0.25s ease;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 0;
|
||||
color: #FFF;
|
||||
background: #FF0000; /* Red button */
|
||||
box-shadow: 4px 4px 0px #000;
|
||||
transition: none;
|
||||
cursor: pointer;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 7px 18px rgba(255,76,76,0.55);
|
||||
background: #CC0000; /* Darker red */
|
||||
box-shadow: 2px 2px 0px #000;
|
||||
}
|
||||
|
||||
/* Leaderboard body */
|
||||
.leaderboard-body {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
@ -137,12 +160,11 @@ button:hover {
|
||||
.lb-column {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: #222; /* Dark gray */
|
||||
padding: 20px;
|
||||
border-radius: 18px;
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
box-shadow: 0px 10px 25px rgba(0,0,0,0.25);
|
||||
border: 4px solid #FFF;
|
||||
border-radius: 0;
|
||||
box-shadow: 8px 8px 0px #000;
|
||||
}
|
||||
|
||||
.lb-column h3 {
|
||||
@ -151,115 +173,121 @@ button:hover {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 15px;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
|
||||
text-shadow: 2px 2px 0px #000;
|
||||
}
|
||||
|
||||
.easy-title { color: #33FF57; border-bottom: 2px solid #33FF57; display: inline-block; padding-bottom: 5px; }
|
||||
.medium-title { color: #3357FF; border-bottom: 2px solid #3357FF; display: inline-block; padding-bottom: 5px; }
|
||||
.hard-title { color: #FF33F5; border-bottom: 2px solid #FF33F5; display: inline-block; padding-bottom: 5px; }
|
||||
.easy-title { color: #00FF00; border-bottom: 4px solid #00FF00; display: inline-block; padding-bottom: 5px; }
|
||||
.medium-title { color: #0000FF; border-bottom: 4px solid #0000FF; display: inline-block; padding-bottom: 5px; }
|
||||
.hard-title { color: #FF00FF; border-bottom: 4px solid #FF00FF; display: inline-block; padding-bottom: 5px; }
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
color: #FFF;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: #444;
|
||||
padding: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
border: 2px solid #FFF;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.15);
|
||||
background: #333;
|
||||
border: 1px solid #FFF;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background: rgba(255,255,255,0.12);
|
||||
background: #555;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: rgba(255,255,255,0.22);
|
||||
transition: 0.25s;
|
||||
background: #777;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-block;
|
||||
margin: 25px auto;
|
||||
padding: 10px 22px;
|
||||
background: linear-gradient(45deg, #28a745, #21c064);
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
background: #00FF00; /* Green */
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 0;
|
||||
color: #000; /* Black text for contrast */
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
box-shadow: 0px 5px 15px rgba(0,0,0,0.25);
|
||||
transition: 0.25s ease;
|
||||
box-shadow: 4px 4px 0px #000;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 7px 18px rgba(0,0,0,0.45);
|
||||
background: #00CC00;
|
||||
box-shadow: 2px 2px 0px #000;
|
||||
}
|
||||
|
||||
/* Login body */
|
||||
.login-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
position: relative;
|
||||
width: 380px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 15px;
|
||||
background: #333;
|
||||
border: 4px solid #FFF;
|
||||
border-radius: 0;
|
||||
padding: 25px;
|
||||
box-shadow: 0 8px 32px rgba(255, 255, 255, 0.86);
|
||||
animation: popup 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
from { opacity: 0; transform: scale(0.85); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
box-shadow: 8px 8px 0px #000;
|
||||
animation: none; /* Remove animation for pixel feel */
|
||||
}
|
||||
|
||||
.login-box input, .login-box button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
}
|
||||
|
||||
.login-box button {
|
||||
background: linear-gradient(45deg, #ff6b6b, #ff4757);
|
||||
color: white;
|
||||
background: #FF0000;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease;
|
||||
transition: none;
|
||||
box-shadow: 4px 4px 0px #000;
|
||||
}
|
||||
|
||||
.login-box button:hover {
|
||||
background: linear-gradient(45deg, #ff4757, #ff6b6b);
|
||||
background: #CC0000;
|
||||
box-shadow: 2px 2px 0px #000;
|
||||
}
|
||||
|
||||
.login-box hr {
|
||||
margin: 25px 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border: 2px solid #FFF;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
/* Game modal with pixel style */
|
||||
.game-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@ -269,35 +297,35 @@ tr:hover td {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(15px);
|
||||
background: #222;
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
border: 4px solid #FFF;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
max-width: 350px;
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
|
||||
animation: popup 0.4s ease-out;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 8px 8px 0px #000;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
color: #FFFF00;
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 25px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
@ -311,28 +339,39 @@ tr:hover td {
|
||||
.modal-buttons button {
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 0;
|
||||
box-shadow: 4px 4px 0px #000;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
}
|
||||
|
||||
#saveScoreBtn {
|
||||
background: linear-gradient(45deg, #28a745, #21c064);
|
||||
box-shadow: 0px 5px 15px rgba(33, 192, 100, 0.4);
|
||||
background: #00FF00;
|
||||
color: #000;
|
||||
box-shadow: 4px 4px 0px #000;
|
||||
}
|
||||
|
||||
.leaderboard-link, .back-link {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
color: #FFF;
|
||||
font-size: 0.9rem;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
transition: 0.3s ease;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 0;
|
||||
background: #333;
|
||||
box-shadow: 4px 4px 0px #000;
|
||||
transition: none;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
}
|
||||
|
||||
.leaderboard-link:hover, .back-link:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: #555;
|
||||
box-shadow: 2px 2px 0px #000;
|
||||
}
|
||||
|
||||
/* Media queries for mobile */
|
||||
@media (max-width: 600px) {
|
||||
h1 { font-size: 2.2rem; }
|
||||
canvas { width: 100%; height: auto; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user