技術標籤：# 場景模型rock-paper石頭剪刀布scissors

石頭剪刀布遊戲

• 示例
• HTML
• CSS

示例

HTML

<form>

  <input type="radio" id="rock-rock" name="rock-paper-scissors">
  <input type="radio" id="rock-paper" name="rock-paper-scissors"
 
>
  <input type="radio" id="rock-scissors" name="rock-paper-scissors">
  <input type="radio" id="paper-rock" name="rock-paper-scissors">
  <input type="radio" id="paper-paper" name="rock-paper-scissors"
 
>
  <input type="radio" id="paper-scissors" name="rock-paper-scissors">
  <input type="radio" id="scissors-rock" name="rock-paper-scissors">
  <input type="radio" id="scissors-paper" name="rock-paper-scissors"
 
>
  <input type="radio" id="scissors-scissors" name="rock-paper-scissors">

  <div>
    <h1>CSS Rock-Paper-Scissors</h1>
    <div id="hands">
      <div class="hand" id="computer-hand">
        <div class="fist"></div>
        <div class="finger finger-1"></div>
        <div class="finger finger-2"></div>
        <div class="finger finger-3"></div>
        <div class="finger finger-4"></div>
        <div class="thumb"></div>
        <div class="arm"></div>
      </div>

      <div class="hand" id="user-hand">
        <div class="fist"></div>
        <div class="finger finger-1"></div>
        <div class="finger finger-2"></div>
        <div class="finger finger-3"></div>
        <div class="finger finger-4"></div>
        <div class="thumb"></div>
        <div class="arm"></div>
      </div>
      
      <div id="icons">
        <div>
          <label for="rock-rock">✊</label>
          <label for="paper-rock">✊</label>
          <label for="scissors-rock">✊</label>
        </div>
        <div>
          <label for="rock-paper">