博客列表 >微信小程序源码支持小游戏源码接入html5

微信小程序源码支持小游戏源码接入html5

手机用户418797289
手机用户418797289原创
2022年07月02日 09:38:431233浏览

  微信小程序游戏源码是一个有趣的H5游戏,我们将使用 JavaScript 设计游戏,将与计算机对战。总共将有10个动作。微信开放平台会随机生成一个选项,获胜者每次获得一分。10个动作结束后,最终结果将显示在屏幕上,并带有重新开始游戏的按钮。游戏将完全响应,因此可以在每台设备上玩。
  完整源码:y.wxlbyx.icu
  HTML 布局:
  HTML 给出了游戏的基本结构。styles.css 文件链接在 head 标记中,用于设置 HTML 样式。

  代码中使用的元素描述如下:
  ●带有类标题的 div 用于在屏幕上显示标题。
  ●具有类分数的 div 包含另外两个 div,它们将显示计算机的分数。
  ●带有 move 类的 div 只显示一个文本,而带有 moveleft 类的 div 将显示游戏结束前剩下的移动数。
  ●具有类选项的 div 包含三个按钮,用户可以使用它们来提供输入。
  ●带有类结果的 div 将显示每次移动的结果以及 10 次移动后的最终结果,带有类 reload 的按钮将允许重新加载游戏。

  1.   <!DOCTYPE html>
  2.   <html lang="en">
  3.   <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport"
  6.   content="width=device-width,
  7.   initial-scale=1.0">
  8.   <link rel="stylesheet" href="styles.css">
  9.   <title>Rock Paper Scissor</title>
  10.   </head>
  11.   <body>
  12.   <section class="game">
  13.   <!--Title -->
  14.   <div class="title">Rock Paper Scissor</div>
  15.   <!--Display Score of player and computer -->
  16.   <div class="score">
  17.   <div class="playerScore">
  18.   <h2>Player</h2>
  19.   <p class="p-count count">0</p>
  20.   </div>
  21.   <div class="computerScore">
  22.   <h2>Computer</h2>
  23.   <p class="c-count count">0</p>
  24.   </div>
  25.   </div>
  26.   <div class="move">Choose your move</div>
  27.   <!--Number of moves left before game ends -->
  28.   <div class="movesleft">Moves Left: 10 </div>
  29.   <!--Options available to player to play game -->
  30.   <div class="options">
  31.   <button class="rock">Rock</button>
  32.   <button class="paper">Paper</button>
  33.   <button class="scissor">Scissors</button>
  34.   </div>
  35.   <!--Final result of game -->
  36.   <div class="result"></div>
  37.   <!--Reload the game -->
  38.   <button class="reload"></button>
  39.   </section>
  40.   <script src="app.js"></script>
  41.   </body>
  42.   </html>

  CSS样式:
  此样式用于游戏。您可以根据需要更改样式。
  文件名:styles.css

  1.   /* styles.css */
  2.   /* universal selector - Applies to whole document */
  3.   *{
  4.   padding: 0;
  5.   margin: 0;
  6.   box-sizing: border-box;
  7.   background: #082c6c;
  8.   color: #fff;
  9.   }
  10.   /* To center everything in game */
  11.   .game{
  12.   display: flex;
  13.   flex-direction: column;
  14.   height: 100vh;
  15.   width: 100vw;
  16.   justify-content: center;
  17.   align-items: center;
  18.   }
  19.   /* Title of the game */
  20.   .title{
  21.   position: absolute;
  22.   top: 0;
  23.   font-size: 4rem;
  24.   z-index: 2;
  25.   }
  26.   /* Score Board */
  27.   .score{
  28.   display: flex;
  29.   width: 30vw;
  30.   justify-content: space-evenly;
  31.   position: absolute;
  32.   top: 70px;
  33.   z-index: 1;
  34.   }
  35.   /* Score */
  36.   .p-count,.c-count{
  37.   text-align: center;
  38.   font-size: 1.5rem;
  39.   margin-top: 1rem;
  40.   }
  41.   /* displaying three buttons in one line */
  42.   .options{
  43.   display: flex;
  44.   width: 50vw;
  45.   justify-content: space-evenly;
  46.   margin-top: 2rem;
  47.   }
  48.   /* Styling on all three buttons */
  49.   .rock, .paper, .scissor{
  50.   padding: 0.8rem;
  51.   width: 100px;
  52.   border-radius: 10px;
  53.   background: green;
  54.   outline: none;
  55.   border-color: green;
  56.   border: none;
  57.   cursor: pointer;
  58.   }
  59.   .move{
  60.   font-size: 2rem;
  61.   font-weight: bold;
  62.   }
  63.   /* Reload button style */
  64.   .reload {
  65.   display: none;
  66.   margin-top: 2rem;
  67.   padding: 1rem;
  68.   background: green;
  69.   outline: none;
  70.   border: none;
  71.   border-radius: 10px;
  72.   cursor: pointer;
  73.   }
  74.   .result{
  75.   margin-top: 20px;
  76.   font-size: 1.2rem;
  77.   }
  78.   /* Responsive Design */
  79.   @media screen and (max-width: 612px)
  80.   {
  81.   .title{
  82.   text-align: center;
  83.   }
  84.   .score{
  85.   position: absolute;
  86.   top: 200px;
  87.   width: 100vw;
  88.   }
  89.   .options{
  90.   width: 100vw;
  91.   }

  使用 JavaScript 的逻辑:
  游戏的主要逻辑是使用 JavaScript 创建的。我们将执行 DOM 操作,因此 JavaScript 的基本知识足以构建游戏。
  按照步骤
  创建一个包含游戏所有逻辑的函数game()。
  函数内部声明了三个变量playerScore、computerScore、moves 分别记录的得分、计算机的得分和完成的moves。
  创建一个函数playGame()并在函数内部使用 DOM 操作来获取我们在 HTML 中为输入创建的所有三个按钮。创建一个数组 playerOptions ,它将包含所有三个按钮作为其元素。同样,为计算机选项创建一个数组。
  在 playerOptions 上使用forEach() 循环,这样我们就可以用一段代码在所有按钮上添加一个事件监听器。在循环内,计数器增量移动 1 显示通过从 10 中减去移动来在屏幕上向左移动。为计算机选项生成一个随机值并将其输入进行比较。
  创建一个函数winner(),它将接收两个参数,一个是输入,另一个是计算机的选项。该函数将决定谁在和计算机中获胜。
  创建一个函数 gameOver() ,它将显示带有重新加载按钮的最终结果。当移动数等于 10 时将调用该函数。
  在 game() 函数中调用 playGame() 函数。
  现在在文件末尾调用 game() 函数。
  下面是实现:
  文件名:app.js

  1.   // app.js
  2.   // Complete logic of game inside this function
  3.   const game = () => {
  4.   let playerScore = 0;
  5.   let computerScore = 0;
  6.   let moves = 0;
  7.   // Function to
  8.   const playGame = () => {
  9.   const rockBtn = document.querySelector('.rock');
  10.   const paperBtn = document.querySelector('.paper');
  11.   const scissorBtn = document.querySelector('.scissor');
  12.   const playerOptions = [rockBtn,paperBtn,scissorBtn];
  13.   const computerOptions = ['rock','paper','scissors']
  14.   // Function to start playing game
  15.   playerOptions.forEach(option => {
  16.   option.addEventListener('click',function(){
  17.   const movesLeft = document.querySelector('.movesleft');
  18.   moves++;
  19.   movesLeft.innerText = `Moves Left: ${10-moves}`;
  20.   const choiceNumber = Math.floor(Math.random()*3);
  21.   const computerChoice = computerOptions[choiceNumber];
  22.   // Function to check who wins
  23.   winner(this.innerText,computerChoice)
  24.   // Calling gameOver function after 10 moves
  25.   if(moves == 10){
  26.   gameOver(playerOptions,movesLeft);
  27.   }
  28.   })
  29.   })
  30.   }
  31.   // Function to decide winner
  32.   const winner = (player,computer) => {
  33.   const result = document.querySelector('.result');
  34.   const playerScoreBoard = document.querySelector('.p-count');
  35.   const computerScoreBoard = document.querySelector('.c-count');
  36.   player = player.toLowerCase();
  37.   computer = computer.toLowerCase();
  38.   if(player === computer){
  39.   result.textContent = 'Tie'
  40.   }
  41.   else if(player == 'rock'){
  42.   if(computer == 'paper'){
  43.   result.textContent = 'Computer Won';
  44.   computerScore++;
  45.   computerScoreBoard.textContent = computerScore;
  46.   }else{
  47.   result.textContent = 'Player Won'
  48.   playerScore++;
  49.   playerScoreBoard.textContent = playerScore;
  50.   }
  51.   }
  52.   else if(player == 'scissors'){
  53.   if(computer == 'rock'){
  54.   result.textContent = 'Computer Won';
  55.   computerScore++;
  56.   computerScoreBoard.textContent = computerScore;
  57.   }else{
  58.   result.textContent = 'Player Won';
  59.   playerScore++;
  60.   playerScoreBoard.textContent = playerScore;
  61.   }
  62.   }
  63.   else if(player == 'paper'){
  64.   if(computer == 'scissors'){
  65.   result.textContent = 'Computer Won';
  66.   computerScore++;
  67.   computerScoreBoard.textContent = computerScore;
  68.   }else{
  69.   result.textContent = 'Player Won';
  70.   playerScore++;
  71.   playerScoreBoard.textContent = playerScore;
  72.   }
  73.   }
  74.   }
  75.   // Function to run when game is over
  76.   const gameOver = (playerOptions,movesLeft) => {
  77.   const chooseMove = document.querySelector('.move');
  78.   const result = document.querySelector('.result');
  79.   const reloadBtn = document.querySelector('.reload');
  80.   playerOptions.forEach(option => {
  81.   option.style.display = 'none';
  82.   })
  83.   chooseMove.innerText = 'Game Over!!'
  84.   movesLeft.style.display = 'none';
  85.   if(playerScore > computerScore){
  86.   result.style.fontSize = '2rem';
  87.   result.innerText = 'You Won The Game'
  88.   result.style.color = '#308D46';
  89.   }
  90.   else if(playerScore < computerScore){
  91.   result.style.fontSize = '2rem';
  92.   result.innerText = 'You Lost The Game';
  93.   result.style.color = 'red';
  94.   }
  95.   else{
  96.   result.style.fontSize = '2rem';
  97.   result.innerText = 'Tie';
  98.   result.style.color = 'grey'
  99.   }
  100.   reloadBtn.innerText = 'Restart';
  101.   reloadBtn.style.display = 'flex'
  102.   reloadBtn.addEventListener('click',() => {
  103.   window.location.reload();
  104.   })
  105.   }
  106.   // Calling playGame function inside game
  107.   playGame();
  108.   }
  109.   // Calling the game function
  110.   game();
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议