书籍文库  |  文档资料  |  最近更新  |  MAP  |  TAG  | 
注册
手机版
在线二八杠
当前位置:在线二八杠 > 电脑办公 > 电脑设计 > 程序设计 > Dreamweaver拼图游戏的实现

二八杠游戏:Dreamweaver拼图游戏的实现

分享人:Me£ 来源:互联网 时间:2018-06-19 阅读:0
摘要:随着计算机的迅猛发展,网络游戏兴盛,拼图游戏成为了学生喜欢的一款经典益智页游。本文是中职生在学习Dreamweaver的“在页面中添加动态效果”以后的一个课程设计,弥补了书本案例的枯燥难懂,巧妙地使用Dreamweaver制作拼图游戏,使大家在浓厚的学习兴趣中巩固表格、图层、CSS、行为、Javascript的用法,也能帮助学生建立起Dreamweaver游戏开发的思想与方法并获得成就感。

  关键词:Dreamweaver层行为  拼图游戏  中职
  中图分类号:G718         文献标识码:C            文章编号:1672-1578(2015)08-0278-01
   Dreamweaver是一款所见即所得的网页编辑器,中职生学习了“在页面中添加动态效果”一章后,可以制作出很多缤纷的效果丰富网站内容?!巴隙疉P元素”即是其中的一小节。为了让中职生在掌握基础知识后还能活学活用,笔者选用了自贡盐都?龊>?的拼图游戏来做为课程设计实现,这样既增加了知识的趣味性也激进了学生热爱家乡的情感。
  1   新知初探:拖动?龊>?图片,弹出“位置正确”对话框
   拼图游戏制作中要用到的一个重要知识点,就是拖动AP元素。为了让中职生能简单掌握这个重点,笔者让学生先制作整张图片的拖动效果,并在已设置好的位置放下后弹出“位置正确”对话框。
   第一步:新建tuodong.html,插入AP层,层内插入?龊>?图片。
   第二步:单击body,在“标签检查器”中,选择“拖动AP元素”行为,在对话框中AP元素处选择“apdiv1”。
   第三步:在对话框中,点击“取得目前位置”,靠齐距离处,写上50,表明靠近目标50像素时,apdiv1层被自动被吸附。
   第四步:在对话框的“高级”标签下,放下时呼叫javascript,写下alert(“位置正确”);
   第五步:在“标签检查器”中,选择“onload事件”。
   第六步:把apdiv1随意拖放到页面的某一个初始位置。
   第七步:在IE浏览器测试浏览。
  2   进阶掌握:拼图?龊>?,并设计“重玩”按钮
   有了上一个环节的成功制作,学生们很期待去实现真正的拼图,个个都跃跃欲试要小试年刀了。
  2.1拼图游戏准备
   第一步:启动Photoshop cs5,打开素材?龊>?图片,宽600px,高348px。
   第二步:双击图片图层,使它可编辑。
   第三步:选择“切片工具”,右击图片,选择“划分切片”,水平划分为2个纵向切片均匀分隔,垂直划分为4个横向切片均匀分隔。
   第四步:保持切片选择状态,分别在切片上右击鼠标,从弹出的菜单中选择“编辑切片选项”,分别设置切片名称为pintu1至pintu8。
   第五步:在“文件”菜单选择“存储为Web及设备所用格式”,单击“存储”,类型选择“HTML和图像”,即可生成一个html格式的文件和一个包含8副?龊>?切片图的images文件夹。
  2.2拼图游戏实现
   第一步:新建pintu.html,“AP元素”标签中,取消“防止重叠”。
   第二步:在页面左右两边创建两个相同大小的表格。用CSS进行适当美化。右表格2行4列。左表格1行1列。在右表格中创建8个apdiv1-apdiv8,在这8个层里分别乱序插入准备好的8幅切片图。
   第三步:把apdiv1-apdiv8拖动到拼图应放置的正常位置,在body标签下,对它们制作拖动ap元素行为。依照任务二的第二、三、五步制作,8个层共做8次。
   第四步:将左侧表格中的apdiv1-apdiv8拖回到右侧表格中。
   第五步:在左侧表格的下方添加一行,并写上代码
  <a href="javascript:location.reload();">重拼</a>
   第六步:在IE浏览器测试浏览。
  3   拓展延伸:设计“确认”按钮
   现在的效果是每拖正确一张切片图,就提示“位置正确”,没有拖正确的时候则什么都不提示。试想,若你是玩家,这得玩得多烦躁无趣啊。若想修改成,8张切片图都拖过以后,点击“确认”按钮,当拼图正确,提示成功,若拼图错误,提示失败。这部份提供给学习能力较强的学生参考练习。
   第一步:在“重拼”按钮旁添加:
   <a href="javascript:toolsubmit();">确认拼好了吗?</a>
   第二步:在<head><script type="text/javascript"></script></head>中添加:
   //这里预定好每个div的坐标,即左侧拼图正确的值
   var divpixel={ "data":
   [ {"name":"apDiv1","top":101,"left":51}, {"name":"apDiv2",
  "top":101,"left":201},
  {"name":"apDiv3","top":101,"left":351},{"name":"apDiv4","top":101,"left":501},
  {"name":"apDiv5","top":275,"left":51}, {"name":"apDiv6",
  "top":275,"left":201},
  {"name":"apDiv7","top":275,"left":351},{"name":"apDiv8","top":275,"left":501}]}
   //提交测试的函数
  function toolsubmit(){
  var totalnum=divpixel.data.length;
  var oknum=0;
  for(var i=0;i<divpixel.data.length;i++) {
  if(document.getElementById(divpixel.data[i].name).style.pixelTop==divpixel.data[i].top && document.getElementById(divpixel.data[i].name).style.pixelLeft==divpixel.data[i].left)
  { oknum+=1; } }
  if(oknum>=totalnum){alert("恭喜,拼图成功"); }
   else {alert("抱歉,拼图失败");}}
   使用Dreamweaver制作简单的拼图游戏,就完成了。爱因斯坦曾说“兴趣是最好的老师”。本案例中,笔者尝试着引导学生从玩游戏到制作游戏中来。满足了学生的好奇心和求知欲,学有所用,促使学生从“玩”到“做”中来,从而进一步加大学习的主动性和积极性。当然Dreamweaver功能强大,未尽之处还需我们去发掘实现。

热点阅读

网友最爱

171| 303| 978| 829| 295| 645| 185| 502| 438| 894|