Question

我刚刚构建了一个简单的摇滚，纸张，剪刀游戏，使用了一些javascript和html，虽然游戏运行正常但我没有明确地正确定位html元素，就像我缩小浏览器窗口时一样物品不能保持内联。有关如何使页面可以缩小而不会破坏行的任何建议。正如您可能能够从我的代码中说出来的那样，我是一个初学者，所以任何建议都被广泛接受:)。对不起，如果这还不够清楚，但这不是我的第一语言。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css per carta sasso forbice.css"/>
<script> 
    var userChoice;

    function game()
    {  
        var computerChoice=Math.random();

        if (computerChoice <= 0.33){
            computerChoice = "rock";
        } else if (computerChoice <= 0.66){
            computerChoice = "paper";
        } else {
            computerChoice="scissors";
        }
        var winner = function (choice1,choice2)
        {
            if( choice1 === choice2 ) {
                return "It's a tie!";
            } else if(choice1 === "rock" ){
                if ( choice2 === "paper" ){
                     return "paper wins!";
                } else if( choice2 === "scissors" ){
                    return "rock wins!";
                }
            } else if( choice1 === "paper" ){
                if( choice2 === "rock" ) {
                    return "paper wins!";
                } else if ( choice2 === "scissors" ){
                    return "scissors win!";
                }
            }else if ( choice1 === "scissors" ){
                if ( choice2 === "rock" ){
                    return "rock wins!";
                }else if( choice2 === "paper" ){
                    return "scissors win!";
                }
            }
        }
        document.getElementById("demo").innerHTML="You: "+userChoice+" "+"<br>"+"Computer: "+computerChoice+"<br>"+ winner(userChoice,computerChoice);
    };    
</script>
    </head>
    <body>
    <h1>ROCK, PAPER OR SCISSORS...<br><span>CHOOSE WISELY...</span></h1>
    <div class="flame"></div>
    <div class="flame"></div>
    <div class="flame"></div>
    <div id="objects">
        <div class="object" id="paper"><a onclick="userChoice='paper';game()"><img src="http://images.clipartpanda.com/sheet-paper-clipart-free-vector-blank-white-paper-cartoon-clip-art_114492_Blank_White_Paper_Cartoon_clip_art_medium.png"/></a></div>
        <div class="object" id="rock"><a onclick="userChoice='rock';game()"><img src="http://pixabay.com/static/uploads/photo/2014/12/22/00/03/rock-576669_640.png"/></a></div>
        <div class="object" id="scissors"><a onclick="userChoice='scissors';game()"><img src="http://www.clipartbest.com/cliparts/dT8/okg/dT8okg6Te.png"/></a></div>
    </div>
    <p id="demo"></p>
</body>
</html>

这是我使用的CSS代码：

h1
{
    color:black;
    text-align:center;
    font-family:impact;
}
#demo
{
    margin-top:-70px;
    text-align:center;
    color:black;
    font-size:30px;
    font-family:impact;
}
h1>span
{
    font-size: 60px;
}
.flame
{
    height:400px; 
    display:inline;
    content:url("http://fc01.deviantart.net/fs70/f/2012/093/0/7/flame_vector_by_atcen-d2ssgzi.png");
    width:30%;
    padding-left:30px;
    position:relative;
}
img
{
    height:150px;
    width:250px;
}
#objects
{
    position:relative;
    margin-top:-230px;
    height:300px;
}
.object
{
    width:33%;
    display:inline;
    height:100%;
    margin-left:90px;
}
#rock
{
    padding:60px;
}
#scissors
{
    padding:25px;
}

Answer 1

只需要一个包装器来包含你的html元素，这样就可以控制宽度和位置而不会破坏线条。

HTML：

<div class="wrapper"> 
<!-- Your code -->
</div>

和CSS：

.wrapper {
    width:1200px;
    margin:0 auto;
}

JsFiddle Example

＆＃13;

var userChoice;

function game() {
    var computerChoice = Math.random();
    if (computerChoice <= 0.33) {
        computerChoice = "rock";
    } else if (computerChoice <= 0.66) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissors";
    }
    var winner = function (choice1, choice2) {
        if (choice1 === choice2) {
            return "It's a tie!";
        } else if (choice1 === "rock") {
            if (choice2 === "paper") {
                return "paper wins!";
            } else if (choice2 === "scissors") {
                return "rock wins!";
            }
        } else if (choice1 === "paper") {
            if (choice2 === "rock") {
                return "paper wins!";
            } else if (choice2 === "scissors") {
                return "scissors win!";
            }
        } else if (choice1 === "scissors") {
            if (choice2 === "rock") {
                return "rock wins!";
            } else if (choice2 === "paper") {
                return "scissors win!";
            }
        }
    }
    document.getElementById("demo").innerHTML = "You: " + userChoice + " " + "<br>" + "Computer: " + computerChoice + "<br>" + winner(userChoice, computerChoice);
};

＆＃13;

.wrapper {
    width:1200px;
    margin:0 auto;
}

h1 {
    color:black;
    text-align:center;
    font-family:impact;
}
#demo {
    margin-top:-70px;
    text-align:center;
    color:black;
    font-size:30px;
    font-family:impact;
}
h1>span {
    font-size: 60px;
}
.flame {
    height:400px;
    display:inline;
    content:url("http://fc01.deviantart.net/fs70/f/2012/093/0/7/flame_vector_by_atcen-d2ssgzi.png");
    width:30%;
    padding-left:30px;
    position:relative;
}
img {
    height:150px;
    width:250px;
}
#objects {
    position:relative;
    margin-top:-230px;
    height:300px;
}
.object {
    width:33%;
    display:inline;
    height:100%;
    margin-left:90px;
}
#rock {
    padding:60px;
}
#scissors {
    padding:25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<h1>ROCK, PAPER OR SCISSORS...<br/><span>CHOOSE WISELY...</span></h1>

    <div class="flame"></div>
    <div class="flame"></div>
    <div class="flame"></div>
    <div id="objects">
        <div class="object" id="paper"><a onclick="userChoice='paper';game()"><img src="http://images.clipartpanda.com/sheet-paper-clipart-free-vector-blank-white-paper-cartoon-clip-art_114492_Blank_White_Paper_Cartoon_clip_art_medium.png"/></a>

        </div>
        <div class="object" id="rock"><a onclick="userChoice='rock';game()"><img src="http://pixabay.com/static/uploads/photo/2014/12/22/00/03/rock-576669_640.png"/></a>

        </div>
        <div class="object" id="scissors"><a onclick="userChoice='scissors';game()"><img src="http://www.clipartbest.com/cliparts/dT8/okg/dT8okg6Te.png"/></a>

        </div>
    </div>
    <p id="demo"></p>
</div>

＆＃13;

无法在HTML文档中正确显示元素

1 个答案: