vaporvee/destruction-of-legacy
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

began fight system

Browse Source
This commit is contained in:
Yannik
2023-06-23 00:31:51 +02:00
parent 36a3fd54a8
commit 0dd2675c91
5 changed files with 89 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -11,7 +11,7 @@
</head>
<body onpageshow="load()">
<div id="bubble" onclick="nextDlg()">
<div class="box" id="bubble" onclick="nextDlg()">
<p id="title"></p>
<p id="dlg-text"></p>
</div>
@@ -21,6 +21,17 @@
<p class="answer" id="2" onclick="answered(this.id)"></p>
<p class="answer" id="3" onclick="answered(this.id)"></p>
</div>
<div hidden="true" class="box" id="fight">
<img id="enemy-texture"><br>
<p><span id="enemy-name"></span> Leben: <span id="enemy-health"></span></p>
<img onclick="fight()" src="text_horror\assets\sword.png" width="100px">
<br><br><br>
<p><span id="weapon"></span>
(<span id="weapon-damage"></span>)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Leben:<span id="health"></span>
</p>
</div>
<img draggable="false" hidden="true" id="triangle" src="text_horror/assets/triangle.png">
<p class="thx-for-playing">Danke fürs spielen!</p>
</body>

35
text_horror/app.js
View File

@@ -9,11 +9,15 @@ var answers;
var keys;
var allowNextDlg = true;
var voice;
var playerName;
var enemyHealth = 0;
var enemyDamage = 1;
var health = 25;
var weaponName = "Fäuste";
var weaponDamage = 1;
//TODO
//add skipDlg with right mouse click
//simple fights
//playsound
//save file in local storage
window.addEventListener('contextmenu', (event) => {
@@ -103,6 +107,29 @@ function nextDlg(dlgPointerIncrease = true) {
dlgKeyMain = dlgLines[dlgPointer].split(':')[1]
load()
}
else if (dlgLines[dlgPointer].split(":")[0] === "_lock") {
nextDlg();
}
else if (dlgLines[dlgPointer].split(":")[0] === "_weapon") {
weaponName = dlgLines[dlgPointer].split(':')[1]
weaponDamage = dlgLines[dlgPointer].split(':')[2]
nextDlg();
}
else if (dlgLines[dlgPointer].split(":")[0] === "_enemy") {
document.getElementById("enemy-name").innerHTML = dlgLines[dlgPointer].split(":")[1]
document.getElementById("enemy-texture").src = "text_horror/assets/textures/" + dlgLines[dlgPointer].split(":")[2] + ".png"
enemyHealth = dlgLines[dlgPointer].split(":")[3]
enemyDamage = dlgLines[dlgPointer].split(":")[4]
document.getElementById("enemy-health").innerHTML = enemyHealth
document.getElementById("weapon").innerHTML = weaponName
document.getElementById("weapon-damage").innerHTML = weaponDamage
document.getElementById("health").innerHTML = health
document.getElementById("fight").style.visibility = "unset"
document.getElementById("dlg-text").innerHTML = ""
document.getElementById("bubble").hidden = true;
document.getElementById("answer-box").hidden = true;
document.getElementById("triangle").hidden = true;
}
} else
updateDlg();
}
@@ -136,3 +163,7 @@ function answered(answerId) {
answers.item(j).innerHTML = "";
}
}
function fight() {
}

BIN
text_horror/assets/sword.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
text_horror/assets/textures/ghul.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

45
text_horror/style.css
View File

@@ -11,6 +11,10 @@ body {
user-select: none;
}
p {
font-size: 25px;
}
.thx-for-playing {
z-index: -1;
font-size: 50px;
@@ -33,7 +37,7 @@ body {
white-space: break-spaces;
}
#bubble {
.box {
border-width: 5px;
border-style: solid;
border-color: white;
@@ -49,6 +53,45 @@ body {
transform: translate(-50%, -50%);
}
#bubble {
width: 70%;
height: 50%;
}
#fight {
visibility: hidden;
width: 35%;
height: 70%;
text-align: center;
display: inline-block;
}
#enemy-texture {
width: 256px;
height: 256px;
border-width: 5px;
border-style: solid;
border-color: white;
}
#enemy-name {
font-size: 40px;
transform: translate(0, -40px);
}
#enemy-health {
font-size: 30px;
transform: translate(0, -80px);
}
#weapon {
text-align: left;
}
#health {
text-align: right;
}
#triangle {
fill: #fff;
position: absolute;