前言：

在工作学习之余玩一会游戏既能带来快乐，还能缓解生活压力，跟随此文一起制作一个小游戏吧。

描述：
石头剪子布，是一种猜拳游戏。起源于中国，然后传到日本、朝鲜等地，随着亚欧贸易的不断发展它传到了欧洲，到了近现代逐渐风靡世界。简单明了的规则，使得石头剪子布没有任何规则漏洞可钻，单次玩法比拼运气，多回合玩法比拼心理博弈，使得石头剪子布这个古老的游戏同时用于“意外”与“技术”两种特性，深受世界人民喜爱。
游戏规则：石头打剪刀，布包石头，剪刀剪布。
现在，需要你写一个程序来判断石头剪子布游戏的结果。

项目效果展示：

对应素材：

代码实现思路：

准备对应的素材用于界面效果展示。
在盒子中上面设置两个 img 标签，src 用动态展示，左侧代表玩家，右侧代表电脑。
在JS中设置定时器，每隔0.1秒切换背景图，达到一个闪烁的效果。
给代表玩家的image动态赋值加载中的动画，同时在页面下方实现选择的区域，让用户能够点击。
实现图片的点击事件，当点击时修改上方代表玩家图片的src值，同时停止右侧代表电脑的图片的闪烁，并通过下标判断电脑的选择。
在给玩家图片赋值的同时，停止电脑方图片的闪烁，获取其src，判断哪方获胜并在页面进行显示。
在页面底部实现再来一次按钮，点击时将页面数据进行重置。

实现代码：

<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"><imgv-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>

总结：

最后还请大家帮我点击一下，谢谢大家的帮助

我正在参加 2022年「博客之星」年度总评选，请大家帮我支持一下，给我一个五星。
|
点击前往我的评选页面：
|

大家只要按图给我五星即可，谢谢大家的帮助。

以上就是基于 Vue 制作一个猜拳小游戏，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

基于 Vue 制作一个猜拳小游戏相关推荐

基于java制作一个飞机小游戏（学习心得）
emmm,第一篇博客用了这么久的csdn,都是在观摩大佬们发帖,一只小萌新瑟瑟发抖,不敢说话,甚至连代码也不能完全读懂.假期在b站自学(可以说是复习)了java课程,尚学堂的 2018版.链接如下 ...
基于小程序制作一个猜拳小游戏
在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小程序游戏吧. 创建小程序功能实现界面优化代码块创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填 ...
python连连看小游戏_利用Python制作一个连连看小游戏，边学边玩！
导语今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块环境搭建安装Python并添加到环 ...
小福利，用Excel VBA编程制作一个变色小游戏
小福利,用Excel VBA编程制作一个变色小游戏设计思想:在正方形的四条边上都是设置循环函数,不断改变颜色和单元格里面的数值. Option ExplicitSub 按钮1_Click() Dim ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...
python制作阴阳师脚本_利用python制作一个阴阳师小游戏
利用python制作一个阴阳师小游戏发布时间:2020-11-27 13:59:49 来源:亿速云阅读:84 这期内容当中小编将会给大家带来有关利用python制作一个阴阳师小游戏,文章内容丰富且 ...
PHP的一个猜拳小游戏
echo"<a href='?type=1'>剪刀</a> "; echo"<a href='?type=2'>石头</a> ...
实现石头剪刀布获胜法_用java实现一个猜拳小游戏
本文实例为大家分享了java实现猜拳小游戏的具体代码,供大家参考,具体内容如下项目名称猜拳小游戏项目描述玩家与电脑进行猜拳游戏,玩家行为采用输入方式,电脑行为采用随机形式. 实现: User类 ...
用android做图片翻牌小游戏,vue制作翻牌配对小游戏
简友们,好久不见.最近一直忙于工作没时间来为大家分享经验,刚好上周为联*做了一个七夕活动,是vue做的一个翻牌配对小游戏,上线后吸引了无数广大好友前来挑战.也有好友问我这游戏制作难不难呢,可不可以分享 ...

基于 Vue 制作一个猜拳小游戏

目录

前言：

项目效果展示：

对应素材：

代码实现思路：

实现代码：

总结：

基于 Vue 制作一个猜拳小游戏相关推荐

最新文章

热门文章