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

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

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

　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　<meta charset="UTF-8">
　　<meta name="viewport"
　　content="width=device-width,
　　initial-scale=1.0">
　　<link rel="stylesheet" href="styles.css">
　　<title>Rock Paper Scissor</title>
　　</head>
　　<body>
　　<section class="game">
　　<!--Title -->
　　<div class="title">Rock Paper Scissor</div>
　　<!--Display Score of player and computer -->
　　<div class="score">
　　<div class="playerScore">
　　<h2>Player</h2>
　　<p class="p-count count">0</p>
　　</div>
　　<div class="computerScore">
　　<h2>Computer</h2>
　　<p class="c-count count">0</p>
　　</div>
　　</div>
　　<div class="move">Choose your move</div>
　　<!--Number of moves left before game ends -->
　　<div class="movesleft">Moves Left: 10 </div>
　　<!--Options available to player to play game -->
　　<div class="options">
　　<button class="rock">Rock</button>
　　<button class="paper">Paper</button>
　　<button class="scissor">Scissors</button>
　　</div>
　　<!--Final result of game -->
　　<div class="result"></div>
　　<!--Reload the game -->
　　<button class="reload"></button>
　　</section>
　　<script src="app.js"></script>
　　</body>
　　</html>

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

　　/* styles.css */
　　/* universal selector - Applies to whole document */
　　*{
　　padding: 0;
　　margin: 0;
　　box-sizing: border-box;
　　background: #082c6c;
　　color: #fff;
　　}
　　/* To center everything in game */
　　.game{
　　display: flex;
　　flex-direction: column;
　　height: 100vh;
　　width: 100vw;
　　justify-content: center;
　　align-items: center;
　　}
　　/* Title of the game */
　　.title{
　　position: absolute;
　　top: 0;
　　font-size: 4rem;
　　z-index: 2;
　　}
　　/* Score Board */
　　.score{
　　display: flex;
　　width: 30vw;
　　justify-content: space-evenly;
　　position: absolute;
　　top: 70px;
　　z-index: 1;
　　}
　　/* Score */
　　.p-count,.c-count{
　　text-align: center;
　　font-size: 1.5rem;
　　margin-top: 1rem;
　　}
　　/* displaying three buttons in one line */
　　.options{
　　display: flex;
　　width: 50vw;
　　justify-content: space-evenly;
　　margin-top: 2rem;
　　}
　　/* Styling on all three buttons */
　　.rock, .paper, .scissor{
　　padding: 0.8rem;
　　width: 100px;
　　border-radius: 10px;
　　background: green;
　　outline: none;
　　border-color: green;
　　border: none;
　　cursor: pointer;
　　}
　　.move{
　　font-size: 2rem;
　　font-weight: bold;
　　}
　　/* Reload button style */
　　.reload {
　　display: none;
　　margin-top: 2rem;
　　padding: 1rem;
　　background: green;
　　outline: none;
　　border: none;
　　border-radius: 10px;
　　cursor: pointer;
　　}
　　.result{
　　margin-top: 20px;
　　font-size: 1.2rem;
　　}
　　/* Responsive Design */
　　@media screen and (max-width: 612px)
　　{
　　.title{
　　text-align: center;
　　}
　　.score{
　　position: absolute;
　　top: 200px;
　　width: 100vw;
　　}
　　.options{
　　width: 100vw;
　　}

　　使用 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

　　// app.js
　　// Complete logic of game inside this function
　　const game = () => {
　　let playerScore = 0;
　　let computerScore = 0;
　　let moves = 0;
　　// Function to
　　const playGame = () => {
　　const rockBtn = document.querySelector('.rock');
　　const paperBtn = document.querySelector('.paper');
　　const scissorBtn = document.querySelector('.scissor');
　　const playerOptions = [rockBtn,paperBtn,scissorBtn];
　　const computerOptions = ['rock','paper','scissors']
　　// Function to start playing game
　　playerOptions.forEach(option => {
　　option.addEventListener('click',function(){
　　const movesLeft = document.querySelector('.movesleft');
　　moves++;
　　movesLeft.innerText = `Moves Left: ${10-moves}`;
　　const choiceNumber = Math.floor(Math.random()*3);
　　const computerChoice = computerOptions[choiceNumber];
　　// Function to check who wins
　　winner(this.innerText,computerChoice)
　　// Calling gameOver function after 10 moves
　　if(moves == 10){
　　gameOver(playerOptions,movesLeft);
　　}
　　})
　　})
　　}
　　// Function to decide winner
　　const winner = (player,computer) => {
　　const result = document.querySelector('.result');
　　const playerScoreBoard = document.querySelector('.p-count');
　　const computerScoreBoard = document.querySelector('.c-count');
　　player = player.toLowerCase();
　　computer = computer.toLowerCase();
　　if(player === computer){
　　result.textContent = 'Tie'
　　}
　　else if(player == 'rock'){
　　if(computer == 'paper'){
　　result.textContent = 'Computer Won';
　　computerScore++;
　　computerScoreBoard.textContent = computerScore;
　　}else{
　　result.textContent = 'Player Won'
　　playerScore++;
　　playerScoreBoard.textContent = playerScore;
　　}
　　}
　　else if(player == 'scissors'){
　　if(computer == 'rock'){
　　result.textContent = 'Computer Won';
　　computerScore++;
　　computerScoreBoard.textContent = computerScore;
　　}else{
　　result.textContent = 'Player Won';
　　playerScore++;
　　playerScoreBoard.textContent = playerScore;
　　}
　　}
　　else if(player == 'paper'){
　　if(computer == 'scissors'){
　　result.textContent = 'Computer Won';
　　computerScore++;
　　computerScoreBoard.textContent = computerScore;
　　}else{
　　result.textContent = 'Player Won';
　　playerScore++;
　　playerScoreBoard.textContent = playerScore;
　　}
　　}
　　}
　　// Function to run when game is over
　　const gameOver = (playerOptions,movesLeft) => {
　　const chooseMove = document.querySelector('.move');
　　const result = document.querySelector('.result');
　　const reloadBtn = document.querySelector('.reload');
　　playerOptions.forEach(option => {
　　option.style.display = 'none';
　　})
　　chooseMove.innerText = 'Game Over!!'
　　movesLeft.style.display = 'none';
　　if(playerScore > computerScore){
　　result.style.fontSize = '2rem';
　　result.innerText = 'You Won The Game'
　　result.style.color = '#308D46';
　　}
　　else if(playerScore < computerScore){
　　result.style.fontSize = '2rem';
　　result.innerText = 'You Lost The Game';
　　result.style.color = 'red';
　　}
　　else{
　　result.style.fontSize = '2rem';
　　result.innerText = 'Tie';
　　result.style.color = 'grey'
　　}
　　reloadBtn.innerText = 'Restart';
　　reloadBtn.style.display = 'flex'
　　reloadBtn.addEventListener('click',() => {
　　window.location.reload();
　　})
　　}
　　// Calling playGame function inside game
　　playGame();
　　}
　　// Calling the game function
　　game();

更多相关文章

随机推荐