Skip to content

Instantly share code, notes, and snippets.

@pohy
Created Apr 2, 2015
Embed
What would you like to do?
Race
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Race</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #4a4a4a;
}
.canvas {
width: 854px;
height: 480px;
margin: 0 auto;
margin-top: 30px;
}
#images {
display: none;
}
</style>
</head>
<body>
<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>
<div class="canvas">
<canvas id="canvas" width="854" height="480"></canvas>
</div>
<script type="text/javascript">
/**
* Game
**/
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);
window.mouse = new Mouse(canvas);
window.graphics = new Graphics(this.ctx, this.width, this.height);
window.util = new Util();
var players = [];
players.push(new Player(0, 'image_lisa'));
players.push(new Player(1, 'image_meggie'));
this.objects = [];
this.objects.push(new Dice(players));
for(var i = 0; i < players.length; i++) {
this.objects.push(players[i]);
}
this.update();
};
Game.prototype.update = function() {
for(var i = 0; i < this.objects.length; i++) {
this.objects[i].update();
}
this.render();
window.mouse.nextFrame();
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) {
window.mouse.x = e.offsetX;
window.mouse.y = e.offsetY;
};
/**
* Graphics
**/
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.drawText = function(text, x, y, c, font, a) {
if(typeof c === 'undefined') c = '#000';
if(typeof a === 'undefined') a = 1;
if(typeof font === 'undefined') font = '12pt Arial';
this.ctx.fillStyle = c;
this.ctx.globalAlpha = a;
this.ctx.font = font;
this.ctx.fillText(text, 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];
};
/**
* Player
**/
var Player = function(row, imageId) {
var image = graphics.getImage(imageId);
this.imageId = imageId;
this.x = 0;
this.y = row * image.height;
this.w = image.width;
this.h = image.height;
};
Player.prototype.update = function() {
};
Player.prototype.render = function() {
graphics.drawImage(this.imageId, this.x, this.y);
};
Player.prototype.advance = function(step) {
this.x += step * this.w;
};
Player.prototype.reset = function() {
this.x = 0;
};
/**
* Dice
**/
var Dice = function(players) {
this.x = 64;
this.y = 256;
this.w = 64;
this.h = 64;
this.collision = new Collision();
this.hover = false;
this.value;
this.players = players;
this.currentPlayer = 0;
this.advanceVal = 0;
this.maxDistance = 500;
this.playerWon = null;
}
Dice.prototype.update = function() {
if(this.collision.rect(mouse.x, mouse.y, this.x, this.y, this.w, this.h)) {
this.hover = true;
} else {
this.hover = false;
}
if(mouse.up === true) {
if(this.playerWon === null) {
this.play();
} else {
for(var i = 0; i < this.players.length; i++) {
this.players[i].reset();
}
this.playerWon = null;
this.currentPlayer = 0;
this.advanceVal = 0;
}
}
};
Dice.prototype.render = function() {
if(this.hover) {
graphics.drawRect(this.x, this.y, this.h, this.w, '#faca0a');
graphics.drawText(this.advanceVal, this.x + this.w / 2, this. y + this.h / 2);
} else {
graphics.drawOutline(this.x, this.y, this.h, this.w, '#faca0a');
graphics.drawText(this.advanceVal, this.x + this.w / 2, this. y + this.h / 2, '#faca0a');
}
if(this.playerWon !== null) {
graphics.drawText('Player ' + this.currentPlayer + ' won!', 50, game.height / 2, '#fff', '72pt Arial');
}
};
Dice.prototype.play = function() {
this.advanceVal = util.randomRange(1, 6);
this.players[this.currentPlayer].advance(this.advanceVal);
this.checkWin();
if(this.currentPlayer < this.players.length - 1) {
this.currentPlayer++;
} else {
this.currentPlayer = 0;
}
};
Dice.prototype.checkWin = function() {
var player = this.players[this.currentPlayer];
if(player.x + player.w > this.maxDistance) {
this.playerWon = player;
}
};
/**
* Collision
**/
var Collision = function() {};
Collision.prototype.rect = function(x, y, x2, y2, w, h) {
if(x > x2 && x < x2 + w) {
if(y > y2 && y < y2 +h) {
return true;
}
}
return false;
};
window.onload = function() {
window.game = new Game();
}
var Mouse = function(canvas) {
this.x = 0;
this.y = 0;
this.up = false;
this.down = false;
canvas.addEventListener('mousemove', (this.mouseMove).bind(this));
canvas.addEventListener('mouseup', (this.mouseUp).bind(this));
canvas.addEventListener('mousedown', (this.mouseDown).bind(this));
}
Mouse.prototype.mouseMove = function(e) {
this.x = e.offsetX;
this.y = e.offsetY;
};
Mouse.prototype.mouseUp = function() {
this.up = true;
};
Mouse.prototype.mouseDown = function() {
this.down = true;
};
Mouse.prototype.nextFrame = function() {
this.up = false;
this.down = false;
};
var Util = function() {};
Util.prototype.randomRange = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment