论文总字数：30794字

摘 要

伴随着计算机的迅猛发展，计算机编程已经成为各行业、各年龄段人员的基本技能和重要工具。然而，由于编程语言和开发工具的复杂性，计算机编程在各年龄段的普及仍然面临多方面挑战。一方面，面对不断增长的业务需求，互联网企业需要更多非编程人员承担一些程序逻辑难度较低、页面内容繁多的开发任务，但却没有适合的编程工具；另一方面，面对互联网高红利和编程日益重要的现状，越来越多的父母希望孩童能掌握编程技巧，但市面上缺少一种很好的编程语言学习方式。

针对这些问题，文章基于可视化编程的思想，设计和开发出一款可视化编程开发环境，该软件主要目的是希望既可以让低龄儿童通过设计游戏的方式，掌握基础的编程思想，又可以供非编程人员快速构建发布简单的H5小游戏，缩短开发周期。首先，在编程界面上，软件整体设计上参考原有的scratch平台，提供用户基于vue.js框架及其插件实现的单web界面，该界面进行明确的功能区域划分，满足用户使用方便，入门简单的操作需求。其次，在游戏编程方面，使用更易入门的scratch语言，即引入Google的Blockly工具，使用封装了各种函数的代码块实现可视化编程，让用户可以通过搭积木的方式以简单的拖拽拼接方式，完成游戏逻辑的实现，无需任何编程语言的键入。最后，在游戏设计方面，基于cocos引擎，允许用户自由创建类如“关卡”、“角色”、“区域”等对象，提供能实时展示执行结果的舞台区，方便用户理解每步操作的具体含义。最终该软件能很好的让非编程人员以一种相对简单容易理解的方式，体验整个H5游戏从实现到发布的全部流程，并在过程中掌握编程的基本思想，从而解决编程入门难，程序员人力浪费这些问题。

关键词：可视化编程；Vue.js；Blockly；cocos引擎

Abstract

With the rapid development of computers, computer programming has become a basic skill and an important tool for people of all ages. However, due to the complexity of programming languages and development tools, the popularity of computer programming at all ages faces many challenges. On the one hand, in the face of growing business demand, Internet enterprises need more non-programmers to undertake some development tasks with low difficulty in program logic and various page contents, but threr isn’t a suitable programming tools.On the other hand, more and more parents want their children

to master programming skills, but there isn't a good way to get started.

To solve these problems, the article based on the idea of visual programming, design and develop a visual programming development environment. The main purpose of this software is to not only enable young children to master basic programming ideas through game design, but also make it possible for non-programmers to quickly build and release simple H5 small games. First of all, in the programming interface, the overall design of the software refers to the original scratch platform to provide users with a single web interface based on the vue. Secondly, in terms of game programming, Google's Blockly tool is introduced to realize visual programming with code blocks encapsulating various functions. It allows users to complete the realization of game logic by building blocks in a simple drag-and-drop way without any input of programming language. Finally, in terms of game design, based on the cocos engine, it allows users to freely create objects such as "level", "role", "area" and provides a stage area that can display the results of execution in real time, so that users can understand the specific meaning of each step. In the end, this software can well enable non-programmers to experience the whole process of H5 game from implementation to release ,so as to solve the problems such as difficult introduction to programming and waste of

programmer manpower.

Keywords: Visual programming; Vue.Js; Blockly; Cocos engine

目 录

摘 要 I

Abstract II

目 录 1

第一章 绪论 1

1.1 研究课题的背景与意义 1

1.2 国内外研究现状 1

1.3 课题研发目标 2

1.4 论文组织结构 3

1.5 本章小结 3

第二章 项目的概要设计 4

2.1 需求分析 4

2.2 系统架构 6

2.2.1 操作界面概要设计 7

2.2.2 可视化编程模块概要设计 9

2.2.3 游戏显示模块概要设计 10

2.2.4 模块打包输出 11

2.3 本章小结 12

第三章 项目的详细设计 13

3.1 项目运行 13

3.2 开发界面 14

3.3 菜单区 16

3.3.1 项目管理功能 16

3.3.2 内外网切换功能 17

3.3.3 界面切换功能 18

3.4 功能区 19

3.4.1 角色区 19

3.4.2 背景区 20

3.4.3 脚本区 21

3.4.5 函数库区 22

3.5 对象区 23

3.6 舞台区 25

3.7 本章小结 26

第四章 项目的具体实现 27

4.1 项目框架搭建 27

4.2 web界面实现 28

4.3 Blockly代码块实现 31

4.4 web与cocos通讯实现 34

4.5本章小结 39

第五章 项目的测试与验证 40

5.1 测试环境 40

5.2 单元测试 40

5.3 实例验证 46

5.3 本章小结 50

第六章 总结与展望 51

参考文献 53

致 谢 55

第一章 绪论

本章主要是分析了当前背景下对可视化编程思想的需求程度，提出该思想在减轻编程成本和儿童编程教育方面的双重意义，同时调研了国内外对于可视化编程软件的研究现状，然后阐述课题最终的研发目标，即设计和实现一款基于可视化编程思想的游戏编程器软件。

1.1 研究课题的背景与意义

目前可视化编程因其无需文本化代码的编写，只通过图形便能与计算机进行迅速交流的特点，正作为研究领域的热门技术，受到业界的广泛关注，并被广泛应用于各种领域。本课题基于此思想，设计和开发出一款可视化编程开发环境。

剩余内容已隐藏，请支付后下载全文，论文总字数：30794字