2048是一种流行的单人游戏。 该游戏有一个4 x 4的瓷砖网格。 每个磁贴可以为空，也可以有一张有值的卡 。 作为一名玩家，您可以左右移动。 随着卡合并，卡上的数字也会更改。 目标是使卡上的号码尽可能多。 当所有图块都已满并且没有下一步移动时，游戏结束。
您可以在此处找到演示项目，并在此处找到Github存储库。 在本博客文章（第1部分）和下一篇博客文章（第2部分）中，我们将逐步逐步构建游戏！
开始使用项目脚手架
首先，我们需要建立一个项目支架来构建Vue项目。 我们将使用普通的javascript，以便我们了解发生了什么。 让我们从克隆普通的javascript Vue支架开始。 脚手架为我们提供了几个目录：
- 资产 。 所有第三方javascript库，样式表和图像。
- 组件 。 所有本机Vue组件。
- mixins 。 所有本地Vue mixins。
- 存储 。 Vuex存储用于状态管理。
- main.js。 启动新Vue实例的位置。
- index.html 。 显示整个应用的地方。
步骤1.设置游戏板
在这一步中，我们将：
- 用
board创建game组件 - 创建阴影板
- 创建播种功能
首先，我们有一个负责董事会的game组件。 棋盘上有很多图块 ，每个图块的默认值为0。我们可以通过注册组件game ：
src / components / game.js
（（（）=> {
const html =`
`
Vue.component（“ game”，{
模板：html，
数据（）{
返回{
董事会：[]，
}
}，
}）
}））（）
在Vue组件game ，我们有一个数据属性board ，其中包含一个瓦片数组，每个瓦片的默认值均为0。接下来，我们在html添加一个阴影板作为棋盘游戏的基础层。
src / components / game.js
（（（）=> {
const html =`
`
...
}））（）
现在，当您打开index.html ，它应如下所示：
为了开始游戏并继续玩游戏，我们需要给一些磁贴一个可玩的值（即值> 0）。 为此，我们将创建一个seedTwo（）方法。 在每个游戏开始时，我们将使用它来创建开始状态，并且在有效移动之后，我们将使用它来使游戏继续前进
src / components / game.js
Vue.component（“ game”，{
...
方法： {
seedTwo （）{
const self =这个
让getRandomItem = function（）{
让行=
self.board [Math.floor（Math.random（）* self.board.length）]
返回行[Math.floor（Math.random（）* row.length）]
}
让initialRandomItem = getRandomItem（）
while（initialRandomItem.value！= 0）{
initialRandomItem = getRandomItem（）
}
initialRandomItem.value = 2
}
}
}）
...
步骤2.定义对象模型
在这一步中，我们将：
- 创建
Tile()组件 - 根据图块是否为空来修改
Tile()CSS类 - 创建
GameMenu()组件
一块板可以容纳16个平铺的瓷砖，尽管我们将其作为二维阵列展示在板上。 我们在src/components/tile.js下添加了另一个组件tile 。 瓦片组件将瓦片对象作为必需的道具，需要包含{value: X}作为对象的一部分。
src / components / tile.js
（（（）=> {
const html =`
{{值}}
`
Vue.component（“ tile”，{
模板：html，
道具： {
瓦： {
类型：对象，
必填：true
}，
}，
计算：{
value（）{
返回this.tile.value
}，
}
}）
}））（）
请注意，在最终产品中，每个图块的样式都会随着将图块从空（值0）更改为非空（值非0）而改变。 在组件内部，我们根据该值构造计算属性，然后使用计算属性通过类绑定来切换样式：
src / components / tile.js
（（（）=> {
const html =`
{{displayValue}}
`
Vue.component（“ tile”，{
模板：html，
道具： {
瓦： {
类型：对象，
必填：true
}，
}，
计算：{
value（）{
返回this.tile.value
}，
displayValue（）{
如果（this.value> 0）{
返回this.value
}
返回null
}，
emptyTile（）{
返回this.displayingValue === null
}，
}
}）
}））（）
给定我们有一个tile组件，我们将tile重新插入游戏组件：
src / components / game.js
（（（）=> {
const html =`
`
...
}））（）
现在我们有了计算emptyTile的属性emptyTile ，我们可以插入html和toggle类：
src / components / tile.js
（（（）=> {
const html =`
<div class =“ tile” v-bind：class =“ {'tile-empty'：emptyTile} ”>
{{displayValue}}
