软件工程毕业论文设计 超级玛丽H5小游戏开发设计

admin管理员组

文章数量:1530845

2024年6月2日发(作者：)

超级玛丽H5小游戏

毕业设计任务书

设计（论文）

题目

超级玛丽H5小游戏

完成时间 第九周

论文（设计）

2万字左右

字数

选题时间

关键词

HTML5 CSS3 JavaScript JQuery 面向对象

设计（论文）题目来源、理论和实际意义：

在飞速发展的信息时代，H5游戏在国内还处于萌芽状态时，H5 是一系列制作网

页互动效果的技术集合，即H5就是移动端的web页面。而H5游戏，你可以看作是

移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。

对于许多手游玩家来说，H5可能是个十分陌生的名词，其实H5就是HTML的

高级版本，目前H5技术正在不断完善。

在技术方面，利用H5开发移动小游戏的门槛更低，所需时间更少。“大家可以像

写网页一样写游戏，而无需太多的额外学习，而且有大量文档与插件可用。

设计（论文）的主要内容：

超级玛丽H5小游戏主要分为四个部分：地图人物实现、超级玛丽的移动、关卡

选择和消灭怪物、游戏脚本化。

1. HTML 5小游戏之一（地图人物实现）

2. HTML 5小游戏之二（超级玛丽的移动）

3. HTML 5小游戏之三（关卡选择和消灭怪物）

4. HTML 5小游戏之四（游戏脚本化）

系统主要实现目标：

1、界面设计精美、友好。

2、操作灵活、方便。

3、用户体验好。

学生签字： 指导教师签字： 系负责人签字：

年 月 日

超级玛丽H5小游戏

摘要

随着计算机技术的飞快发展，信息时代也进入了飞速发

展，H5开发移动小游戏的门槛更低，所需时间更少。大家可以

像写网页一样写游戏，而无需太多的额外学习，而且有大量文档

与插件可用。不过H5游戏在国内还处于萌芽状态时，H5 是一

系列制作网页互动效果的技术集合，即H5就是移动端的web页

面。而H5游戏，你可以看作是移动端的web游戏，无需下载软

件即可体验，这就是H5在传播上的优势。

对于许多手游玩家来说，H5可能是个十分陌生的名词，其

实H5就是HTML的高级版本，目前H5技术正在不断完善。

本系统设计采用HTML5技术，具有开发效率高、设计

灵活、生成的软件界面友好美观等特点。利用JavaScript的特性，

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基

于原型的语言，内置支持类型。Javascript脚本语言同其他语言

一样，有它自身的基本数据类型，表达式和算术运算符及程序的

基本程序框架。Javascript提供了四种基本的数据类型和两种特

殊数据类型用来处理数据和文字。而变量提供存放信息的地方，

表达式则可以完成较复杂的信息处理。

关键词：计算机技术 HTML5 CSS3 JavaScript

JQuery 面向对象

超级玛丽H5小游戏

目录

摘要 ....................................................................................................................................... 2

第一章 概述 ................................................................................................................. 5

1.1背景 ................................................................................................................................. 5

1.2 Html5所需元素 .............................................................................................................. 5

1.2.1文字（Text）： ................................................................................................... 6

1.2.2图形（Graphics）： ............................................................................................ 6

1.2.3图像（Image）： ................................................................................................ 6

1.2.4精灵（Sprite）： ................................................................................................. 6

1.2.5瓦片（TileSprite）： .......................................................................................... 6

1.2.6组：（Group） .................................................................................................... 6

第二章 开发工具及其语言特点 ................................................................................. 8

2.1 WebStorm开发工具的特点 ........................................................................................... 8

2.1.1智能的代码补全 ........................................................................................ 8

2.1.2代码格式化 ................................................................................................ 8

2.1.3html提示 .................................................................................................... 8

2.1.4联想查询 .................................................................................................... 9

2.1.5代码导航和用法查询 ................................................................................ 9

2.1.6代码重构 .................................................................................................... 9

2.2 HTML5的特点 ....................................................................................................... 9

2.2.1语义特性（Class：Semantic） .............................................................. 9

2.2.2本地存储特性（Class: OFFLINE & STORAGE） ..................................... 9

2.2.3设备兼容特性 (Class: DEVICE ACCESS) ............................................. 10

2.2.4连接特性（Class: CONNECTIVITY）..................................................... 10

2.2.5网页多媒体特性(Class: MULTIMEDIA) ................................................. 10

2.3jQuery的特点 ........................................................................................................ 10

2.3.1简单性 ...................................................................................................... 10

2.3.2安全性 ....................................................................................................... 11

2.3.3动态性 ....................................................................................................... 11

2.3.4跨平台性 ................................................................................................... 11

第三章 HTML 5小游戏游戏之一（地图人物实现） ............................................ 12

3.1游戏简介 ............................................................................................................... 12

3.2库件配置 ............................................................................................................... 13

3.3 游戏图片切割 .................................................................................................... 28

第四章 HTML 5小游戏游戏之二（超级玛丽的移动） ........................................ 36

4.1 建立Character类 ................................................................................................. 36

4.2 添加控制事件 ...................................................................................................... 39

4.3 创建LAnimation类 ............................................................................................. 44

4.4创建changeDir方法 ............................................................................................. 47

第五章 HTML 5小游戏游戏之三（关卡选择和消灭怪物） ................................ 50

5.1实现打击效果 ....................................................................................................... 50

5.2控制人物移动 ....................................................................................................... 50

5.3关卡的选择 ........................................................................................................... 58

本文标签： 游戏小游戏超级玛丽技术设计