KineticJS move shape -
i'm new kineticjs , i'm trying make circle shape move on player input. alerts on event listener firing, circle not moving. ?
here's code:
(function () { var stage = new kinetic.stage({ container: "the-container", width: 800, height: 600, }); var layer = new kinetic.layer(); var playercircle = new kinetic.circle({ x: 50, y: 50, radius: 10, fill: "black", }); var leftarrowcode = 37; var rightarrowcode = 39; var uparrowcode = 38; var downarrowcode = 40; document.addeventlistener('keydown', function (event) { if (event.keycode == leftarrowcode) { playercircle.move({ x: -10, y: 0 }); alert("left pressed"); } if (event.keycode == rightarrowcode) { playercircle.move({ x: 10, y: 0 }); alert("right pressed"); } if (event.keycode == uparrowcode) { playercircle.move({ x: 0, y: -10 }); } if (event.keycode == downarrowcode) { playercircle.move({ x: 0, y: 10 }); } }); layer.add(playercircle); stage.add(layer); }());
you need redraw circle(notice stuff added @ end of event listener. maybe try use transitionto(), or add delay make smoother.
document.addeventlistener('keydown', function (event) { if (event.keycode == leftarrowcode) { playercircle.move({ x: -10, y: 0 }); alert("left pressed"); } if (event.keycode == rightarrowcode) { playercircle.move({ x: 10, y: 0 }); alert("right pressed"); } if (event.keycode == uparrowcode) { playercircle.move({ x: 0, y: -10 }); } if (event.keycode == downarrowcode) { playercircle.move({ x: 0, y: 10 }); } layer.add(playercircle); stage.add(layer); return stage; });
Comments
Post a Comment