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

added fight system

Browse Source
This commit is contained in:
Yannik
2023-06-23 14:59:45 +02:00
parent 0dd2675c91
commit 82578b3768
2 changed files with 115 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

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

161
text_horror/app.js
View File

@@ -1,20 +1,20 @@
var speed = 50; var speed = 50
var typeindex = 0; var typeindex = 0
var dlgPointer = 0; var dlgPointer = 0
var dlgFile; var dlgFile
var dlgKeyMain = "main"; var dlgKeyMain = "main"
let dlgLines; let dlgLines
var skipDlg = false; var skipDlg = false
var answers; var answers
var keys; var keys
var allowNextDlg = true; var allowNextDlg = true
var voice; var voice
var playerName; var playerName
var enemyHealth = 0; var enemyHealth = 0, enemyDamage = 1, enemyStartsHit = false;
var enemyDamage = 1; var health = 25
var health = 25; var weaponName = "Fäuste", continueCount = true
var weaponName = "Fäuste"; let weaponDamage = 1
var weaponDamage = 1; var counttx = 0, countup = true;
//TODO //TODO
//simple fights //simple fights
@@ -29,10 +29,10 @@ function load() {
fetch("text_horror/dialogue.json") //Load json file here fetch("text_horror/dialogue.json") //Load json file here
.then(Response => Response.json()) .then(Response => Response.json())
.then(data => { .then(data => {
dlgFile = data; dlgFile = data
changeDlg(dlgKeyMain); //Set "start" key from dialogue.json changeDlg(dlgKeyMain) //Set "start" key from dialogue.json
skipDlg = true; //Allow skipping to next dialogue skipDlg = true //Allow skipping to next dialogue
nextDlg(false); //Skip to first nextDlg(false) //Skip to first
}); });
} }
@@ -47,23 +47,23 @@ function changeDlg(dlgKey) {
} }
function updateDlg() { function updateDlg() {
typeindex = 0; typeindex = 0
document.getElementById("dlg-text").innerHTML = ""; document.getElementById("dlg-text").innerHTML = ""
document.getElementById("triangle").hidden = true; document.getElementById("triangle").hidden = true
typeWriter(); typeWriter()
} }
function typeWriter() { function typeWriter() {
if (typeindex < dlgLines[dlgPointer].length) { if (typeindex < dlgLines[dlgPointer].length) {
document.getElementById("dlg-text").innerHTML += dlgLines[dlgPointer].charAt(typeindex); document.getElementById("dlg-text").innerHTML += dlgLines[dlgPointer].charAt(typeindex)
if (voice != null && typeindex % 3 == 1) { if (voice != null && typeindex % 3 == 1) {
voice.load(); voice.load()
voice.play(); voice.play()
} }
typeindex++; typeindex++;
setTimeout(typeWriter, speed); setTimeout(typeWriter, speed)
} else if (allowNextDlg) } else if (allowNextDlg)
document.getElementById("triangle").hidden = false; document.getElementById("triangle").hidden = false
} }
function nextDlg(dlgPointerIncrease = true) { function nextDlg(dlgPointerIncrease = true) {
@@ -74,7 +74,7 @@ function nextDlg(dlgPointerIncrease = true) {
dlgPointer++ dlgPointer++
if (dlgPointer < dlgLines.length) { if (dlgPointer < dlgLines.length) {
if (typeof dlgLines[dlgPointer] === 'number') { if (typeof dlgLines[dlgPointer] === 'number') {
speed = 50 / dlgLines[dlgPointer]; speed = 50 / dlgLines[dlgPointer]
skipDlg = true skipDlg = true
nextDlg(); nextDlg();
} }
@@ -82,22 +82,22 @@ function nextDlg(dlgPointerIncrease = true) {
if (dlgLines[dlgPointer].startsWith("_")) { if (dlgLines[dlgPointer].startsWith("_")) {
skipDlg = true skipDlg = true
if (dlgLines[dlgPointer].split(":")[0] === "_title") { if (dlgLines[dlgPointer].split(":")[0] === "_title") {
document.getElementById("title").innerHTML = dlgLines[dlgPointer].split(':')[1]; document.getElementById("title").innerHTML = dlgLines[dlgPointer].split(':')[1]
nextDlg(); nextDlg();
} }
else if (dlgLines[dlgPointer].split(":")[0] === "_voice") { else if (dlgLines[dlgPointer].split(":")[0] === "_voice") {
if (dlgLines[dlgPointer].split(':')[1].length != 0) if (dlgLines[dlgPointer].split(':')[1].length != 0)
voice = new Audio("text_horror/assets/voices/" + dlgLines[dlgPointer].split(':')[1] + ".wav"); voice = new Audio("text_horror/assets/voices/" + dlgLines[dlgPointer].split(':')[1] + ".wav")
else else
voice = null; voice = null
nextDlg(); nextDlg();
} }
else if (dlgLines[dlgPointer].split(":")[0] === "_playsound") { else if (dlgLines[dlgPointer].split(":")[0] === "_playsound") {
var sound var sound
if (dlgLines[dlgPointer].split(':')[1].length != 0) { if (dlgLines[dlgPointer].split(':')[1].length != 0) {
sound = new Audio("text_horror/assets/sounds/" + dlgLines[dlgPointer].split(':')[1] + ".wav"); sound = new Audio("text_horror/assets/sounds/" + dlgLines[dlgPointer].split(':')[1] + ".wav")
sound.load(); sound.load()
sound.play(); sound.play()
} }
else else
sound = null; sound = null;
@@ -113,6 +113,7 @@ function nextDlg(dlgPointerIncrease = true) {
else if (dlgLines[dlgPointer].split(":")[0] === "_weapon") { else if (dlgLines[dlgPointer].split(":")[0] === "_weapon") {
weaponName = dlgLines[dlgPointer].split(':')[1] weaponName = dlgLines[dlgPointer].split(':')[1]
weaponDamage = dlgLines[dlgPointer].split(':')[2] weaponDamage = dlgLines[dlgPointer].split(':')[2]
console.log(weaponDamage)
nextDlg(); nextDlg();
} }
else if (dlgLines[dlgPointer].split(":")[0] === "_enemy") { else if (dlgLines[dlgPointer].split(":")[0] === "_enemy") {
@@ -120,50 +121,96 @@ function nextDlg(dlgPointerIncrease = true) {
document.getElementById("enemy-texture").src = "text_horror/assets/textures/" + dlgLines[dlgPointer].split(":")[2] + ".png" document.getElementById("enemy-texture").src = "text_horror/assets/textures/" + dlgLines[dlgPointer].split(":")[2] + ".png"
enemyHealth = dlgLines[dlgPointer].split(":")[3] enemyHealth = dlgLines[dlgPointer].split(":")[3]
enemyDamage = dlgLines[dlgPointer].split(":")[4] enemyDamage = dlgLines[dlgPointer].split(":")[4]
countWeaponDamage()
document.getElementById("enemy-health").innerHTML = enemyHealth document.getElementById("enemy-health").innerHTML = enemyHealth
document.getElementById("weapon").innerHTML = weaponName document.getElementById("weapon").innerHTML = weaponName
document.getElementById("weapon-damage").innerHTML = weaponDamage
document.getElementById("health").innerHTML = health document.getElementById("health").innerHTML = health
document.getElementById("fight").style.visibility = "unset" document.getElementById("fight").style.visibility = "unset"
document.getElementById("dlg-text").innerHTML = "" document.getElementById("dlg-text").innerHTML = ""
document.getElementById("bubble").hidden = true; document.getElementById("bubble").hidden = true
document.getElementById("answer-box").hidden = true; document.getElementById("answer-box").hidden = true
document.getElementById("triangle").hidden = true; document.getElementById("triangle").hidden = true
} }
} else } else
updateDlg(); updateDlg();
} }
else if (typeof dlgLines[dlgPointer] === 'object') { else if (typeof dlgLines[dlgPointer] === 'object') {
allowNextDlg = false; allowNextDlg = false;
document.getElementById("triangle").hidden = true; document.getElementById("triangle").hidden = true
document.getElementById("answer-box").hidden = false; document.getElementById("answer-box").hidden = false
answers = document.getElementsByClassName("answer"); answers = document.getElementsByClassName("answer")
keys = Object.keys(dlgLines[dlgPointer]); keys = Object.keys(dlgLines[dlgPointer])
for (let j = 0; j < keys.length; j++) { for (let j = 0; j < keys.length; j++) {
answers.item(j).innerHTML = keys[j]; answers.item(j).innerHTML = keys[j]
} }
} }
} }
else { else {
document.getElementById("bubble").hidden = true; document.getElementById("bubble").hidden = true
document.getElementById("answer-box").hidden = true; document.getElementById("answer-box").hidden = true
document.getElementById("triangle").hidden = true; document.getElementById("triangle").hidden = true
} }
} }
} }
function answered(answerId) { function answered(answerId) {
dlgFile = dlgLines[dlgPointer]; dlgFile = dlgLines[dlgPointer]
document.getElementById("answer-box").hidden = true; document.getElementById("answer-box").hidden = true
changeDlg(document.getElementById(answerId).innerHTML); changeDlg(document.getElementById(answerId).innerHTML)
allowNextDlg = true; allowNextDlg = true
skipDlg = true; skipDlg = true
nextDlg(false); nextDlg(false)
for (let j = 0; j < keys.length; j++) { for (let j = 0; j < keys.length; j++) {
answers.item(j).innerHTML = ""; answers.item(j).innerHTML = ""
} }
} }
function fight() { function fight() {
continueCount = false
if (!enemyStartsHit) {
if (!continueCount) {
enemyStartsHit = true
setTimeout(() => {
enemyHealth = enemyHealth - counttx
if (enemyHealth < 1) {
setTimeout(() => {
document.getElementById("fight").style.visibility = "hidden"
document.getElementById("bubble").hidden = false
document.getElementById("triangle").hidden = false
nextDlg()
}, 1000)
}
document.getElementById("enemy-health").innerHTML = enemyHealth
document.getElementById("weapon-damage").innerHTML = weaponDamage
setTimeout(() => {
health = health - enemyDamage
document.getElementById("health").innerHTML = health
if (health > 0) {
enemyStartsHit = false
continueCount = true
countWeaponDamage()
}
else
setTimeout(() => { document.getElementById("fight").style.visibility = "hidden" }, 1000)
}, 2000)
}, 100)
} else
countWeaponDamage()
}
}
} function countWeaponDamage() {
if (countup) {
++counttx;
if (counttx >= weaponDamage)
countup = false;
}
else {
--counttx;
if (counttx <= 0)
countup = true;
}
document.getElementById("weapon-damage").innerHTML = counttx
if (continueCount)
setTimeout(countWeaponDamage, 100)
}