基于vite2+vue3制作個招財貓游戲

更新時間：2022年05月26日 15:34:20 作者：jsmask

端午將至，大家都開始吃粽子了么？本文將用vite2與vue3開發(fā)出一個招財貓小游戲，在圖案不停滾動的同時選出可以轉(zhuǎn)出不同的素材最終得到粽子獎勵，康康你能用多少次才會轉(zhuǎn)出自己喜愛口味的粽子吧

介紹

端午將至，大家都開始吃粽子了么，你是喜歡吃北方的甜的紅棗粽？還是南方的大肉粽呢？

本期我們將使用vite2與vue3開發(fā)出一個招財貓小游戲，通過考驗眼力和預(yù)判能力，在圖案不停滾動的同時選出可以轉(zhuǎn)出不同的素材最終得到粽子獎勵，康康你能用多少次才會轉(zhuǎn)出自己喜愛口味的粽子吧~

演示

預(yù)覽地址：jsmask.gitee.io/dwgame_laohuji/

正文

游戲分析

在開發(fā)之前，我們要想好游戲設(shè)計和規(guī)則是如何，才能進行往下進行。通過上圖的演示和規(guī)則介紹，我們大致可以了解游戲流程了。

然后，根據(jù)了解的流程，進行拆解，接下來我們主要會講解這些問題：

招財貓css3幀動畫。
圖案條帶中的素材在vite2的批量加載。
老虎機圖案自定義條帶生成。
老虎機無限滾動。
讓老虎機停止并且獲取抽獎碼。
獲得粽子后的紙屑飛舞效果的實現(xiàn)。

招財動畫

下圖是本期用的所有素材，招財貓招手的是由四張圖拼湊而成的，用了一些在線的雪碧圖生成工具。在里面我們會得到每張圖對應(yīng)的 background-position , 最后再用 animation 來完成這個幀動畫。其中，animation-timing-function:steps(1, end) 是幀動畫實現(xiàn)的核心，steps() 函數(shù)符號定義了一個階梯函數(shù)，將輸出值的域劃分為等距階梯。第一個值是需要傳入正數(shù)，表示等距的數(shù)，而后一個表示插值的位置。

.cat {
  width: 574px;
  height: 630px;
  margin: 0px auto;
  position: relative;
  background-image: url("../assets/image/cat.png");
  background-position: -10px -10px;
  &.active {
    animation: play-game 0.64s steps(1, end) infinite;
  }
  @keyframes play-game {
    0% {
      background-position: -10px -10px;
    }
    33% {
      background-position: -604px -10px;
    }
    66% {
      background-position: -1198px -10px;
    }
    100% {
      background-position: -10px -660px;
    }
  }
}

素材加載

我們后面需要通過canvas合成條帶，所以要先加載出需要轉(zhuǎn)出的圖案來。

按照原始的方案來，我們要手寫好多圖片資源文件的引入，所以十分麻煩。

import item0 from "../assets/image/item_0.png"
import item1 from "../assets/image/item_1.png"
import item2 from "../assets/image/item_2.png"
// ...more
import item9 from "../assets/image/item_9.png"

但是，Vite 中提供了 import.meta.glob 的語法糖來解決這種批量導(dǎo)入的問題，一次性加載出這些圖片文件來。

const imgs = import.meta.globEager("../assets/image/item_*.png");

let num = Object.keys(imgs).length;
let items = Object.values(imgs).map((mod) => {
  let img = new Image();
  img.onload = () => --num <= 0 && initGame();
  img.src = mod.default;
  return img;
});

當然我們這里用 import.meta.globEager 來可以同步加載這些資源。

條帶生成

所謂的條帶，就是老虎機中滾動的背景圖，不停改變 backgroundPositionY 來實現(xiàn)滾動效果，是老虎機的核心，所使用到的條帶自然就是重中之重，但在我們平時開發(fā)條帶一般都是設(shè)計給的圖片，但經(jīng)常替換圖片后又要重新問他們要新圖甚是麻煩。所以，這里我想用 canvas 把剛才的那十張圖案拼接起來，形成條帶供我們使用。上一步，我們已經(jīng)把資源加載完成了，接下來，可以需要寫一個 createBackgroundImage 函數(shù)。

function createBackgroundImage({items = [], w = 45, h = 60, size = 40,test=false}) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  canvas.width = ctx.width = w;
  canvas.height = ctx.height = h * items.length;
  let BackgroundImage = [...items];
  BackgroundImage.forEach((img, i) => {
    ctx.save();
    ctx.drawImage(img, (w - size) / 2, (h - size) / 2 + h * i, size, size);
    if(test){
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.font = "bold 36px Baloo Bhaijaan";
      ctx.fillText(i, w / 2, h * i + h / 2 + 5, w);
    }
    ctx.restore();
  });
  return convertCanvasToImage(canvas);
}

function convertCanvasToImage(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  return image;
}

export default createBackgroundImage;

這里我們不光可以傳入資源數(shù)組，而且可以傳入塊的寬和高，還有圖案的大小，為了方便測試后面驗證開獎碼的正確性，加入 test 字段，如果開啟，則會繪制上對應(yīng)的數(shù)字編號。

無限滾動

當我們點擊開始游戲按鈕后，剛才生成出的條帶就會不停的改變 backgroundPositionY ，那有什么好辦法可以輕松控制這件事呢？

這里我推薦使用anime.js ，它一個功能強大且輕量級的 JavaScript 動畫庫。

# NPM
npm i animejs -S
# YARN
yarn add animejs
# PNPM
pnpm i animejs -S

<ul class="content">
    <li
        ref="block"
        v-for="(item, index) in 3"
        :key="index"
        :style="{ backgroundImage: `url(${backgroundImage.src})` }"
        >
        <button :disabled="stops[index]" @click="handleStop(index)">
            Stop
        </button>
    </li>
</ul>

import anime from "animejs";
function play() {
  if (isActive.value) return false;
  isActive.value = true;
  count.value += 1;
  block.value.forEach((el, index) => {
    setTimeout(() => {
      stops.value[index] = false;
      let y = parseInt(el.style.backgroundPositionY || "0", 10);
      animes.value[index] = anime({
        targets: el,
        backgroundPositionY: [h / 2, h * items.length + h / 2],
        loop: true, // 循環(huán)播放
        direction: "normal", // 方向
        easing: "linear", // 時間曲線
        duration: 1200, // 播放時間
        autoplay: true, // 是否立即播放
      });
    }, index * 240);
  });
}

在 play 方法時，我們獲取當綁定好條帶的元素塊，通過 animejs 給 backgroundPositionY 屬性設(shè)置一個數(shù)組，這個數(shù)組第0位代表起始狀態(tài)，第1位代表要到達的狀態(tài)。然后把 loop 屬性設(shè)置 true 。那么一個簡單的條帶無限滾動就完成了。

中獎判定

function handleStop(index) {
  stops.value[index] = true;
  let el = block.value[index];
  let y = parseInt(el.style.backgroundPositionY || "0", 10);
  animes.value[index].remove(el);
  let n = Math.round((y - h / 2) / h);
  el.style.backgroundPositionY = n * h + h / 2 + "px";
  giftCode.value[index] = (10 - n) % 10;
  if (stops.value.find((item) => !item) === undefined) {
    getResult();
  }
}

當我們每按停一個時，我們會迅速移除對應(yīng)元素 animejs 動畫，計算并賦值給最數(shù)值最接近的坐標點。然后獲取到其對應(yīng)的數(shù)字編號存起來形成抽獎碼數(shù)組，當三個全部停止時，會調(diào)用 getResult 方法來根據(jù)剛才得到的抽獎碼來開獎。

const giftData = [
    {
        name: "紅棗粽",
        score: 100,
        show: true,
        type:1,
        value: ["012", "025", "126", "256"],
    },
    // ...
]
function getResult() {
  let str = giftCode.value.sort().join("");
  let _obj = giftData.find((item) => item.value.includes(str));
  if (!_obj) return (isActive.value = false);
  if (_obj.show) {
    giftObj.value = _obj;
    ruleShow.value = false;
    giftShow.value = true;
  } else {
    confetti();
    hideGift();
  }
}

這里，我們把得到的抽獎碼進行從小往大排列生成字符串，然后在 giftData 數(shù)組中找尋配合的組合，達成后進行不同的獎勵畫面。

紙屑飛舞

這里我使用了 canvas-confetti，它是專門來制作紙屑飛散的動畫庫。其原理是在頁面創(chuàng)建了canvas （也可以指定容器)，然后在里面繪制了幾種形狀可供選擇，通過數(shù)學計算，模擬了很多物理運動來完成紙屑動畫多彩的效果。

# NPM
npm i canvas-confetti -S
# YARN
yarn add canvas-confetti
# PNPM
pnpm i canvas-confetti -S

import confetti from "canvas-confetti";
function handleSucces() {
  let endTime = Date.now() + 3 * 1000;
  const colors = ["#bb0000", "#ffffff"];
  (function frame() {
    confetti({
      particleCount: 2,
      angle: 45,
      spread: 155,
      origin: { x: 0 },
      colors: colors,
    });
    confetti({
      particleCount: 2,
      angle: 135,
      spread: 60,
      origin: { x: 1 },
      colors: colors,
    });
    if (Date.now() < endTime) {
      requestAnimationFrame(frame);
    }
  })();
}