Jump to content

joeyoung2509

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Everything posted by joeyoung2509

  1. joeyoung2509
    var userHP = 500; var mobHP = 500;$(document).ready(function() { $("#command_line").fadeIn(3000); $("#message_begin").fadeIn(3000); $("#area_main").fadeIn(3000); $("#auto-style3").fadeIn(3000); $("form").submit(function() { var input = $("#command_line").val(); if (input.indexOf("attack") > -1) { if (input == "attack"){ var userDmg = Math.floor(Math.random() * 100); var mobDmg = Math.floor(Math.random() * 80); $("#message_attack").html("You attack for: " + userDmg + " ---- Goblin HP left " + (mobHP -= userDmg)).clone().insertBefore("#placeholder").hide().fadeIn(2000) $("#message_attack").html("The Goblin attacks back for: " + mobDmg + " ---- Your HP left " + (userHP -= mobDmg)).insertBefore("#placeholder").delay(2000).hide().fadeIn(3000); } } else if (input.indexOf("showhp") > -1) { if (input == "showhp") { $("#message_attack").html("Goblin has " + mobHP).insertBefore("#placeholder").fadeIn(1000); } } /* This shows the HPs*/ document.getElementById("mobhealthbar").innerHTML= "MOB HP: " + mobHP; document.getElementById("userHealthBar").innerHTML= "USER HP: " + userHP; $("#message_attack").scrollTop($("#message_attack")[1].scrollHeight); $("#command_line").val(""); }); }); great point
  2. joeyoung2509
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript" src="Files/jquery.js" type="text/javascript"></script><script src="game.js" type="text/javascript"></script><meta content="en-gb" http-equiv="Content-Language" /><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>design</title><style type="text/css">.auto-style1 { margin-left: 114px;}.auto-style2 { margin-left: 0px;}.auto-style3 { margin-left: 442px;}.auto-style4 { margin-left: 442px; margin-top: 19px;}</style></head><body style="background-color: #808080"><div id="mobhealthbar" class="auto-style3" style="width: 180px; position: absolute; right: 20px; top: 50px; height: 25px;"></div><div id="userHealthBar" class="auto-style2" style="width: 180px; left: 22px; position: absolute; top: 59px; height: 25px;"></div><center><p class="auto-style1" style="height: 28px; top: 111px; width: 1130px; position: relative; left: -54px;">Welcome to the Game!!!</p></center><div id="console"> <div style="height: 115px; width: 1297px;" title="blank"> </div> <div id="message_attack" class="auto-style4" style="width: 750px; height: 22px"> </div> <div id="placeholder" style="height: 113px"> </div> <div> <form onsubmit="return false;"> <center> <input id="command_line" autofocus="autofocus" size="50" type="text" /></center> </form> </div></div></body></html> Ok so heres my HTML, im having a weird scrolling issue when javascript code is called, the text inserts before the placeholder but the text box moves down, I want the inserted text to scroll up with each new entry then disappear into the top of the placeholder. What am I doing wrong?
  3. joeyoung2509
    I further problem I have now is when "attack" is submitted it doesn't scroll correctly, the user attack does as it scrolls up but the mob attack pushes the input box down.
  4. joeyoung2509
    problem solved. thank you very much
  5. joeyoung2509
    Afternoon all, I'm writing a text based game in an effort to learn JavaScript, my current issue is with the user interface, I have displayed in both top corners of the screen the HitPoint values of the user and which ever mob you are currently battling, my issue is that the values do not update after the player or mob take a hit. for example this is the code used to determine how much is hit; if (input.indexOf("attack") > -1) { if (input == "attack"){ var userDmg = Math.floor(Math.random() * 100); var mobDmg = Math.floor(Math.random() * 80); $("#message_attack").html("You attack for: " + userDmg + " ---- Goblin HP left " + (mobHP -= userDmg)).clone().insertBefore("#placeholder").hide().fadeIn(3000); $("#message_attack").html("The Goblin attacks back for: " + mobDmg + " ---- Your HP left " + (userHP -= mobDmg)).delay(2000).insertBefore("#placeholder").hide().fadeIn(3000); } } This is how I am displaying the HTML <div id="mobhealthbar" class="auto-style3" style="width: 180px; position: absolute; right: 20px; top: 50px; height: 25px;"></div><script type="text/javascript">document.getElementById("mobhealthbar").innerHTML= "MOB HP: " + mobHP; </script><div id="userHealthBar" class="auto-style2" style="width: 180px; left: 21px; position: absolute; top: 60px; height: 25px;"><script type="text/javascript">document.getElementById("userHealthBar").innerHTML= "USER HP: " + userHP; </script></div> any advice would be welcome
  6. joeyoung2509
    well I actually managed to solve my problem. I changed else if (input.indexOf("attack") > -1){ if (input == "attack"){ $(userHP - hits).insertBefore("#placeholder").fadeIn(1000); to else if (input.indexOf("attack") > -1) { if (input == "attack"){ $("#message_attack").html(mobHP -= DMG).clone().insertBefore("#placeholder").fadeIn(1000); Looks like it needed the .html and to be assigned to a DIV.
  7. joeyoung2509
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script src="scripts/jquery.js" type="text/javascript"></script><link rel=stylesheet href="scripts/css.css" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>The Game!!</title></head><body><div id="console"><!--MAIN GAME--><p id="userHP2">userHP</p><p id="message_begin">Welcome to the GAME!!.</p><p id="message_enter">You entered the game, well done</p><p id="area_main">Type enter to play.</p><div id="placeholder"></div></div><!--INPUT--><form onsubmit="return false;"><center><input type="text" id="command_line" size="50" autofocus="autofocus" /></center></form></div><p class="copyright"></p><script type="text/javascript" src="scripts/game.js"></script></body></html> Heres The JavaScript which is troubling me; var userHP = "500";var mobHP = 500;var hits = Math.floor(Math.random()*2);$(document).ready(function() { $("#compass").fadeIn(3000); $("#message_begin").fadeIn(3000); $("#area_main").fadeIn(3000); $("#command_line").fadeIn(3000); $("form").submit(function() { var input = $("#command_line").val(); if (input.indexOf("help") > -1) { if (input == "help") { userHP; $("#message_help").clone().insertBefore("#placeholder").fadeIn(1000); } } else if (input.indexOf("enter") > -1) { if (input == "enter") { $("#message_enter").clone().insertBefore("#placeholder").fadeIn(1000); } } else if (input.indexOf("attack") > -1){ if (input == "attack"){ $(userHP - hits).insertBefore("#placeholder").fadeIn(1000); } } I've recently started learning javascript I'm making a text based game and im having trouble printing a variable to my page. Heres my the relevant bit of the code, when the user types attack I want the variable userHP minus hits to be shown on the page. Currently nothing happens when I enter attack What am I doing wrong?
×
×
  • Create New...