摘要：与传统的APP而言，小程序使用起来更加的方便，它的传播速度也非常的快。小程序依托在微信生态小程序上，在社群营销和引流上有着得天独厚的优势，逐渐为大众使用并替代手机上的APP。

因此本次设计是基于小程序的基础上，使用Canvas元素在指定位置绘制地图和猫咪并通过JavaScript脚本语言实现一系列小程序操作。小程序内容主要为地图中间的猫咪想要逃到地图的边界，玩家需要通过设置障碍来阻止猫咪逃离，围困猫咪。玩家每设置一个障碍，猫咪便会移动一步，猫咪的移动算法主要为广搜算法，利用该算法找到最近路口，然后往该路口前进。玩家就需要预测走向，设置障碍，让它无路可走，便是取得小游戏的胜利。

 

关键词：小程序；Canvas；JavaScript；广搜算法

 

目 录

摘 要

Abstract

1 绪论-1

1.1 课题背景-1

1.2 课题研究的意义-1

1.3 研究现状-2

1.4 本文组织结构-2

2 技术可行性研究-3

2.1 小程序的技术介绍-3

2.1.1 WXML介绍-3

2.1.2 WXSS介绍-3

2.1.3 逻辑层和渲染层-3

2.1.4  Canvas简介-4

2.2 章节总结-5

3 需求分析-6

3.1 小程序需求分析-6

3.1.1 小程序流程分析-6

3.1.2 小程序结束判断分析-6

3.2 可行性分析-7

3.3 地图设计分析-7

3.3.1 地图设计-7

3.3.2 点击位置-7

3.3.3 目标移动位置-8

4 小程序设计概括-9

4.1 开发环境与软件-9

4.1.1 开发环境-9

4.1.2 开发软件-9

4.2 总体设计-9

4.2.1 功能板块划分-9

4.2.2 功能具体要求-9

4.3 页面设计及算法简介-10

4.3.1 页面设计-10

4.3.2 算法简介-10

4.4 小程序的玩法说明-13

5 小程序详细设计-15

5.1 小程序结构目录-15

5.2 小程序配置-15

5.3 小程序功能的实现-16

5.3.1 开始界面-16

5.3.2 关卡选择界面-17

5.3.3 小程序界面-18

5.4 算法的详细设计-22

5.5 测试-26

6 总结-29

参 考 文 献-30

致谢-31