i want keep animation is, problem flickering of animation.
if reason question needs more elaborate on, please let me , explain in more details.
var text = 'got it'; document.getelementbyid('mycanvas').style.backgroundcolor = 'lightgray'; var ctx = document.getelementbyid('mycanvas'); var c = ctx.getcontext('2d'); function ball(x, y, zx, zy, rotation,goldx,goldy) { this.x = x; this.y = y; this.zx = zx; this.zy = zy; this.rotation = rotation; this.goldx = goldx; this.goldy = goldy; this.draw = function() { c.beginpath(); c.settransform(1, 0, 0, 1, 0, 0); c.translate(0, 0.01); c.rotate(this.rotation); c.fillstyle = 'black'; c.font="10px corsive"; c.filltext("$100", this.x, this.y + 10); c.strokestyle = "gray" c.rect(this.x, this.y, 24,14); c.fillstyle = 'rgba(0, 128, 0, 0.49)'; c.fill(); c.stroke(); c.closepath(); } var x = math.floor(math.random() *10); this.draw1 = function() { c.beginpath(); c.arc(this.goldx, this.goldy, 5, math.pi*2,false); c.fillstyle = 'gold'; c.fill(); c.stroke(); } this.update = function() { var b = math.random() * 500; if(this.y > 510 || this.x > 510 || this.x < -30) {ballarray.splice(i,1)} this.x += this.zx; this.y += this.zy; if(ballarray.length < 99) {ballarray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))} if(x > 350) { this.rotation += 0.00009} else {this.rotation -= 0.00009}; this.draw(); if(this.goldy > 510 || this.goldx > 510 || this.goldx < 0) {goldarray.splice(j,1)} if(goldarray.length < 49) {goldarray.push(new ball(0,0,0,0,0,goldx,goldy))} this.goldy += 1; this.draw1(); } } var goldarray = []; (j = 0; j < 50; j++){ var goldx = math.random() * 500; var goldy = math.random() * 500; goldarray.push(new ball(0,0,0,0,0,goldx,goldy)); } var ballarray = []; for(i= 0; < 100; i++) { var x = math.random() * 500; var y = math.random() * 500; var zx = math.random() - 0.5; var zy = 1; var rotation = 0; ballarray.push(new ball(y,x,zx,zy,rotation,goldx,goldy)); } function animate() { requestanimationframe(animate); c.clearrect(0,0,500, 500); for(j = 0; j< goldarray.length; j++) { goldarray[j].update(); } for(i = 0; < ballarray.length; i++) { ballarray[i].update(); } } animate();<canvas id="mycanvas" width="500" height="500" style="border: 1px solid black"></canvas>
array splice causing skip objects
your animation flicking because of lot of reasons.
the main 1 being way delete ball , or gold. call update function within loop.
for(i = 0; < balls.length; i++){ balls[i].update(); } then in update function test if ball out of bounds. if remove array
if(this.y > 510) { // example not code balls.splice(i,1); } but ignore fact have moved balls above 1 in array down 1 index. when update function returns ball @ i has been removed , next 1 above @ i. loop increments i , draw next ball, skipping ball.
the skipped ball not rendered frame , flicker. same gold.
quick fix
there other problems (many) , give fix require complete rewrite.
what can reset ball , gold rather delete , create another.
where have
if(this.y > 510 || this.x > 510 || this.x < -30) { ballarray.splice(i,1) } change to
if(this.y > 510 || this.x > 510 || this.x < -30) { this.x = math.random() * 500; this.y = math.random() * 500; this.zx = math.random() - 0.5; this.zy = 1; this.rotation = 0; } and remove line
if(ballarray.length < 99) {ballarray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))} do same gold.
that ready next problem.
some code notes.
you still have problems because have gold , ball 1 object rendering both ball , gold each ball , same each gold.
you need ball , gold separate objects, gold not draw ball , other way around.
you should have
function gold(){ this.draw(){ // draw code this.update() { // update code ... } function ball(){ /* code */ this.draw(){ // draw code this.update() { // update code ... } and create each
ballarray.push(new ball( stuff)); goldarray.push(new gold( stuff)); also have need declare variables have not done i,j end in global scope , come bug soon.
whenever use variable must have @ location inside function declaration.
eg
function animate(){ var i; var j; ... rest of code. oh , more...
but leave there now.
Comments
Post a Comment