subzero.html
<!DOCTYPE html>
<html>
<canvas id="myCanvas">
</canvas>
<script type="application/dart" src="subzero.dart"></script>
<script src="dart.js"></script>
</body>
</html>
subzero.dart
import 'dart:html';
class Sprite {
CanvasElement canvas;
CanvasRenderingContext2D context;
ImageElement img;
int frame;
int offsetX;
int offsetY;
int x;
int y;
int width;
int height;
int fps;
var lastMove;
Sprite(this.canvas, String filename,
this.width, this.height,
{this.x, this.y, this.offsetX, this.offsetY, this.frame, this.fps})
{
this.x = (this.x == null) ? 0 : this.x;
this.y = (this.y == null) ? 0 : this.y;
this.offsetX = (this.offsetX == null) ? 0 : this.offsetX;
this.offsetY = (this.offsetY == null) ? 0 : this.offsetY;
this.frame = (this.frame == null) ? 0 : this.frame;
this.fps = (this.fps == null) ? 20 : this.fps;
this.context = this.canvas.getContext("2d");
this.img = new ImageElement(src:filename);
this.lastMove = new DateTime.now().millisecondsSinceEpoch;
this.img.onLoad.listen((Event e) => window.requestAnimationFrame(run));
}
void draw() {
var sourceX = frame * this.width;
var sourceY = 278;
var sourceRect = new Rectangle(sourceX, sourceY, this.width, this.height);
var destRect = new Rectangle(this.x, this.y, this.width, this.height);
this.context.drawImageToRect(this.img, destRect, sourceRect: sourceRect);
}
void move() {
if(new DateTime.now().millisecondsSinceEpoch - this.lastMove > 1000.0/this.fps)
{
this.lastMove = new DateTime.now().millisecondsSinceEpoch;
this.frame = (this.frame + 1) % 9;
}
}
void clear(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
void run(num _) {
clear();
move();
draw();
window.requestAnimationFrame(run);
}
}
void main() {
CanvasElement canvas = document.querySelector("#myCanvas");
Sprite subzero = new Sprite(canvas, "http://images2.wikia.nocookie.net/mortalkombatguide/images/1/17/Sub-ZeroSpriteSheet.png", 78, 148,fps: 10);
}
No comments:
Post a Comment