拼图游戏实验报告
拼图游戏的实验报告
一. 、实验名称:拼图游戏
二、实验步骤:
1、新建一个空白网页,输入网页的标题 “简单拼图游戏”和游戏说明“请将以下四幅图像拼凑成一幅完整的图像:”。
2、 单击插入栏中的“常用标签按钮”,然后再页面中按下鼠标左键并拖动,待虚线框的大小满足要求后,释放鼠标左键,一个名为“layer1”的层被添加到页面中。
3、 重复步骤2,再绘制三个大小相同的层,分别命名为layer2,layer3,layer4.
4、 将插入点移到页面的中间位置,单击“插入”栏中的“插入表格”按钮,插入一个2行2列的表格。
5、 利用Fireworks 把图片作成切片,如下图所示。
6、 将插入点置于各个层的内部,单击“插入”-----“图像”命令,给每个层选择合适的图像。为了增加拼凑的难度,可以将各幅图像错开顺序排放。
7、 选定layer1的图像,单击“窗口”---“行为”命令,打开“行为”面板,单击面板左上方的“+”按钮从弹出的菜单中选择“拖动层”命令。
8、 在“层”下拉列表中,列出了页面中所有的层,从中选择要拖动的层。
9、 在“移动”下拉列表框中选择“不限制”。
10、在“按下目标”框中设置层放置的终点坐标。
11、在“靠齐距离”文本框中输入一个值,确定图像靠近目标时能够实现自动吸附,具体实现如下图。
12、单击“确定”按钮返回到“行为”面板,选定刚添加的事件,然后单击事件名称和动作名称之间的向下箭头按钮,从下拉菜单中选择“OnMouseover ”。
13、重复6到12步骤,依次为余下的三幅图象添加“拖动层”行为。
14、保存网页,按F12键,浏览。
15、可以做拼图游戏了。
六、问题与思考:
1、 做切片时应注意运用作标,使制作简单化。
2、 表格的坐标确定问题较困难。
3、 拖动图片时,应注意选中图片,否则“行为”面板中的“拖动层”将是灰色不可
用。
4、预览是Dreamwaver 不响应
5、图像定位应在层中否则,图像与表格对不齐
七、实验结果:
本次实验成功的制作了一个拼图游戏,但有点简单,有待于逐步完善。