codeacademy是一个石头、剪子、布的游戏
Codeacademy's rock, paper, scissors game
我试图找出如何中心(垂直和水平)我的innerHTML
记住内容的长度。这是我的HTML和CSS。
<body>
<div class="container">
<p id="demo"></p>
<script>
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} document.getElementById("demo").innerHTML = "Computer: " + computerChoice;
var compare = function(choice1, choice2) {
if(choice1 === choice2) {
document.getElementById("demo").innerHTML = "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
document.getElementById("demo").innerHTML = "Congratulatioins, you win!";
} else {
document.getElementById("dmeo").innerHTML = "Sorry, the computer shows paper. You lost!";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
document.getElementById("demo").innerHTML = "Congratulatioins, you win!";
} else {
document.getElementById("demo").innerHTML = "Sorry, the computer shows scissors. You lost!";
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
document.getElementById("demo").innerHTML = "Congratulatioins, you win!";
} else {
document.getElementById("demo").innerHTML = "Sorry, the computer shows rock. You lost!";
}
}
}
compare (userChoice, computerChoice);
</script>
.container {
width: 50%;
margin: 0 auto;
padding: 10px;
}
body {
background-image: url(images/bg-img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
}
#demo {
font-family: Impact;
font-size: 40px;
color: #cddc39;
text-shadow: 2px 4px 3px rgba(106, 209, 25, 0.62);
}
您可以使用多种方法实现此目的。
选项1:可以使用负边距将div居中:
.container {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
margin-left: -25%;
margin-right: -25%;
}
选项2:你可以使用支持较少的css transform: translate
.container {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Safari */
transform: translate(-50%,-50%);
}
我建议选项1,因为它的支持要好得多。但是,嘿,随你的便
容器选择器中的text-align: center;
应该可以做到这一点。
你也可以使用'flexbox'来设置水平和垂直居中:
.container {
width: 50%;
margin: 0 auto;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
flex实用指南
相关文章:
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 如何有效地将游戏数据存储在URL查询字符串中
- Javascript游戏输入失去焦点
- 如何在p5.js中管理多智力竞赛游戏的多个屏幕
- setInterval游戏循环的范围问题
- 为网络游戏制作动画
- 重置游戏和获胜者问题
- 帆布游戏的滞后运动
- Javascript单独的游戏窗口
- Javascript猜测游戏-计数器不工作
- JavaScript纸牌游戏
- 简单游戏的画布与SVG
- 我的HTML5游戏不时暂停,我如何才能知道它是否's是由垃圾收集引起的
- 多人游戏完全在浏览器中运行,服务器仅用于数据库
- 通过PHP将单词添加到游戏中
- 2D Processingjs游戏中的冲突
- Javascript岩石,纸,剪刀游戏
- 设置变量时破坏游戏代码
- codeacademy是一个石头、剪子、布的游戏
- 为什么我需要用数学.石头剪子布游戏的数组层数