基于Vue所制作的发牌游戏(附全部代码)
生活随笔
收集整理的這篇文章主要介紹了
基于Vue所制作的发牌游戏(附全部代码)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 前言
- 一、效果圖片
- 二、使用步驟
- 1.代碼如下
- 總結(jié)
前言
文章使用Vue框架來(lái)制作,對(duì)Vue感興趣的小伙伴可以點(diǎn)點(diǎn)收藏哦。
一、效果圖片
二、使用步驟
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">當(dāng)前點(diǎn)數(shù)： {{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>對(duì)手：{{computerScore}}</p><a href="javascript:void(0)" @click="restart()">再來(lái)一局</a></div></div><script>var app = new Vue({el: "#app",data: {pokers: [], //牌組status: {computerStop: false, //電腦對(duì)手是否不再叫牌playerStop: false, //玩家是否不再叫牌playerRound: true, //當(dāng)前是否輪到玩家出牌，為true顯示操作框體end: false //游戲是否已結(jié)束},playerPokers: [], //玩家的所有手牌computerPokers: [] //電腦對(duì)手的所有手牌},computed: {//玩家分?jǐn)?shù)playerScore() {return this.getScore(this.playerPokers);},//電腦分?jǐn)?shù)computerScore() {return this.getScore(this.computerPokers)}},methods: {//重開游戲restart() {//初始化并打亂牌組this.pokers = this.createPokers();this.randomPokers();//初始化默認(rèn)值this.status.playerStop = false;this.status.computerStop = false;this.status.end = false;this.playerPokers = [];this.computerPokers = []//給兩人各發(fā)一張牌this.playerPokers.push(this.pokers.pop());this.computerPokers.push(this.pokers.pop());//進(jìn)入玩家輪this.gotoPlayerRound()},//生成牌組createPokers() {var huase = ["方塊","黑桃","紅心","梅花"]var suzi = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K']return pokers;},//按牌組的隨機(jī)數(shù)r進(jìn)行排序，打亂牌組順序randomPokers() {this.pokers.sort((a, b) => {if (a.r == b.r) {return 0} else if (a.r > b.r) {return 1;} else {return -1;}})},//用戶點(diǎn)擊棄牌playerStop() {//游戲未結(jié)束才執(zhí)行if (!this.status.end) {//設(shè)置玩家不再叫牌this.status.playerStop = true;//檢查是否游戲結(jié)束this.checkEnd()//進(jìn)入電腦對(duì)手的回合this.gotoComputerRound()}},//進(jìn)入玩家輪//進(jìn)入電腦輪gotoComputerRound() {//游戲未結(jié)束才執(zhí)行if (!this.status.end) {//設(shè)置進(jìn)入電腦的回合，以關(guān)閉用戶操作對(duì)話框this.status.playerRound = false;//設(shè)置了500毫秒延遲，顯得真實(shí)些。js的異步模式回調(diào)函數(shù),不加箭頭指向windows,加箭頭由于找不到this會(huì)向上找setTimeout(() => {if (this.computerScore > 19) {//得分大于19分//電腦不再叫牌this.status.computerStop = true;} else {//否則叫牌，從牌組取第一張，移入電腦對(duì)手的手牌中this.computerPokers.push(this.pokers.pop());}//檢查游戲是否結(jié)束this.checkEnd()//進(jìn)入玩家的回合this.gotoPlayerRound();}, 500)}},//返回分?jǐn)?shù)return score;},//檢查是否需要結(jié)束checkEnd() {if (this.computerScore > 21 || this.playerScore > 21) {//任意人爆牌，結(jié)束游戲this.status.end = true;} else if (this.status.playerStop && this.status.computerStop) {//兩人都不再叫牌，結(jié)束游戲this.status.end = true;}}}})</script></body> </html>總結(jié)
原創(chuàng)不易,麻煩各位用你的小手點(diǎn)亮star。
總結(jié)
以上是生活随笔為你收集整理的基于Vue所制作的发牌游戏(附全部代码)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JVM原理和优化GC清理
- 下一篇： vue分页单位设置为中文格式