[英]Object Oriented Bouncing Ball
So it has been a good long while since I programmed in a functional language. 自从我使用一种功能语言进行编程以来已经有好长时间了。 I have this code functioning normally; 我的代码正常运行; however I dislike it due to my OOD preferences. 但是由于我对OOD的偏好,我不喜欢它。
var canvasWidth = 900;
var canvasHeight = 200;
var canvas0;
var context0;
var x0 = 20;
var y0 = 20;
var dx0 = 4;
var dy0 = 4;
function draw() {
context0.clearRect(0, 0, context0.canvas.width, context0.canvas.height);
context0.beginPath();
context0.fillStyle = "red";
context0.arc(x0, y0, 20, 0, 2 * Math.PI, true);
context0.closePath();
context0.fill();
// Boundary Logic
if (x0 < 13 || x0 > context0.canvas.width - 13) {
dx0 = (-dx0);
}
if (y0 < 13 || y0 > context0.canvas.height - 13) {
dy0 = (-dy0);
}
x0 += dx0;
y0 += dy0;
}
function init() {
'use strict';
canvas0 = document.getElementById("gfxCanvas");
context0 = canvas0.getContext('2d');
context0.canvas.width = canvasWidth;
context0.canvas.height = canvasHeight;
setInterval(draw, 10);
}
I have tried to refactor it into more object oriented design but I am having problems with the graphics processing. 我试图将其重构为更多面向对象的设计,但是在图形处理方面遇到了问题。 I can get the ball to appear once but I can not get it to move. 我可以使球出现一次,但不能移动。 Here is my refactored code; 这是我的重构代码; be aware that it is in a mid point of refactoring so there are some clear errors due to random tinkering. 请注意,它处于重构的中间点,因此由于随机修补而存在一些明显的错误。
function Ball(x, y, r, color) {
this.radius = r;
this.x = x;
this.y = y;
this.color = color;
console.log("x in creation" + this.x);
console.log("y in creation" + this.y);
draw();
}
Ball.prototype.draw = function(){
context1.beginPath();
console.log("x in DRAW()" + this.x);
console.log("y in DRAW()" + this.y);
context1.fillStyle = this.color;
context1.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
context1.closePath();
context1.fill();
};
Ball.prototype.move = function(dx, dy){
// Boundary Logic
if (this.x < 13 || this.x > context1.canvas.width - 13) {
dx = (-dx);
}
if (this.y < 13 || this.y > context1.canvas.height - 13) {
dy = (-dy);
}
this.x += dx;
this.y += dy;
};
function initialize() {
canvas1 = document.getElementById("gfxCanvas2");
context1 = canvas1.getContext('2d');
context1.canvas.width = 900;
context1.canvas.height = 200;
ball1 = new Ball(20,20,20, "red");
setInterval(ball1.move(4,4), 10);
}
I would preferably like this method to be the movement method. 我希望此方法为移动方法。 The actual method would take the direction/speed vectors. 实际方法将采用方向/速度矢量。
setInterval(ball1.move(4,4), 10);
setInterval(ball1.move(4,4), 10);
This doesn't work the way you intended it: It calls ball1.move(4,4)
once, then calls the result of that every 10ms. 这与您预期的方式不符:它只调用一次ball1.move(4,4)
,然后每10毫秒调用一次结果。 You want the move
method to be called every 10ms instead, right? 您想改为每10毫秒调用一次move
方法,对吗? There are two ways to do that: 有两种方法可以做到这一点:
setInterval(function() {
ball1.move(4,4);
}, 10);
or like this (more elegant in my opinion): 或者这样(我认为更优雅):
setInterval(ball1.move.bind(ball1,4,4), 10);
You can use bind
: 您可以使用bind
:
setInterval(ball1.move.bind(ball1, 4, 4), 10);
That is equivalent of wrapping your call to move
in an anonymous function: 这等同于包装您的调用以move
到匿名函数中:
setInterval(function() { ball1.move(4, 4); }, 10);
Then you will also need to update move
so that it calls draw
appropriately too. 然后,您还需要更新move
以便其调用也适当draw
。
In addition, I would not use a global variable to access the drawing context - even if I wasn't going to go completely OOP I would make sure that the draw
method and the move
method take a context (which, for the sake of simplicity could be "owned" by the ball). 另外,我不会使用全局变量来访问绘图上下文-即使我不打算完全使用OOP,我也会确保draw
方法和move
方法采用上下文(为了简单起见,被球“拥有”)。
Thanks for all the help, everyone. 谢谢各位的帮助。 You clarified everything very well and pointed me in the correct direction. 您很好地澄清了所有内容,并向我指出了正确的方向。 I suspected it was working in the manner you articulated however I wasn't entirely sure. 我怀疑它以您所说的方式工作,但是我不确定。 I knew a couple of things where wrong with my implementation but couldn't put it so succinctly with my current knowledge. 我知道我的实现存在一些问题,但以我目前的知识不能这么简洁。
However, I discovered my problem which your solutions were remedying in a more direct manner. 但是,我发现了我的问题,您的解决方案正在以更直接的方式解决。 I can't treat javascript with OOD paradigms. 我不能用OOD范例处理javascript。 I will be refactoring the code using a more functional design pattern. 我将使用更具功能性的设计模式来重构代码。 Not attempting to coerce the code into a OO design will make things considerably easier. 不尝试将代码强制转换为OO设计将使事情变得容易得多。 Your solutions helped but the bounds checking code was the next problem I ran into. 您的解决方案有所帮助,但是边界检查代码是我遇到的下一个问题。
I'l be working this into a module design pattern for the ball objects which should be much more suited for js scope/closures and procedural workflow. 我将把它设计成球形对象的模块设计模式,该模式应该更适合js作用域/闭包和过程工作流。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.