| Vue3寫了個(gè)拼圖華容道小游戲(可線上體驗(yàn)) | 您所在的位置：網(wǎng)站首頁(yè) › 屬雞的媽媽與屬牛的兒女合嗎 › Vue3寫了個(gè)拼圖華容道小游戲(可線上體驗(yàn)) |
Vue3寫了個(gè)拼圖華容道小游戲(可線上體驗(yàn))
|
我正在參加掘金社區(qū)游戲創(chuàng)意投稿大賽個(gè)人賽，詳情請(qǐng)看：游戲創(chuàng)意投稿大賽 技術(shù)棧：Vue3 + TypeScript + Vite + Element-Plus 游戲體驗(yàn)地址(pc)：wmuhua.com/games/puzzl… 開源地址：github.com/wmuhua/vue3… 沒有適配手機(jī)端哦，建議pc端玩，歡迎體驗(yàn) 游戲介紹先看看界面 如圖，可以自選難度和自選闖關(guān)圖片。可以用鼠標(biāo)點(diǎn)擊移動(dòng)圖片，也可以按鍵盤上下左右鍵，來(lái)看看你最快能用多少步拼好吧[狗頭] 源碼不多，有興趣的可以去看看，這個(gè)雖然用到的技術(shù)很一般很簡(jiǎn)單，基本是普通的 JS，但是也花了我不少時(shí)間，特別是圖片。確定整體風(fēng)格，找背景圖、游戲框。也是前兩天假期，喊我女朋友幫忙找圖片，也找了很多圖片讓她幫忙參考，畢竟她的審美比我強(qiáng)，我就粗漢子 核心思路 游戲等級(jí)(level)，比如初級(jí)，等級(jí)數(shù)值定為3，游戲界面就是三行三列，中級(jí)等級(jí)數(shù)值為4，游戲界面就是四行四列，即當(dāng)前等級(jí)的平方，就是小格子總數(shù)量 游戲開始后以格子總數(shù)量為最大值，來(lái)生成隨機(jī)數(shù)的數(shù)組 randomData，初級(jí)如：[3,1,7,2,4,8,6,5,9]，遍歷生成小圖片，最大數(shù)值為空白格子，就是9 并根據(jù)當(dāng)前等級(jí)生成拼圖完成時(shí)的數(shù)據(jù) finishData，初級(jí)如：123456789 點(diǎn)擊或鍵盤按鍵的時(shí)候?qū)⒎蠗l件的，randomData 里的目標(biāo)格子和空白格子對(duì)應(yīng)的值，交換，然后自動(dòng)更新視圖，完成移動(dòng) 每走一步時(shí)，統(tǒng)計(jì)步數(shù)，并檢查 randomData().join('') == finishData，相等即拼圖完成 核心代碼注意看注釋哦 html以下就是拼圖區(qū)域全部html，根據(jù)狀態(tài) isStart 控制是否是處于游戲狀態(tài) 華容道getSmallImg 這個(gè)方法是用于動(dòng)態(tài)引入圖片的，畢竟不是 webpack，沒有 require 那么方便 // 獲取當(dāng)前游戲小圖片 export const getSmallImg = (path: string) => { return new URL(`../assets/images/${path}`, importa.url).href } 拼圖類js 部分主要是封裝了一個(gè)類，方便統(tǒng)一管理作 // 拼圖類 class Puzzle implements IPuzzle { isStart = false // 游戲狀態(tài) randomData: Array = [] // 亂序的，對(duì)應(yīng)當(dāng)前游戲小圖片張數(shù)的數(shù)組 finishData = "" // 正序的，拼圖完成時(shí)的排序，用來(lái)對(duì)比 gameImg = "" // 游戲主圖 level = 3 // 游戲等級(jí) step = 0 // 游戲步數(shù) constructor() {} // 初始化 init({ gameImg, level }: IMode) { this.step = 0 this.level = level this.gameImg = gameImg // 生成當(dāng)前游戲隨機(jī)數(shù)數(shù)組 this.randomData = this.getRandomData() this.isStart = !this.isStart // 如果是開始游戲，就計(jì)算出拼圖完成時(shí)的數(shù)據(jù) if (this.isStart) this.finishData = this.getFinishData() } // 移動(dòng)圖片 move(idx: number) {} // 鍵盤事件 onKeyDown(code: number){} // 檢查是否拼圖完成 finish() {} // 生成小圖片數(shù)量數(shù)組 getRandomData(){} } 生成隨機(jī)圖片數(shù)量就是在點(diǎn)擊開始游戲的時(shí)候會(huì)執(zhí)行 getRandomData，生成隨機(jī)數(shù)數(shù)組，然后 DOM 部分就遍歷這個(gè)生成的隨機(jī)數(shù)數(shù)組，渲染切碎了的小圖片 // 生成小圖片數(shù)量數(shù)組 getRandomData() { // 隨機(jī)數(shù)集合 let randomArr = [] // 根據(jù)游戲等級(jí)生成最大值，減1是因?yàn)樽畲笾当Ａ糇骺瞻孜环抛詈? let max = Math.pow(this.level, 2) - 1 while (randomArr.length < max) { // 生成一個(gè)最大值范圍內(nèi)的隨機(jī)數(shù) let random = Math.floor(Math.random() * max) + 1 if (randomArr.indexOf(random) == -1) { // 沒有重復(fù)的就添加 randomArr.push(random) } } randomArr.push(max + 1) // 添加最大數(shù)字作為最后的空白位 return randomArr // 如：[3, 1, 7, 2, 4, 8, 6, 5, 9] } 移動(dòng)圖片接收一個(gè)參數(shù)，就是在遍歷隨機(jī)數(shù)數(shù)組 randomData 的時(shí)候，對(duì)應(yīng)每個(gè)圖片的值，鼠標(biāo)點(diǎn)擊的時(shí)候拿到這個(gè)值 // 移動(dòng)圖片 move(idx: number) { let level = this.level let target = this.randomData.indexOf(idx) // 當(dāng)前點(diǎn)擊位置下標(biāo) let space = this.randomData.indexOf(Math.pow(level, 2)) // 空白位置下標(biāo) // 過濾一下，不然空白位置在最左邊時(shí)點(diǎn)擊右邊上一個(gè)數(shù)字時(shí)也能實(shí)現(xiàn)交換 // 以及空白位置在最右邊點(diǎn)擊左邊下一個(gè)數(shù)字時(shí)也能實(shí)現(xiàn)交換 let condition = (space % level == 0 && target % level == level - 1) || (space % level == level - 1 && target % level == 0) // 如果能交換 if (!condition) { // 并且點(diǎn)擊目標(biāo)的，上或下或左或右是空白位，就交換位置 if ( target == space - level || target == space + level || target == space - 1 || target == space + 1 ) { this.change(space, target) } } } // 動(dòng)起來(lái) change(space: number, target: number) { // 空白位置替換成目標(biāo)位置 this.randomData[space] = this.randomData[target] // 目標(biāo)位置為最大值，實(shí)現(xiàn)交換 this.randomData[target] = Math.pow(this.level, 2) // 步數(shù) this.step += 1 // 檢查是否完成 this.finish() } 鍵盤事件按下鍵盤上下左右的時(shí)候，判斷空格位置對(duì)應(yīng)你按的那個(gè)方向能不能移動(dòng)，符合條件就替換 // 鍵盤事件 onKeydown(code: number) { let level = this.level // 目標(biāo)位置下標(biāo) let target // 空白位置下標(biāo) let space = this.randomData.indexOf(Math.pow(level, 2)) // 上下左右 switch (code) { case 37: target = space + 1 if (space % level == level - 1) return this.change(space, target) break case 38: target = space + level if (target > this.randomData.length - 1) return this.change(space, target) break case 39: target = space - 1 if (space % level == 0) return this.change(space, target) break case 40: target = space - level if (target < 0) return this.change(space, target) break } } 拼圖完成思路是把當(dāng)前亂序的 randomData 轉(zhuǎn)為字符串，和正序的 finishData 作對(duì)比，如果一樣了，就是拼圖完成了 // 檢查是否拼圖完成 finish() { // 如：'312' == '123' if (this.randomData.join("") == this.finishData) { ElMessageBox.alert(`恭喜你，闖關(guān)成功，僅用${this.step}步`, "提示", { confirmButtonText: "OK", callback: (action: Action) => { this.randomData = [] this.step = 0 this.isStart = false }, }) } } // 根據(jù)不同難度生成拼圖完成時(shí)的數(shù)據(jù)用來(lái)對(duì)比，判斷是否完成 // 比如初級(jí)難度就是：123456789 getFinishData(): string { let str = "" for (let i = 1, len = Math.pow(this.level, 2); i |
【本文地址】