前言

文章使用Vue框架来制作,对Vue感兴趣的小伙伴可以点点收藏哦。

一、效果图片

二、使用步骤

1.代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><style>#app {font-family: "microsoft yahei";position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: url('images/bg.jpg') center / cover}#mine {position: absolute;bottom: 5vh;width: 100%;text-align: center;}#computer {position: absolute;top: 5vh;width: 100%;text-align: center;transform: scale(0.6);}#computer.closed {transform-style: preserve-3d;perspective: 1000px;}img {border-radius: 0.6vw;box-shadow: 1px 1px 3vw rgba(0, 0, 0, 0.5);}#computer.closed img {transform: rotateX(30deg);}#call {position: fixed;top: 50vh;width: 320px;left: calc(50% - 160px);background: rgba(255, 255, 255, 0.8);box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.6);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 10px;z-index: 99;height: 150px;font-size: 30px;text-align: center;padding-top: 10px;line-height: 60px;color: #fff;text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);font-weight: bold;}a {float: left;text-decoration: none;color: #fff;width: 120px;margin: 15px;text-align: center;height: 40px;line-height: 40px;border-radius: 25px;border: 5px solid #fff;font-weight: bold;font-size: 20px;box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB9736), to(#F20000), color-stop(0.5, #EB5002))}#call a:hover {-webkit-filter: saturate(160%);}#call a:last-child {background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#76C0EB), to(#4455F2), color-stop(0.5, #238EEB))}#result {position: relative;margin: 0 auto;width: 300px;top: 30vh;background: rgba(255, 255, 255, 0.9);box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);padding: 10px 15px;z-index: 999;border-radius: 1vw;}h1 {text-align: center;}#result a:last-child {background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#76C0EB), to(#4455F2), color-stop(0.5, #238EEB))}</style></head><body><div id="app"><div id="call" v-if="status.playerRound&&!status.end"><div class="score">当前点数： {{playerScore}}</div><div><a href="javascript:void(0)" @click="playerCall()">叫牌</a><a href="javascript:void(0)" @click="playerStop()">弃牌</a></div></div><div id="computer" :class="{closed:!status.end}"><img v-for="poker in computerPokers" :src="status.end?'images/'+poker.text+'.jpg':'images/背面.png'"style="height:15vw;"></div><div id="mine"><img v-for="poker in playerPokers" :src="'images/'+poker.text+'.jpg'" style="height:15vw;"></div><div id="result" v-if="status.end"><h1 v-if="(computerScore>21&&playerScore>21)||(computerScore==playerScore)">平局</h1><h1 v-else>失败</h1><p>玩家：{{playerScore}}</p><p>对手：{{computerScore}}</p><a href="javascript:void(0)" @click="restart()">再来一局</a></div></div><script>var app = new Vue({el: "#app",data: {pokers: [], //牌组status: {computerStop: false, //电脑对手是否不再叫牌playerStop: false, //玩家是否不再叫牌playerRound: true, //当前是否轮到玩家出牌，为true显示操作框体end: false //游戏是否已结束},playerPokers: [], //玩家的所有手牌computerPokers: [] //电脑对手的所有手牌},computed: {//玩家分数playerScore() {return this.getScore(this.playerPokers);},//电脑分数computerScore() {return this.getScore(this.computerPokers)}},methods: {//重开游戏restart() {//初始化并打乱牌组this.pokers = this.createPokers();this.randomPokers();//初始化默认值this.status.playerStop = false;this.status.computerStop = false;this.status.end = false;this.playerPokers = [];this.computerPokers = []//给两人各发一张牌this.playerPokers.push(this.pokers.pop());this.computerPokers.push(this.pokers.pop());//进入玩家轮this.gotoPlayerRound()},//生成牌组createPokers() {var huase = ["方块","黑桃","红心","梅花"]var suzi = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K']return pokers;},//按牌组的随机数r进行排序，打乱牌组顺序randomPokers() {this.pokers.sort((a, b) => {if (a.r == b.r) {return 0} else if (a.r > b.r) {return 1;} else {return -1;}})},//用户点击弃牌playerStop() {//游戏未结束才执行if (!this.status.end) {//设置玩家不再叫牌this.status.playerStop = true;//检查是否游戏结束this.checkEnd()//进入电脑对手的回合this.gotoComputerRound()}},//进入玩家轮//进入电脑轮gotoComputerRound() {//游戏未结束才执行if (!this.status.end) {//设置进入电脑的回合，以关闭用户操作对话框this.status.playerRound = false;//设置了500毫秒延迟，显得真实些。js的异步模式回调函数,不加箭头指向windows,加箭头由于找不到this会向上找setTimeout(() => {if (this.computerScore > 19) {//得分大于19分//电脑不再叫牌this.status.computerStop = true;} else {//否则叫牌，从牌组取第一张，移入电脑对手的手牌中this.computerPokers.push(this.pokers.pop());}//检查游戏是否结束this.checkEnd()//进入玩家的回合this.gotoPlayerRound();}, 500)}},//返回分数return score;},//检查是否需要结束checkEnd() {if (this.computerScore > 21 || this.playerScore > 21) {//任意人爆牌，结束游戏this.status.end = true;} else if (this.status.playerStop && this.status.computerStop) {//两人都不再叫牌，结束游戏this.status.end = true;}}}})</script></body>
</html>

总结

原创不易,麻烦各位用你的小手点亮star。

基于Vue所制作的发牌游戏(附全部代码)相关推荐

vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
html九图拼图游戏代码,基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列 ...
Vue 知识点汇总（下）--附案例代码及项目地址
文章目录 Vue 预备知识与后续知识及项目案例一.简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 2.Vue.js安装二.Vue知识量化三.内容 1.Webpack 详解 ...
沃拼图游戏软件测试,超完整的手机拼图游戏附测试代码本科毕业论文.doc
超完整的手机拼图游戏附测试代码本科毕业论文本科毕业设计设计题目基于J2ME手机拼图游戏的关键技术研究与实现姓名(学号) 系别专业通信工程导师姓名二○一二年 ...
基于TextRank算法的文本摘要（附Python代码）
基于TextRank算法的文本摘要(附Python代码): https://www.jiqizhixin.com/articles/2018-12-28-18
智能窗帘传感器c语言程序,基于单片机的智能窗帘控制系统设计(附程序代码)
基于单片机的智能窗帘控制系统设计(附程序代码)(论文18000字,程序代码) 摘要:二十一世纪初以来,科学技术不断发展,智能家居涌现于各家各户,人们越来越重视生活质量的提高.但是传统的手动开合窗帘耗时 ...
基于YOLOv4的目标检测系统（附MATLAB代码+GUI实现）
摘要:本文介绍了一种MATLAB实现的目标检测系统代码,采用 YOLOv4 检测网络作为核心模型,用于训练和检测各种任务下的目标,并在GUI界面中对各种目标检测结果可视化.文章详细介绍了YOLOv4的 ...
java 3 3数字拼图,基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列 ...

基于Vue所制作的发牌游戏(附全部代码)

文章目录

前言

一、效果图片

二、使用步骤

1.代码如下

总结

基于Vue所制作的发牌游戏(附全部代码)相关推荐

最新文章

热门文章