vue制作3*3拼图

最新推荐文章于 2023-08-30 11:11:48 发布

三分梦

最新推荐文章于 2023-08-30 11:11:48 发布

阅读量644

点赞数 1

文章标签： vue.js es6

本文链接：https://blog.csdn.net/sjh686/article/details/105699660

版权

本文分享了如何使用Vue.js制作一个简单的3x3拼图游戏。介绍了游戏规则，即在3x3网格中有一个空位，通过点击周围卡片交换位置，直至拼成目标图像。文章详细讲解了样式设置、卡片序列的随机生成、卡片点击后的移动判断以及拼图成功的条件。通过这个教程，读者可以了解如何制作此类小游戏。

摘要由CSDN通过智能技术生成

自从上次发布了vue制作抓娃娃机经验之后，好多朋友来私信我让我多分享一些小游戏的经验。（看来友友们对这种小游戏还是挺感兴趣哦_捂脸笑）
好了，回归正题。今天给大家带来一个比较简单的小游戏——拼图。想必大家平时或多或少都玩过拼图游戏吧，我记得小时候经常偷偷用我爸爸的手机玩上面的拼图小游戏，简单的有2×2，3×3甚至有4×4、5×5等等复杂的难关。作为玩者我们是在研究如何过关，而对于我们程序猿来说，我们是不是应该研究研究这些游戏怎么做出来的呢。今天它来啦~~
老样子，先看效果图。

首先介绍规则：3×3的方格中，有一处是空白，点击空白周围的卡片，使其移动，直至拼成最终效果图（页面下方有成品图，这里录gif的时候没带上）。
第一步，上样式：

      <div class="game">
        <ul class="puzzle-wrap">
          <li
            v-for="(puzzle, index) in puzzles"
            :key="puzzle.id"
            :class="{'puzzle': true, 'puzzle-empty': !puzzle}"
            @click="move(puzzle,index)"
          >