Dart canvas movement -
Dart canvas movement -
what best way canvas motion in dart? http://jsfiddle.net/loktar/dmyvg/
i trying smooth canvas motion , see dart do.
also there jsfiddle alt dart?
var canvas = document.getelementbyid("canvas"), ctx = canvas.getcontext("2d"); canvas.width = canvas.height = 300; var x = 150, y = 150, vely = 0, velx = 0, speed = 2, friction = 0.98, keys = []; function update() { if (keys[38]) { if (vely > -speed) { vely--; } } if (keys[40]) { if (vely < speed) { vely++; } } if (keys[39]) { if (velx < speed) { velx++; } } if (keys[37]) { if (velx > -speed) { velx--; } } vely *= friction; y += vely; velx *= friction; x += velx; if (x >= 295) { x = 295; } else if (x <= 5) { x = 5; } if (y > 295) { y = 295; } else if (y <= 5) { y = 5; } ctx.clearrect(0, 0, 300, 300); ctx.beginpath(); ctx.arc(x, y, 5, 0, math.pi * 2); ctx.fill(); settimeout(update, 10); } update(); document.body.addeventlistener("keydown", function (e) { keys[e.keycode] = true; }); document.body.addeventlistener("keyup", function (e) { keys[e.keycode] = false; });
i know there trydart! doesn't seem powerful jsfiddle.
as example, here equivalent dart code:
import 'dart:html'; import 'dart:math'; import 'dart:async'; void main() { canvaselement canvas = queryselector('canvas'); canvasrenderingcontext2d ctx = canvas.context2d; canvas.width = canvas.height = 300; int x = 150; int y = 150; double vely = 0.0; double velx = 0.0; int speed = 2; double friction = 0.98; map<int, bool> keys = new map<int, bool>(); void update() { if (keys[38]) { if (vely > -speed) { vely--; } } if (keys[40]) { if (vely < speed) { vely++; } } if (keys[39]) { if (velx < speed) { velx++; } } if (keys[37]) { if (velx > -speed) { velx--; } } vely *= friction; y += vely; velx *= friction; x += velx; if (x >= 295) { x = 295; } else if (x <= 5) { x = 5; } if (y > 295) { y = 295; } else if (y <= 5) { y = 5; } ctx.clearrect(0, 0, 300, 300); ctx.beginpath(); ctx.arc(x, y, 5, 0, pi * 2); ctx.fill(); var timer = new timer(new duration(milliseconds:10), update); } update(); document.body.onkeydown.listen((e) => keys[e.keycode] = true); document.body.onkeyup.listen((e) => keys[e.keycode] = false); }
you can take advantage of things in dart api num.clamp simplify code.
dart dart-html
Comments
Post a Comment