mirror of
https://gitlab.com/lecarore/breakout71.git
synced 2025-04-24 22:16:14 -04:00
Move to parcel
This commit is contained in:
Renan LE CARO
parent
c2706d00e7
commit
110f504820
16 changed files with 7665 additions and 513 deletions
3103
src/game.js
Normal file
3103
src/game.js
Normal file
File diff suppressed because one or more lines are too long
25
src/index.html
Normal file
25
src/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Breakout 71</title>
|
||||
<meta name="description" content="A breakout game with roguelite mechanics. Break bricks, catch coins, pick upgrades, repeat. Play for free on mobile and desktop.">
|
||||
<style>
|
||||
@import "style.css";
|
||||
</style>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🕹️</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<button id="menu">☰<span> menu</span></button>
|
||||
<button id="score"></button>
|
||||
<canvas id="game"></canvas>
|
||||
<script type="module">
|
||||
import "./game.js";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
932
src/levels.json
Normal file
932
src/levels.json
Normal file
File diff suppressed because one or more lines are too long
24
src/palette.json
Normal file
24
src/palette.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"_": "",
|
||||
"B": "black",
|
||||
"W": "white",
|
||||
"g": "#231f20",
|
||||
"y": "#ffd300",
|
||||
"b": "#6262EA",
|
||||
"t": "#5DA3EA",
|
||||
"s": "#E67070",
|
||||
"r": "#e32119",
|
||||
"R": "#ab0c0c",
|
||||
"c": "#59EEA3",
|
||||
"G": "#A1F051",
|
||||
"v": "#A664E8",
|
||||
"p": "#E869E8",
|
||||
"a": "#5BECEC",
|
||||
"C": "#53EE53",
|
||||
"S": "#F44848",
|
||||
"P": "#E66BA8",
|
||||
"O": "#F29E4A",
|
||||
"k": "#618227",
|
||||
"e": "#e1c8b4",
|
||||
"l": "#9b9fa4"
|
||||
}
|
||||
337
src/style.css
Normal file
337
src/style.css
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
* {
|
||||
font-family: Courier New,
|
||||
Courier,
|
||||
Lucida Sans Typewriter,
|
||||
Lucida Typewriter,
|
||||
monospace;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
color: white;
|
||||
background-size: 120px 120px;
|
||||
background-color: var(--background1);
|
||||
--background1: #030c23;
|
||||
--background2: #03112a;
|
||||
}
|
||||
|
||||
#game {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#score,
|
||||
#menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 10px;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: white;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
body.black_puck #score,
|
||||
body.black_puck #menu {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#score:hover,
|
||||
#score:focus,
|
||||
#menu:hover,
|
||||
#menu:focus {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#score {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
#menu > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.popup > div {
|
||||
margin: auto;
|
||||
padding: 20px 10px;
|
||||
/*border: 1px solid white;*/
|
||||
transform-origin: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.popup > div > * {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.popup > div > h2,
|
||||
.popup > div > p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.popup > div > button {
|
||||
font: inherit;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid white;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.popup > div > button:not([disabled]):hover,
|
||||
.popup > div > button:not([disabled]):focus {
|
||||
border-color: #f1d33b;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.popup button.close-modale {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup button.close-modale:before {
|
||||
content: "+";
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
font-size: 80px;
|
||||
display: inline-block;
|
||||
top: 34px;
|
||||
left: 26px;
|
||||
}
|
||||
|
||||
.popup button.close-modale:hover {
|
||||
font-weight: bold;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.popup > div > button[disabled] {
|
||||
/*border: 1px solid #666;*/
|
||||
opacity: 0.5;
|
||||
filter: saturate(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popup > div > button > div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.popup > div > button > div > em {
|
||||
display: block;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.popup > div > button > span.checks {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup > div > button > span.checks > span {
|
||||
flex-basis: 10px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
/*border: 1px solid white;*/
|
||||
background: white;
|
||||
opacity: 0.1;
|
||||
border-radius: 4px;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.popup > div > button > span.checks > span.checked {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.popup .textAfterButtons {
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
}
|
||||
|
||||
.popup a[href] {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.popup a[href]:hover,
|
||||
.popup a[href]:focus {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/*Unlocks progress bar*/
|
||||
.progress {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
background: #1c1c2f;
|
||||
color: #fff;
|
||||
box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress > .progress_bar_part {
|
||||
display: block;
|
||||
background: #4049ca;
|
||||
box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform-origin: top left;
|
||||
animation: grow 1s both ease-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
0% {
|
||||
transform: scale(0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
#level-recording-container {
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
#level-recording-container img, #level-recording-container video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#level-recording-container a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#level-recording-container a video {
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
outline: 1px solid white;
|
||||
box-shadow: 2px 2px 5px black;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
#level-recording-container {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
max-width: calc((100vw - 450px )/2 - 80px);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.histogram {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
margin: 10px 0 40px 0;
|
||||
}
|
||||
|
||||
|
||||
.histogram > span {
|
||||
/* Hover zone */
|
||||
flex-grow: 1;
|
||||
width: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.histogram > span.active > span{
|
||||
background: #4049ca;
|
||||
}
|
||||
.histogram > span > span{
|
||||
/*Visible bar*/
|
||||
background: #1c1c2f;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.histogram > span > span> span {
|
||||
/*label */
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
transform-origin: bottom left;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
|
||||
}
|
||||
|
||||
.histogram > span:not(:hover):not(.active) > span> span {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
h2.histogram-title {
|
||||
color: #3b3f75;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h2.histogram-title strong {
|
||||
color: #4049ca;
|
||||
}
|
||||
1
src/version.json
Normal file
1
src/version.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
"29019801"
|
||||
Loading…
Add table
Add a link
Reference in a new issue