From 6981dfac401b79eb672d2f7ea4e9ff2d437ad770 Mon Sep 17 00:00:00 2001 From: Durvenson Date: Mon, 27 Jul 2020 16:45:12 -0400 Subject: [PATCH] seperated website into two subpages yes --- HDIIGameHTMLEdition/index.css | 91 ++++++++++ HDIIGameHTMLEdition/index.html | 53 ++++++ HDIIGameHTMLEdition/index.js | 185 +++++++++++++++++++++ .gitattributes => map/.gitattributes | 0 blankmapthing.png => map/blankmapthing.png | Bin index.css => map/index.css | 0 index.html => map/index.html | 0 index.js => map/index.js | 0 mapv1.svg => map/mapv1.svg | 0 9 files changed, 329 insertions(+) create mode 100644 HDIIGameHTMLEdition/index.css create mode 100644 HDIIGameHTMLEdition/index.html create mode 100644 HDIIGameHTMLEdition/index.js rename .gitattributes => map/.gitattributes (100%) rename blankmapthing.png => map/blankmapthing.png (100%) rename index.css => map/index.css (100%) rename index.html => map/index.html (100%) rename index.js => map/index.js (100%) rename mapv1.svg => map/mapv1.svg (100%) diff --git a/HDIIGameHTMLEdition/index.css b/HDIIGameHTMLEdition/index.css new file mode 100644 index 0000000..23aa372 --- /dev/null +++ b/HDIIGameHTMLEdition/index.css @@ -0,0 +1,91 @@ +@import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap"); +html { + background-color: #111111; + color: #DDDDDD; + font-family: Balsamiq Sans, cursive; + overflow: hidden; +} +#left { + position: fixed; + width: 200px; + height: 100%; + left: 0; + background-color: #333333; + z-index: 10; + overflow-y: auto; +} +#right { + position: fixed; + width: 200px; + height: 100%; + right: 0; + background-color: #333333; + z-index: 10; + overflow-y: auto; +} +h2, #coords, #coords2 { + text-align: center; +} +#map { + position: relative; + width: 100%; + height: 100%; +} +#map2 { + position: absolute; + width: 1400px; + height: 450px; + background-color: #224488; + z-index: 0; + overflow: hidden; +} +#coords { + background-color: #882211; + position: fixed; + left: 50%; + top: 50%; + z-index: 7; + width: 50px; + height: 50px; + overflow: hidden; +} +#mainheader { + position: fixed; + width: calc(100% - 600px); + background-color: #444444; + left: 300px; + text-align: center; + z-index: 1; +} +#blocks { + position: absolute; + background-color: #224488; + z-index: 0; +} +button { + font-family: Balsamiq Sans, cursive; + font-size: 20px; + margin: 4px; + background-color: #222222AA; + border: solid 5px #111111AA; + border-radius: 5px; + color: #DDDDDD; +} +.block { + position: absolute; + z-index: 6; + width: 50px; + height: 50px; + margin: 0px; + border-radius: 0; + font-size: 10px; +} +.dirt { + background-color: #884411; +} +.grass { + background-color: #118822; +} +.stone { + background-color: #444444; +} \ No newline at end of file diff --git a/HDIIGameHTMLEdition/index.html b/HDIIGameHTMLEdition/index.html new file mode 100644 index 0000000..15cdbf2 --- /dev/null +++ b/HDIIGameHTMLEdition/index.html @@ -0,0 +1,53 @@ + + + + SGS + + + + + +
+

+ Instructions +

+ Use the arrow keys to move.
+ Pressing the key corresponding to an item will equip that item. + Numbers on the blocks indicate how much health that block has. Click on the block to "damage" it. +

+ Depth +

+ 0 m +

+ Items +

+ Bare Hands (1 damage, costed 0 coins)
+

+ Shop +

+ You have 0 coins to spend.

+ Dirt Shovel (1.25 damage, costs 2.5 coins)
+
+ +

+ How Deep Is It: The Game (ported from Scratch) +

+
+
+
+
+
+
+ ._. +
+
+ + + \ No newline at end of file diff --git a/HDIIGameHTMLEdition/index.js b/HDIIGameHTMLEdition/index.js new file mode 100644 index 0000000..40b4bd3 --- /dev/null +++ b/HDIIGameHTMLEdition/index.js @@ -0,0 +1,185 @@ +function update() { + ground = false; + playerx = playerx + xvel; + if (playerx > 1350) { + playerx = 1350 + } + if (playerx < 0) { + playerx = 0 + } + if (jumping == true) { + jump = 30; + jumping = false; + } + xvel = xvel * 0.9; + if (xvel > 0) { + var thing = Math.ceil(playerx / 50) * 50 + "," + Math.ceil(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playerx = Math.ceil(playerx / 50) * 50 - 51; + ground = true; + } + var thing = Math.ceil(playerx / 50) * 50 + "," + Math.floor(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playerx = Math.ceil(playerx / 50) * 50 - 51; + ground = true; + } + } + if (xvel < 0) { + var thing = Math.floor(playerx / 50) * 50 + "," + Math.ceil(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playerx = Math.floor(playerx / 50) * 50 + 51; + ground = true; + } + var thing = Math.floor(playerx / 50) * 50 + "," + Math.floor(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playerx = Math.floor(playerx / 50) * 50 + 51; + ground = true; + } + } + if (jump > 0) { + jump = jump - 1; + playery = playery - (jump*jump/120); + var thing = Math.floor(playerx / 50) * 50 + "," + Math.floor(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playery = Math.floor(playery / 50) * 50 + 50; + jump = 0; + } + var thing = Math.ceil(playerx / 50) * 50 + "," + Math.floor(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playery = Math.floor(playery / 50) * 50 + 50; + jump = 0; + } + } else { + playery = playery + 10; + var thing = Math.floor(playerx / 50) * 50 + "," + Math.ceil(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playery = Math.ceil(playery / 50) * 50 - 50; + ground = true; + + } + var thing = Math.ceil(playerx / 50) * 50 + "," + Math.ceil(playery / 50) * 50; + if (document.getElementsByClassName(thing)[0] != null) { + playery = Math.ceil(playery / 50) * 50 - 50; + ground = true; + } + } + document.getElementById("blocks").style.left = 700 - playerx + "px"; + document.getElementById("blocks").style.top = 225 - playery + "px"; + document.getElementById("depth").innerHTML = 25 - parseInt(document.getElementById("blocks").style.top.slice(0,document.getElementById("blocks").style.top.length - 2)) + "m"; + if (((Math.ceil(playery / 50) * 50) - (Math.ceil(playery2 / 50) * 50)) > 0) { + playery2 = playery; + setTimeout(rendernewblocks,160); + } +} +function newfunc(i) { + if (breakable == true) { + breakable = false; + var thing = i; + blockhealths[thing] = blockhealths[thing] - picks[picklevel][0]; + document.getElementById(thing).innerHTML = blockhealths[thing]; + if (blockhealths[thing] < 1) { + coins = coins + cointable[document.getElementById(thing).className.split(' ')[0]]; + document.getElementById(thing).remove(); + document.getElementById("coins").innerHTML = "You have " + coins + " coins to spend." + } + setTimeout(makebreakable,1000) + } +} +function makebreakable() { + breakable = true; +} +async function rendernewblocks() { + var lengthh = blockhealths.length; + for (j = (lengthh - 504); j < (lengthh - 476); j++) { + if (document.getElementById(j)) { + document.getElementById(j).remove(); + } + blockhealths[j] = null; + } + for (j = (lengthh + 0); j < (lengthh + 28); j++) { + for (k = 0; k < depthtable.length; k++) { + if (Math.floor(j / 28) >= depthtable[k]) { + var randomnumber = Math.random(); + for (l = 0; l < Object.keys(raritytable[k]).length; l++) { + if (randomnumber >= Object.values(raritytable[k])[l]) { + currentblock = Object.keys(raritytable[k])[l]; + } else { + break + } + } + break + } + } + document.getElementById("blocks").innerHTML = document.getElementById("blocks").innerHTML + '' + document.getElementById(j).style.left = (j % 28) * 50; + document.getElementById(j).style.top = Math.floor(j / 28) * 50; + blockhealths[j] = healthtable[currentblock]; + } +} +function upgrade(item) { + if (item == "pick") { + if (coins >= picks[picklevel+1][2]) { + picklevel = picklevel + 1; + coins = coins - picks[picklevel][2]; + document.getElementById("pick").innerHTML = picks[picklevel][1] + " (" + picks[picklevel][0] + " damage, costed " + picks[picklevel][2] + " coins )"; + document.getElementById("pickupgrades").innerHTML = picks[picklevel+1][1] + " (" + picks[picklevel+1][0] + " damage, costs " + picks[picklevel+1][2] + " coins )"; + document.getElementById("coins").innerHTML = "You have " + coins + " coins to spend."; + } + } +} +var coins = 0; +var picklevel = 0; +var picks = [[1,"Bare Hands",0],[1.25,"Dirt Shovel",2.5],[1.5,"Dirt Pickaxe",10],[1.75,"Soft Rock Shovel",33.75],[2.5,"Soft Rock Pickaxe",68.87]] +var breakable = true; +var depthtable = [16,15,13,10,6,5] +var raritytable = [{"stone": 0},{"dirt": 0, "stone": 0.25},{"dirt": 0, "stone": 0.5},{"dirt": 0, "stone": 0.75},{"dirt": 0},{"grass":0,"dirt":0.9}] +var healthtable = {"dirt": 5, "grass": 3, "stone": 20} +var cointable = {"dirt": 1, "grass": 0, "stone": 3} +var blockhealths = []; +var jumping = false; +var xvel = 1; +var ground = false; +var jump = 0; +var map = document.getElementById("map"); +var map2 = document.getElementById("map2"); +var mapwidth = map.clientWidth; +var mapheight = map.clientHeight; +var playerx = 700; +var playery = 100; +var playery2 = 100; +var currentblock; +var randomnumber; +map2.style.left = "calc(50% - 700px)"; +map2.style.top = "calc(50% - 225px)"; +for (i = 140; i < 252; i++) { + for (k = 0; k < depthtable.length; k++) { + if (Math.floor(i / 28) >= depthtable[k]) { + var randomnumber = Math.random(); + for (l = 0; l < Object.keys(raritytable[k]).length; l++) { + if (randomnumber >= Object.values(raritytable[k])[l]) { + currentblock = Object.keys(raritytable[k])[l]; + } else { + break + } + } + break + } + } + document.getElementById("blocks").innerHTML = document.getElementById("blocks").innerHTML + '' + document.getElementById(i).style.left = (i % 28) * 50; + document.getElementById(i).style.top = Math.floor(i / 28) * 50; + blockhealths[i] = healthtable[currentblock]; +} +document.addEventListener('keydown', function (event) { + var key = event.key || event.keyCode; + if ((key == 'ArrowUp' || key == 38) && ground == true) { + jumping = true; + } + if ((key == 'ArrowLeft' || key == 37)) { + xvel = xvel - 1; + } + if ((key == 'ArrowRight' || key == 39)) { + xvel = xvel + 1; + } +}); +var test = setInterval(update,16); \ No newline at end of file diff --git a/.gitattributes b/map/.gitattributes similarity index 100% rename from .gitattributes rename to map/.gitattributes diff --git a/blankmapthing.png b/map/blankmapthing.png similarity index 100% rename from blankmapthing.png rename to map/blankmapthing.png diff --git a/index.css b/map/index.css similarity index 100% rename from index.css rename to map/index.css diff --git a/index.html b/map/index.html similarity index 100% rename from index.html rename to map/index.html diff --git a/index.js b/map/index.js similarity index 100% rename from index.js rename to map/index.js diff --git a/mapv1.svg b/map/mapv1.svg similarity index 100% rename from mapv1.svg rename to map/mapv1.svg