接上篇。欢迎指正。
现在，需要考虑如何拆分文件。
拆分文件的目的，是为了方便代码管理。很显然，样式表，网页源文件，js代码需要放在不同的地方。另外，对于前端开发来说，主要的逻辑控制流程，都在js文件里面，所以，还需要拆分js文件。我个人习惯上按功能模块来拆分。在拆分前，你需要仔细思考一下，每一个函数和其他函数之间的关联度，尽量做到相关功能函数在一个文件里。
ok，开工。在html所在文件目录下创建2个新文件夹，分别命名为css，js。
1.拆分css。
css样式表写的不多，直接在css文件夹下创建文件，名称姑且叫做main.css
直接把<style>标签里面的内容copy到该文件下，注意，别把标签copy进来了。
.showBox {
border: 1px solid #000;
}
然后，在页面首部<head>标签里添加一行代码，将css样式表引入：
<head>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
2.拆分js文件
很显然字符对象是单独的一部分内容，把这个对象的构造器和挂载到原型上的方法挑出来，组成单独文件。另外，产生随机字符这个函数也只有这个对象会用到，也一并加入进来。文件名不妨定为randomnum.js
/*
* 字符对象构造器
*/
function CharObj() {
var _self = this;
_self.chars = null;
_self.top = 0;
_self.left = 0;
_self.v = 0;
_self.color = null;
}/*
* 初始化字符对象数据
*/
CharObj.prototype.init = function () {
var _self = this;
_self.chars = ranChars();
_self.top = 0;
_self.left = ranInt(500);
_self.v = ranInt(10) + 5;
var r = ranInt(100) + 140;
var g = ranInt(100) + 100;
var b = ranInt(100) + 50;
_self.color = "rgb(" + r + "," + g + "," + b + ")";
}/*
* 下落
*/
CharObj.prototype.move = function () {
var _self = this;
_self.top += _self.v;
}/*
* 绘制
*/
CharObj.prototype.draw = function () {
var _self = this;
context.font = ‘bold 30px 幼圆‘;
context.fillStyle = _self.color;
context.fillText(_self.chars, _self.left, _self.top);
}/*
* 产生随机字符
*/
function ranChars() {
var _num = ranInt(allchars.length);
return allchars[_num];
}
还有一些变量的声明部分，也可以单独拎出来，文件名命为config.js。应该说命名不是很规范，暂且这么用再说。
var samllchars = "abcdefghijklmnopqrstuvwxyz";
var nums = "0123456789";var allchars = samllchars + nums;
var showBox = document.getElementById("showBox");
var context = showBox.getContext(‘2d‘);var pointSpan = document.getElementById("points");
var missSpan = document.getElementById("miss");var showCharObjs = [];
var points = 0;var pointFlag = false;
var misspoints = 0;
还有一些零散的函数，比如，初始化画布，产生随机数，在画布上显示（包括字符队列的添加删除移动等），一并作为通用函数组成单独文件，文件名命为commonfunction.js
/*
* 初始化画布
*/
function initCanvas() {
showBox.setAttribute("width", "600px");
showBox.setAttribute("height", "400px");
}/*
* 产生新字符
*/
function proNewCharObj() {
var _charObj = new CharObj();
_charObj.init();
showCharObjs.push(_charObj);
}/*
* 循环移动并显示字符
*/
function moveAndDrawCharObj() {
context.clearRect(0, 0, 600, 400);
context.fillStyle = "#000000";
context.fillRect(0, 0, 600, 400);
var deleList = [];
for (var i = 0; i < showCharObjs.length; i++) {
showCharObjs[i].move();
if (showCharObjs[i].top >= 400) {
deleList.push(showCharObjs[i].chars);
}
showCharObjs[i].draw();
}
if (deleList) {
for (i = 0; i < deleList.length; i++) {
deleCharObj(deleList[i]);
misspoints++;
}
missSpan.innerHTML = misspoints;
}
}/*
* 删除字符队列里的字符
*/
function deleCharObj(cobj) {
var arr = [];
for (var i = 0; i < showCharObjs.length; i++) {
if (showCharObjs[i].chars != cobj) {
arr.push(showCharObjs[i]);
}
else {
pointFlag = true;
}
}
showCharObjs = arr;
}/**
* 根据键码寻找对应字符
* @param ewhich
* @returns {*}
*/
function getc(ewhich) {
var c = ewhich;
if (c >= 48 && c <= 57) {
c = nums[c - 48];
}
else if (c >= 65 && c <= 90) {
c = samllchars[c - 65];
}
return c;
}/**
* 统计得分
* @param c
*/
function countPoint(c) {
pointFlag = false;
deleCharObj(c);
if (pointFlag) {
points++;
pointSpan.innerHTML = points;
}}
/*
* 产生随机整数
*/
function ranInt(num) {
return Math.floor(Math.random() * num);
}
最后剩下和网页正常运行的主要调用和交互声明函数，单独组成main.js：
initCanvas();
setInterval(proNewCharObj, 1000);
setInterval(moveAndDrawCharObj,
100);
document.onkeydown = function (e) {
var c = getc(e.which);
countPoint(c);
}
ok，到此，文件拆分的问题基本解决。拆分后的文件结构为：
现在，在html文件最后的地方引入js文件，整个html文档改成如下所示：
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body><div>
<a>
points: <span id="points">0</span>
</a>
<a>
miss: <span id="miss">0</span>
</a>
</div><canvas id="showBox" class="showBox">
</canvas>
<br/><script type="text/javascript" src="javascript/config.js">
</script>
<script type="text/javascript" src="javascript/randomnum.js">
</script>
<script type="text/javascript" src="javascript/commonfunction.js">
</script>
<script type="text/javascript" src="javascript/main.js">
</script>
</body>
</html>
我觉得，到这里，应该需要了解：
怎么去拆分文件，怎么在html中引入外部文件。
现在，不妨思考一下，
1.为什么css文件的引入位置在网页比较靠前的位置，而把js文件的引入位置放在比较靠后的位置。
2.拆分了好几个js文件出来，这些js文件的引入次序有没有硬性要求，交换次序之后会怎样。
3.把js中所有全局变量放在同一个js文件中是否合适，是否有更好的方案。
这些问题一试便知，也都很容易在搜索引擎上找到答案，不再赘述。
再来考虑一下之前上一篇遗留的一个问题：
1.如何设置配置项并修改之，这一部分可以做成游戏难度设置模块
再加一个问题：
2.既然是游戏，没有背景音乐怎么行？如何引入背景音乐？如何控制音乐的播放？
每消除一个字符，都只是简简单单消除了，能不能在解决上一问题的基础上再修改下，使字符在消除时能够显示一小团焰火并发出爆裂声？
从头开始构建web前端应用——字符炸弹小游戏（二）