个人中心
gpt4 book ai didi

javascript - 你能帮我处理剪刀石头布游戏 javascript 和一些 HTML 吗？

转载 作者：行者123 更新时间：2023-11-28 04:52:40 26 4
gpt4 key购买 nike

<分区>

http://postimg.org/image/3uy1elypj/

http://postimg.org/image/7q1fh6hvb/

大家好，我正在尝试制作一款剪刀石头布游戏，它可以完成上图中的所有操作。我只能在这里发布两个链接，但如果您想要更多图片，请告诉我。在选择某些内容之前，游戏应该从不显示任何图像开始。我创建了一些代码，但对我来说效果不佳。如果您能帮我解决这个问题，我将不胜感激!下面是我的代码。 

<body>
<div class="game">
        <div class= "choice">
            <input name="player" type="radio" id="rock"
                    value = "0"  checked="checked"/> <img src="rock.png" width="268" height="291" alt=""/>ROCK <br />


            <input name="player" type="radio" id="paper"
                value = "1" data-photo-url="http://www.clker.com/cliparts/Y/t/o/V/q/F/paper-md.png"/>
                                         PAPER <br />


            <input name="player"  type="radio" id="scissors"
                value = "2" data-photo-url="http://www.clker.com/cliparts/8/B/i/M/Y/Z/scissors-md.png" /> SCISSORS <br />
            <button id = "play">
                    PLAY
            </button>
        </div>

         <div class="players">
            <div>
                <H3>PLAYER</H3> <img class="player-pick" src="scissors-purple.png" width="268" height="291" alt=""/></div>
           <div>
               <H3>COMPUTER</H3><img class="computer-pick" src="http://www.clker.com/cliparts/Y/t/o/V/q/F/paper-md.png"></img> 
           </div>
        </div>

        <div class = "answers">
            <li>YOUR WINS:<input type="text" id= "output" size="5" /></li>
            <li>MY WINS:<input type="text" id = "output" size="5" /></li>
            <li>DRAWS:<input type="text" id = "output" size="5" /></li>
            <button id = "newgame">
                    NEW GAME
            </button>
        </div>
       <h3 class="instructions">Make your pick and click PLAY</h3>

    </div>
    <script src = "projectt.js"> </script>
</body>

这是CSS

.game {
    width: 100%;
    min-width: 500px;
}
.game > div {
    float: left;
}
.choice {
    width: 25%;
}
.players {
    width: 50%;    
}
.answers {
    width: 25%;
}

.players > div {
    width: 50%;
    float: left;
    min-height: 200px;
}
h3 {
    text-align: center;
}

.instructions {
    clear: both;
}

.players img {
    display: block;
    max-width: 100%;
}

我在 javascript 方面遇到了最大的问题。这就是我所拥有的:

var choiceArray = ["paper", "rock", "scissors"];
var computerChoice = Math.floor(3*Math.random());
console.log(computerChoice);
if(computerChoice=0){
    computerChoice="rock";
}else if(computerChoice>1){
    computerChoice="paper";
}else{
    computerChoice="scissors";
}

console.log(computerChoice);

26 4 0
文章推荐： c++ - 如何连接两个指向字符串的指针并将其存储在数组或字符中？
文章推荐： css - 生产环境Symfony 3中的asset_url
文章推荐： javascript - Flipclock 插件无法在 Internet Explorer 中运行
文章推荐： c++ - 使用分隔符 C++ 将字符串解析为整数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com