Я работаю над простой игрой в клики / атаки. Вот мой код ...
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!";
?>
Вот где я нахожусь ... две дополнительные переменные в PHP-сценарии займут место простого elseif и будут сравнительными, так что одна сторона может "выиграть". Однако прямо сейчас я просто пытаюсь найти наиболее эффективный способ синтаксического анализа $ p_att и $ c_att для двух соответствующих div с помощью AJAX onclick. Если бы кто-нибудь мог помочь мне объяснить это, это было бы здорово. Спасибо, парни.
p.s. Амперсанды в CSS не позволяют знаку фунта делать размер шрифта 400.