seperated website into two subpages
yes
This commit is contained in:
Durvenson
parent
2877914c6f
commit
6981dfac40
9 changed files with 329 additions and 0 deletions
91
HDIIGameHTMLEdition/index.css
Normal file
91
HDIIGameHTMLEdition/index.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
53
HDIIGameHTMLEdition/index.html
Normal file
53
HDIIGameHTMLEdition/index.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>
|
||||
SGS
|
||||
</title>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</link>
|
||||
</head>
|
||||
<body>
|
||||
<div id="left">
|
||||
<h2>
|
||||
Instructions
|
||||
</h2>
|
||||
Use the arrow keys to move.<br>
|
||||
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.
|
||||
<h2>
|
||||
Depth
|
||||
</h2>
|
||||
<span id="depth">0 m</span>
|
||||
<h2>
|
||||
Items
|
||||
</h2>
|
||||
<span id="pick">Bare Hands (1 damage, costed 0 coins)</span><br>
|
||||
<h2>
|
||||
Shop
|
||||
</h2>
|
||||
<span id="coins">You have 0 coins to spend.</span><br><br>
|
||||
<span id="pickupgrades">Dirt Shovel (1.25 damage, costs 2.5 coins)</span><br>
|
||||
<button onclick="upgrade('pick')">Buy now!</span>
|
||||
</div>
|
||||
<div id="right">
|
||||
<h2>
|
||||
Changelog
|
||||
</h2>
|
||||
<p>7/26/2020 - 7/27/2020: Basic features of game ported from the Scratch version. Currently, this is more of a tech demo than it is a game.</p>
|
||||
</div>
|
||||
<h1 id="mainheader">
|
||||
How Deep Is It: The Game (ported from Scratch)
|
||||
</h1>
|
||||
<div id="map">
|
||||
<div id="map2">
|
||||
<div id="blocks">
|
||||
</div>
|
||||
</div>
|
||||
<div id="coords">
|
||||
._.
|
||||
</div>
|
||||
</div>
|
||||
<script src="index.js">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
185
HDIIGameHTMLEdition/index.js
Normal file
185
HDIIGameHTMLEdition/index.js
Normal file
|
|
@ -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 + '<button class="' + currentblock + ' block ' + ((j % 28) * 50) + ',' + (Math.floor(j / 28) * 50) +'" id="' + j + '"onclick="newfunc(' + j + ');" tabindex="-1">' + healthtable[currentblock] + '</button>'
|
||||
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 + '<button class="' + currentblock + ' block ' + ((i % 28) * 50) + ',' + (Math.floor(i / 28) * 50) +'" id="' + i + '"onclick="newfunc(' + i + ');" tabindex="-1">' + healthtable[currentblock] + '</button>'
|
||||
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);
|
||||
0
.gitattributes → map/.gitattributes
vendored
0
.gitattributes → map/.gitattributes
vendored
|
Before Width: | Height: | Size: 335 KiB After Width: | Height: | Size: 335 KiB |
|
Before Width: | Height: | Size: 464 KiB After Width: | Height: | Size: 464 KiB |
Loading…
Reference in a new issue