File size: 1,770 Bytes
0c7940f b62df80 0c7940f b62df80 0c7940f ebf6a25 0c7940f b62df80 ebf6a25 0c7940f ebf6a25 0c7940f ebf6a25 0c7940f 6d4d4d9 0c7940f ebf6a25 716e370 ebf6a25 6d4d4d9 716e370 0c7940f 716e370 ac01c02 716e370 7a84eb4 716e370 dacd9cc ac01c02 9096592 0c7940f 3573581 ebf6a25 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
/* Global styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(to bottom, #0f0f0f, #131313);
font-family: 'Arial', sans-serif;
color: white;
overflow: hidden;
}
.game-container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.ball {
position: absolute;
width: 30px;
height: 30px;
background: radial-gradient(circle, #00FFAB, #00B89C);
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 255, 171, 0.8);
}
.platform {
position: absolute;
width: 100px;
height: 20px;
background: linear-gradient(to left, #FF007A, #E5006D);
bottom: 0;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 0, 122, 0.8);
}
#score {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 255, 171, 0.8);
}
#level {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 255, 171, 0.8);
}
#lives {
position: absolute;
top: 20px;
width: 80%;
text-align: center;
font-size: 24px;
}
.life {
margin-right: 5px;
color: red; /* Red hearts */
}
.game-over {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #fff;
font-size: 24px;
display: none; /* Hide it initially */
}
.game-over button {
background-color: #ff007a;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
margin-top: 10px;
}
.game-over button:hover {
background-color: #e5006d;
} |