所以,我正在学习如何使用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);
})();
我想将Paddle和Ball逻辑与应用程序的其余部分(也可能是canvasInit函数)分开。解决这个问题的首选方法是什么?我知道我可以将参数传递给这些函数,但是我在它们之间传递什么?
先谢谢。
答案 0 :(得分:1)
据我所知,你的代码实际上并没有在打击垫和球之间进行交流。
因此,您可以将类移动到另一个文件中,并拥有一个主文件(画布一个),用于编排屏幕上的元素。
```
(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,也可以在Ball / Paddle构造函数中将canvas和ctx作为参数发送
如果您确实希望在它们之间共享数据,可以在具有特定参数的业务流程调用方法中执行此操作。