韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理

分类： PHP 2012-12-12 15:01 4256人阅读 评论(0) 收藏 举报

文西马龙：http://blog.csdn.net/wenximalong/

采用面向对象思想设计超级马里奥游戏人物（示意图）

怎么用通过按键，来控制图片的位置
这个小游戏，用面向对象会很方便，不用面向对象会很麻烦很麻烦，比如以后要讲解的坦克大战的游戏，要是用纯的面向过程或函数式的方式写，那维护起来会非常的麻烦。

游戏分析：
（1）看看如何通过按钮来控制mario的位置
（2）设计相关的对象（Mario x y ...）
Event对象
onclick属性：当用户点击某个对象时调用的事件句柄

素材

mario.css

[html] view plaincopyprint?

  1. .gamediv{
  2. width: 500px;
  3. height: 400px;
  4. pink;
  5. }
  6. /*表格样式*/
  7. .controlcenter{
  8. width: 200px;
  9. height: 200px;
  10. border: 1px solid red;
  11. }
.gamediv{
	width: 500px;
	height: 400px;
	background-color: pink;
}

/*表格样式*/
.controlcenter{
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

mario.html

[html] view plaincopyprint?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <link rel="stylesheet" type="text/css" href="mario.css" />
  5. <head>
  6. <script language="javascript">
  7. //设计Mario类
  8. function Mario(){
  9. this.x=0;
  10. this.y=0;
  11. //移动 顺时针 0->上 1->右 2->下 3->左
  12. this.move=function(direct){
  13. switch(direct){
  14. case 1:
  15. //window.alert("mario 右移动");
  16. //这里为了改变 img的left 和top，我们需要得到 img元素。需要用到javascript的DOM编程。img 对象
  17. var mymario=document.getElementById(‘mymario‘);
  18. //取出 img 的top值
  19. //window.alert(mymario.style.top);
  20. //怎样去掉50px的px
  21. var top=mymario.style.top;
  22. //px占据两个，即lenght-2
  23. //window.alert(top.substr(0,top.length-2));
  24. //现在还是串，要转成数值才能加减
  25. top=parseInt(top.substr(0,top.length-2));
  26. //window.alert(top);
  27. mymario.style.top=(top+2)+"px"; //开始移动2px，看怎么拼接的，字符串和数值之间的转换
  28. //此时mario就可以向下移动了，把上面的打印调试输出代码都注释掉
  29. break;
  30. }
  31. }
  32. }
  33. //创建Mario对象
  34. var mario=new Mario();
  35. //全局函数
  36. function marioMove(direct){
  37. switch(direct){
  38. case 1:
  39. mario.move(direct);
  40. break;
  41. case 0:
  42. break;
  43. case 2:
  44. break;
  45. case 3:
  46. break;
  47. }
  48. }
  49. </script>
  50. </head>
  51. <body>
  52. <div class="gamediv">
  53. <img id="mymario" src="mario.jpg" style="left:100px; top:50px; position:absolute;" /> <!--用到了绝对定位-->
  54. </div>
  55. <table border="1px" class="controlcenter">
  56. <tr>
  57. <td colspan="3">游戏键盘</td>
  58. </tr>
  59. <tr>
  60. <td>**</td>
  61. <td><input type="button" value="↑↑" onclick="marioMove(1)" /></td>
  62. <td>**</td>
  63. </tr>
  64. <tr>
  65. <td><input type="button" value="←←" /></td>
  66. <td>**</td>
  67. <td><input type="button" value="→→" /></td>
  68. </tr>
  69. <tr>
  70. <td>**</td>
  71. <td><input type="button" value="↓↓" /></td>
  72. <td>**</td>
  73. </tr>
  74. </table>
  75. </body>
  76. </html>


再要求：
（1）mario碰到边界给一个提示

时间： 2024-10-03 13:45:57

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏的相关文章

巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

[转]轻松搞定权限设计1-页面按钮控制（精确到某个用户和某个按钮）

每个系统都离不开权限控制,这里来说说页面上控制到按钮的思路,仅提供思路: 使用 角色 + 资源(菜单和菜单对应页面上的按钮)+ 授权的方式. 1  定义角色与用户: 假定这里我们只控制到角色这一层次,一个用户一个角色,设计如下: 角色表: role(role_id, role_name) 用户表: user(user_id, username, role_id),其中role_id是角色表的外键. 2  定义资源 这里假定把菜单.按钮都看成是一种资源,一个菜单上面有多个按钮. 菜单表: menu

一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: 1 <!Doctype html> 2 <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml> 3 <head> 4 <meta http-equiv=Content-Type content=

轻松搞定javascript原型链 _proto_

//如有错误或不同观点,欢迎批评与讨论!首先,prototype出现的目的,是为了解决 代码重用 的问题 , prototype 相当于是在内存上划分出一个公共的区域, 专用于存放 实例化对象 的相同方法或属性, 一份代码,人人可用:为方便理解,我们可以先把prototype 当作是CSS中的 class,在prototype上加方法和属性,那么其它对象就会拥有这些方法和属性, 但这些代码紧有一份!<script>function Person(){this.name = '张三'; this

深入浅出 Python 装饰器：16 步轻松搞定 Python 装饰器

Python的装饰器的英文名叫Decorator,当你看到这个英文名的时候,你可能会把其跟Design Pattern里的Decorator搞混了,其实这是完全不同的两个东西.虽然好像,他们要干的事都很相似--都是想要对一个已有的模块做一些"修饰工作",所谓修饰工作就是想给现有的模块加上一些小装饰(一些小功能,这些小功能可能好多模块都会用到),但又不让这个小装饰(小功能)侵入到原有的模块中的代码里去.但是OO的Decorator简直就是一场恶梦,不信你就去看看wikipedia上的词条

【转】轻松搞定FTP之FlashFxp全攻略

转载网址:http://www.newhua.com/2008/0603/39163.shtml 轻松搞定FTP之FlashFxp全攻略 导读: FlashFXP是一款功能强大的FXP/FTP软件,融合了一些其他优秀FTP软件的优点.如像CuteFTP一样可以比较文件夹,支持彩色文字显示:像BpFTP支持多文件夹选择文件,能够缓存文件夹:像LeapFTP一样的外观界面,甚至设计思路也比较相似,支持文件夹 (带子文件夹)的文件传送.删除:支持上传.下载及第三方文件续传:可以跳过指定的文件类型,只传

报表工具轻松搞定票据单据套打

实际项目开发中,很多情况会涉及到票据的打印.即在一张印刷好的空白票据上,准确无误地打印上票据的内容.用传统的报表工具,我们通常会用尺子量每一个数据区域的位置,然后在屏幕上根据尺子量出的尺寸设计每一个格子的位置,反复调试.不过,这样制作一张票据打印的报表费时费力,而且一旦票据格式发生变化,报表制作人员又要重新制作报表. 接下来,小编给大家介绍一款可以轻松搞定套打问题的爆款神器 - 润乾报表 (别问小编为什么这么热心 – 任性!!!),此神器采用底图描绘的方案来解决套打时报表绘制的问题.具体操作如下

报表工具轻松搞定卡片式报表

在我们日常生活或工作中,经常会看到这样一个个小卡片,上面记载着某件商品或者某个人的基本信息.如同名片一般,看起来简单明了.而在数据库中,这些信息实际上是密密麻麻的一条条记录,直接查看非常容易看错,如下图所示: 那么我们怎样才能够将这些信息以卡片形式,一条记录一张卡片的来呈现呢 ?下面,我们一起来看一下怎样利用报表神器-润乾报表,来简单轻松地生成这类报表: 首先(第一步),打开报表设计器,连接好数据源,新建一张空白报表,设置数据集,我们这里是用的SQL语句如下: SELECT 雇员.名字,雇员.雇

轻松搞定javascript预解析机制（搞定后，一切有关变态面试题都是浮云~~）

hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解析),但吃的时候还是一口一口的吃(JS逐行执行)! OK,解决下面五个问题,JS预解析就算过了~~(前提:对JS变量作用域有清晰理解) 一.JS预解析是什么? 其实就是对程序要用到的材料(变量,函数)给一个初始值,并存到一个表中(我自己虚构的),当程序运行到那一行时,就来这个表看有没有初始值,没有就