search

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

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

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

　　微信小程序游戏源码是一个有趣的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();
上一条：Markdown语法和emmet语法下一条：markdownm语法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议