利用Vue.js制作一个拼图华容道小游戏

目录
  • 游戏介绍
  • 核心思路
  • 核心代码
    • html
    • games 类
    • 生成随机图片数量
    • 移动图片
    • 键盘事件
    • 拼图完成
  • 结语

游戏介绍

先看看界面

这是一个拼图游戏,可以自选难度和自选闯关图片

游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功

游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作

游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样

这个虽然用到的技术很一般很简单,多数还是普通的 JS,但是也花了不少时间,特别是图片。确定整体风格,找背景图、游戏框。也是前两天假期,喊我女朋友帮忙找图片,也找了很多图片让她帮忙参考,毕竟她的审美比我强,我就粗汉子

核心思路

  • 游戏等级(level),比如初级,等级数值定为3,游戏界面就是三行三列,中级等级数值为4,游戏界面就是四行四列,即当前等级的平方,就是小格子总数量
  • 游戏开始后以格子总数量为最大值,来生成随机数的数组 randomData,初级如:[3,1,7,2,4,8,6,5,9],遍历生成小图片,最大数值为空白格子,就是9
  • 并根据当前等级生成拼图完成时的数据 finishData,初级如:123456789
  • 点击或键盘按键的时候将符合条件的,randomData 里的目标格子和空白格子对应的值,交换,然后自动更新视图,完成移动
  • 每走一步时,统计步数,并检查 randomData().join('') == finishData,相等即拼图完成

核心代码

注意看注释哦

html

以下就是拼图区域全部html,根据状态 isStart 控制是否是处于游戏状态

<div class="stage">
  <div class="game-name" v-show="!isStart">华容道</div>
  <div class="content clearfix" v-show="isStart">
    <div
      v-for="item in randomData"
      :key="item"
      :class="`img${level}`"
      @click="handleMove(item)"
    >
      <el-image
        v-if="item != randomData.length"
        :src="getSmallImg(`${gameImg}/${level}/${item}.jpg`)"
      ></el-image>
    </div>
  </div>
</div>

getSmallImg 这个方法是用于动态引入图片的,毕竟不是 webpack,没有 require 那么方便

// 获取当前游戏小图片
export const getSmallImg = (path: string) => {
  return new URL(`../assets/images/${path}`, import.meta.url).href
}

games 类

js 部分主要是封装了一个类,方便统一管理操作

// 拼图类
class Puzzle implements IPuzzle {
  isStart = false  // 游戏状态
  randomData: Array<number> = [] // 乱序的,对应当前游戏小图片张数的数组
  finishData = "" // 正序的,拼图完成时的排序,用来对比
  gameImg = ""  // 游戏主图
  level = 3 // 游戏等级
  step = 0 // 游戏步数
  constructor() {}
  // 初始化
  init({ gameImg, level }: IMode) {
    this.step = 0
    this.level = level
    this.gameImg = gameImg
    // 生成当前游戏随机数数组
    this.randomData = this.getRandomData()
    this.isStart = !this.isStart
    // 如果是开始游戏,就计算出拼图完成时的数据
    if (this.isStart) this.finishData = this.getFinishData()
  }
  // 移动图片
  move(idx: number) {}
  // 键盘事件
  onKeyDown(code: number){}
  // 检查是否拼图完成
  finish() {}
  // 生成小图片数量数组
  getRandomData(){}
}

生成随机图片数量

就是在点击开始游戏的时候会执行 getRandomData,生成随机数数组,然后 DOM 部分就遍历这个生成的随机数数组,渲染切碎了的小图片

// 生成小图片数量数组
getRandomData() {
    // 随机数集合
    let randomArr = []
    // 根据游戏等级生成最大值,减1是因为最大值保留作空白位放最后
    let max = Math.pow(this.level, 2) - 1
    while (randomArr.length < max) {
      // 生成一个最大值范围内的随机数
      let random = Math.floor(Math.random() * max) + 1
      if (randomArr.indexOf(random) == -1) {
        // 没有重复的就添加
        randomArr.push(random)
      }
    }
    randomArr.push(max + 1) // 添加最大数字作为最后的空白位
    return randomArr // 如:[3, 1, 7, 2, 4, 8, 6, 5, 9]
}

移动图片

接收一个参数,就是在遍历随机数数组 randomData 的时候,对应每个图片的值,鼠标点击的时候拿到这个值

// 移动图片
move(idx: number) {
    let level = this.level
    let target = this.randomData.indexOf(idx) // 当前点击位置下标
    let space = this.randomData.indexOf(Math.pow(level, 2)) // 空白位置下标

    // 过滤一下,不然空白位置在最左边时点击右边上一个数字时也能实现交换
    // 以及空白位置在最右边点击左边下一个数字时也能实现交换
    let condition =
      (space % level == 0 && target % level == level - 1) ||
      (space % level == level - 1 && target % level == 0)

    // 如果能交换
    if (!condition) {
      // 并且点击目标的,上或下或左或右是空白位,就交换位置
      if (
        target == space - level ||
        target == space + level ||
        target == space - 1 ||
        target == space + 1
      ) {
          this.change(space, target)
      }
    }
}
// 动起来
change(space: number, target: number) {
    // 空白位置替换成目标位置
    this.randomData[space] = this.randomData[target]
    // 目标位置为最大值,实现交换
    this.randomData[target] = Math.pow(this.level, 2)
    // 步数
    this.step += 1
    // 检查是否完成
    this.finish()
}

键盘事件

按下键盘上下左右的时候,判断空格位置对应你按的那个方向能不能移动,符合条件就替换

// 键盘事件
onKeydown(code: number) {
    let level = this.level
    // 目标位置下标
    let target
    // 空白位置下标
    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
    }
}

拼图完成

思路是把当前乱序的 randomData 转为字符串,和正序的 finishData 作对比,如果一样了,就是拼图完成了

// 检查是否拼图完成
finish() {
    // 如:'312' == '123'
    if (this.randomData.join("") == this.finishData) {
      ElMessageBox.alert(`恭喜你,闯关成功,仅用${this.step}步`, "提示", {
        confirmButtonText: "OK",
        callback: (action: Action) => {
          this.randomData = []
          this.step = 0
          this.isStart = false
        },
      })
    }
}
// 根据不同难度生成拼图完成时的数据用来对比,判断是否完成
// 比如初级难度就是:123456789
getFinishData(): string {
    let str = ""
    for (let i = 1, len = Math.pow(this.level, 2); i <= len; i++) {
      str += i
    }
    return str
}

结语

游戏体验地址(pc)

开源地址

以上就是利用Vue.js制作一个拼图华容道小游戏的详细内容,更多关于Vue.js拼图华容道的资料请关注我们其它相关文章!

(0)

相关推荐

  • C#实现数字华容道游戏

    本文实例为大家分享了C#实现数字华容道游戏的具体代码,供大家参考,具体内容如下 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windo

  • VUE+Canvas实现简单五子棋游戏的全过程

    前言 在布局上,五子棋相比那些目标是随机运动的游戏,实现起来相对简单许多,思路也很清晰,总共分为: (1)画棋盘: (2)监听点击事件画黑白棋子: (3)每次落子之后判断是否有5子相连,有则赢. 最复杂的恐怕就是如何判断五子棋赢了,那么就先从简单的开始,画个棋盘吧~ 1.画棋盘 棋盘很简单,我们画个15*15的棋盘,横线竖线相交错: drawCheckerboard() { // 画棋盘 let _this = this; _this.ctx.beginPath(); _this.ctx.fil

  • Vue实现红包雨小游戏的示例代码

    目录 0 写在前面 1 准备工作 2 设计HTML+CSS样式 3 设计JavaScript逻辑 4 完整代码 0 写在前面 红包也叫压岁钱,是过农历春节时长辈给小孩儿用红纸包裹的礼金.据传明清时期,压岁钱大多数是用红绳串着赐给孩子.民国以后,则演变为用红纸包裹.中国的红包传统民族文化在民间如此,社区.公司也奉行如仪.除了春节以外,在其他喜庆场合,例如婚礼.新店开张等亦有送红包的习俗. 本期迎新春专题用代码制作一个 红包雨小游戏 ,效果如下所示.看完本文相信你也可以完成这样一个小游戏设计. 1

  • jQuery实现数字华容道小游戏(实例代码)

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>数字华容道</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> *{

  • C/C++仿华容道小游戏

    本文实例介绍了C++模仿华容道小游戏实现代码,分享给大家供大家参考,具体内容如下 #include <stdio.h> #include <stdlib.h> #include <time.h> #include <stdbool.h> #define maxnum 16 #define colnum 4 bool numexists(int *numbers, int length, int num); int getnumber(int **number

  • python实现数字华容道

    制作Python数字华容道(可选择关卡),供大家参考,具体内容如下 由于比赛需要,我这边制作了一份数字华容道,内含有3,4,5阶的数字华容道,开头在壳窗口内选择,运用了随机数模块(random)和图形化用户界面(tkinter) 下面是程序完整代码 # coding:utf-8 # """ #============================================================ 作者:@Qss 2021年3月20日起草 2021年3月21日完

  • 利用Vue.js制作一个拼图华容道小游戏

    目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简

  • 利用pixi.js制作简单的跑酷小游戏

    目录 前言 项目地址 demo地址 初始化项目 主要逻辑 useParkour useScene useHurdle Player 前言 此项目使用pixi.js和vue实现,部分素材来自爱给网,本项目仅作用于 pixi.js 学习用途,侵权立删. 项目地址 shellingfordly/pixi-games demo地址 pixi-games 初始化项目 使用vite初始化项目 pnpm create vite my-vue-app 安装pixi.js和pixi-tweener pixi-tw

  • 利用Three.js制作一个新闻联播开头动画

    目录 这里才是引言 技术选型 场景分解 代码逻辑分解 创建背景图和背景音乐 背景图 背景音乐 在线体验地址:点我预览 代码地址:点我github 这里才是引言 五一居家隔离,闲着也是闲着,想着整个活儿,于是就有了这个项目. 项目本身不是很难,但是中间确实是遇到了一些小问题,断断续续也是花费了三四天时间才写完,还有一些需要优化的地方,后续有时间再整. 我会从脚手架开始,按照场景中出现的物体顺序逐条进行讲解制作,每个物体将分为独立的一篇文章,方便理解.Go. 技术选型 选用vite作为构建工具: 选

  • 利用原生JS实现欢乐水果机小游戏

    简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单

  • 基于PyQt5制作一个猜数字小游戏

    开始之前,直接来看一下实现后的效果.想自己实现或者需要源码的童鞋直接进场... 将PyQt5的相关模块直接导入即可. from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import * 为了照顾一下新关注的童鞋,这里介绍一下PyQt5的安装,还是采用pip的安装方式. pip install PyQt5 将准备好的样式导入到代码块中. # 主题样式模块引用 from QCandyUi import

  • Pygame代码 制作一个贪吃蛇小游戏

    目录 用到的 Pygame 函数 创建屏幕 创建 snake 使 snake 动起来 处理 Game Over 增加食物 snake 的成长 展示得分 用到的 Pygame 函数 贪吃蛇小游戏用到的函数 功能 描述 init() 初始化 pygame display.set_mode() 以元组或列表为参数创建窗口 update() 更新屏幕 quit() 用于取消初始化的 pygame set_caption() 在屏幕的顶部设置文字 event.get() 返回所有事件的列表 Surface

  • 使用vue.js编写蓝色拼图小游戏

    之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推 该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p

  • 利用Vue.js实现求职在线之职位查询功能

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 知识点: v-on, v-for, v-if, props, $emit,动态Prop, Class 与 Style 绑定 P1 分页查询 查询参数 查询参数:

  • 利用vue.js实现被选中状态的改变方法

    在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &

  • 利用vue.js把静态json绑定bootstrap的table方法

    直接上代码 嘻嘻,发现bootstrap+vue.js拿来做原型效率挺高,以后就这样做原型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.b

随机推荐