基于html5实现的推箱子小游戏

一、游戏功能分析

1)功能需求分析

 功能需求分析如图1-1所示。

基于html5实现的推箱子小游戏_第1张图片

 

  1. 小人推箱子:当箱子周围存在通道时,通过小人的左右移动实现推箱子功能。
  2. 炸毁墙面:小人当前所在位置的四周有墙面时,按下空格可以炸毁墙面
  3. 设置关卡:游戏总共有100个关卡,用户在输入框中输入1~100之间的任意一个数字可以跳转到任意一个关卡。
  4. 重玩本关:用户点击该按钮时,恢复到本关最原始的状态。
  5. 撤销移动:用户可以实现恢复到上一步的状态。
  6. 游戏说明:显示游戏操作方法以及游戏规则。

 

二、总体设计

2.1 功能模块(或函数、类)

1) 界面设置

 画布位置摆放及显示;

 按钮布局排版;

小人移动步数显示;

 关卡设置。

2)画布类

  • 控制小人移动
  • 小人推箱子
  • 小人炸毁墙面
  1. 按钮类
  • 上一关
  • 下一关
  • 撤销移动
  • 重玩本关
  • 游戏说明
  1. 文本框
  • 关卡设置
  • 显示小人移动步数
  • 游戏说明简介

 

2.2总体设计层次图(或类、方法关系图)

系统总体设计层次图如图2-1所示。

基于html5实现的推箱子小游戏_第2张图片

 

 

2.3函数说明

Canvas类的方法如表2-1所示。

                                    表2-1 canvas类函数表

函数名

功能

getContext(“2d”)

内建的HTML5对象,用于绘制多种路径,矩形等方法。

drawImage()

可以引入图像、画布、视频,并对其进行缩放或裁剪。

clearRect()

清空给定矩形内的指定像素

Save()

保存CanvasRenderingContext2d对象的属性、剪切区域和变换矩阵

Restore()

为画布重置为最近保存的图像状态

 

定时器方法如表2-2所示。

                                               表2-2 定时器方法表

函数名

功能

setInterval ( code, milliseconds[, args...] )

Code:需要执行的函数或js代码。

Milliseconds:执行函数或代码的间隔时间,单位为毫秒。

Args:可选参数用于给被调用的函数传递参数,参数可以有多个

clearInterval(intervalID);

取消指定定时器

 

Html标签如表2-3所示。

                                                      表2-3 html5标签表

标签名

功能

是一个块级元素。它的内容自动地开始一个新行。换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用额外的样式。

img 元素向网页中嵌入一幅图像。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、按钮等等。

定义标题。

定义最大的标题。

你可能感兴趣的:(html5)