从头开始构建web前端应用——字符炸弹小游戏(二)

  接上篇。欢迎指正。

 

  现在,需要考虑如何拆分文件。

  拆分文件的目的,是为了方便代码管理。很显然,样式表,网页源文件,js代码需要放在不同的地方。另外,对于前端开发来说,主要的逻辑控制流程,都在js文件里面,所以,还需要拆分js文件。我个人习惯上按功能模块来拆分。在拆分前,你需要仔细思考一下,每一个函数和其他函数之间的关联度,尽量做到相关功能函数在一个文件里。

 

  ok,开工。在html所在文件目录下创建2个新文件夹,分别命名为css,js。

  1.拆分css。

  css样式表写的不多,直接在css文件夹下创建文件,名称姑且叫做main.css

  直接把<style>标签里面的内容copy到该文件下,注意,别把标签copy进来了。

从头开始构建web前端应用——字符炸弹小游戏(二)
 .showBox {
                border: 1px solid #000;
            }
从头开始构建web前端应用——字符炸弹小游戏(二)

  然后,在页面首部<head>标签里添加一行代码,将css样式表引入:

从头开始构建web前端应用——字符炸弹小游戏(二)
<head>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
从头开始构建web前端应用——字符炸弹小游戏(二)

 

  2.拆分js文件

   很显然字符对象是单独的一部分内容,把这个对象的构造器和挂载到原型上的方法挑出来,组成单独文件。另外,产生随机字符这个函数也只有这个对象会用到,也一并加入进来。文件名不妨定为randomnum.js

从头开始构建web前端应用——字符炸弹小游戏(二)
/*
 * 字符对象构造器
 */
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];
}
从头开始构建web前端应用——字符炸弹小游戏(二)

  还有一些变量的声明部分,也可以单独拎出来,文件名命为config.js。应该说命名不是很规范,暂且这么用再说。

从头开始构建web前端应用——字符炸弹小游戏(二)
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;
从头开始构建web前端应用——字符炸弹小游戏(二)

还有一些零散的函数,比如,初始化画布,产生随机数,在画布上显示(包括字符队列的添加删除移动等),一并作为通用函数组成单独文件,文件名命为commonfunction.js

从头开始构建web前端应用——字符炸弹小游戏(二)
/*
 * 初始化画布
 */
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);
}
从头开始构建web前端应用——字符炸弹小游戏(二)

最后剩下和网页正常运行的主要调用和交互声明函数,单独组成main.js:

从头开始构建web前端应用——字符炸弹小游戏(二)
initCanvas();

  setInterval(proNewCharObj, 1000);
  setInterval(moveAndDrawCharObj, 100);

document.onkeydown = function (e) {
    var c = getc(e.which);
    countPoint(c);
}
从头开始构建web前端应用——字符炸弹小游戏(二)

  ok,到此,文件拆分的问题基本解决。拆分后的文件结构为:

从头开始构建web前端应用——字符炸弹小游戏(二)

 

  现在,在html文件最后的地方引入js文件,整个html文档改成如下所示:

从头开始构建web前端应用——字符炸弹小游戏(二)
<html>
<head>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div>
    <a>
        points:&nbsp;<span id="points">0</span>
    </a>
    <a>
        miss:&nbsp;<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>
从头开始构建web前端应用——字符炸弹小游戏(二)

 

  我觉得,到这里,应该需要了解:

  怎么去拆分文件,怎么在html中引入外部文件。 

 

  现在,不妨思考一下,

  1.为什么css文件的引入位置在网页比较靠前的位置,而把js文件的引入位置放在比较靠后的位置。

  2.拆分了好几个js文件出来,这些js文件的引入次序有没有硬性要求,交换次序之后会怎样。

  3.把js中所有全局变量放在同一个js文件中是否合适,是否有更好的方案。

  

这些问题一试便知,也都很容易在搜索引擎上找到答案,不再赘述。

 

  再来考虑一下之前上一篇遗留的一个问题:

  1.如何设置配置项并修改之,这一部分可以做成游戏难度设置模块

 

  再加一个问题:

  2.既然是游戏,没有背景音乐怎么行?如何引入背景音乐?如何控制音乐的播放?

    每消除一个字符,都只是简简单单消除了,能不能在解决上一问题的基础上再修改下,使字符在消除时能够显示一小团焰火并发出爆裂声?

 

 

 

 

从头开始构建web前端应用——字符炸弹小游戏(二),布布扣,bubuko.com

从头开始构建web前端应用——字符炸弹小游戏(二)

上一篇:Jquery.linq 使用示例


下一篇:jsonp理解