首页 > 代码库 > 从头开始构建web前端应用——字符炸弹小游戏（二）

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

2024-07-06 11:19:00   225人阅读

　　接上篇。欢迎指正。

 

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

　　拆分文件的目的，是为了方便代码管理。很显然，样式表，网页源文件，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:&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>

 

　　我觉得，到这里，应该需要了解：

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

 

　　现在，不妨思考一下，

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

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

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

　　

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

 

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

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

 

　　再加一个问题：

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

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

 

 

 

 


联系
我们