javascript role playing game

Question

david.roun.7 14 Light Poster

10 Years Ago

Hi all. I'm writing my first javascript game. It's a role playing game where the user fights an Ogre, and not elaborate at all. I'd like the game to end when the Ogre's life is at zero OR the users life is at zero. I can't figure out how to have the program keep track of the amount of damage the user and the Ogre inflict on each other. Any ideas? Also, if this has been asked before, please point me in the direction of the completed discussion and I'll look it up there. Thanks.

<!DOCTYPE HTML>
<head>
<script>
var life=100;
var ogrelife=2000;


function ogreattack(){

while (ogrelife>0){
var pmove=prompt("Do you want to stab, punch or run?");
switch (pmove){

    case "stab":
    stabbing();
    ogremove();
    break;
    case "punch":
    punching();
    ogremove();
    break;
    case "run":
    running();
    break;}

}   

}

function stabbing(){

var stab=Math.floor(Math.random()*2500);
var deflect=Math.floor(Math.random()*10);

    if (deflect>7){
        document.write('You have stabbed the Ogre and dealt ' + stab + ' damage<br>');
            if (stab>ogrelife){
                document.write('You have killed the Ogre<br>');}}
    else{
        document.write('Your attack was deflected<br>');}}

function punching(){

var punch=Math.floor(Math.random()*2000);
var deflect=Math.floor(Math.random()*10);

    if (deflect>4){
        document.write('You have punched the Ogre and dealt ' + punch + ' damage<br>');
            if (punch>ogrelife){
                document.write('You have knocked out the Ogre<br>');}}
    else{
        document.write('Your punch was deflected<br>');}}

function running(){

var run=Math.floor(Math.random()*2000);

    if (run>1000){
        document.write('You have ran away and lost the fight<br>');
        return;}
    else{
        document.write('Your escape was blocked<br>');
        ogremove();}}

function ogremove(){

var hit=Math.floor(Math.random()*1000);

    if (hit>300){
        var damage=Math.floor(Math.random()*1000);
        document.write('You have been hit<br>');}
    else{
        document.write('The Ogre missed you<br>');}}

</script>
</head>
<body onload="ogreattack()">

</body>
</html>

javascript

2 Contributors
9 Replies
290 Views
1 Week Discussion Span
Latest Post 10 Years Ago Latest Post by david.roun.7

Taywin 312 Posting Virtuoso

10 Years Ago

Could you simply subtract the damage from orgelife in your stabing() and punching() function when the player successfully attack the orge (line 36 & line 48)? Unless you are talking about 1-hit KO thing (which is what you are doing right now).

Edited 10 Years Ago by Taywin

Taywin 312 Posting Virtuoso

10 Years Ago

OK, below is a modified version from yours. Take a look at it. Also, I have to change the value a bit because ogre would likely 1-hit KO you if it ever hits you.

<!DOCTYPE HTML>
<head>
  <script type="text/javascript">
  var life=100;
  var ogrelife=2000;

  function ogreattack() {
    while (ogrelife>0 && life>0) {
    var pmove=prompt("Do you want to stab, punch or run?");
      switch (pmove) {
        case "stab":
        stabbing();
        if (ogrelife>0) { ogremove(); }
        break;
        case "punch":
        punching();
        if (ogrelife>0) { ogremove(); }
        break;
        case "run":
        running();
        break;
      }
    }  
  }

  function stabbing() {

    var stab=Math.floor(Math.random()*2500);
    var deflect=Math.floor(Math.random()*10);

    if (deflect>7) {
      document.write('You have stabbed the Ogre and dealt ' + stab + ' damage<br>');
      ogrelife -= stab;
      if (ogrelife<=0) { document.write('You have killed the Ogre<br>'); }
    }
    else{ document.write('Your attack was deflected<br>'); }
  }

  function punching() {

    var punch=Math.floor(Math.random()*2000);
    var deflect=Math.floor(Math.random()*10);

    if (deflect>4) {
      document.write('You have punched the Ogre and dealt ' + punch + ' damage<br>');
      ogrelife -= punch;
      if (ogrelife<=0){ document.write('You have knocked out the Ogre<br>');} }
    else{ document.write('Your punch was deflected<br>'); }
  }

  function running() {
    var run=Math.floor(Math.random()*2000);
    if (run>1000) { document.write('You have ran away and lost the fight<br>'); }
    else{
      document.write('Your escape was blocked<br>');
      ogremove();
    }
  }

  function ogremove() {
    var hit=Math.floor(Math.random()*1000);
    if (hit>300) {
      var damage=Math.floor(Math.random()*200);
      document.write('You have been hit. The Ogre caused ' + damage + ' damage to you<br>');
      life -= damage;
      if (life<=0) { document.write('You have died'); }
    }
    else { document.write('The Ogre missed you<br>'); }
  }

  </script>
</head>
<body onload="ogreattack()">
</body>
</html>

Taywin 312 Posting Virtuoso

10 Years Ago

By the way (because I can't go back to edit my post), the sample above is NOT the best both presentation and algorithm. I simply modified from yours in order to demonstrate how it would be when it is working. There are flaws in many places that can be improved.

1)Mathematics of this game doesn't make much sense. You could refine it later.
2)The monster data could be read from somewhere else in an object rather than declare as global.
3)Your character could be declare in an object.
4)The command in switch statement does not show anything else if you enter something rather than what it is allowed: stab, punch, or run.
5)The running() function should return true or false, so that the ogremove() could be called later in the switch statement instead of being called inside the running() function.

etc. etc.

Edited 10 Years Ago by Taywin

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

david.roun.7 14 Light Poster · Answer 1 · 2014-07-22T19:03:37+00:00

Here is the code with the math in it.

<!DOCTYPE HTML>
<head>
<script>
var life=100;
var ogrelife=2000;


function ogreattack(){

while (ogrelife>0){
var pmove=prompt("Do you want to stab, punch or run?");
switch (pmove){

    case "stab":
    stabbing();
    ogremove();
    break;
    case "punch":
    punching();
    ogremove();
    break;
    case "run":
    running();
    break;}

}   

}

function stabbing(){

var stab=Math.floor(Math.random()*2500);
var deflect=Math.floor(Math.random()*10);

    if (deflect>7){
        document.write('You have stabbed the Ogre and dealt ' + stab + ' damage<br>');
            if (stab>ogrelife){
                document.write('You have killed the Ogre<br>');}}
    else{
        document.write('Your attack was deflected<br>');}}

function punching(){

var punch=Math.floor(Math.random()*2000);
var deflect=Math.floor(Math.random()*10);

    if (deflect>4){
        document.write('You have punched the Ogre and dealt ' + punch + ' damage<br>');
            if (punch>ogrelife){
                document.write('You have knocked out the Ogre<br>');}}
    else{
        document.write('Your punch was deflected<br>');}}

function running(){

var run=Math.floor(Math.random()*2000);

    if (run>1000){
        document.write('You have ran away and lost the fight<br>');
        }
    else{
        document.write('Your escape was blocked<br>');
        ogremove();}}

function ogremove(){

var hit=Math.floor(Math.random()*1000);

    if (hit>300){
        var damage=Math.floor(Math.random()*1000);
        document.write('You have been hit.  The Ogre caused ' + damage +  ' damage to you<br>');
        var life=life-damage;   
                if (life=0){
                document.write('You have died');
                return;}}
    else{
        document.write('The Ogre missed you<br>');}}

</script>
</head>
<body onload="ogreattack()">

</body>
</html>

david.roun.7 14 Light Poster · Answer 2 · 2014-07-23T15:55:20+00:00

That's what I'd like to do, subtract from both based on the hp lost but I can't figure out how to do it. I figured out how to fix the players life, and the game now ends when life >= 0, but I can't get the other part to work.

david.roun.7 14 Light Poster · Answer 3 · 2014-07-28T01:04:34+00:00

The game, and my site, is more of an attempt to get good at programming than anything else. This particular game is practice with Math.random and Math.floor as they relate to decision making, versus just giving out a number. I wanted everything to be random, with a ceiling, because the amount of damage you would inflict on anything is unpredictable until you have struck it but there is a ceiling to the amount of damage an action can inflict.

As I barely know what I'm doing, I totally appreciate your comments and feedback and will keep them in mind. It's much better to read your last comment, than just the correction to the code.

david.roun.7 14 Light Poster · Answer 4 · 2014-07-29T00:40:56+00:00

Ok, is this better?

<!DOCTYPE HTML>
<head>
<script>


function ogreattack(){
var gameon=confirm("Would you like to fight an ogre?");

while (gameon==true){
var pmove=prompt("Do you want to stab, punch or run?");

switch (pmove){
        case "stab":
        stabbing();
        ogremove();
        break;
        case "punch":
        punching();
        ogremove();
        break;
        case "run":
        running();
        break;
        case "":
    ogreattack();
    break;
}
}   
}
function stabbing(){
var stab=Math.floor(Math.random()*500);
var deflect=Math.floor(Math.random()*10);
var ogrelife=400;
    if (deflect>7){
        document.write('You have stabbed the Ogre and dealt ' + stab + ' damage<br>');
            if (stab>=ogrelife){
                document.write('You have killed the Ogre<br>');
        return ogreattack();}}
    else{
        document.write('Your attack was deflected<br>');}}
function punching(){
var punch=Math.floor(Math.random()*200);
var deflect=Math.floor(Math.random()*10);
var ogrelife=200;
    if (deflect>4){
        document.write('You have punched the Ogre and dealt ' + punch + ' damage<br>');
            if (punch>ogrelife){
                document.write('You have knocked out the Ogre<br>');
        return ogreattack();}}
    else{
        document.write('Your punch was deflected<br>');}}
function running(){
var run=Math.floor(Math.random()*2000);
    if (run>1000){
        document.write('You have ran away and lost the fight<br>');
        return ogreattack();}
    else{
        document.write('Your escape was blocked<br>');
        ogremove();}}
function ogremove(){
var life=100;
var hit=Math.floor(Math.random()*1000);
    if (hit>300){
        var damage=Math.floor(Math.random()*1000);
    document.write('You have been hit.  The Ogre caused ' + damage +  ' damage to you<br>');
        var life=-damage;   
                if (life<=0){
                document.write('You have died<br>');
                return ogreattack();}}
    else{
        document.write('The Ogre missed you<br>');}

window.location.href="http://stackoverflow.com/questions/7077770/window-location-href-and-window-open-methods-in-javascript";
}

</script>
</head>
<body onload="ogreattack()">

</body>
</html>

Some problems with window.location (it doesn't work) and the "stab" function doesn't work quite right but I think it's better.

Taywin 312 Posting Virtuoso · Answer 5 · 2014-07-29T16:37:37+00:00

Hmm... You have more logic into this, but not really enough.. It is my fault for going too fast on you and not explaning enough. Here is my take on this...

It is good to keep practicing and use different built-in function, so that one could understand the language better. A good program may not need to be complex. Cooperating game into programming could be fun. You are on the right track. The only thing you need to keep in mind is that a good program is not easy to defined especially for a beginner. The reason is that the design of a program requires knowledge and experience. These requirements do not come in a short period of time and may not be taught. The implementation, unlike design, is trivia and easily taught (this includes naming convention for functions & vairable).

1)You could still use global values for ogrelife & player life. It is, however, a one time use for a single run. When I said that you could read the value from else where or object, I mean you could copy/get the value later.
2)You could use the 'default' in switch statement to handle all other cases that do not match whatever condition you want it to be.
3)Your current implementation puts the ogre life values inside and it becomes a local variables. This would not really work but rather create an infinite loop. You need to read about variable scope for JavaScript only (the language now has slightly different scope definition compared to other stable & standard languages).
4)Why are you setting the window.location.href in your script?
5)Below is a simple script consists of start(), stab(), punch(), run(), ogreAttack(), displayCurrentLifePoints(). It contains enough comment and hope it would be easy for you to understand. It should provide a simple but cover all functionalities (including display).

<!DOCTYPE HTML>
<head>
  <script type="text/javascript">
  var originalLife = 400;
  var originalOgreLife = 1000;
  var currentLife;      // initial later
  var currentOgreLife;  // initial later

  function start() {
    var startGame = confirm("Would you like to fight an Ogre?");
    while (startGame) {  // short way of checking
      currentLife = originalLife;
      currentOgreLife = originalOgreLife;
      var pmove;

      document.write(' ----------- Fighting -----------<br>');

      // keep asking until either player or ogre is dead
      while (currentLife>0 && currentOgreLife>0) {
        displayCurrentLifePoints();
        pmove = prompt("Do you want to stab, punch, or run?");
        pmove = pmove.toLowerCase();  // ensure lower case
        switch (pmove) {
          case "stab":
            stab();
            break;
          case "punch":
            punch();
            break;
          case "run":
            run();
            break;
          default:
            document.write("Please enter only stab, punch, or run<br>");
        }  // end switch player choice
      }  // end both player and ogre are alive
      startGame = confirm("Would you like to fight an Ogre?");
    }  // end game start
    document.write("<hr>!!! Thank you for playing !!!<hr><br>");
  }  // start()

  function displayCurrentLifePoints() {
    document.write("You: "+currentLife+"<br>");
    document.write("Ogre: "+currentOgreLife+"<br>");
  }  // displayCurrentLifePoints()

  function stab() {
    var stab=Math.floor(Math.random()*400)+1;  //  1~400
    var deflect=Math.floor(Math.random()*10);  //  0~9

    if (deflect>6) {  // 40% success
      document.write('You have stabbed the Ogre and dealt ' + stab + ' damage<br>');
      currentOgreLife -= stab;
    }
    else{ document.write('Your attack was deflected<br>'); }

    if (currentOgreLife<=0) { document.write('You have killed the Ogre!!<br>'); }
    else { ogreAttack(); }
  }  // stab()

  function punch() {
    var punch=Math.floor(Math.random()*250)+1;  // 1~250
    var deflect=Math.floor(Math.random()*10);   // 0~9

    if (deflect>3) {  // 70% success
      document.write('You have punched the Ogre and dealt ' + punch + ' damage<br>');
      currentOgreLife -= punch;
    }
    else{ document.write('Your punch was deflected<br>'); }

    if (currentOgreLife<=0) { document.write('You have knocked out the Ogre!!<br>'); }
    else { ogreAttack(); }
  }  // punch()

  function run() {
    var run=Math.floor(Math.random()*10);  // 0~9 abitrary number
    if (run>5) {  // 50:50 chance
      document.write('You have ran away and lost the fight...<br>');
      currentLife = 0;  // marked as dead
    }
    else {
      document.write('Your escape was blocked<br>');
      ogreAttack();
    }
  }  // run()

  function ogreAttack() {
    var hit=Math.floor(Math.random()*10);
    if (hit>3) {  // 70% success
      var damage=Math.floor(Math.random()*100)+1;  // 1~100
      document.write('You have been hit! The Ogre caused ' + damage + ' damage to you<br>');
      currentLife -= damage;
      if (currentLife<=0) { document.write('You have died...'); }
    }
    else { document.write('The Ogre missed you<br>'); }
  }

  </script>
</head>
<body onload="start()">
</body>
</html>

david.roun.7 14 Light Poster · Answer 6 · 2014-07-29T23:28:52+00:00

Wow, thanks for the explanation and the code. This is exactly what I'm trying to accomplish and am thankful I'm at least on the right track. I'm going to do more reading and then I'll revisist and rewrite the game. When I've redone it, I'll compare it to yours. Thanks again.