Skip to content

Instantly share code, notes, and snippets.

@pohy
Created Apr 1, 2015
Embed
What would you like to do?
<div id="images">
<img id="image_lisa" width="32" height="32" src="lisa.png">
<img id="image_meggie" width="32" height="32" src="meggie.png">
</div>
<canvas id="canvas" width="854" height="480"></canvas>
<script type="text/javascript">
var Game = function() {
var canvas = document.getElementById('canvas');
this.ctx = canvas.getContext('2d');
this.height = parseInt(canvas.attributes.height.value);
this.width = parseInt(canvas.attributes.width.value);
this.mouse = {};
canvas.addEventListener('mousemove', this.mouseMove.bind(this));
window.graphics = new Graphics(this.ctx, this.width, this.height);
this.objects = [];
this.objects.push(new Player(0, 'image_lisa'));
this.objects.push(new Player(1, 'image_meggie'));
this.update();
};
Game.prototype.update = function() {
for(var i = 0; i < this.objects.length; i++) {
this.objects[i].update();
}
this.render();
setTimeout(this.update.bind(this), 16);
};
Game.prototype.render = function() {
graphics.clearScreen();
for(var i = 0; i < this.objects.length; i++) {
this.objects[i].render();
}
};
Game.prototype.mouseMove = function(e) {
};
var Graphics = function(ctx, width, height) {
this.ctx = ctx;
this.width = width;
this.height = height;
this.images = {};
};
Graphics.prototype.clearScreen = function() {
this.ctx.clearRect(0, 0, this.width, this.height);
this.drawRect(0, 0, this.width, this.height);
};
Graphics.prototype.drawRect = function(x, y, w, h, c, a) {
if(typeof c === 'undefined') c = '#000';
if(typeof a === 'undefined') a = 1;
this.ctx.fillStyle = c;
this.ctx.globalAlpha = a;
this.ctx.fillRect(x, y, w, h);
};
Graphics.prototype.drawOutline = function(x, y, w, h, c, a) {
if(typeof c === 'undefined') c = '#000';
if(typeof a === 'undefined') a = 1;
this.ctx.strokeStyle = c;
this.ctx.globalAlpha = a;
this.ctx.strokeRect(x, y, w, h);
};
Graphics.prototype.drawImage = function(imageId, x, y) {
this.ctx.drawImage(this.getImage(imageId), x, y);
};
Graphics.prototype.getImage = function(imageId) {
if(typeof this.images[imageId] === 'undefined') {
var image = document.getElementById(imageId);
if(image === null) {
console.error('Image with id ' + imageId + ' was not found');
return undefined;
}
this.images[imageId] = image;
}
return this.images[imageId];
};
var Player = function(row, imageId) {
var image = graphics.getImage(imageId);
this.imageId = imageId;
this.x = 0;
this.y = row * image.height;
};
Player.prototype.update = function() {
};
Player.prototype.render = function() {
graphics.drawImage(this.imageId, this.x, this.y);
};
var Dice = function() {
this.x = 64;
this.y = 256;
}
Dice.prototype.update = function() {
};
Dice.prototype.render = function() {
};
window.onload = function() {
window.game = new Game();
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment