Develop Reference

Why does my object method not register? Javascript

here is the code for my project:
'_' is a selector method.
'update' is run on an interval of 0.1
'init' creates the
'Ball' is the object I'm trying to create
'ball.set()' is the method that is not working.
var width = window.innerWidth/3;
var height = window.innerHeight-60;
var balls = [];
var id;
function rand(min, max) {
return (Math.random() * (max - min)) + min;
}
function run(){
init();
}
function init(){
document.write("<div style='width:"+width+"px;height:"+height+"px;' id='container'></div>");
new Ball(width/2-12.5, height/2-12.5, rand(-2, 2), rand(-2, 2), 1);
id = setInterval(update, 0.1);
}
function _(elem){
return document.getElementById(elem);
}
function update(){
for(var b in balls){
b.set();
}
}
function Ball(x, y, vx, vy, ind){
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.ind = ind;
balls[this.ind] = this;
_("container").innerHTML+=("<div style='top:"+y+"px;left:"+x+"px;' class='ball' id='ball"+this.ind+"'></div>");
this.deleteBall = function () {
_('ball'+this.ind).outerHTML = "";
balls[this.ind] = null;
};
this.set = function(){
this.x += this.vx;
this.y += this.vy;
var elem = _("ball"+this.ind);
elem.style.left = this.x + 'px';
elem.style.top = this.y + 'px';
};
}
run();
I'm trying to make a Ball object for a JS game I'm making. The only problem is Google Chrome is giving me an error:
Uncaught TypeError: b.set is not a function
at update (ballgame.js:29)
update # ballgame.js:29
What am I doing wrong?

I don't know the complete requirement, but I found the cause for this issue.The problem is with the line
balls[this.ind] = this;
Assume for the first time the constructor is called with 'ind' value of 5. This will set balls[5]=this object. Now 'balls' array length becomes 6 and balls[0] through balls[4] will contain value as 'undefined'.
Now in 'update' method, when you iterate through balls array, as balls[0] through balls[4] are undefined, you get the error
Uncaught TypeError: b.set is not a function

Javascript constructor variable NAN inside function

I've tried to trace through all the possibilities of what's happening, but I'm learning Javascript so it has to be something I just don't know. The specific issue lies within the pongGame constructor/function; however, I have included my entire code just encase it is necessary. I would assume that, inside my gameLoop function which declared within the pongGame constructor, the variable pongGame.delta would be equal to 10; For, that is what I declared it to be. However, it is equal to NaN. What exactly is the issue that is happening here? Thanks :)
var keys = [false, false, false, false];
var cavnas = document.getElementById("canvas");
var context = cavnas.getContext("2d");
(function() {
startUp();
})();
function startUp() {
resize();
window.addEventListener("resize", resize);
var game = new pongGame();
game.start();
}
function resize() {
document.getElementById("canvas").width = window.innerWidth;
document.getElementById("canvas").height = window.innerHeight;
}
function pongGame() {
this.delta = 10;
this.lastTime = 0;
this.ball = new ball();
this.start = function() {
this.gameLoop();
}
this.update = function() {
this.ball.update();
}
this.render = function() {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
this.ball.render();
}
var pongGame = this;
this.gameLoop = function(timestamp) {
console.log(pongGame.delta); // 10
pongGame.delta += timestamp - pongGame.lastTime;
while (pongGame.delta > (1000 / 60)) {
pongGame.update();
pongGame.delta -= (1000/60);
}
pongGame.render();
pongGame.lastTime = timestamp;
requestAnimationFrame(pongGame.gameLoop);
}
}
function paddle() {
}
function ball() {
this.x = 1;
this.y = 1;
this.xspeed = 1;
this.yspeed = 1;
this.size = 10;
this.update = function() {
if (this.x == 0 || this.x == window.innerWidth - this.size) {
this.xspeed = -this.xspeed;
}
if (this.y == 0 || this.y == window.innerHeight - this.size) {
this.yspeed = -this.yspeed;
}
this.x += this.xspeed;
this.y += this.yspeed;
}
this.render = function() {
context.beginPath();
context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
context.fill();
}
}

The first time you call gameLoop you do not pass a timestamp so this expression pongGame.delta += timestamp - pongGame.lastTime; sets delta to NAN the first time its ran and then all subsequent runs (which have a timestamp) since its already NAN.
Maybe call it with 0 the first time
this.start = function() {
this.gameLoop(0);
}

Arrange divs in a circle and animate radius outwards

Problem: I want to arrange divs in a circle and animate the radius. Unfortunately, I seem to have some sort of binding issue with my variables. Trying to figure this out since 3 days. What can I do to get out of this predicament? I mean how do I solve this in an "elegant fashion"?
What I Tried: I did a few console logs and everything implies that javascript has problems interpreting what I mean with "this".
I also found out that I need to bind the parameter inside requestAnimationFrame but I cant imagine binding every variable and function name so I must be doing something wrong here.
Here is the JSFiddle: https://jsfiddle.net/Lh23pzvb/4/
Code:
function explodeRocket(obj) {
this.elem = document.getElementsByTagName('div');
this.particle = [];
this.radius = obj.radius;
this.color = ['red', 'yellow', 'cyan', 'orchid']
this.interval = 2 * Math.PI / obj.particles;
this.init = function() {
this.create();
this.blast();
}
this.init();
this.create = function() {
for(var i = 0; i < obj.particles; i++) {
document.body.appendChild(document.createElement('div'));
this.elem[i].style.background = this.color[obj.colorIndex];
this.particle.push(new this.Properties(0, obj.x, obj.y));
this.updatePosition(i);
}
}
this.Properties = function(angle, x, y) {
this.angle = angle;
this.x = x;
this.y = y;
}
this.updatePosition = function(index) {
this.elem[index].style.left = this.particle[index].x + 'px';
this.elem[index].style.top = this.particle[index].y + 'px';
}
this.blast = function() {
for(var i = 0; i < 10 - 1; i++) {
if(this.radius < obj.radiusMax) {
this.radius += 0.2;
}
this.particle[i].x = Math.round(window.innerWidth) / 2 + obj.radius * Math.cos(this.particle[i].angle) ;
this.particle[i].y = Math.round(window.innerHeight) / 2 + obj.radius * Math.sin(this.particle[i].angle);
this.updatePosition(i);
this.particle[i].angle += this.interval;
}
requestAnimationFrame(this.blast);
}
}
new explodeRocket({
particles: 4, colorIndex: 0, radius: 0, radiusMax: 200, x: 0, y: 0
})

Bug 1:
You call the init() before the create() function initialised, so you cannot call it. You can fix it by putting the init() at the end of the explodeRocket function, so all your functions exist when calling init().
Bug 2:
.blast() runs the loop too many times. You only have 4 particles, but the loop runs 9 times. You can fix it by running the loop only particle.length times:
for(var i = 0; i < this.particle.length; i++) {
Bug 3:
The this bug. Your code loses this, when you call requestAnimationFrame. You can use the Function.call, which takes the this object as the first parameter. It's common to bind this to some other variable (like self) to overcome these issues:
var self = this;
requestAnimationFrame(function() {
self.blast.call(self);
});
Bug 4:
You're referring to obj.radius, which is always 0. You should use this.radius:
this.particle[i].x = Math.round(window.innerWidth) / 2 + this.radius * Math.cos(this.particle[i].angle);
this.particle[i].y = Math.round(window.innerHeight) / 2 + this.radius * Math.sin(this.particle[i].angle);
Bug 5:
You probably don't want to rotate full 1/4th of round always, so animate 1/40th of circle per frame:
this.particle[i].angle += this.interval * 0.1;
Bug 6:
You probably want the particles to be evenly spaced, so intialize the particle with proper radius:
this.particle.push(new this.Properties(this.interval * i, obj.x, obj.y));
Complete code:
function explodeRocket(obj) {
var self = this;
this.elem = document.getElementsByTagName('div');
this.particle = [];
this.radius = obj.radius;
this.color = ['red', 'yellow', 'cyan', 'orchid']
this.interval = 2 * Math.PI / obj.particles;
this.init = function() {
this.create();
this.blast();
}
this.create = function() {
for(var i = 0; i < obj.particles; i++) {
document.body.appendChild(document.createElement('div'));
this.elem[i].style.background = this.color[obj.colorIndex];
this.particle.push(new this.Properties(this.interval * i, obj.x, obj.y));
this.updatePosition(i);
}
}
this.Properties = function(angle, x, y) {
this.angle = angle;
this.x = x;
this.y = y;
}
this.updatePosition = function(index) {
this.elem[index].style.left = this.particle[index].x + 'px';
this.elem[index].style.top = this.particle[index].y + 'px';
}
this.blast = function() {
for(var i = 0; i < this.particle.length; i++) {
if(this.radius < obj.radiusMax) {
this.radius += 0.2;
}
this.particle[i].x = Math.round(window.innerWidth) / 2 + this.radius * Math.cos(this.particle[i].angle);
this.particle[i].y = Math.round(window.innerHeight) / 2 + this.radius * Math.sin(this.particle[i].angle);
this.updatePosition(i);
this.particle[i].angle += this.interval * 0.1;
}
requestAnimationFrame(function() {
self.blast.call(self);
});
}
this.init();
}
new explodeRocket({
particles: 4, colorIndex: 0, radius: 0, radiusMax: 200, x: 0, y: 0
})
That should do it!
Edit:
Working jsfiddle: https://jsfiddle.net/v3nt2kd0/

First of all, try moving your this.init(); at the end of the constructor.
After doing that there are some other errors thrown, inside your blast() method, which probably has something to do with the fact that the this.particles array only has 4 elements and you are trying to do 10 iterations or so.
As a tip, you could move most, if not all, of the methods on the explodeRocket.prototype so that instances share the same method instance, like so:
function ExplodeRocket(obj) {
//yada yada
}
ExplodeRocket.prototype.blast = function blast() {
//yada yada
}

Canvas game, where to write code for background?

The Problem
I have been creating a game, I have got to a stage where I want to see what it looks like with a mockup background I have created.
The Question
Where about in my code should I place this code as the place it currently is doesnt show the background.
I want this background on the canvas, the dimensions are correct.
The Code
var game = create_game();
game.init();
function create_game() {
debugger;
var level = 1;
var projectiles_per_level = 1;
var min_speed_per_level = 1;
var max_speed_per_level = 2;
var last_projectile_time = 0;
var next_projectile_time = 0;
var width = 600;
var height = 500;
var delay = 1000;
var item_width = 30;
var item_height = 30;
var total_projectiles = 0;
var projectile_img = new Image();
var projectile_w = 30;
var projectile_h = 30;
var player_img = new Image();
var background_img = new Image();
var c, ctx;
var projectiles = [];
var player = {
x: 200,
y: 400,
score: 0
};
function init() {
projectile_img.src = "projectile.png";
player_img.src = "player.png";
background_img.src = "background.png";
background_img.onload = function(){
context.drawImage(background_img, 0, 0);
}
level = 1;
total_projectiles = 0;
projectiles = [];
c = document.getElementById("c");
ctx = c.getContext("2d");
ctx.fillStyle = "#410b11";
ctx.fillRect(0, 0, 500, 600);
c.addEventListener("mousemove", function (e) {
//moving over the canvas.
var bounding_box = c.getBoundingClientRect();
player.x = (e.clientX - bounding_box.left) * (c.width / bounding_box.width) - player_img.width / 2;
}, false);
setupProjectiles();
requestAnimationFrame(tick);
}
function setupProjectiles() {
var max_projectiles = level * projectiles_per_level;
while (projectiles.length < max_projectiles) {
initProjectile(projectiles.length);
}
}
function initProjectile(index) {
var max_speed = max_speed_per_level * level;
var min_speed = min_speed_per_level * level;
projectiles[index] = {
x: Math.round(Math.random() * (width - 2 * projectile_w)) + projectile_w,
y: -projectile_h,
v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed,
delay: Date.now() + Math.random() * delay
}
total_projectiles++;
}
function collision(projectile) {
if (projectile.y + projectile_img.height < player.y + 20) {
return false;
}
if (projectile.y > player.y + 74) {
return false;
}
if (projectile.x + projectile_img.width < player.x + 20) {
return false;
}
if (projectile.x > player.x + 177) {
return false;
}
return true;
}
function maybeIncreaseDifficulty() {
level = Math.max(1, Math.ceil(player.score / 10));
setupProjectiles();
}
function tick() {
var i;
var projectile;
var dateNow = Date.now();
c.width = c.width;
for (i = 0; i < projectiles.length; i++) {
projectile = projectiles[i];
if (dateNow > projectile.delay) {
projectile.y += projectile.v;
if (collision(projectile)) {
initProjectile(i);
player.score++;
} else if (projectile.y > height) {
initProjectile(i);
} else {
ctx.drawImage(projectile_img, projectile.x, projectile.y);
}
}
}
ctx.font = "bold 24px sans-serif";
ctx.fillStyle = "#410b11";
ctx.fillText(player.score, c.width - 50, 50);
ctx.fillText("Level: " + level, 20, 50);
ctx.drawImage(player_img, player.x, player.y);
maybeIncreaseDifficulty();
requestAnimationFrame(tick);
ctx.drawImage(background_img, 0, backgroundY);
}
return {
init: init
};
}

As already pointed out in a comment, here more precisely:
First of all, the background picture must be rendered first in every animation frame.
However, the picture didn't show up at all. This is due to the fact that variable was used (backgroundY), which is never declared somewhere.
This should actually printed to the console as an error "backgroundY" is not defined.
Whenever an the property src of an image object is set to a value, it takes some time until it's loaded. So in many cases, it's necessary to indicate the moment, when it's finished loading by the onload callback.
In this case, however, it's not necessary. The tick / animation loop function will just draw nothing (an empty image object) until it's loaded. After it's loaded it will continue to draw the loaded image every frame.
If the background is really important, meaning, the app should only start, when it's there, of course, one can only start the whole game / animation from within the img.onload handler.

You must draw:
the background first
the player later
level/score info last
Background < Player < UI < You Looking
The drawing order is from back to top (painters algorithm)
Also note that for performance reasons if you background never changes you could draw it in another 'static' canvas under the game canvas.
Otherwise the background will be drawn above/over the player and hide it.

Access constructor from prototype method

In the code below, I have a Mass constructor and some methods. Originally, methods were inside the Mass constructor, but there are many methods I'm using. So, to keep things more organized I removed some of the methods outside of the Mass and add them using prototype.
But then I have an issue. I can't reference to Mass with this; it refers to window.
function Mass(elm) {
this.getElement = function(element) {
if (typeof element == "string") {
return document.getElementById(element);
}
return element;
};
this.elm = this.getElement(elm);
this.elm.style.position = "absolute";
this.elm.style.left = 0 + "px";
this.elm.style.top = 0 + "px";
this.updateVars = function () {
this.width = parseInt(this.elm.style.width, 10);
this.height = parseInt(this.elm.style.height, 10);
this.top = parseInt(this.elm.style.top, 10);
this.left = parseInt(this.elm.style.left, 10);
this.radius = this.width / 2;
this.originX = this.left + this.radius;
this.originY = this.top + this.radius;
this.worldOrgX = this.originX + parseInt(this.elm.parentNode.style.left, 10);
this.worldOrgY = this.originY + parseInt(this.elm.parentNode.style.top, 10);
};
}
Mass.prototype = {
// other methods here
rotation : {
// this = window
mass : this,
angle : 0,
handler : null,
rotate : function (angularVelocity, rotationSpeed) {
this.angle = (this.angle + angularVelocity) % 360;
// here I need to access Mass.elm and apply rotate
this.mass.elm.style.webkitTransform = "rotate(" + this.angle + "deg)";
},
start : function (angularVelocity, rotationSpeed) {
var rotation = this; // this = Mass.rotation
rotation.handler = setInterval(function () {
rotation.rotate(angularVelocity, rotationSpeed);
}, rotationSpeed);
},
},
}
var earth = new Mass("earth");
//earth.rotation.start(4.5, 25);
Fiddle
Old version of the code. This is working fine. What changes should I make for new one to work?

The prototype is not meant to make the code inside your constructor smaller. The prototype is meant to share common functionality. For example your getElement method is the same for all instances of Mass. Hence it would be ideal to put it on the prototype. Same for updateVars.
On the other hand this.rotation is an object and not a function. Every instance of Mass will have a different this.rotation property. Hence this.rotation cannot be shared and hence must not be put on the prototype.
I usually like to create "classes" in JavaScript using a simple defclass function:
function defclass(prototype) {
var constructor = prototype.constructor;
constructor.prototype = prototype;
return constructor;
}
The defclass function unwraps a prototype and returns its constructor. By the way, the constructor is just another method on the prototype.
So here's how I would rewrite your Mass class:
var Mass = defclass({
constructor: function (id) {
var element = this.element = this.getElement(id);
var style = element.style;
style.position = "absolute";
style.left = 0;
style.top = 0;
this.rotation = new Rotation(this);
},
getElement: function (id) {
if (typeof id !== "string") return id;
else return document.getElementById(id);
}
});
Next we create the Rotation class:
var Rotation = defclass({
constructor: function (mass) {
this.mass = mass;
this.angle = 0;
},
start: function (angularVelocity, delay) {
var rotation = this;
setInterval(function () {
rotation.rotate(angularVelocity);
}, delay);
},
rotate: function (angularVelocity) {
var angle = this.angle = (this.angle + angularVelocity) % 360;
var transform = "rotate(" + angle + "deg)";
var style = this.mass.element.style;
style.webkitTransform = transform;
style.mozTransform = transform;
style.msTransform = transform;
style.oTransform = transform;
style.transform = transform;
}
});
Finally we simply create an instance of Mass and make it rotate:
var earth = new Mass("earth");
earth.rotation.start(4.5, 25);
See the demo for yourself: http://jsfiddle.net/NL3SJ/