0

I am working on a simple click/attack game. Here's my code...

HTML:

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen"  />
        <title>Random Number Game</title>
        <script src="rand.js" type="text/javascript"></script>
        <!--[if lt IE 9]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
        <![endif]-->
        </head>
        
        <body>
        <div id="wrapper">
        	
            <div id="p_wrap">
            
        	<div id="p_attack"></div>
        
           
        	<form name="fight">
        
        		<div class="submit">
        
        			<input class="att_button" type="submit" value="Attack!" onclick="randNum();" />
        
        		</div>
        
        	</form>
            
            </div>
            
            <div id="c_wrap">
            
            	<div id="c_attack"></div>
            
            </div>
        
        </div>
        
        </body>
        </html>

CSS:

*, body { margin:0; padding:0; }
    body { background:url(rand_bg.png) center top repeat-x; }
    div { position:relative; }
    
    #wrapper { width:600px; margin:7em auto; display:block; }
    
    #p_wrap { width:200px; height:100px; padding:20px 0; display:block; overflow:hidden; float:left; background-color:#09C; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; -moz-box-shadow:-1px 2px 5px #999; -webkit-box-shadow:-1px 2px 5px ϧ -khtml-box-shadow:-1px 2px 5px #999; }
    #c_wrap { width:200px; height:100px; padding:20px 0; display:block; overflow:hidden; float:right; background-color:#F00; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; -moz-box-shadow:1px 2px 5px #999; -webkit-box-shadow:1px 2px 5px ϧ -khtml-box-shadow:1px 2px 5px #999; }
    
    
    #p_attack { width:100%; height:20px; padding:10px 0 0; text-align:center; font-size:18px; }
    #c_attack { width:100%; height:20px; padding:10px 0 0; text-align:center; font-size:18px; }
    
    .submit { top:20px; text-align:center; margin-bottom:20px; }
    .att_button { padding:5px; background-color:#09C; cursor:auto; outline:none; }

JS:

// JavaScript Document
    function randNum()
    {
      document.getElementById("p_attack").innerHTML="";
      return;
      document.getElementById("c_attack").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("p_attack").innerHTML=xmlhttp.responseText;
    	document.getElementById("c_attack").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","mt_rand.php",true);
    xmlhttp.send();

PHP:

<?php
    
    $att = mt_rand(0,100);
    $p_att = mt_rand(0,100);
    $c_att = mt_rand(0,100);
    
    if ($att == 100)
    		echo $att.": Critical!";
    	elseif ($att >= 50)
    		echo $att.": Hit!";
    	elseif ($att == 0)
    		echo $att.": Epic Fail!";
    	else
    		echo $att.": Miss!";
    
    ?>

Here's where I'm at... the two extra variables in the PHP script are going to take the place of the simple elseif and be comparative, so as one side can "win". However, right now, I'm simply trying to figure out the most efficient way to parse the $p_att and $c_att to the two corresponding divs through AJAX onclick. If anyone could help explain this to me, that'd be awesome. Thanks, guys.

p.s. The ampersands in the CSS is to keep the pound sign from making the font size 400.

1
Contributor
1
Reply
2
Views
6 Years
Discussion Span
Last Post by ghandijones
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.