1
\$\begingroup\$

I want a working next and previous button for killing monsters http://prntscr.com/o375y7 http://prntscr.com/o37609 Im new to this concept so i don't know how to go about doing this.

html code(all i have so far)

 <button onclick="Fight()" id="Fightbtn" >Fight</button> Rat &nbsp; Hp:<span 
 id="CurrentEnemyHp">10</span>    
                    <body>

 <style>
a {
  text-decoration: none;
  display: inline-block;
 padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
 }

.previous {
  background-color: #f1f1f1;
  color: black;
 }

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}
</style>                   


<a href="#" class="previous round">&#8249;</a>
<a href="#" class="next round">&#8250;</a>

            </body>



        </html>

The "Rat" in the middle of the button stuff should be like "span id="currentenemy" span" just didnt know how to set up my switch statement or array to be able to switch between current enemy, hp and damage from clicking the next button. if someone can help me set it up id appreciate it. never used this concept before.

I expect after my program is running for the next button to be by itself disabled until you kill a rat 10 times then it becomes enabled then after you click it for the enemy to change and hp to change(damage to) then the previous arrow will become unhidden. But my actual output i can't get this to work.

\$\endgroup\$
  • \$\begingroup\$ Do you have any JavaScript code that you've tried? Have you done any web development or game development in the past? A basic solution to your problem could be to update things from an onclick event on your fight button. Have you tried or researched that approach? \$\endgroup\$ – Erik Jun 18 at 20:46
  • \$\begingroup\$ not really this is my first game. i have alot of systems down but this would be a cool edition. my last 2 parts of my game i want. having trouble with hideing tabs as well. but i wanted to see if i can get this working.how do i set like the first round to be rat then have the previous button hidden until you are on round 2 and have the hp, monster name, damage(damage would be hidden) change on click of next arrow. new to useing these kinds of buttons. cant even find js examples on what to do to make this system work. \$\endgroup\$ – tmanrocks994 Jun 19 at 4:02
  • \$\begingroup\$ I think it's great that you're creating your own game. The way this site works best is if you show us what you've tried instead of just asking for us to give you the answers. To paraphrase an old adage were here to teach you to fish not just to give you fish. If you edit your question to show your JavaScript then we can help you better. \$\endgroup\$ – Erik Jun 19 at 15:05
0
\$\begingroup\$

OK, so to achieve this check the code below.

// Create an array of enemies
let enemies = [];
enemies.fill({
  hp: 100
});

// Store the current enemy target
let currentTarget = 0;

// Our Fight function
function Fight() {
  enemies[currentTarget].hp -= 10;
}

// Our next and previous button actions
function nextTarget() {
  if (currentTarget < enemies.length) {
    //
    currentTarget++;
  } else {
    // Loop back around
    currentTarget = 0;
  }
}

function prevTarget() {
  if (currentTarget >= 0) {
    //
    currentTarget--;
  } else {
    // Loop back around
    currentTarget = enemies.length - 1;
  }
}

\$\endgroup\$
  • \$\begingroup\$ how do tie this to the next / previous buttons. do i have to give them a id prntscr.com/o3oltm \$\endgroup\$ – tmanrocks994 Jun 19 at 4:29
  • 1
    \$\begingroup\$ Use the onclick event (e.g. var btnEle.addEventListener('click', nextTarget)). You'll probably want to add more this code than is already shown \$\endgroup\$ – Kitanga Nday Jun 19 at 4:59
  • \$\begingroup\$ I think you have an off by 1 error in your next and previous target functions. \$\endgroup\$ – Erik Jun 19 at 15:09
  • \$\begingroup\$ @Erik I don't think I do. Given an array with 4 elements (or in this case enemies), my code would loop to the end or the beginning of the array. if currentTarget === 3 then the nextTarget function will loop back to 0; if currentTarget === 0 then the prevTarget function will loop back to 3; \$\endgroup\$ – Kitanga Nday Jun 20 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.