Skip to content

Instantly share code, notes, and snippets.

@Cacodaimon

Cacodaimon/GameManager.js

Created December 3, 2012 00:54
Show Gist options
  • Save Cacodaimon/4191929 to your computer and use it in GitHub Desktop.
Save Cacodaimon/4191929 to your computer and use it in GitHub Desktop.
Download ZIP
Abstract game object class. (Used @ cacodaemon.de)
Raw
balls.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Scaling Demo (BALLS) from cacodaemon.de</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering:crisp-edges; /* CSS3 Proposed */
image-rendering: optimize-contrast; /* Possible future browsers. */
-ms-interpolation-mode:bicubic; /* IE8+ */
}
#GameCanvas {
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
transform: scale(10, 10);
-ms-transform: scale(10, 10);
-webkit-transform: scale(10, 10);
-o-transform: scale(10, 10);
-moz-transform: scale(10, 10);
}
</style>
<script type="text/javascript" src="GameManager.js"></script>
<script type="text/javascript" src="GameObject.js"></script>
</head>
<body>
<canvas id="GameCanvas" />
</body>
<script>
var scale = 10;
var gameCanvas = document.getElementById("GameCanvas");
gameCanvas.width = window.innerWidth / scale;
gameCanvas.height = window.innerHeight / scale;
var gameManager = new GameManager();
gameManager.init(gameCanvas);
function Obj(color) {
var radius = 0;
this.color = color;
this.update = function (delta) {
radius = 100 * delta;
};
this.draw = function (ctx) {
ctx.beginPath();
ctx.arc(Math.random() * this.gameManager.width, Math.random() * this.gameManager.height, radius, 0 , 2 * Math.PI, false);
ctx.fillStyle = this.color;
ctx.fill();
};
}
Obj.prototype = new GameObject ();
function Hud() {
var tmpFps = 0;
var lastSecond = -1;
var fps = 1;
this.update = function () {
var seconds = new Date().getSeconds();
if (lastSecond != seconds) {
lastSecond = seconds;
fps = tmpFps;
tmpFps = 1;
}
else {
tmpFps++;
}
}
this.draw = function (ctx) {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 60, 40);
ctx.fillStyle = 'black';
ctx.fillText('FPS: ' + fps, 10, 10);
ctx.fillText(this.gameManager.width + 'x' + this.gameManager.height, 10, 20);
ctx.fillText(window.innerWidth + 'x' + window.innerHeight, 10, 30);
};
}
Hud.prototype = new GameObject ();
gameManager.addGameObjects(new Array(
new Obj('green'),
new Obj('red'),
new Obj('blue'),
new Obj('red'),
new Obj('yellow'),
new Obj('blue'),
new Obj('yellow'),
new Obj('green'),
new Hud()
));
</script>
</html>
Raw
GameManager.js
/*
* Simple JavaScript game manager.
*
* (c) 2012 Guido Krömer <[email protected]>
*
*/
function GameManager () {
var canvas = null;
var ctx = null;
var delta = 0;
var lastTimeStamp = null;
var freePos = -1;
var gameObjects = new Array();
this.width = 0;
this.height = 0;
this.init = function (canvas) {
lastTimeStamp = new Date().getTime();
canvas = canvas;
ctx = canvas.getContext('2d');
this.width = canvas.width;
this.height = canvas.height;
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 120);
};
})();
(function animloop(){
requestAnimFrame(animloop);
timerStart();
update();
draw();
timerEnd();
})();
}
this.addGameObject = function(gameObject) {
gameObject.init(this);
if (freePos != -1) {
gameObjects[this.freePos] = gameObject;
freePos = -1;
}
else {
gameObjects.push(gameObject);
}
};
this.addGameObjects = function(gameObjects) {
for (var i = gameObjects.length - 1; i >= 0; i--) {
this.addGameObject(gameObjects[i]);
}
};
this.removeGameObject = function(gameObject) {
for (var i = gameObjects.length - 1; i >= 0; i--) {
if (gameObjects[i] == gameObject) {
gameObjects.splice(i, 1);
freePos = i;
return;
}
}
};
this.forEachGameObject = function(callBack) {
for (var i = gameObjects.length - 1; i >= 0; i--) {
callBack(gameObject[i]);
}
};
var update = function() {
for (var i = gameObjects.length - 1; i >= 0; i--) {
gameObjects[i].update(delta);
}
};
var draw = function() {
for (var i = gameObjects.length - 1; i >= 0; i--) {
gameObjects[i].draw(ctx);
}
};
var timerStart = function() {
var date = new Date();
delta = date.getTime() - this.lastTimeStamp;
delta *= 0.01;
};
var timerEnd = function() {
this.lastTimeStamp = new Date().getTime();
};
}
Raw
GameObject.js
/*
* Abstract game object class.
*
* (c) 2012 Guido Krömer <[email protected]>
*
*/
function GameObject () {
this.gameManager = null;
this.init = function (gameManager) {
this.gameManager = gameManager;
};
this.update = function (delta) { };
this.draw = function (ctx) { };
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Scaling Demo from cacodaemon.de</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering:crisp-edges; /* CSS3 Proposed */
image-rendering: optimize-contrast; /* Possible future browsers. */
-ms-interpolation-mode:bicubic; /* IE8+ */
}
#GameCanvas {
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
transform: scale(2, 2);
-ms-transform: scale(2, 2);
-webkit-transform: scale(2, 2);
-o-transform: scale(2, 2);
-moz-transform: scale(2, 2);
}
</style>
<script type="text/javascript" src="GameManager.js"></script>
<script type="text/javascript" src="GameObject.js"></script>
</head>
<body>
<canvas id="GameCanvas" />
</body>
<script>
var scale = 2;
var gameCanvas = document.getElementById("GameCanvas");
gameCanvas.width = window.innerWidth / scale;
gameCanvas.height = window.innerHeight / scale;
var gameManager = new GameManager();
gameManager.init(gameCanvas);
function Layer(src, depth) {
this.image = new Image();
this.image.src = src;
this.x = 0;
var depth = depth;
this.update = function (delta) {
this.x += (depth * delta) / scale;
if (this.x < -this.gameManager.width) {
this.x = this.gameManager.width;
}
else if (this.x > this.gameManager.width) {
this.x = 0;
}
};
this.draw = function (ctx) {
ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, this.x - this.gameManager.width, 0, this.gameManager.width, this.gameManager.height);
ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, this.x, 0, this.gameManager.width, this.gameManager.height);
ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, this.x + this.gameManager.width, 0, this.gameManager.width, this.gameManager.height);
};
}
Layer.prototype = new GameObject ();
function Hud() {
var tmpFps = 0;
var lastSecond = -1;
var fps = 1;
this.update = function () {
var seconds = new Date().getSeconds();
if (lastSecond != seconds) {
lastSecond = seconds;
fps = tmpFps;
tmpFps = 1;
}
else {
tmpFps++;
}
}
this.draw = function (ctx) {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 60, 40);
ctx.fillStyle = 'black';
ctx.fillText('FPS: ' + fps, 10, 10);
ctx.fillText(this.gameManager.width + 'x' + this.gameManager.height, 10, 20);
ctx.fillText(window.innerWidth + 'x' + window.innerHeight, 10, 30);
};
}
Hud.prototype = new GameObject ();
gameManager.addGameObjects(new Array(
new Layer('sky.png', -3),
new Layer('background.png', -5),
new Layer('foreground.png', -10),
new Hud()
));
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment