拼图游戏-小程序游戏

 

掌握<canvas>组件和绘图API

本项目一共需要两个页面：首页和游戏页面。首页用于呈现关卡菜单，点击对应难度的关卡后进入游戏画面。

首页功能需求：

（1）包含标题和关卡列表

（2）关卡至少要有6个关卡选项，每个关卡显示预览图片和第几关

（3）点击关卡列表可以打开对应的游戏界面

游戏页功能需求：

（1）游戏页面需要显示游戏提示图，游戏画面，“重新开始”按钮

(2) 每关游戏提示图显示对应的图片预览

（3）游戏画面随机将原图打乱为3x3的小方块，并且可移动被点击的方块。

（4）点击“重新开始”按钮可以重新随机打乱小方块并开始游戏

创建页面文件

需创建index首页页面和game游戏页面

页面设计

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#E64344",
    "navigationBarTitleText": "拼图游戏"
  }
}

app.wxss

/**app.wxss**/
.container{
  height: 100vh;
  color: #E64340;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
/* 顶端标题样式 */
.title{
  font-size: 18pt;
}

index.wxml

<!--index.wxml-->
<view class="container">
<!-- 标题 -->
<view class="title"> 游戏选关 </view>
<!-- 关卡列表 -->
<view class="levelBox">
  <view class="box">
    <image src="/images/p1.jpg"></image>
    <text>第一关</text>
  </view>
</view>
</view>

index.wxss

/**index.wxss**/
/* 关卡列表区域 */
.levelBox{
  width: 100%;
}
/* 单个关卡区域 */
.box{
  width: 50%;
  float: left;
  margin: 25rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 选关图片 */
image{
  width: 260rpx;
  height: 260rpx;
}

游戏页面设计

游戏页面需要用户点击首页的关卡列表，然后在新窗口中打开该页面。游戏页面包括游戏提示图，游戏画面和“重新开始”按钮

由于暂时没有做点击跳转的逻辑设计，可以在开发工具顶端选择“普通编译”下的“添加编译模式”，并携带临时测试参数level=pi1.jpg

---

游戏页面设计

<!--pages/game/game.wxml-->

<view class="container">
<!-- 提示图区域 -->
<view class="title"> 提示图 </view>
    <image src="/images/p1.jpg"></image>
  <!-- 游戏画布 -->
  <canvas canvas-id="myCanvas"></canvas>

  <!-- 重新开始按钮 -->
  <button type="warn">重新开始</button>
</view>

/* pages/game/game.wxss */
/* 提示图样式 */
image{
  width: 250rpx;
  height: 250rpx;
}

/* 画布样式 */
canvas{
  border: 1rpx solid;
  widows: 300rpx;
  height: 300rpx;
}

---

逻辑实现

首页逻辑

首页功能主要是展示关卡列表，点击图片能跳转到游戏界面

关卡列表展示

在JS文件的data中录入关卡图片的数据信息。

index.js

 */
  data: {
    levels:[
      'p1.jpg',
      'p2.jpg',
      'p3.jpg',
      'p4.jpg',
      'p5.jpg',
      'p6.jpg'
    ]
  },

<view>组件添加wx:for属性循环显示关卡列表数据和图片

index.wxml

<!-- 关卡列表 -->
<view class="levelBox">
  <view class="box" wx:for="{
  {levels}}" wx:key="levels{
  {index}}">
    <image src="/images/{
  {item}}"></image>
    <text>第{
  {index+1}}关</text>
  </view>
</view>

点击跳转游戏页面

若需要用户点击图片即可实现跳转，需要首先为关卡列表项目添加点击事件

index.wxml

<!-- 关卡列表 -->
<view class="levelBox">