用 Dart 做这样的 Canvas 运动的最佳方法是什么?
http://jsfiddle.net/loktar/dMYvG/
我正在尝试使 Canvas 运动平稳,并想看看Dart可以做什么。
还有Dart的jsfiddle替代项吗?
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;
});
最佳答案
我知道有TryDart!,但它似乎不如JSFiddle强大。
对于您的示例,这是等效的Dart代码:
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);
}
您还可以利用Dart API中的诸如num.clamp之类的东西来简化代码。
关于dart - Dart Canvas 运动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26557361/