如何基于Vue制作一個猜拳小游戲
前言:
在工作學習之余玩一會游戲既能帶來快樂,還能緩解生活壓力,跟隨此文一起制作一個小游戲吧。
描述:
石頭剪子布,是一種猜拳游戲。起源于中國,然后傳到日本、朝鮮等地,隨著亞歐貿(mào)易的不斷發(fā)展它傳到了歐洲,到了近現(xiàn)代逐漸風靡世界。簡單明了的規(guī)則,使得石頭剪子布沒有任何規(guī)則漏洞可鉆,單次玩法比拼運氣,多回合玩法比拼心理博弈,使得石頭剪子布這個古老的游戲同時用于“意外”與“技術(shù)”兩種特性,深受世界人民喜愛。
游戲規(guī)則:石頭打剪刀,布包石頭,剪刀剪布。
現(xiàn)在,需要你寫一個程序來判斷石頭剪子布游戲的結(jié)果。
項目效果展示:
對應(yīng)素材:
代碼實現(xiàn)思路:
準備對應(yīng)的素材用于界面效果展示。
在盒子中上面設(shè)置兩個 img 標簽,src 用動態(tài)展示,左側(cè)代表玩家,右側(cè)代表電腦。
在JS中設(shè)置定時器,每隔0.1秒切換背景圖,達到一個閃爍的效果。
給代表玩家的image動態(tài)賦值加載中的動畫,同時在頁面下方實現(xiàn)選擇的區(qū)域,讓用戶能夠點擊。
實現(xiàn)圖片的點擊事件,當點擊時修改上方代表玩家圖片的src值,同時停止右側(cè)代表電腦的圖片的閃爍,并通過下標判斷電腦的選擇。
在給玩家圖片賦值的同時,停止電腦方圖片的閃爍,獲取其src,判斷哪方獲勝并在頁面進行顯示。
在頁面底部實現(xiàn)再來一次按鈕,點擊時將頁面數(shù)據(jù)進行重置。
實現(xiàn)代碼:
<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>
總結(jié):
到此這篇關(guān)于如何基于Vue制作一個猜拳小游戲的文章就介紹到這了,更多相關(guān)Vue猜拳小游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element table組件內(nèi)容換行的實現(xiàn)方案
這篇文章主要介紹了element table組件內(nèi)容換行的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案
這篇文章主要介紹了vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題,輸入框要掉兩個接口,根據(jù)第一個驗證接口返回的code,彈不同的框,點擊彈框確認再掉第二個接口,需要的朋友可以參考下2022-12-12Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12Vue 項目中如何使用fullcalendar 時間段選擇插件(類似課程表格)
最近完成一個項目,需要選擇一個會議室,但是最好能夠通過在圖上顯示出該 會議室在某某時間段內(nèi)已經(jīng)被預(yù)定了,初看這個功能感覺很棘手,仔細分析下實現(xiàn)起來還是挺容易的,下面通過示例代碼講解Vue項目中使用fullcalendar時間段選擇插件,感興趣的朋友一起看看吧2024-07-07