Skip to content

Commit

Permalink
Add Laundromat minigame
Browse files Browse the repository at this point in the history
  • Loading branch information
@sharkiller
sharkiller committed Feb 14, 2024
1 parent 291e4e2 commit 5a4e7cc
Show file tree
Hide file tree
Showing 6 changed files with 521 additions and 0 deletions.
1 change: 1 addition & 0 deletions nopixel_minigame/4.0/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
</head>
<body>
<div class="credits">
<a href="laundromat/">Laundromat Minigame</a><br>
<a href="roof_running/">Roof Running Minigame</a><br><br>
<a href="../">NoPixel 3.0 Minigames</a><br><br>
Whisper me on Twitch <b>@Sh4rkill3r</b> or Discord <b>sharkiller</b><br>
Expand Down
Binary file added nopixel_minigame/4.0/laundromat/favicon.ico
View file
Binary file not shown.
69 changes: 69 additions & 0 deletions nopixel_minigame/4.0/laundromat/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>NoPixel Laundromat Minigame</title>
<meta name="description" content="Play the NoPixel Laundromat Minigame and match the correct colors.">
<link rel="canonical" href="https://sharkiller.ddns.net/nopixel_minigame/4.0/laundromat/" />
<meta name="viewport" content="width=device-width, initial-scale=0.4">
<link rel="icon" type="image/png" href="favicon.ico" sizes="32x32" />
<link rel="stylesheet" type="text/css" href="minigame.css?v=20240213">
<script src="https://unpkg.com/konva@9.3.3/konva.min.js"></script>
<script defer src="minigame.js?v=20240213"></script>
<script> // Microsoft Bing
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=true;t.src="https://www.clarity.ms/tag/9twm8m8r4i?ref=bwt";
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "9twm8m8r4i");
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-52394643-1"></script>
<script> // Google Analytics
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-52394643-1');
</script>
</head>
<body>
<h1 class="title">NoPixel Laundromat Minigame</h1>
<h3 class="description">
Play the NoPixel Laundromat Minigame and match the correct colors.
<br><br>
<u>How to play:</u> Rotate the dots with ← and → or A and D to match the outer circle color.<br>
</h3>
<div class="streaks">
STREAK: <span class="streak">0</span> <span class="fa">&#xf233;</span> MAX STREAK: <span class="max_streak">0</span>
<br>TIME: <span class="time">0.000</span> <span class="fa">&#xf2f2;</span> BEST TIME: <span class="best_time">0.000</span>
</div>
<div class="options">
<div class="option speed">
<label for="speed">Speed:</label>
<input id="speed" type="range" value="10" min="7" max="30" autocomplete="off">
<div class="speed_value">10s</div>
</div>
</div>
<div class="minigame">
<div class="splash"><div class="fa hacker">&#xf11b;</div>Lockpick... Unlock each lock...</div>
<div class="game-canvas hidden" id="game-canvas"></div>
</div>
<div class="restart"><button class="btn_again">AGAIN!</button></div>
<div class="credits">
Whisper me on Twitch <b>@Sh4rkill3r</b> or Discord <b>sharkiller</b><br>
<div class="donate">
<span>
I maintain these minigames in my spare time, free of ads and available to everyone.<br>
If you wish to donate to dedicate more time is very appreciated.
</span><br>
<a href="https://www.paypal.com/donate/?hosted_button_id=Z9D2F35BDMBBW" target="_blank">
<img src="../../paypal.png" alt="Paypal" height="70">
</a><br>
</div>
See also:<br>
<b>&gt;Laundromat Minigame&lt;</b><br>
<a href="../roof_running/">Roof Running Minigame</a><br><br>
<a href="../../">NoPixel 3.0 Minigames</a><br><br>
<div xmlns:cc="https://creativecommons.org/ns#" xmlns:dct="https://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://sharkiller.ddns.net/nopixel_minigame/">NoPixel Minigames</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/sharkiller">Sharkiller</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img alt="CC" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img alt="BY" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img alt="NC" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img alt="ND" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></div>
</div>
</body>
</html>
158 changes: 158 additions & 0 deletions nopixel_minigame/4.0/laundromat/minigame.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/*!
* Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.eot);
src: url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.woff2) format("woff2"),
url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.woff) format("woff"),
url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.ttf) format("truetype"),
url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

.fa, .fas {
font-family: "Font Awesome 5 Free", sans-serif;
font-weight: 900
}

/*!
* Game
*/

body{
background-color: #15181d;
font-family: sans-serif;
}

.title{
text-align: center;
color: white;
}
.description{
text-align: center;
color: gray;
}
.description sub{
font-style: italic;
}

.streaks {
display: block;
margin: 40px auto;
text-align: center;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
color: white;
width: -moz-fit-content;
width: fit-content;
background-color: #028000;
padding: 12px;
border-radius: 18px;
}
.best_time,
.time {
display: inline-block;
width: 100px;
}
.streaks .fa {
padding: 0 10px;
}
.options{
font-weight: bold;
text-align: center;
margin: 0 auto 10px;
}
.option{
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
width: -moz-fit-content;
width: fit-content;
height: 20px;
background-color: #20282e;
padding: 10px 20px;
margin: 0 auto 10px;
border-radius: 6px;
}
.option.speed input{
vertical-align: text-top;
}
.speed_value{
display: inline-block;
width: 18px;
text-align: right;
}
.dots_value{
display: inline-block;
width: 40px;
text-align: center;
}
.minigame{
margin: 0 auto 20px;
width: 540px;
min-width: 540px;
max-width: 540px;
height: 540px;
min-height: 540px;
max-height: 540px;
background-color: #232832;
}
.splash{
display: inline-block;
width: 100%;
margin: 220px auto;
text-align: center;
color: white;
font-size: 16px;
user-select: none;
}
.splash .hacker{
font-size: 65px;
margin-bottom: 30px;
}
.game-canvas{
margin: 0;
background-color: #0c2332;
}
.hidden {
display: none;
}
.restart{
text-align: center;
}
.btn_again {
padding: 6px 15px;
font-weight: bold;
}
.credits{
text-align: center;
color: gray;
margin-top: 40px;
}
.credits a{
color: #ccc;
}
.credits b{
color: white;
}
.credits .fas{
color: red;
}
.credits .donate{
margin: 20px 0;
}
.credits .coin{
font-weight: bold;
color: white;
}
.credits .wallet{
font-family: monospace;
font-size: 20px;
}
Loading

0 comments on commit 5a4e7cc

Please sign in to comment.