javascript - Can someone tell me how to make an image inside a canvas move? -
can tell me how make image on canvas move? in previous version of game made image div moved fine can't figure out. making me write more please ignore part:
//this variable image want move var blinky = { x: 0, y: 0 }; //this makes image appear when page loaded var byready = false; var byimage = new image(); byimage.onload = function(){ byready = true; }; byimage.src = "blinky.jpg" //this puts images on canvas var render = function(){ if(bgready){ ctx.drawimage(bgimage,0,0); } if(hrready){ ctx.drawimage(hrimage,hero.x, hero.y); } if(emready){ ctx.drawimage(emimage,monster.x, monster.y); } if(byready){ ctx.drawimage(byimage,blinky.x,blinky.y); } //this moves div around screen randomly $(document).ready(function(){ animatediv(); }); function makenewposition(){ // viewport dimensions (remove dimension of div) var h = $(window).height() - 30; var w = $(window).width() - 30; var nh = math.floor(math.random() * h); var nw = math.floor(math.random() * w); return [nh,nw]; } function animatediv(){ var newq = makenewposition(); var oldq = $('#blinky').offset(); var speed = calcspeed([oldq.top, oldq.left], newq); $('#blinky').animate({ top: newq[0], left: newq[1] }, speed, function(){ animatediv(); }); }; function calcspeed(prev, next) { var x = math.abs(prev[1] - next[1]); var y = math.abs(prev[0] - next[0]); var greatest = x > y ? x : y; var speedmodifier = 0.1; var speed = math.ceil(greatest/speedmodifier); return speed; }
basically need draw loop (using requestanimationframe
) draws image on context of canvas.
here full jsfiddle: http://jsfiddle.net/ety656yq/
Comments
Post a Comment