Question

我正在开发一款简单的点击/攻击游戏。这是我的代码......

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 &#999; -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 &#999; -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并进行比较，因此一方可以“赢”。但是，现在，我只是试图找出通过AJAX onclick将$ p_att和$ c_att解析为两个相应div的最有效方法。如果有人能帮我解释一下，那就太棒了。多谢你们。

P.S。 CSS中的＆符是保持井号不会使字体大小为400。

Answer 1

a slightly better php part

<?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 == 0){echo $att.": Miss!";}else{
        if($p_att > $c_att){
            echo $att.": Player Hit Comp! Win"; 
        }else{
            echo $att.": Comp Hit Player! Lose"; 
        }
    }

    ?>

我正在努力理解... AJAX / PHP帮助

1 个答案: