欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何基于Vue制作一個猜拳小游戲

 更新時間:2023年01月05日 10:12:10   作者:清風?與我  
Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項目的新的思維模式,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue制作一個猜拳小游戲的相關(guān)資料,需要的朋友可以參考下

前言:

在工作學習之余玩一會游戲既能帶來快樂,還能緩解生活壓力,跟隨此文一起制作一個小游戲吧。

描述:
石頭剪子布,是一種猜拳游戲。起源于中國,然后傳到日本、朝鮮等地,隨著亞歐貿(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)方案

    這篇文章主要介紹了element table組件內(nèi)容換行的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • Vue代理報錯404問題及解決(vue配置proxy)

    Vue代理報錯404問題及解決(vue配置proxy)

    這篇文章主要介紹了Vue代理報錯404問題及解決(vue配置proxy),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue登錄頁面設(shè)置驗證碼input框的方法

    vue登錄頁面設(shè)置驗證碼input框的方法

    這篇文章主要為大家詳細介紹了vue登錄頁面設(shè)置驗證碼input框的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue3關(guān)于RouterView插槽和過渡動效

    vue3關(guān)于RouterView插槽和過渡動效

    這篇文章主要介紹了vue3關(guān)于RouterView插槽和過渡動效,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue中的使用token的方法示例

    vue中的使用token的方法示例

    這篇文章主要介紹了vue中的使用token的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案

    vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案

    這篇文章主要介紹了vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題,輸入框要掉兩個接口,根據(jù)第一個驗證接口返回的code,彈不同的框,點擊彈框確認再掉第二個接口,需要的朋友可以參考下
    2022-12-12
  • Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示

    Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示

    這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-12-12
  • Vue 項目中如何使用fullcalendar 時間段選擇插件(類似課程表格)

    Vue 項目中如何使用fullcalendar 時間段選擇插件(類似課程表格)

    最近完成一個項目,需要選擇一個會議室,但是最好能夠通過在圖上顯示出該 會議室在某某時間段內(nèi)已經(jīng)被預(yù)定了,初看這個功能感覺很棘手,仔細分析下實現(xiàn)起來還是挺容易的,下面通過示例代碼講解Vue項目中使用fullcalendar時間段選擇插件,感興趣的朋友一起看看吧
    2024-07-07
  • 通過cordova將vue項目打包為webapp的方法

    通過cordova將vue項目打包為webapp的方法

    這篇文章主要介紹了通過cordova將vue項目打包為webapp的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • 淺析Vue3如何實現(xiàn)頁面訪問攔截

    淺析Vue3如何實現(xiàn)頁面訪問攔截

    在Vue3中,頁面訪問攔截(Navigation?Guards)是一種常見的路由控制機制,那么Vue3具體是如何實現(xiàn)這一功能的呢,下面就跟隨小編一起來學習一下吧
    2024-03-03

最新評論