小游戏—九宫格(拼图游戏)

1、需求分析

简单益智类游戏

2、技术分析

基础的HTML、CSS、JavaScript。

3、详细分析

小游戏—九宫格(拼图游戏)_第1张图片

 

如图:包含两大部分,左边是一个游戏区,点击卡片可实现向相邻空格的移动;右边是一个控制区,包含两小部分,一个计时器,一个游戏进程控制(开始、暂停、重来)。

3.1 HTML部分

内容部分设置一个div,包含游戏区和控制区两个小的div,游戏区包含多个小的数字卡片div,并给每个数字div绑定点击事件,点击数字调用相应move()函数,实现向相邻空白区域的move;控制区包含两个段落,纵向跨行的计时器timer和绑定事件的start和reset。


	
1
2
3
4
5
6
7
8

总用时

开始 重来

3.2 CSS部分


3.3 JS部分


                    
                    

你可能感兴趣的:(小游戏—九宫格(拼图游戏))