Javascript-石头剪刀布[简易版本]

Dan want to learn

已于 2024-05-11 11:48:31 修改

阅读量620

点赞数 11

文章标签： javascript 开发语言

于 2024-05-06 14:39:04 首次发布

本文链接：https://blog.csdn.net/m0_58777269/article/details/138489939

版权

Javascript-石头剪刀布[简易版本]

前瞻

前瞻

本次采用了function + button来复现一个简单的石头剪刀布，从而实现了Markdown

function

首先这个功能需要做到可以实现利用random来实现区分石头，剪刀，布

先生成一个随机数字 randomNumber = Math.random();
然后根据三个区间分别来完成对应石头，剪刀，布的区分
为了保证函数可以被调用，需要设置onclick的参数computerMove

需要注意的一点：

很多时候在function里面声明的变量就是只能在function里面是用的，如果想在function外调用对应的参数变量需要直接将参数声明在函数外面，变化为全局变量（本次在这里需要注意的全局参数就是computerMove）
需要注意function如果就是默认参数就会还好，但是如果自带初始化的数值那么就可以采用自带的参数数值

代码块-最基础版本

<!DOCTYPE html>
<html>

<head>
  <title>RPS</title>
</head>

<body>
  <P>Rock Paper Scissors</P>

  <button onclick="
    playGame('rock');
 ">Rock</button>


  <button onclick="
    playGame('paper');
 ">Paper</button>


  <button onclick="
     playGame('scissors');
  ">Scissors</button>

  <script>
    function playGame(playerMove) {
      const computerMove = pickComputerMove();
      let result = '';
      if (playerMove === 'scissors') {
        if (computerMove === 'rock')
          result = 'You are lose.';
        else if (computerMove === 'paper')
          result = 'you win.';
        else if (computerMove === 'scissors')
          result = 'Tie .';

        alert(`You picked scissors, Computer picked ${computerMove}. ${result}`)

      }

      else if (playerMove === 'rock') {
        if (computerMove === 'rock')
          result = 'Tie';
        else if (computerMove === 'paper')
          result = 'you win.';
        else if (computerMove === 'scissors')
          result = 'you are lose.';

        alert(`You picked rock, Computer picked ${computerMove}. ${result}`)

      }

      else if (playerMove === 'paper') {
        if (computerMove === 'rock')
          result = 'You win.';
        else if (computerMove === 'paper')
          result = 'Tie.';
        else if (computerMove === 'scissors')
          result = 'you are lose';

        alert(`You picked paper, Computer picked ${computerMove}. ${result}`)

      }
    }


    function pickComputerMove(playerMove) {
      const randomNumber = Math.random();

      if (randomNumber >= 0 && randomNumber < 1 / 3)
        computerMove = 'rock';
      else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3)
        computerMove = 'paper';
      else if (randomNumber >= 2 / 3 && randomNumber < 1)
        computerMove = 'scissors';

      return computerMove;
    }


  </script>
</body>

</html>

实现效果如下图：
在这里插入图片描述

有重制分数版本

<!DOCTYPE html>
<html>

<head>
  <title>RPS</title>
</head>

<body>
  <P>Rock Paper Scissors</P>

  <button onclick="
    playGame('rock');
 ">Rock</button>


  <button onclick="
    playGame('paper');
 ">Paper</button>


  <button onclick="
     playGame('scissors');
  ">Scissors</button>

  <button onclick="
  score.losses=0;
  score.ties=0;
  score.wins=0;
  ">Restart score</button>

<p>
  click here shows your present scores.
</p>
  <script>
    const score = {
      wins: 0,
      losses: 0,
      ties: 0
    }

    function playGame(playerMove) {
      const computerMove = pickComputerMove();
      let result = '';
      if (playerMove === 'scissors') {
        if (computerMove === 'rock')
          result = 'You are lose.';
        else if (computerMove === 'paper')
          result = 'You win.';
        else if (computerMove === 'scissors')
          result = 'Tie.';
        if (result === 'You win.') {
          score.wins += 1;
        }
        else if (result === 'You are lose.') {
          score.losses += 1;
        }
        else if (result === 'Tie.') {
          score.ties += 1;
        }
        alert(`You picked scissors, Computer picked ${computerMove}. ${result}\n
        wins:${score.wins} losses:${score.losses} ties:${score.ties}`)

      }

      else if (playerMove === 'rock') {
        if (computerMove === 'rock')
          result = 'Tie.';
        else if (computerMove === 'paper')
          result = 'You win.';
        else if (computerMove === 'scissors')
          result = 'You are lose.';
        if (result === 'You win.') {
          score.wins += 1;
        }
        else if (result === 'You are lose.') {
          score.losses += 1;
        }
        else if (result === 'Tie.') {
          score.ties += 1;
        }
        alert(`You picked rock, Computer picked ${computerMove}. ${result}\n
        wins:${score.wins} losses:${score.losses} ties:${score.ties}`)

      }

      else if (playerMove === 'paper') {
        if (computerMove === 'rock')
          result = 'You win.';
        else if (computerMove === 'paper')
          result = 'Tie.';
        else if (computerMove === 'scissors')
          result = 'You are lose.';

        if (result === 'You win.') {
          score.wins += 1;
        }
        else if (result === 'You are lose.') {
          score.losses += 1;
        }
        else if (result === 'Tie.') {
          score.ties += 1;
        }
        alert(`You picked paper, Computer picked ${computerMove}. ${result}\n
        wins:${score.wins} losses:${score.losses} ties:${score.ties}`)

      }


    }


    function pickComputerMove(playerMove) {
      const randomNumber = Math.random();

      if (randomNumber >= 0 && randomNumber < 1 / 3)
        computerMove = 'rock';
      else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3)
        computerMove = 'paper';
      else if (randomNumber >= 2 / 3 && randomNumber < 1)
        computerMove = 'scissors';

      return computerMove;
    }


  </script>
</body>

</html>

在这里插入图片描述
按下重制分数的按钮就可以重新设置分数为0

利用localstorage来改进score的分数存储方式

ps：这里需要改进的思路和json，localstorage有关
在介绍这两个以前需要了解一些cookie的最基本用途：存储网页的登录信息等，随着网页的不断进化，最后出现了localstorage（永久存储信息在网页里）和sessionstorage（暂时存储信息，关闭网页就消失）

      json（更方便计算机本身读取信息格式）和localstorage（js格式的人看的）

在这里插入图片描述
需要注意的就是：

json格式仅仅支持双引号，不支持单引号
json不支持function格式的转化
json基本可以被任何的编程语言读取（更universal），所以两个计算机交换信息时候，很多时候用的就是json格式的数据

想要转换为json格式的时候就可以使用stringify来改变数据格式

JSON.stringify()

想要将json格式转换为js格式的时候用这个代码：

JSON.parse()

本次介绍localstorage是希望他在刷新网页后仍然保存有score的三个数量，不需要一起跟着重新刷新这些数字
以下两个参数的含义就是：将value存储到key字段

  //存储的三个办法：
  localStorage.setItem("key","TOM");
  localStorage["key"]="TOM";
   localStorage.key="TOM";
  //读取的三个方法：
  localStorage.getItem("key");
  localStorage["key"];
  localStorage.key;
  // 移除数据的三个方法：
  localStorage.removeItem("key");
  delete localStorage["key"];
  delete localStorage.key

<!DOCTYPE html>
<html>

<head>
  <title>RPS</title>
</head>

<body>
  <P>Rock Paper Scissors</P>

  <button onclick="
    playGame('rock');
 ">Rock</button>


  <button onclick="
    playGame('paper');
 ">Paper</button>


  <button onclick=" 
     playGame('scissors');
  ">Scissors</button>

  <button onclick="
  score.wins=0;
  score.losses=0;
  score.ties=0;
  localStorage.removeItem('score');
  ">Restart score</button>

  <p>
    <button onclick="
      alert(`wins:${score.wins} losses:${score.losses} ties:${score.ties}`)
      ">click here</button> shows your present scores.
  </p>

  <script>
    let score = JSON.parse(localStorage.getItem('score')) || { wins: 0, losses: 0, ties: 0 }
    /*
    这个“｜｜”后面的代码含义就是如果score =null /false就是会默认初始化
    if (score === null)//or if (!score)
     {
      score = { wins: 0, losses: 0, ties: 0 }
    }
*/
    function playGame(playerMove) {
      const computerMove = pickComputerMove();
      let result = '';
      if (playerMove === 'scissors') {
        if (computerMove === 'rock')
          result = 'You are lose.';
        else if (computerMove === 'paper')
          result = 'You win.';
        else if (computerMove === 'scissors')
          result = 'Tie.';
        if (result === 'You win.') {
          score.wins += 1;
        }
        else if (result === 'You are lose.') {
          score.losses += 1;
        }
        else if (result === 'Tie.') {
          score.ties += 1;
        }
        alert(`You picked scissors, Computer picked ${computerMove}. ${result}\n
        wins:${score.wins} losses:${score.losses} ties:${score.ties}`)

      }

      else if (playerMove === 'rock') {
        if (computerMove === 'rock')
          result = 'Tie.';
        else if (computerMove === 'paper')
          result = 'You win.';
        else if (computerMove === 'scissors')
          result = 'You are lose.';
        if (result === 'You win.') {
          score.wins += 1;
        }
        else if (result === 'You are lose.') {
          score.losses += 1;
        }
        else if (result === 'Tie.') {
          score.ties += 1;
        }
        alert(`You picked rock, Computer picked ${computerMove}. ${result}\n
        wins:${score.wins} losses:${score.losses} ties:${score.ties}`)

      }

      else if (playerMove === 'paper') {
        if (computerMove === 'rock')
          result = 'You win.';
        else if (computerMove === 'paper')
          result = 'Tie.';
        else if (computerMove === 'scissors')
          result = 'You are lose.';

        if (result === 'You win.') {
          score.wins += 1;
        }
        else if (result === 'You are lose.') {
          score.losses += 1;
        }
        else if (result === 'Tie.') {
          score.ties += 1;
        }

        localStorage.setItem('score', JSON.stringify(score))

        alert(`You picked paper, Computer picked ${computerMove}. ${result}\n
        wins:${score.wins} losses:${score.losses} ties:${score.ties}`)

      }


    }


    function pickComputerMove(playerMove) {
      const randomNumber = Math.random();

      if (randomNumber >= 0 && randomNumber < 1 / 3)
        computerMove = 'rock';
      else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3)
        computerMove = 'paper';
      else if (randomNumber >= 2 / 3 && randomNumber < 1)
        computerMove = 'scissors';

      return computerMove;
    }

  </script>
</body>

</html>

需要注意的一个细节就是这里需要将localStorage和document.querySelector().innerHTML放在function playgame里面，因为本质是希望玩一次游戏后就会有即时更新对应数据
在这里插入图片描述

利用网页p标签元素直接展示分数

这里对应就是需要注意localStorage的存储位置，因为本质上是希望同步出信息，每次完成一个按钮点后分数需要同步，所以function playgame()里面一定要有这个localStorage，又因为还想要可视化来展示对应的数据,所以需要采用document来进行展示，所以localStorage后面一定要跟着function updateScore()

当时个人还有一个小小的疑惑：为什么在‘/script’前面会需要使用updateScore()

理由：当页面加载时，updateScore()用js-score类设置元素的初始文本内容，以显示存储在localStorage中的当前分数。如果没有这个调用，分数显示将是空的，直到用户玩第一个游戏或点击一个按钮。
流程：

页面加载:
score从localStorage初始化。
updateScore()被调用来立即反映网页上的当前分数。
在交互:
每次玩游戏 function playGame()时，分数都会更新，并再次调用updateScore()来刷新显示。
调用restartScore()时也会发生同样的情况,所以在restart里面也一定要有updateScore()

<!DOCTYPE html>
<html>

<head>
  <title>RPS</title>
</head>

<body>
  <p>Rock Paper Scissors</p>

  <button onclick="playGame('rock')">Rock</button>
  <button onclick="playGame('paper')">Paper</button>
  <button onclick="playGame('scissors')">Scissors</button>

  <p class="js-score"></p>

  <button onclick="restartScore()">Restart score</button>



  <script>
    let score = JSON.parse(localStorage.getItem('score')) || { wins: 0, losses: 0, ties: 0 };

    function playGame(playerMove) {
      //看看计算机输入了什么
      const computerMove = pickComputerMove();
      //初始化定义一下result 这个string
      let result = '';
      //输入了剪刀
      if (playerMove === 'scissors') {
        if (computerMove === 'rock')
          result = 'You lose.';
        else if (computerMove === 'paper')
          result = 'You win.';
        else if (computerMove === 'scissors')
          result = 'Tie.';
      }
      //用户输入了石头
      else if (playerMove === 'rock') {
        if (computerMove === 'rock')
          result = 'Tie.';
        else if (computerMove === 'paper')
          result = 'You lose.';
        else if (computerMove === 'scissors')
          result = 'You win.';
      }
      //输入了布
      else if (playerMove === 'paper') {
        if (computerMove === 'rock')
          result = 'You win.';
        else if (computerMove === 'paper')
          result = 'Tie.';
        else if (computerMove === 'scissors')
          result = 'You lose.';
      }
      //不同的result如何对应score分数增长
      if (result === 'You win.') {
        score.wins += 1;
      } else if (result === 'You lose.') {
        score.losses += 1;
      } else if (result === 'Tie.') {
        score.ties += 1;
      }

      alert(`You picked ${playerMove}, Computer picked ${computerMove}. ${result}\n
        wins:${score.wins} losses:${score.losses} ties:${score.ties}`);
      //利用localstorgae来进行整体计算
      localStorage.setItem('score', JSON.stringify(score));
      updateScore();
    }

    function pickComputerMove() {
      //计算机随机出一个“剪刀，石头，布”
      const randomNumber = Math.random();
      if (randomNumber < 1 / 3)
        return 'rock';
      else if (randomNumber < 2 / 3)
        return 'paper';
      else
        return 'scissors';
    }
    //重制分数
    function restartScore() {
      score = { wins: 0, losses: 0, ties: 0 };
      localStorage.removeItem('score');
      updateScore();
    }


    function updateScore() {
      document.querySelector('.js-score').innerHTML = `Wins:${score.wins} ;Losses:${score.losses} ;Ties:${score.ties}`;
    }

    updateScore();
  </script>
</body>

</html>

实现效果如下：点完确定后分数就会同步
在这里插入图片描述

Dan want to learn

关注

11
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
Javascript-石头剪刀布[简易版本]

很多时候在function里面声明的变量就是只能在function里面是用的，如果想在function外调用对应的参数变量需要直接将参数声明在函数外面，变化为。首先这个功能需要做到可以实现利用random来实现区分石头，剪刀，布。本次采用了function + button来复现一个简单的。（本次在这里需要注意的全局参数就是computerMove），从而实现了Markdown。
复制链接

扫一扫