jonathan/sandtris
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added spot for side bars

Browse source
This commit is contained in:
Franco 2024-01-17 16:45:35 -08:00
parent 7f2ff11bcd
commit 802361eb5d
2 changed files with 162 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
index.html
View file

@ -1,17 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2JKY37CY96"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-2JKY37CY96');
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9200311124038960"
crossorigin="anonymous"></script>
<title>SANDTRIS</title> <title>SANDTRIS</title>
<script src="hammer.min.js"></script> <script src="hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
@ -19,18 +8,14 @@
<link rel="icon" type="image/x-icon" href="favicon.png"> <link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<main> <main>
</main> </main>
<script src="sketch.js"></script> <script src="sketch.js"></script>
<center> <center>
<br/> <br/>
<h1>SANDTRIS</h1> <h1>SANDTRIS</h1>
<div>
<dialog id = "aboutpage" class="page" close> <dialog id = "aboutpage" class="page" close>
<div class="box"> <div class="box">
<br/> <br/>
@ -45,9 +30,9 @@
<span>S</span> <span>S</span>
</div> </div>
<p>MADE BY <a href="https://francomiranda.com/" target="_blank">FRANCO MIRANDA</a> USING P5.JS</p> <p>MADE BY <a href="https://francomiranda.com/" target="_blank">FRANCO MIRANDA</a> USING P5.JS</p>
<p>INSPIRED BY SETRIS BY <p>INSPIRED BY SETRIS BY
<a href="https://itch.io/profile/mslivo" target="_blank">MSLIVO</a></p> <a href="https://itch.io/profile/mslivo" target="_blank">MSLIVO</a>
</p>
<br/> <br/>
<u>CONTROLS</u> <u>CONTROLS</u>
<p>Move Block: Left/Right Arrows</p> <p>Move Block: Left/Right Arrows</p>
@ -62,7 +47,6 @@
<button type="button" class="aboutbutton" onClick="toggleAbout()">X</button> <button type="button" class="aboutbutton" onClick="toggleAbout()">X</button>
</div> </div>
</dialog> </dialog>
<dialog id = "startpage" class="page" open> <dialog id = "startpage" class="page" open>
<div class="box"> <div class="box">
<br/> <br/>
@ -77,31 +61,24 @@
<span>I</span> <span>I</span>
<span>S</span> <span>S</span>
</div> </div>
<br/> <br/>
<button type="button" onClick="startGame()" >START</button> <button type="button" onClick="startGame()" >START</button>
<br/><br/> <br/><br/>
<p id="levelText" style="margin:0px; padding:0px;">Level: </p> <p id="levelText" style="margin:0px; padding:0px;">Level: </p>
<input type="range" min="1" max="10" value="1" class="slider" <input type="range" min="1" max="10" value="1" class="slider"
id="lvlSlider" onchange="adjustDifficulty(this.value)"/> id="lvlSlider" onchange="adjustDifficulty(this.value)"/>
<br/><br/> <br/><br/>
MUS MUS
<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="mus1Slider" onchange="MUSvolume(this.value)"/> class="slider" id="mus1Slider" onchange="MUSvolume(this.value)"/>
<br/> <br/>
SFX 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="sfx1Slider" onchange="SFXvolume(this.value)"/>
<br/><br/> <br/><br/>
<button type="button" class="aboutbutton" onClick="toggleAbout()">?</button> <button type="button" class="aboutbutton" onClick="toggleAbout()">?</button>
</div> </div>
</dialog> </dialog>
<dialog id = "pausepage" class="page" close> <dialog id = "pausepage" class="page" close>
<div class="box"> <div class="box">
<br/> <br/>
@ -120,22 +97,46 @@
class="slider" id="sfx2Slider" onchange="SFXvolume(this.value)"/> class="slider" id="sfx2Slider" onchange="SFXvolume(this.value)"/>
</div> </div>
</dialog> </dialog>
<dialog id = "gameoverpage" class="page" close> <dialog id = "gameoverpage" class="page" close>
<div class="box"> <div class="box">
<br/> <br/>
GAME OVER GAME OVER
<br/> <br/>
<p id="gameoverText"></p> <p id="gameoverText"></p>
<button type="button" onClick="newGame()">NEW GAME</button> <button type="button" onClick="newGame()">NEW GAME</button>
<br/><br/> <br/><br/>
<button type="button" class="sharebutton" onClick="shareText()">share</button> <button type="button" class="sharebutton" onClick="shareText()">share</button>
</div> </div>
</dialog> </dialog>
<div id="main">
<div id="cnv"><div id="p5_loading">LOADING</div></div> <div class="ads">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9200311124038960"
crossorigin="anonymous"></script>
<!-- left sandtris ad -->
<ins class="adsbygoogle"
style="width:200px;height:640px"
data-ad-client="ca-pub-9200311124038960"
data-ad-slot="1316725130"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- sandtris canvas -->
<div id="cnv">
<div id="p5_loading">LOADING</div>
</div>
<div class="ads">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9200311124038960"
crossorigin="anonymous"></script>
<!-- right sandtris ad -->
<ins class="adsbygoogle"
style="width:200px;height:640px"
data-ad-client="ca-pub-9200311124038960"
data-ad-slot="4677385647"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div> </div>
</center> </center>
</body> </body>

28
style.css
View file

@ -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);