HTML5游戏开发

—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.end_flush p{ display: inline-block; float:right; width:170px; color:#31454c; margin-right:10px; font-size: 16px; font-weight: bolder; line-height:26px; } .end_flush p label{ color:#ff9900; }
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.start_flush{ position: absolute; left:0; top:0; width:320px; height:480px; /* */ background:url(../img/game_bg.png) no-repeat; z-index: 10; background-size: 320px 480px; }




--> 维护
开发人员
—高级软件人才实作培训专家! HTML5游戏开发-是男人就下100层
•开发所需技术：
•HTML •HTML5- CANVAS-2D •css2 •css3 •javascript •Json
—高级软件人才实作培训专家! HTML5游戏开发-是男人就下100层

—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.start_btn:before{ content:""; display: inline-block; position: absolute; width: 0; height: 0; overflow: hidden; border-top: 20px solid transparent; border-left: 40px solid #feff01; border-bottom: 20px solid transparent; top:9px; left:15px; } .start_btn:active:before{ border-left-color: #fb0; }



—高级软件人才实作培训专家! HTML5游戏开发-是男人就下100层

游戏的文件结构： wfn.js：基础文件，包含动画定义，公共方法（都是比较简单的） person.js：人物的定义 block.js：各种障碍物块的定义 main.js：游戏主逻辑入口文件，处理主要逻辑 游戏的文件结构： TimeProcess：主要用于统一处理定时器的事件，确保全局只有一个计时器 Frame：帧的定义，就类似flash中的帧 Animation：动画的定义，一个动作需要多个连贯的帧才能完成 Sprite：精灵的定义，一个完整的个体，是需要多个动画，例如向左，向右等


—Fra Baidu bibliotek级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（结构图）
结构图详见： 是男人就下100层（开发流程）.xls文档
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（开发流程）
开发流程图详见： 是男人就下100层（开发流程）.xls文档
—高级软件人才实作培训专家! 项目流程

市场调研（可行性分析）--> 可行性报告书 需求分析--> 需求说明书 概要设计--> 概要设计说明书（ER图， UML）
需求分析师、客户经理 项目经理、需求分析师 项目经理、项目组长



详细设计--> 详细设计说明书(流程图) 数据库建好、项目周期表(甘特图) office project visio 项目组长、开发人员 编码 --> 测试(单元测试) 提交svn 测试用例 测试 --> 集成测试、黑白盒测试、冒烟测试 --> 用户使用说明书 开发人员 测试人员 项目经理
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.end_flush{ position: absolute; left:30px; top:130px; width:260px; height:123px; display: none;/*none*/ background-color: white; border: 1px solid #589300; border-radius: 20px; }
之前写的小游戏，要么就比较简单，要么就是比较难看，或者人物本身是不会动 的。 结合了其它人的经验，研究了一下精灵运动，就写一个简单的小游戏来试一下。 介绍一下几个主要的类： Frame：帧的定义，主要描述动画的一帧 Animation：动画的定义，主要描述一个连贯的动画，由多个帧组成 Sprite：精灵的定义，主要描述一个完整的实体，由多个动画组成 TimeProcess：时间管理，由requestAnimationFrame完成 Person：一个完整人定义，就是主人公--男人 BlockBase：块的基类，下降中的障碍物基类，包含一些基本的参数与方法 NormalBlock：普通块，继承于BlockBase，最基础的块 MissBlock,LeftBlock...等：其它特殊功能的块 BlockFactory：块工厂，生产块的类 Main：游戏主入口
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.level{ position: absolute; z-index:2; color:white; font-size:14px; right:10px; top:10px; font-weight:bolder; } .level span{ color: #fb0; font-weight: bolder; }
—高级软件人才实作培训专家!
HTML5 游戏开发
讲师：李科霈
北京传智播客教育 www.itcast.cn
—高级软件人才实作培训专家! 什么是项目？

1、特殊 2、周期（项目的起始时间、结束时间）
结婚 盖房子 Itcast学习 养育儿女 (18岁后维护) iphone生产流水线

—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（HTML介绍）
<link rel="stylesheet" type="text/css" href="css/index.css" /> <script type="text/javascript" src="js/wfn.js"></script> <script type="text/javascript" src="js/person.js"></script> <script type="text/javascript" src="js/block.js"></script> <script type="text/javascript" src="js/index.js"></script>
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.start_btn{ display: inline-block; position: absolute; width:60px; height:60px; border:4px solid #364348; border-radius: 32px; left:239px; top:394px; }
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.main{ background-color:#9dd9ed; background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #01b9f5), color-stop(0.51, #9dd9ed) ); /* background-attachment -- 定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承初始值: scroll */ background-attachment:fixed; height:480px; width:320px; position: relative; left:50%; margin-left:-160px; }
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.end_flush .icon{ display:inline-block; float:left; width:55px; height:53px; background:url(../img/baozi.png) no-repeat; background-size:55px 106px; margin: 12px 0 0 12px; } .end_flush .icon.happy{ /* 不是截取，是位移，坐标是从元素左上方开始算的，第一个0是左边0，第二个是上面0 0 0 就是不截取 0 20px 就是左边不动，上面往下移动背景图 20px 自己试试就明白了。 追问那要是若是0 -30，左边不动，-30该从哪里算起呢? 回答 往上方移动30px */ background:url(../img/baozi.png) 0 -54px no-repeat; background-size:55px 107px; }
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.life{ width:100px; height:10px; position: absolute; /* 引用方法 z-index : auto | number auto:默认值。 number: 无单位的整数值，可为负数 。 z-index值较大的元素将叠加在z-index值较小的元素之上。 对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上， 而 z-index 值为负数的对象在其之下。 */ z-index:2; left:10px; top:10px; border:1px solid #ff9900; border-radius: 7px; padding:1px; background:white; }
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（CSS介绍）
.life label{ /*行内块*/ display: inline-block; width: 0px; height:10px; background-color: #ff9900; border-radius: 7px; float:left; }
—高级软件人才实作培训专家!
HTML5游戏开发-是男人就下100层（HTML介绍）
<div class="main" id="js_main" tabindex="-1"> <canvas id="canvas" width="320" height="480"></canvas> <div class="life"><label id="js_life"></label></div> <div class="level">第<span id="js_level">0</span>层</div> <div class="start_flush" id="js_start_flush"> <a href="javascript:void(0)" id="js_start_btn" style="display:none;" class="start_btn" onclick="Main.start()"></a> <span id="js_start_loading" style="position:absolute;left:241px;top:417px;font-size:16px;fontweight:bolder;">加载中...</span> </div> <div class="end_flush" id="js_end_flush"> <span class="icon"></span><p></p>