HTML网页游戏开发---index.html文件的书写
HTML网页游戏开发---index.html文件的书写
常用标签及含义
<html></html>标签限定文档的开始与结束
<head></head>头标签
<title></title>标签定义文档的名称，即打开网页时网页的名称,位于head标签内部
<link>定义文档与外部资源的关系，连接样式表，位于head标签内部
<meta>提供有关页面的元信息（meta-information），位于head标签内部
<script></script>标签用于定义客户端脚本，比如 JavaScript。既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件，可位于head标签内部或者body标签内部
<body></body>标签用于书写文档的主题内容
<div></div>定义文档中的分区或节,把文档分割为独立的、不同的部分,用 id 或 class 来标记。
<canvas></canvas>用于网页上绘制图形，绘制工作必须在 JavaScript 内部完成。
结构如图所示：
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<meta content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/CMain.js"></script>
</head>
<body>
<div id="div1" style="">div1</div>
<div class="div2">div2</div>
<script>
//等价于$(function{});
$(document).ready(function(){
var oMain = new Main({});
$(oMain).on("evt1", function(evt) {});//$(oMain).on可以绑定多个事件
$(oMain).on("evt2", function(evt) {});
});
</script>
<canvas id="" class="" width="" height=""></canvas>//创建canvas元素
</body>
</html>canvas没有绘图功能，需要通过 JavaScript 绘制
<script type="text/javascript">
var myCanvas=document.getElementById("canvas");//通过id获取canvas元素
var context=myCanvas.getContext("2d");//指定二维绘图
context.fillStyle="#FF00FF";//修改颜色
context.fillRect(0,0,50,50);//位置(0,0)、大小(50,50)
</script>游戏包含：
1.jQuery 是一个 Javascript 库，可大大减少必须编写的代码量。
2.游戏中有以下js文件：
CMain：索引文件调用的主类。
此文件控制 sprite_lib.js 文件，该文件管理精灵加载、循环游戏并使用 CreateJs 库初始化画布 ctl_utils：此文件管理画布调整大小及其居中 sprite_lib：该类加载主类中声明的所有图像 CLang：用于语言本地化的全局字符串变量 CMenu：带有播放按钮的简单菜单 CGame：这个类管理游戏逻辑 CInterface：这个类控制包含文本和按钮的游戏GUI CPlayer：这个类管理游戏中的玩家 等
3.CreateJs 是一套模块化库和工具，它们协同工作，通过 HTML5 在开放 Web 技术上启用丰富的交互式内容。
4.Howler 是一个 javascript 音频库。
上一篇： createjs打飞机
下一篇： [js高手之路]面向对象版本匀速运动框架