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

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -