javascript - Codeacademy 的石头剪刀布游戏-6ren

javascript - Codeacademy 的石头剪刀布游戏

转载作者：行者123 更新时间：2023-11-28 05:35:24

24

4

我正在尝试弄清楚如何将我的 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 转换: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，因为它得到了更好的支持。但是，嘿，无论你的船漂浮什么；)

关于javascript - Codeacademy 的石头剪刀布游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39407661/

24

4

0

文章推荐： swift - 在应用程序启动之前执行完成处理程序

文章推荐： javascript - 带参数的窗口定位到另一个页面

文章推荐： javascript - 为什么我的 jQuery 调整大小触发不一致？

文章推荐： javascript - 如何在codeigniter中使用引导弹出窗口

Python - 剪刀、布和石头游戏
所以，我正在用 Python 制作这款游戏。问题是，在剪刀、布和石头中可以有不同的组合，例如..石头和布、石头和剪刀等等。那么，如果不执行大量 elif 语句，我将如何做到这一点。 import
javascript - 而不是提示从石头、剪刀、布等游戏的图像中进行选择
我是 javascript 新手，正在开发一个简单的石头、剪刀、布、蜥蜴、斯波克游戏。我想让用户从 5 张图像中进行选择，而不是在提示中填写。有谁知道我该怎么做？警报和确认消息最终也应该是或类似的内
javascript - 编写石头、剪刀、布游戏
我正在制作一个小剪刀石头布游戏，我以为我已经完美地计划了一切，但由于某种原因，当你尝试玩时什么也没有发生。基本上，有三张图像，一 block 石头、一张纸和一些剪刀，然后你单击一个。使用我输入的代码
python - Python石头，纸，剪刀
我试图学习python并以此开始，当我尝试运行它时，我一直收到语法错误。光标跳到def start部分的close结束处。我不确定语法错误来自哪里，因为我用语音标记了所有打印件 #! python3
java - 计算石头、剪刀、布的获胜次数
我有点困惑如何创建一个字段，其中将显示您获胜或平局的次数。喜欢: | Wins: | 234 | | Looses:| 234 | | Draws: | 434 | 意思是，如果我和新闻报纸赢得了答
java - 石头、剪刀、布随机匹配不起作用
如何让玩家玩随机数量的比赛，然后以全部分数结束游戏？我正在尝试做一个循环，让玩家玩多场比赛，并在最后询问是否还想玩。 public class RockPaperScissors { pub
java - 我无法让我的石头、剪刀、布程序读取正确的结果
每当我运行它时，似乎继续玩的循环都有效，但是每当 computerChoose 执行 randomGenerator 时，游戏结果都不会正确输出。请帮忙。我是java新手，我们只打算使用3种方法——指
java - 石头、剪刀、布游戏无法正确记录分数
我的石头剪刀布游戏遇到问题。当我玩游戏时，它会将胜利或失败记录为胜利和失败。我试图让它记录一场胜利和一场失败，并且不会为胜利和失败添加分数。有什么建议吗？ import java.io.*; publ
python - 制作石头、剪刀、布游戏
我正在制作石头剪刀布游戏。下面的代码可以工作，但是缺少两个关键的东西，我真的很想知道如何实现它: 如果出现平局，玩家必须能够重新选择。所以必须执行break语句，但是需要什么才能返回到while循环
Java石头/剪刀/布，这样做错了吗？
显然是在学习java。我能够让游戏正常运行。但我需要这样做，以便如果用户放置 R/P/S 以外的东西，那么它默认为 Rock。我不需要循环。如果我放石头的话，游戏就完美了。如果我放置 RPS 以外的任
python - 石头、剪刀、布不会让用户获胜
#RoShamBo import random count=0 while count -2: compnum=random.randint(0,2) usernum=int(inpu
python - 如何在Python中重复石头、剪刀、布的游戏
我用Python做了一个石头、剪刀、布的游戏。如果用户输入"is"，我如何让游戏重复进行？当用户输入除了石头、布或剪刀之外的任何内容时，我的代码似乎进入永无休止的循环此外，我正在尝试了解何时何地应该
c - 对石头/剪刀/布感到沮丧
我还在和我叔叔一起学习 C，我在尝试编译我们一起编写的玩剪刀石头布的程序时遇到了另一个麻烦。我在该程序上还有更多工作要做，但我什至无法让大部分内容正常工作。我使用 Make 命令从编译器收到的错误
javascript - 石头、剪刀、布游戏动画。
这是我的石头剪刀布游戏。 http://jsfiddle.net/Renay/hL3j5hm6/6/ 如何添加动画，在给出结果之前，图像上下弹跳时有 3,2,1 倒计时。我尝试过添加各种功
java - 石头、剪刀、布机器人
我的类(class)本周将举行机器人竞赛，我们应该让我们的机器人战胜其他人的机器人。比赛项目为石头、布、剪刀、炸药、水气球。炸药胜过一切，除了水气球，而水气球只胜过炸药。老师写了竞技场，还有其他一些机
python - 石头、剪刀、布问题
我正在使用 Python 创建一个非常简单的石头剪刀布游戏，但无法解决这个问题。每次我在命令提示符中输入答案时，它都会输出消息“无效输入，请重试!”，这就是我告诉它在存在无效输入时执行的操作。但是，我
javascript - Javascript 石头、剪刀、布等游戏的问题
我遇到了一个问题，选择根本没有更新。我已经列出了每次选择后应显示最后结果和当前分数的位置。分数运行良好，但选择根本没有更新。谢谢。 Dynamic Web Squirtle,
javascript - 石头、剪刀、布增量分数不起作用，有人可以告诉我我做错了什么吗？
我的图片和消息正在更改为显示获胜、失败、平局，但我的 javascript 增量似乎不起作用，因为我的分数没有改变。请帮忙:) Rock, Paper, Scissors Rock
c# - C# 石头、剪刀、布
我正在用 C# 制作石头、剪刀、布游戏，目前在有人输入非 R、S 或 P 的输入时尝试显示消息时遇到问题。例如，我正在尝试获取默认值在 switch 语句中工作，但我没有运气。这就是我目前所拥有的。如
Javascript 石头、剪刀、布游戏。我的代码有什么问题吗？
我希望代码获取用户在输入字段中输入的值并将其传递给变量 userChoice。我不知道为什么这段代码不起作用，唯一的学习方法就是问你们。 HTML: Choose your destiny !

首页

博学

6Ren·AI

商城

javascript - Codeacademy 的石头剪刀布游戏