HTML5课程设计文档格式.docx
- 文档编号:13174301
- 上传时间:2022-10-07
- 格式:DOCX
- 页数:15
- 大小:45.53KB
HTML5课程设计文档格式.docx
《HTML5课程设计文档格式.docx》由会员分享,可在线阅读,更多相关《HTML5课程设计文档格式.docx(15页珍藏版)》请在冰豆网上搜索。
2.2.2JavaScript介绍 7
3游戏设计 8
3.1游戏总体流程图 8
3.2游戏的详细设计 9
3.2.1页面搭建代码 9
3.2.2黑白块随机模块 10
3.2.3黑白方块运动模块 11
3.2.4计分模块 12
3.2.5犯规处理模块 12
3.2.6加速模块 13
4运行测试 13
5.1测试目的 13
5.2测试截图 14
5.3测试结果 15
5课程设计小结 15
1.绪论
1.1开发背景
《别踩白块儿》是由“有猫腻娱乐工作室(umoniStudio)”制作的一款非常耐玩的休闲益智游戏。
别踩白块儿,这就是这个游戏唯一的一个规则。
该游戏于2014年4月16日上线AppStore。
并在全球40多个国家、地区免费游戏榜登顶榜首,超过一百个国家或地区排名前十,5月
份荣登全球游戏下载总榜(iOS+Android)第一宝座,游戏上线3
个月累计下载达1亿。
鉴于这款游戏的火爆,并且随着HTML5所带来的技术热潮,我便想把这款游戏在PC端通过浏览器在本地实现。
1.2开发内容
本游戏通过浏览器,使用HTML5标记语言,CSS样式设计语言,以及JavaScript脚本语言进行实现。
2.游戏开发的相关技术
2.1开发工具介绍
SublimeText是一个代码编辑器(SublimeText2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。
Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
SublimeText具有漂亮的用户界面和强大的功能,例如代码缩略图,
Python的插件,代码段等。
还可自定义键绑定,菜单和工具栏。
SublimeText的主要功能包括:
拼写检查,书签,完整的PythonAPI,Goto功能,即时项目切换,多选择,多窗口等等。
Sublime
Text是一个跨平台的编辑器,同时支持Windows、Linux、MacOSX
等操作系统。
2.2开发运用技术介绍
2.2.1HTML5介绍
HTML5是HTML最新的修订版本,2014年10月由万维网联盟
(W3C)完成标准制定。
目标是取代1999年所制定的HTML4.01和XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。
广义论及HTML5时,实际指的是包括
HTML、CSS和JavaScript在内的一套技术组合。
它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-BasedRichInternetApplication,RIA),例如:
AdobeFlash、MicrosoftSilverlight与OracleJavaFX的需求,并且提供更多能有效加强网络应用的标准集。
具体来说,HTML5添加了许多新的语法特征,其中包括
<
video>
、<
audio>
和<
canvas>
元素,同时集成了SVG内容。
这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。
其它新的元素如<
section>
article>
header>
nav>
则是为了丰富文档的数据内容。
新的属性的添加也是为了同样的目的。
同时也有一些属性和元素被移除掉了。
一些元素,像<
a>
cite>
和
menu>
被修改,重新定义或标准化了。
同时APIs和DOM已经成为
HTML5中的基础部分了。
HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。
2.2.2.JacvaScript介绍
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML
网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。
因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。
但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。
为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
3.游戏设计
3.1游戏总体流程图
开始游戏
黑白块开始运动,
判断每次点击是否都是黑块
游戏结束
否,则游戏结束
是,则继续游戏
3.2游戏的详细设计
3.2.1.页面搭建代码
style>
#main{
width:
400px;
height:
border:
2pxsolidgreen;
margin:
0auto;
position:
relative;
overflow:
hidden;
}
#container{
100%;
top:
-100px;
background:
white;
.row{
100px;
.cell{
float:
left;
.black{
background:
black;
#score{
text-align:
center;
/style>
/head>
body>
h1id="
score"
>
0<
/h1>
divid="
main"
container"
/div>
/body>
3.2.2.黑白块随机模块
/*
*初始化
*/
functioninit(){
for(vari=0;
i<
4;
i++){crow();
$('
main'
).onclick=function(ev){judge(ev);
*创建div.row
functioncrow(){
varcon=$('
container'
);
varrow=cdiv('
row'
varclasses=createSn();
i++){row.appendChild(cdiv(classes[i]));
if(con.firstChild==null){con.appendChild(row);
}else{
con.insertBefore(row,con.firstChild);
*删除最后一行
functiondrow(){
if(con.childNodes.length==6){
con.removeChild(con.lastChild);
functioncdiv(className){
vardiv=document.createElement('
div'
div.className=className;
returndiv;
/**
*返回1个数组,随机其中1个单元,值为'
cellblack'
其他3个,皆为cell
**/
functioncreateSn(){
vararr=['
cell'
'
];
vari=Math.floor(Math.random()*4);
arr[i]='
;
returnarr;
*按id获取对象
function$(id){
returndocument.getElementById(id);
3.2.3.黑白方块运动模块
*start()启动
functionstart(){
clock=window.setInterval('
move()'
40);
*动画
functionmove(){
vartop=parseInt(window.getComputedStyle(con,null)['
top'
]);
if(speed+top>
0){//一步会走过头,直接top=0top=0;
top+=speed;
//调节每次下降的像素
con.style.top=top+'
px'
//
if(top==0){
crow();
con.style.top='
-100px'
drow();
}elseif(top==(-100+speed)){
//console.log(con.lastChild);
varrows=con.childNodes;
if((rows.length==5)&
&
(rows[rows.length-1].pass!
==1)){fail();
3.2.4.计分模块
*计分
functionscore(){
varnewscore=parseInt($('
score'
).innerHTML)+1;
).innerHTML=newscore;
if(newscore%10==0){
jiasu();
3.2.5犯规处理模
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 课程设计