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.