Skip to content

Instantly share code, notes, and snippets.

@mouseroot
Last active March 31, 2017 17:55
Show Gist options
  • Save mouseroot/99cffecf3d8a968913de10e08589a80b to your computer and use it in GitHub Desktop.
Save mouseroot/99cffecf3d8a968913de10e08589a80b to your computer and use it in GitHub Desktop.
Javascript canvas game components
//Keymap
var keys = {
up: 38,
down: 40,
left: 37,
right: 39,
key_z: 90,
key_x: 88,
return: 13,
escape: 27,
space: 32,
key_w: 87,
key_a: 65,
key_s: 83,
key_d: 68,
backspace: 8,
tilde: 192,
shift: 16,
control: 17
};
//Rectangle Collision
function RectCollision(rect1, rect2) {
if (rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.height + rect1.y > rect2.y) {
return true;
} else {
return false;
}
}
//Point Distance (x1,x2,y1,y2)
function distance(x1, x2, y1, y2) {
var a = x1 - x2
var b = y1 - y2
return Math.sqrt( a*a + b*b );
}
//Rectangle compatable Vector
function Vector2(x,y) {
this.x = x;
this.y = y;
this.width = 1;
this.height = 1;
}
//Rectangle
function Rect(x,y,w,h) {
this.x = x;
this.y = y;
this.width = w;
this.height = h;
}
//Get random
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
//Wrap Text
//DOES NOT LAG
//Credit: http://stackoverflow.com/a/17777674
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
var lines = text.split("\n");
for (var i = 0; i < lines.length; i++) {
var words = lines[i].split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = this.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
this.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
this.fillText(line, x, y);
y += lineHeight;
}
}
/*
Following commented out, incase you want to just include this in your project :)
//Mockup "player" class
function Player(x,y) {
this.x = x;
this.y = y;
this.xvel = 0;
this.yvel = 0;
this.width = 25;
this.height = 25;
this.draw = function() {
cx.fillStyle = "white";
cx.fillRect(this.x, this.y, this.width, this.height);
}
this.update = function() {
this.x += this.xvel;
this.y += this.yvel;
}
this.keyup = function() {
}.bind(this);
this.keydown = function() {
}.bind(this);
}
//
//Main Boiletplate
//
var canvas = document.getElementById("display");
var cx = canvas.getContext("2d");
var width = 800, height = 600;
function update() {
//Handle Movement and Collisions
}
//Main draw loop
function draw() {
//Background
cx.fillStyle = "black";
cx.fillRect(0,0,width,height);
//Draw objects
update();
requestAnimationFrame(draw);
}
function keyup(code) {
}
function keydown(code) {
}
function init() {
document.addEventListener("keyup", function(e) {
keyup(e.keyCode);
},false);
document.addEventListener("keydown", function(e) {
keydown(e.keyCode);
},false);
canvas.addEventListener("mousemove", function(e) {
var mouse_x = e.clientX - cx.canvas.offsetLeft;
var mouse_y = e.clientY - cx.canvas.offsetTop;
},false);
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment