I'm trying to simulate a class in javascript. I'm new to it (and also to stackoverflow)
and want to learn. Somebody who gives me java explained it like this, but it doesn't work. What am I doing wrong?
function rectangle (width,height,x,y,jumping)
{
return { x: x,
y: y,
width: width,
height: height,
jumping: jumping};
}
var ava = new rectangle (5,5,10,20,10);
alert (x.ava) ;
Help appreciated
Thanks in advance (I hope I post this right)
edit: Thank you Philipp :)
Try this.
// this is how you write a class
function Rectangle(width, hight, x, y, jumping) {
this.x = x;
this.y = x;
this.width = width;
this.height = height;
this.jumping = jumping;
}
var ava = new Rectangle(5, 5, 10, 20, 10);
alert(ava.x);
also your variable is ava and calls x you had it backwards x.ava.
well your variable is not "x"
var ava = new rectangle (5,5,10,20,10);
alert (x.ava); You are looking for a variable x with a property of ava
When you run your code you get the error:
Uncaught ReferenceError: x is not defined
You want to use your variable that has the properties. You should have written it as:
alert (ava.x);
Related
I'm trying to draw a circle in the canvas in javascript but it's not working and I'm not getting an error. I've done it before and it usually works, but for some reason now it isn't. Any help would be highly appreciated.
// VARIABLES
var x = 100 ;
var y = 100;
var r = 50;
var c = 272;
var a = 0.9;
// EXECUTABLE CODE
circle();
// FUNCTION
function circle(x,y,r,c,a){
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2);
ctx.fillStyle = "hsl("+c+", 100%, 50%,"+a+")";
ctx.fill();
}
The reason why it is not working is because you did not pass in the arguments x,y,r,c,a when invoking the circle function. So, do this circle(x,y,r,c,a) and it should work for you.
I'm trying to make a heart move left and right, using a constructor function. This is what I've got so far, for display
for(var a = 0; a < TWO_PI; a+=0.01){
this.r = this.x, 5;
this.b = this.r* 16 pow(sin(a), 3);
this.c = -this.r*(13* cos(a) - 5 * cos(2*a) -2*cos(3*a) - cos(4*a));
vertex(this.b, this.c);
}
all the var have been defined, but the image is only moving one line and add this.x to every line make the image not show, although the console is not saying anything. Can someone please help me?
I know that you can write functions which work if you input different arguments. However, is there a way to add a function which you can write such as
vector.function(arguments);.
When I write the functions, I use the vector or object as an argument to get the value back, but is there a way to write it like I have above?
var Vector = function(x, y) {
this.x = x;
this.y = y;
}
Vector.prototype.yourFunction = function() {
/* access vector properties */
console.log(this.x, this.y);
}
var vector = new Vector(1,2);
vector.yourFunction(); // 1 2
It looks like what you want it an object containing a set of functions inside of it. When functions are defined inside of an objects, these are commonly referred to as "methods". This is a useful way of "namespacing" a set of common methods. You can achieve this in many ways. Here is the most basic way:
const vector = {
x: 0,
y: 0,
getDirection() {
return Math.atan2(this.y, this.x);
},
};
console.log(vector.getDirection());
This will work fine if you only need one vector. If you want to have many vectors, you can use instantiation to create as many vectors as you need. For example:
// Globally defined function
function getDirection(x, y) {
return Math.atan2(y, x);
}
function Vector(x = 0, y = 0) {
this.x = x;
this.y = y;
this.getDirection = () => {
// Defer to the globally defined function
return getDirection(x, y);
};
return this;
}
const vectors = [new Vector(10, 15), new Vector(0, 10), new Vector(10, 50)];
vectors.forEach((vector) => {
console.log(vector.getDirection());
});
For a javascript animation, I am trying to create buttons with the numbers 1-9 on them. Right now my javascript for the number 1 looks like:
that1 = { thisx : 120, thisy: H-400, thisnumber= "1",
draw: function() {
var keywidth = 100;
var keyheight = 150 ;
var x = this.thisx;
var y = this.thisy;
var cornercut = 5;
ctx.beginPath();
//drawing the key
ctx.moveTo(x, y+cornercut);
ctx.quadraticCurveTo(x,y, x+cornercut, y);
ctx.lineTo(x+keywidth-cornercut, y);
ctx.quadraticCurveTo(x+keywidth, y, x+keywidth, y+cornercut);
ctx.lineTo(x+keywidth, y+keyheight-cornercut);
ctx.quadraticCurveTo(x+keywidth, y+keyheight, x+keywidth-cornercut, y+keyheight);
ctx.lineTo(x+cornercut, y+keyheight);
ctx.quadraticCurveTo(x, y+keyheight, x, y+keyheight-cornercut);
ctx.lineTo(x, y+cornercut);
ctx.closePath();
ctx.stroke();
ctx.fillText(this.thisnumber, x+.5*keywidth,y+.8*keyheight);
},
highlight: function() {
ctx.fillStyle="red";
ctx.fill();
}
} ;
I could just copy this to create this2, this3, this4, this5, etc., but I feel like there is an easier way. Can anyone help? I am using JS because I believe it will be the easiest way to control these objects using animation, but please let me know if you have another suggestion.
You could change the values of thisx and thisy and simply call the draw function again, but the code would probably be more elegant if you simply passed in the values as arguments to a draw function.
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.
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. You want the move method to be called every 10ms instead, right? 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:
setInterval(ball1.move.bind(ball1, 4, 4), 10);
That is equivalent of wrapping your call to move in an anonymous function:
setInterval(function() { ball1.move(4, 4); }, 10);
Then you will also need to update move so that it calls draw appropriately too.
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).
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. 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. 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.