使用 IIFE 进行游戏开发 - 代码分离
Game Development Using IIFEs - Code Seperation
所以,我目前正在学习如何使用Javascript进行Canvas游戏开发。在看到几个示例中使用的方法并阅读了其优点后,我开始将我的代码转移到 IIFE 中。
但是,目前,我的所有代码都在单个IIFE中。我想做的是开始将我的代码分成单独的文件。
但是,我坚持的部分是如何允许每个IIFE函数查看另一个函数中的数据。我真的不明白这是如何工作的。
我的完整代码在这个小提琴中,https://jsfiddle.net/473z1g2t/1/,而我的代码示例如下;
(function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function Ball(x, y, radius, color){
/* .. */
}
function Paddle(x, y){
/* .. */
}
var ball = new Ball((canvas.width / 2), canvas.height - 60, 10, 'black');
var paddle = new Paddle((canvas.width / 2) - 20, 550);
function initCanvas(){
canvas.addEventListener('click', function(){
if(!ball.active)
ball.active = true;
else
ball.active = false;
});
canvas.addEventListener('mousemove', function(e){
});
}
initCanvas();
function Update(){
Draw();
requestAnimationFrame(Update);
if(ball.active){
/* .. */
}
}
function Draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.draw();
paddle.draw();
}
requestAnimationFrame(Update);
})();
TLDR
我想将我的球拍和球逻辑与应用程序的其余部分(可能还有 canvasInit 函数)分开。这样做的首选方法是什么?我知道我可以将参数传递给这些函数,但是我在它们之间传递什么?
提前谢谢。
据我从你的代码中了解到,你实际上没有在垫子和球之间进行通信。
因此,您可以将类移动到另一个文件中,并拥有一个主文件(画布文件),该文件可以协调屏幕上的元素。
'''
(function(canvas, ctx) {
function Ball(x, y, radius, color){
this.x = x;
this.y = y;
this.r = radius;
this.c = color;
this.vx = -3;
this.vy = -3;
this.active = false;
this.draw = function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
ctx.fill();
ctx.closePath();
}
}
})(canvas, ctx);
'''
您可以这样做并共享全局画布和 ctx,也可以将画布和 ctx 作为参数发送到球/桨构造函数中
Bu 如果确实想在它们之间共享数据,可以在具有特定参数的业务流程调用方法期间执行此操作。
相关文章:
- 在Jquery中分离后,如何将相同的函数添加回代码中
- AngularJS中的代码分离
- 在Titanium中分离平台特定代码的最佳方式
- 在不使用jquery($symbol)knockout.js的情况下分离代码javascript
- 使用 IIFE 进行游戏开发 - 代码分离
- 分离AngularJs控制器代码的最佳方法
- 如何分离代码:我的控制器是否做了太多工作
- 有哪些可能的方法可以将 knockoutjs 视图模型代码与 asp.net mvc 视图分离,并对其进行 mvc 服务
- 是否可以将javascript代码与Riot Js中的标记文件分离
- 分离JavaScript代码的缺点
- React.js:将React.js代码与HTML分离
- 发布/订阅后分离文件夹的客户端和服务器的代码
- jQuery.remove(),分离DOM元素,但我仍然可以从代码访问元素.如何避免泄漏
- 如何为网站的不同部分分离javascript代码
- 如何将代码从一个路由文件分离到多个,以及如何从这些分离的文件中调用函数
- 剑道UI - Java脚本事件处理程序(代码分离+参数)
- 如何分离ajax响应和HTML代码
- 如何在Backbone.js中将视图代码分离成模型和控制器
- 可重用的D3图表与公共代码分离
- 如何清理此代码?分离CSS尝试失败