AngularJS SVG + GameLoop
HTML
<div id="app" ng-app="">
<div ng-controller="GameCtrl">
<button ng-click="stop()">STOP</button>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g ng-repeat="gameObject in gameObjects" transform="translate({{gameObject.rigidbody.x}}, {{gameObject.rigidbody.y}})">
<rect width="{{gameObject.rigidbody.width}}" height="{{gameObject.rigidbody.height}}"></rect>
</g>
</svg>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <style> rect {
fill: green;
}
JavaScript
// Player Controller
function PlayerCtrl(game, rigidbody) {
var that = this;
var speed = 10;
that.rigidbody = rigidbody;
that.run = function () {
if (game.isKeyDown(39)) {
that.rigidbody.x += speed;
} else if (game.isKeyDown(37)) {
that.rigidbody.x -= speed;
if (that.rigidbody.x < 0) {
that.rigidbody.x = 0;
}
}
if (game.isKeyDown(38)) {
that.rigidbody.y -= speed;
if (that.rigidbody.y < 0) {
that.rigidbody.y = 0;
}
} else if (game.isKeyDown(40)) {
that.rigidbody.y += speed;
}
};
}
// Game Controller
function GameCtrl($scope) {
var that = this;
var fps = 100;
$scope.gameObjects = [
new PlayerCtrl(that, {
width: 50,
height: 50,
x: 0,
y: 0
})];
that.keys = {};
$("body").keydown(function (e) {
that.keys["key" + e.which] = true;
});
that.isKeyDown = function (code) {
console.log(that.keys["key" + code]);
if (that.keys["key" + code]) {
return true;
}
return false;
};
// Clear KeyEvent
function clearKeyEvent() {
for (var code in that.keys) {
if (that.keys.hasOwnProperty(code)) {
that.keys[code] = false;
}
}
}
// Game Loop
function gameLoop() {
var i;
$scope.$apply(function () {
for (i = 0; i < $scope.gameObjects.length; i++) {
$scope.gameObjects[i].run();
}
});
clearKeyEvent();
}
var interval = setInterval(gameLoop, 1000 / fps);
// STOP Game Loop
$scope.stop = function () {
clearInterval(interval);
};
}