當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/1/1 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Vue所制作的发牌游戏(附全部代码) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

前言
一、效果圖片
二、使用步驟
- 1.代碼如下
總結

前言

文章使用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所制作的发牌游戏(附全部代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。