隐藏图像在PHP和实现CSS

时间:2014-07-28 05:53:22

标签: php html css canvas

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            #game{
                width: 200px;
                display: block;
                margin-left: auto;
                margin-right: auto;



            }

        </style>
    </head>
    <body>
        <div id="game">
            <?php

            function display() {
                $items = array(
                    '<a href="?item=rock">  <br/><img src= "img/rock.png" width="150" height="150" alt="rock"/></a>',
                    '<a href="?item=scissors">  <br/><img src="img/scissors.png" width="150" height="150" alt="scissors"></a>',
                    '<a href="?item=paper">  <br/><img src="img/paper.jpg" width="150" height="150" alt="paper"></a>'
                );
                foreach ($items as $item => $value):
                    echo $value;


                endforeach;
                if (isset($_GET['item']) == true):
                    //rock paper and scissors types
                    $item = array('rock', 'paper', 'scissors');
                    //users choice

                    $user_Choice = $_GET['item'];
                    if ($user_Choice == "rock"):
                        $user_Choice = $items[0];
                    endif;
                    if ($user_Choice == "scissors"):
                        $user_Choice = $items[1];
                    endif;
                    if ($user_Choice == "paper"):
                        $user_Choice = $items[2];
                    endif;

                    //random computer generated choice
                    $random_Num = rand(0, 2);
                    $computer_Choice = $items[$random_Num];
                    echo $user_Choice;
                    echo $computer_Choice;

                    if ($user_Choice == $items[0] && $computer_Choice == $items[0]):
                        echo "tie";
                    endif;
                    if ($user_Choice == $items[0] && $computer_Choice == $items[2]):
                        echo "you lose";
                    endif;
                    if ($user_Choice == $items[0] && $computer_Choice == $items[1]):
                        echo "you win";
                    endif;
                    if ($user_Choice == $items[2] && $computer_Choice == $items[0]):
                        echo "you win";
                    endif;
                    if ($user_Choice == $items[2] && $computer_Choice == $items[2]):
                        echo "you tie";
                    endif;
                    if ($user_Choice == $items[2] && $computer_Choice == $items[1]):
                        echo "you lose";
                    endif;
                    if ($user_Choice == $items[1] && $computer_Choice == $items[0]):
                        echo "you lose";
                    endif;
                    if ($user_Choice == $items[1] && $computer_Choice == $items[2]):
                        echo "you win";
                    endif;
                    if ($user_Choice == $items[1] && $computer_Choice == $items[1]):
                        echo "you tie";
                    endif;

                endif;
            }

            display();
            ?>
        </div>
    </body>
</html>
嘿伙计们!这个代码我玩的时候遇到了一些问题,它是一个摇滚纸剪刀我正在努力工作并遇到了问题。实际上有几个问题。我第一次想知道如何将css合并到php中,我希望能够将我的图片水平放置在彼此旁边而不是垂直放置。我有这个代码的第二个问题是,当我点击石头纸或剪刀时,它会显示用户选择计算机选择&#34;平局赢得损失的声明&#34;但原始图片留在屏幕上。如何更改我的代码,以便当我点击石头纸或剪刀时,原始的3张图片被隐藏,剩下的唯一图片是computer_choice和user_choice ...感谢阅读,如果你帮助我,那么多谢谢你!

1 个答案:

答案 0 :(得分:0)

关于css,您可能没有注意到,但它实际上已经存在于您的代码中,它是style部分中head标记所包含的部分。也就是说,你不需要css重新排列图片。注意图片数组中的<br/>标签,它们基本上是html术语中的新行字符。只需从第二张和第三张图片中删除标签即可。

            $items = array(
                '<a href="?item=rock">  <br/><img src= "img/rock.png" width="150" height="150" alt="rock"/></a>',
                '<a href="?item=scissors"> <img src="img/scissors.png" width="150" height="150" alt="scissors"></a>',
                '<a href="?item=paper"> <img src="img/paper.jpg" width="150" height="150" alt="paper"></a>'
            );

第二个问题,隐藏图片。有很多不同的方法,最常见的方法是使用javascript。但是,考虑到您的代码结构,似乎最简单的方法是使用检查来包装您的打印代码。

if (isset($_GET['item']) != true):
            foreach ($items as $item => $value):
                echo $value;
            endforeach;
endif;