added spot for side bars
This commit is contained in:
Franco
parent
7f2ff11bcd
commit
802361eb5d
2 changed files with 162 additions and 145 deletions
279
index.html
279
index.html
|
|
@ -1,142 +1,143 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- Google tag (gtag.js) -->
|
<title>SANDTRIS</title>
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2JKY37CY96"></script>
|
<script src="hammer.min.js"></script>
|
||||||
<script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
|
||||||
function gtag(){dataLayer.push(arguments);}
|
<link rel="icon" type="image/x-icon" href="favicon.png">
|
||||||
gtag('js', new Date());
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
<meta charset="utf-8" />
|
||||||
gtag('config', 'G-2JKY37CY96');
|
</head>
|
||||||
</script>
|
<body>
|
||||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9200311124038960"
|
<main>
|
||||||
crossorigin="anonymous"></script>
|
</main>
|
||||||
<title>SANDTRIS</title>
|
<script src="sketch.js"></script>
|
||||||
<script src="hammer.min.js"></script>
|
<center>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
|
<br/>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
|
<h1>SANDTRIS</h1>
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.png">
|
<dialog id = "aboutpage" class="page" close>
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
<div class="box">
|
||||||
<meta charset="utf-8" />
|
<br/>
|
||||||
|
<div class="logo is-animation">
|
||||||
</head>
|
<span>S</span>
|
||||||
<body>
|
<span>A</span>
|
||||||
<main>
|
<span>N</span>
|
||||||
</main>
|
<span>D</span>
|
||||||
<script src="sketch.js"></script>
|
<span>T</span>
|
||||||
<center>
|
<span>R</span>
|
||||||
|
<span>I</span>
|
||||||
<br/>
|
<span>S</span>
|
||||||
<h1>SANDTRIS</h1>
|
</div>
|
||||||
<div>
|
<p>MADE BY <a href="https://francomiranda.com/" target="_blank">FRANCO MIRANDA</a> USING P5.JS</p>
|
||||||
|
<p>INSPIRED BY SETRIS BY
|
||||||
<dialog id = "aboutpage" class="page" close>
|
<a href="https://itch.io/profile/mslivo" target="_blank">MSLIVO</a>
|
||||||
<div class="box">
|
</p>
|
||||||
<br/>
|
<br/>
|
||||||
<div class="logo is-animation">
|
<u>CONTROLS</u>
|
||||||
<span>S</span>
|
<p>Move Block: Left/Right Arrows</p>
|
||||||
<span>A</span>
|
<p>Move Down Faster: Down Arrow</p>
|
||||||
<span>N</span>
|
<p>Spin Block: Up Arrow</p>
|
||||||
<span>D</span>
|
<p>Pause: P</p>
|
||||||
<span>T</span>
|
<br/>
|
||||||
<span>R</span>
|
<p>Connect the same color <br> across the screen to clear lines!</p>
|
||||||
<span>I</span>
|
<br/>
|
||||||
<span>S</span>
|
<p>NOT AFFILIATED WITH Tetris®</p>
|
||||||
</div>
|
<br/>
|
||||||
<p>MADE BY <a href="https://francomiranda.com/" target="_blank">FRANCO MIRANDA</a> USING P5.JS</p>
|
<button type="button" class="aboutbutton" onClick="toggleAbout()">X</button>
|
||||||
|
</div>
|
||||||
<p>INSPIRED BY SETRIS BY
|
</dialog>
|
||||||
<a href="https://itch.io/profile/mslivo" target="_blank">MSLIVO</a></p>
|
<dialog id = "startpage" class="page" open>
|
||||||
<br/>
|
<div class="box">
|
||||||
<u>CONTROLS</u>
|
<br/>
|
||||||
<p>Move Block: Left/Right Arrows</p>
|
Welcome to
|
||||||
<p>Move Down Faster: Down Arrow</p>
|
<div class="logo is-animation">
|
||||||
<p>Spin Block: Up Arrow</p>
|
<span>S</span>
|
||||||
<p>Pause: P</p>
|
<span>A</span>
|
||||||
<br/>
|
<span>N</span>
|
||||||
<p>Connect the same color <br> across the screen to clear lines!</p>
|
<span>D</span>
|
||||||
<br/>
|
<span>T</span>
|
||||||
<p>NOT AFFILIATED WITH Tetris®</p>
|
<span>R</span>
|
||||||
<br/>
|
<span>I</span>
|
||||||
<button type="button" class="aboutbutton" onClick="toggleAbout()">X</button>
|
<span>S</span>
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
<br/>
|
||||||
|
<button type="button" onClick="startGame()" >START</button>
|
||||||
<dialog id = "startpage" class="page" open>
|
<br/><br/>
|
||||||
<div class="box">
|
<p id="levelText" style="margin:0px; padding:0px;">Level: </p>
|
||||||
<br/>
|
<input type="range" min="1" max="10" value="1" class="slider"
|
||||||
Welcome to
|
id="lvlSlider" onchange="adjustDifficulty(this.value)"/>
|
||||||
<div class="logo is-animation">
|
<br/><br/>
|
||||||
<span>S</span>
|
MUS
|
||||||
<span>A</span>
|
<input style="width:80px" type="range" min="0" max="10" value="0.5"
|
||||||
<span>N</span>
|
class="slider" id="mus1Slider" onchange="MUSvolume(this.value)"/>
|
||||||
<span>D</span>
|
<br/>
|
||||||
<span>T</span>
|
SFX
|
||||||
<span>R</span>
|
<input style="width:80px" type="range" min="0" max="10" value="0.5"
|
||||||
<span>I</span>
|
class="slider" id="sfx1Slider" onchange="SFXvolume(this.value)"/>
|
||||||
<span>S</span>
|
<br/><br/>
|
||||||
</div>
|
<button type="button" class="aboutbutton" onClick="toggleAbout()">?</button>
|
||||||
|
</div>
|
||||||
<br/>
|
</dialog>
|
||||||
<button type="button" onClick="startGame()" >START</button>
|
<dialog id = "pausepage" class="page" close>
|
||||||
<br/><br/>
|
<div class="box">
|
||||||
<p id="levelText" style="margin:0px; padding:0px;">Level: </p>
|
<br/>
|
||||||
<input type="range" min="1" max="10" value="1" class="slider"
|
PAUSED
|
||||||
id="lvlSlider" onchange="adjustDifficulty(this.value)"/>
|
<br/><br/>
|
||||||
|
<button type="button" onClick="unpauseGame()">RESUME</button>
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
MUS
|
<button type="button" class="smallbutton" onClick="newGame()">NEW GAME</button>
|
||||||
<input style="width:80px" type="range" min="0" max="10" value="0.5"
|
<br/><br/>
|
||||||
class="slider" id="mus1Slider" onchange="MUSvolume(this.value)"/>
|
MUS
|
||||||
|
<input style="width:80px" type="range" min="0" max="10" value="1"
|
||||||
<br/>
|
class="slider" id="mus2Slider" onchange="MUSvolume(this.value)"/>
|
||||||
SFX
|
<br/>
|
||||||
|
SFX
|
||||||
<input style="width:80px" type="range" min="0" max="10" value="0.5"
|
<input style="width:80px" type="range" min="0" max="10" value="0.5"
|
||||||
class="slider" id="sfx1Slider" onchange="SFXvolume(this.value)"/>
|
class="slider" id="sfx2Slider" onchange="SFXvolume(this.value)"/>
|
||||||
<br/><br/>
|
</div>
|
||||||
<button type="button" class="aboutbutton" onClick="toggleAbout()">?</button>
|
</dialog>
|
||||||
</div>
|
<dialog id = "gameoverpage" class="page" close>
|
||||||
|
<div class="box">
|
||||||
|
<br/>
|
||||||
</dialog>
|
GAME OVER
|
||||||
|
<br/>
|
||||||
<dialog id = "pausepage" class="page" close>
|
<p id="gameoverText"></p>
|
||||||
<div class="box">
|
<button type="button" onClick="newGame()">NEW GAME</button>
|
||||||
<br/>
|
<br/><br/>
|
||||||
PAUSED
|
<button type="button" class="sharebutton" onClick="shareText()">share</button>
|
||||||
<br/><br/>
|
</div>
|
||||||
<button type="button" onClick="unpauseGame()">RESUME</button>
|
</dialog>
|
||||||
<br/><br/>
|
<div id="main">
|
||||||
<button type="button" class="smallbutton" onClick="newGame()">NEW GAME</button>
|
<div class="ads">
|
||||||
<br/><br/>
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9200311124038960"
|
||||||
MUS
|
crossorigin="anonymous"></script>
|
||||||
<input style="width:80px" type="range" min="0" max="10" value="1"
|
<!-- left sandtris ad -->
|
||||||
class="slider" id="mus2Slider" onchange="MUSvolume(this.value)"/>
|
<ins class="adsbygoogle"
|
||||||
<br/>
|
style="width:200px;height:640px"
|
||||||
SFX
|
data-ad-client="ca-pub-9200311124038960"
|
||||||
<input style="width:80px" type="range" min="0" max="10" value="0.5"
|
data-ad-slot="1316725130"></ins>
|
||||||
class="slider" id="sfx2Slider" onchange="SFXvolume(this.value)"/>
|
<script>
|
||||||
</div>
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||||
</dialog>
|
</script>
|
||||||
|
</div>
|
||||||
<dialog id = "gameoverpage" class="page" close>
|
<!-- sandtris canvas -->
|
||||||
<div class="box">
|
<div id="cnv">
|
||||||
<br/>
|
<div id="p5_loading">LOADING</div>
|
||||||
GAME OVER
|
</div>
|
||||||
<br/>
|
<div class="ads">
|
||||||
<p id="gameoverText"></p>
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9200311124038960"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<!-- right sandtris ad -->
|
||||||
<button type="button" onClick="newGame()">NEW GAME</button>
|
<ins class="adsbygoogle"
|
||||||
<br/><br/>
|
style="width:200px;height:640px"
|
||||||
<button type="button" class="sharebutton" onClick="shareText()">share</button>
|
data-ad-client="ca-pub-9200311124038960"
|
||||||
</div>
|
data-ad-slot="4677385647"></ins>
|
||||||
</dialog>
|
<script>
|
||||||
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||||
<div id="cnv"><div id="p5_loading">LOADING</div></div>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
</center>
|
</div>
|
||||||
</body>
|
</center>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
28
style.css
28
style.css
|
|
@ -55,16 +55,32 @@ h1{
|
||||||
text-shadow: 0px 4px rgb(73, 62, 46);
|
text-shadow: 0px 4px rgb(73, 62, 46);
|
||||||
}
|
}
|
||||||
|
|
||||||
#cnv{
|
#main{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: var(--desert-brown);
|
z-index: 0;
|
||||||
width: 590px;
|
display: grid;
|
||||||
height: 640px;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-gap: 20px;
|
||||||
|
height:660px;
|
||||||
|
width: 1100px;
|
||||||
top:50%;
|
top:50%;
|
||||||
left:50%;
|
left:50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
z-index: 0;
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ads{
|
||||||
|
width: 200px;
|
||||||
|
height: 640px;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cnv{
|
||||||
|
|
||||||
|
background-color: var(--desert-brown);
|
||||||
|
width: 590px;
|
||||||
|
height: 640px;
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-shadow: 0px 16px var(--desert-browndark);
|
box-shadow: 0px 16px var(--desert-browndark);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue