Table of contents
Foreword:
Playing games for a while after work and study can not only bring happiness, but also relieve the pressure of life. Follow this article to make a small game together.
Description:
Rock-paper-scissors is a guessing game. It originated in China, and then spread to Japan, North Korea and other places. With the continuous development of Asia-Europe trade, it spread to Europe, and gradually became popular in the world in modern times. The simple and clear rules make rock-paper-scissors no rule loopholes to be exploited. A single game is played against luck, and multi-round games are played against psychological games, so that the ancient game of rock-paper-scissors is used for both "accident" and "technical" characteristics , deeply loved by people all over the world.
Rules of the game: Rock beats scissors, cloth wraps rock, scissors cuts cloth.
Now, you need to write a program to judge the outcome of the rock-paper-scissors game.
Project effect display:
Corresponding material:
Code implementation idea:
-
Prepare corresponding materials for interface effect display.
-
Set two img tags on the top of the box, src is displayed dynamically, the left side represents the player, and the right side represents the computer.
-
Set a timer in JS to switch the background image every 0.1 seconds to achieve a flickering effect.
-
Dynamically assign the loading animation to the image representing the player, and realize the selected area at the bottom of the page so that the user can click.
-
Realize the click event of the picture. When clicking, modify the src value of the picture representing the player on the top, and stop the blinking of the picture on the right representing the computer at the same time, and judge the choice of the computer through the subscript.
-
While assigning a value to the player's picture, stop the blinking of the computer's picture, get its src, determine which side wins and display it on the page.
-
Implement the button at the bottom of the page to reset the page data when clicked.
Implementation code:
<template>
<div class="box">
<h1>石头剪刀布</h1>
<div class="boxli">
<div class="top">
<p>
你已获胜了<span class="id">{
{ id }}</span> 次
</p>
<div class="liimg">
<img src="@/assets/logo.gif" id="img" />
<span>{
{ text }}</span>
<img :src="list[index].image" alt="" />
</div>
</div>
<div class="bottom">
<img
v-for="item in list"
:key="item.id"
:src="item.image"
@click="add(item.id)"
/>
</div>
<div class="btn" @click="btn">再来一局</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
id: 1,
image: require("@/assets/one.png"),
},
{
id: 2,
image: require("@/assets/two.png"),
},
{
id: 3,
image: require("@/assets/three.png"),
},
],
index: 0,
setInter: "",
text: "",
id: 0,
};
},
mounted() {
this.SetInter();
},
methods: {
SetInter() {
this.setInter = setInterval(() => {
this.index++;
if (this.index === 3) {
this.index = 0;
}
}, 100);
},
add(id) {
let img = document.getElementById("img");
if (img.src === "http://localhost:8080/img/logo.b990c710.gif") {
img.src = this.list[id - 1].image;
clearInterval(this.setInter);
switch (this.index) {
case 0:
if (id - 1 === 0) {
this.text = "平局了";
} else if (id - 1 === 1) {
this.text = "获胜了";
} else if (id - 1 === 2) {
this.text = "失败了";
}
break;
case 1:
if (id - 1 === 0) {
this.text = "失败了";
} else if (id - 1 === 1) {
this.text = "平局了";
} else if (id - 1 === 2) {
this.text = "获胜了";
}
break;
case 2:
if (id - 1 === 0) {
this.text = "获胜了";
} else if (id - 1 === 1) {
this.text = "失败了";
} else if (id - 1 === 2) {
this.text = "平局了";
}
break;
}
if (this.text === "获胜了") {
this.id++;
console.log(this.id);
}
}
},
btn() {
let img = document.getElementById("img");
if (img.src !== "http://localhost:8080/img/logo.b990c710.gif") {
img.src = require("@/assets/logo.gif");
this.SetInter();
this.text = "";
}
},
},
};
</script>
<style lang="scss" scoped>
.box {
text-align: center;
h1 {
margin: 20px 0;
}
.boxli {
width: 800px;
height: 550px;
border: 1px solid red;
margin: 0 auto;
.top {
img {
width: 200px;
height: 200px;
}
.liimg {
display: flex;
justify-content: center;
align-items: center;
}
span {
display: inline-block;
width: 100px;
color: red;
text-align: center;
}
.id {
width: 30px;
margin-top: 20px;
}
}
}
.btn {
width: 200px;
height: 50px;
background-image: linear-gradient(to right, #ff00ad, #f09876);
margin: 0 auto;
line-height: 50px;
color: #fff;
border-radius: 10px;
}
}
</style>
Summarize:
Finally, please help me to click, thank you for your help
I am participating in the 2022 "Blog Star" annual general selection, please help me support and give me a five-star.
|
Click to go to my selection page:
|
You just need to give me five stars according to the picture, thank you for your help.
The above is a small guessing game based on Vue. If you don’t understand it, you can ask me in the comment area or chat with me privately. I will continue to release some new functions in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog