//declaring all varaibles
var scoreOfUser = 0; //user's score
var scoreOfComp = 0; //computer's score
var scoreOfDraws = 0; // number of draws
var user = ""; var comp = ""; //variables holding the user's and computer's choices
var randomizer = function(){ //randomly selects from among rock, paper or scissors
var num = Math.floor(Math.random() * 3)
if(num === 0){
comp = "ROCK";
document.getElementById("compChoice").innerHTML = "ROCK";
}
else if(num === 1){
comp = "PAPER";
document.getElementById("compChoice").innerHTML = "PAPER";
}
else if(num === 2){
comp = "SCISSORS";
document.getElementById("compChoice").innerHTML = "SCISSORS";
}
else {return true;}
}
var playRock = function(){ //when user chooses rock
user = "ROCK";
document.getElementById("userChoice").innerHTML = "ROCK";
randomizer();
if(user === comp){
scoreOfDraws++;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("result").innerHTML = "It's a Draw!";
}
else if(comp === "SCISSORS"){
scoreOfUser++;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("result").innerHTML = "You crushed the Computer under a large rock!";
}
else{
scoreOfComp++;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("result").innerHTML = "The Computer blocked you and blew you away!";
}
}
var playPaper = function(){ //when user chooses paper
user = "PAPER";
document.getElementById("userChoice").innerHTML = "PAPER";
randomizer();
if(user === comp){
scoreOfDraws++;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("result").innerHTML = "It's a Draw!";
}
else if(comp === "ROCK"){
scoreOfUser++;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("result").innerHTML = "You blocked the Computer and blew it away!";
}
else{
scoreOfComp++;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("result").innerHTML = "The Computer finished you with its quick and sharp scissors!";
}
}
var playScissors = function(){ //when user chooses scissors
user = "SCISSORS";
document.getElementById("userChoice").innerHTML = "SCISSORS";
randomizer();
if(user === comp){
scoreOfDraws++;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("result").innerHTML = "It's a Draw!";
}
else if(comp === "PAPER"){
scoreOfUser++;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("result").innerHTML = "You finished the Computer with your quick and sharp scissors!";
}
else{
scoreOfComp++;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("result").innerHTML = "The Computer crushed you under a large rock!";
}
}
var reset = function(){ //resets the game's scores
scoreOfUser = 0; scoreOfComp = 0; scoreOfDraws = 0;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("userChoice").innerHTML = "";
document.getElementById("compChoice").innerHTML = "";
console.log("Game reset");
}#theHead{
font-family: Chalkduster, Copperplate Gothic Bold;
font-variant: small-caps;
width: 100%;
font-size: 50px;
background-color: gold;
text-align: center;
margin-bottom: 40px;
border: 3px solid goldenrod;
}
.playButtons{
background-color:gold;
border: 2px solid goldenrod;
border-radius: 50px;
float: left;
margin: 10px;
height: 150px;
width: 150px;
}
img{
height: 130px;
width: 130px;
margin: 10px;
}
table{
border: 2px solid goldenrod;
border-radius: 5px;
font-size: 32px;
font-family: Chalkduster;
font-variant: small-caps;
}
td{
border: 2px solid goldenrod;
font-variant: small-caps;
}
#resetButton{
font-family: Comic Sans, Chalkduster, Copperplate Gothic Bold;
font-variant: small-caps;
background-color: gold;
font-size: 32px;
text-align: center;
margin: 20px;
border: 2px solid goldenrod;
border-radius: 10px;
vertical-align: middle;
width: 100px;
}<!DOCTYPE html>
<html>
<head>
<title>Rock-Paper-Scissors</title>
</head>
<body>
<div id="theHead">
Rock-Paper-Scissors
</div>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps; margin-bottom: 20px">Click the buttons to make your choice: Rock, Paper or Scissors.</div>
<div class="playButtons" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="playRock()"><img src="https://img.clipartfest.com/95f4daba36ac7e8a1b142ef660141834_rock-music-clipart-free-rock-clipart-transparent-background_2400-2249.png"/></div>
<div class="playButtons" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="playPaper()"><img src="https://img.clipartfest.com/5cede8303a5e9822a475bb8958c82fe0_stack-of-papers-clip-art-at-clipart-pile-of-papers-no-background_282-300.png"/></div>
<div class="playButtons" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="playScissors()"><img src="http://pngimg.com/uploads/scissors/scissors_PNG28.png"/></div>
<br/>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps;" class="sentences">You chose <span id="userChoice"></span>.</div>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps;" class="sentences">Computer chose <span id="compChoice"></span>.</div>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps;" Id="result" class="sentences"></div>
<table title="Scorecard">
<tr><th colspan="3">ScoreCard</th></tr>
<tr>
<td>You</td>
<td>Computer</td>
<td>Draws</td>
</tr>
<tr>
<td id="userScore">0</td>
<td id="compScore">0</td>
<td id="drawScore">0</td>
</tr>
</table>
<div id="resetButton" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="reset()">Reset</div>
</body>
</html>
我使用HTML，CSS和JS制作了一个小型的Rock-Paper-Scissors游戏。如果您将计算机/笔记本电脑上的代码作为单独的网页运行，您会注意到记分卡以及显示用户选择，计算机选择和结果的句子一轮的所有都是游戏按钮旁边的地方（摇滚，纸和剪刀按钮）。为了将游戏按钮放在一起，我已经应用了css float：left;他们的财产。我想得到记分卡和按钮下的那些句子，但我无法。我试图把财产的位置：绝对;除了按钮之外的其他东西，但没有用。如果我从按钮中删除浮动属性，记分卡和句子在按钮下正确，但按钮也会一个接一个地放置（但我希望按钮并排）。请提出解决方案。另外，请在整页中运行代码段。
答案 0 :(得分：0)
你需要clear:both某个地方，例如
//declaring all varaibles
var scoreOfUser = 0; //user's score
var scoreOfComp = 0; //computer's score
var scoreOfDraws = 0; // number of draws
var user = ""; var comp = ""; //variables holding the user's and computer's choices
var randomizer = function(){ //randomly selects from among rock, paper or scissors
var num = Math.floor(Math.random() * 3)
if(num === 0){
comp = "ROCK";
document.getElementById("compChoice").innerHTML = "ROCK";
}
else if(num === 1){
comp = "PAPER";
document.getElementById("compChoice").innerHTML = "PAPER";
}
else if(num === 2){
comp = "SCISSORS";
document.getElementById("compChoice").innerHTML = "SCISSORS";
}
else {return true;}
}
var playRock = function(){ //when user chooses rock
user = "ROCK";
document.getElementById("userChoice").innerHTML = "ROCK";
randomizer();
if(user === comp){
scoreOfDraws++;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("result").innerHTML = "It's a Draw!";
}
else if(comp === "SCISSORS"){
scoreOfUser++;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("result").innerHTML = "You crushed the Computer under a large rock!";
}
else{
scoreOfComp++;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("result").innerHTML = "The Computer blocked you and blew you away!";
}
}
var playPaper = function(){ //when user chooses paper
user = "PAPER";
document.getElementById("userChoice").innerHTML = "PAPER";
randomizer();
if(user === comp){
scoreOfDraws++;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("result").innerHTML = "It's a Draw!";
}
else if(comp === "ROCK"){
scoreOfUser++;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("result").innerHTML = "You blocked the Computer and blew it away!";
}
else{
scoreOfComp++;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("result").innerHTML = "The Computer finished you with its quick and sharp scissors!";
}
}
var playScissors = function(){ //when user chooses scissors
user = "SCISSORS";
document.getElementById("userChoice").innerHTML = "SCISSORS";
randomizer();
if(user === comp){
scoreOfDraws++;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("result").innerHTML = "It's a Draw!";
}
else if(comp === "PAPER"){
scoreOfUser++;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("result").innerHTML = "You finished the Computer with your quick and sharp scissors!";
}
else{
scoreOfComp++;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("result").innerHTML = "The Computer crushed you under a large rock!";
}
}
var reset = function(){ //resets the game's scores
scoreOfUser = 0; scoreOfComp = 0; scoreOfDraws = 0;
document.getElementById("userScore").innerHTML = scoreOfUser;
document.getElementById("compScore").innerHTML = scoreOfComp;
document.getElementById("drawScore").innerHTML = scoreOfDraws;
document.getElementById("userChoice").innerHTML = "";
document.getElementById("compChoice").innerHTML = "";
console.log("Game reset");
}#theHead{
font-family: Chalkduster, Copperplate Gothic Bold;
font-variant: small-caps;
width: 100%;
font-size: 50px;
background-color: gold;
text-align: center;
margin-bottom: 40px;
border: 3px solid goldenrod;
}
.playButtons{
background-color:gold;
border: 2px solid goldenrod;
border-radius: 50px;
float: left;
margin: 10px;
height: 150px;
width: 150px;
}
img{
height: 130px;
width: 130px;
margin: 10px;
}
table{
border: 2px solid goldenrod;
border-radius: 5px;
font-size: 32px;
font-family: Chalkduster;
font-variant: small-caps;
}
td{
border: 2px solid goldenrod;
font-variant: small-caps;
}
#resetButton{
font-family: Comic Sans, Chalkduster, Copperplate Gothic Bold;
font-variant: small-caps;
background-color: gold;
font-size: 32px;
text-align: center;
margin: 20px;
border: 2px solid goldenrod;
border-radius: 10px;
vertical-align: middle;
width: 100px;
}<!DOCTYPE html>
<html>
<head>
<title>Rock-Paper-Scissors</title>
</head>
<body>
<div id="theHead">
Rock-Paper-Scissors
</div>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps; margin-bottom: 20px">Click the buttons to make your choice: Rock, Paper or Scissors.</div>
<div class="playButtons" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="playRock()"><img src="https://img.clipartfest.com/95f4daba36ac7e8a1b142ef660141834_rock-music-clipart-free-rock-clipart-transparent-background_2400-2249.png"/></div>
<div class="playButtons" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="playPaper()"><img src="https://img.clipartfest.com/5cede8303a5e9822a475bb8958c82fe0_stack-of-papers-clip-art-at-clipart-pile-of-papers-no-background_282-300.png"/></div>
<div class="playButtons" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="playScissors()"><img src="http://pngimg.com/uploads/scissors/scissors_PNG28.png"/></div>
<br style="clear:both"/>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps;" class="sentences">You chose <span id="userChoice"></span>.</div>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps;" class="sentences">Computer chose <span id="compChoice"></span>.</div>
<div style="font-size: 27px; font-family: Chalkduster, Copperplate Gothic Bold; font-variant: small-caps;" Id="result" class="sentences"></div>
<table title="Scorecard">
<tr><th colspan="3">ScoreCard</th></tr>
<tr>
<td>You</td>
<td>Computer</td>
<td>Draws</td>
</tr>
<tr>
<td id="userScore">0</td>
<td id="compScore">0</td>
<td id="drawScore">0</td>
</tr>
</table>
<div id="resetButton" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="reset()">Reset</div>
</body>
</html>