|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Advanced Pong</title> |
|
<style> |
|
body { margin: 0; overflow: hidden; background-color: #111; cursor: none; } |
|
#gameArea { position: relative; width: 100vw; height: 100vh; } |
|
.paddle { |
|
position: absolute; |
|
width: 10px; |
|
height: 80px; |
|
background-color: white; |
|
transition: height 0.2s ease-out; |
|
} |
|
#paddleLeft { left: 5px; } |
|
#paddleRight { right: 5px; } |
|
#ball { |
|
position: absolute; |
|
width: 15px; |
|
height: 15px; |
|
background-color: red; |
|
border-radius: 50%; |
|
box-shadow: 0 0 5px red; |
|
} |
|
|
|
#ball::after { |
|
content: ''; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 50%; |
|
background: red; |
|
opacity: 0.5; |
|
transform: translate(-50%, -50%) scale(1); |
|
filter: blur(5px); |
|
z-index: -1; |
|
transition: transform 0.1s linear, opacity 0.1s linear; |
|
} |
|
#ball.moving::after { |
|
transform: translate(-50%, -50%) scale(1.5); |
|
opacity: 0; |
|
} |
|
|
|
.impact { |
|
box-shadow: 0 0 15px 5px yellow !important; |
|
transform: scale(1.1); |
|
} |
|
|
|
#scores { |
|
position: absolute; |
|
top: 10px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
color: white; |
|
font-size: 24px; |
|
font-family: sans-serif; |
|
user-select: none; |
|
} |
|
#powerUp { |
|
position: absolute; |
|
width: 20px; |
|
height: 20px; |
|
background-color: cyan; |
|
border-radius: 5px; |
|
box-shadow: 0 0 8px cyan; |
|
display: none; |
|
} |
|
#chargeIndicator { |
|
position: absolute; |
|
bottom: 20px; |
|
left: 20px; |
|
width: 50px; |
|
height: 10px; |
|
background-color: grey; |
|
border: 1px solid white; |
|
display: none; |
|
} |
|
#chargeIndicatorFill { |
|
width: 0%; |
|
height: 100%; |
|
background-color: yellow; |
|
transition: width 0.05s linear; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="gameArea"> |
|
<div id="paddleLeft" class="paddle"></div> |
|
<div id="paddleRight" class="paddle"></div> |
|
<div id="ball"></div> |
|
<div id="powerUp"></div> |
|
<div id="scores"> |
|
<span id="playerScore">0</span> - <span id="botScore">0</span> |
|
</div> |
|
<div id="chargeIndicator"><div id="chargeIndicatorFill"></div></div> |
|
</div> |
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
