Skip to content

Instantly share code, notes, and snippets.

@dud3

dud3/index.html

Created June 18, 2017 09:48
Show Gist options
  • Save dud3/1e28b8ad1811a56b850900984dd82860 to your computer and use it in GitHub Desktop.
Save dud3/1e28b8ad1811a56b850900984dd82860 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/kebuzi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="c" width="500"
height="500"
style="border: 1px solid;" />
<script id="jsbin-javascript">
var c = document.getElementById('c');
var ctx = c.getContext('2d');
function drawLine(ctx, x0, y0, x1, y1) {
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.stroke();
}
function drawRect(ctx, x0, y0, x1, y1, color) {
if(color === undefined) {
color = 'grey';
}
ctx.beginPath();
ctx.rect(x0, y0, x1, y1);
ctx.fillStyle = color;
ctx.fill();
}
function clearCanvas(ctx) {
ctx.beginPath();
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = "white";
ctx.fill();
}
// the axis and origin
var xAxis = {x : 1, y: 0.5};
var yAxis = {x : -1, y: 0.5};
var origin = {x : 0, y : 0};
var projection = {
xAxis: {x: 1, y: 0.5},
yAxis: {x: -1, y: 0.5},
origin: {x: 0, y: 0},
project: function(x, y) {
return {
x: this.xAxis.x * x + this.yAxis.x * y,
y: this.xAxis.y * x + this.yAxis.y * y
}
},
getInverseMatrix: function() {
// Inverse matrix
//
// M = [ a b ]
// [ c d ]
//
// 1 / ad - bc * [ d -b]
// [-c a]
//
// Determinant
var a = this.xAxis.x;
var b = this.yAxis.x;
var c = this.xAxis.y;
var d = this.yAxis.y;
var det = 1 / ((a * d) - (b * c));
return {
xAxis: {
x: det * d,
y: det * -(c)
},
yAxis: {
x: det * -(b),
y: det * a
}
};
},
global2iso: function(x, y) {
var invM = this.getInverseMatrix();
return {
x: invM.xAxis.x * x + invM.yAxis.x * y,
y: invM.xAxis.y * x + invM.yAxis.y * y
}
},
setUpAxis: function() {
// cludge factor dividing by two to
// fit the display area
ctx.setTransform(
this.xAxis.x, this.xAxis.y,
this.yAxis.x, this.yAxis.y,
origin.x, origin.y
);
}
};
var tile = {
width: 20,
height: 20,
padd: 0
};
var map = {
tiles: [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
],
size: function() {
return {
width: this.tiles[0].length,
height: this.tiles.length
};
}
};
var padd = 300;
function rect(x, y, color) {
this.x = x;
this.y = y;
this.iso = projection.project(this.x - padd, this.y);
this.width = tile.width;
this.height = tile.height;
this.tile = {
x: (this.x - padd) / this.width,
y: (this.y - padd) / this.height
};
this.color = color;
}
rect.prototype.draw = function() {
drawRect(ctx, this.x, this.y,
this.width, this.height, this.color)
};
// Prjection before drawing
projection.setUpAxis();
// Draw everything
var grid = {};
var obj = {};
for(var i = 0; i < map.size().width; i++) {
for(var j = 0; j < map.size().height; j++) {
var x = i * tile.width;
var y = j * tile.height;
if(map.tiles[i][j] === 1) {
obj = new rect(x + padd, y);
} else {
obj = new rect(x + padd, y, 'white');
}
grid['tile_' + i + '_' + j] = obj;
obj.draw();
}
}
c.addEventListener("mouseenter", function(e) {
e.target.style.border = '1px solid orange';
});
c.addEventListener("mousemove", function(e) {
c.x = event.pageX - event.target.offsetLeft;
c.y = event.pageY - event.target.offsetTop;
});
c.addEventListener("mouseout", function(e) {
e.target.style.border = '1px solid black';
});
c.addEventListener("mousedown", function(e) {
c.x = event.pageX - event.target.offsetLeft;
c.y = event.pageY - event.target.offsetTop;
var originX = c.x - padd;
var originY = c.y - padd/2;
var iso = projection.global2iso(originX, originY);
var gridX = Math.floor(iso.x / tile.width);
var gridY = Math.floor(iso.y / tile.height);
var _tile = grid['tile_' + gridX + '_' + gridY];
if(_tile !== undefined) {
console.log(_tile);
_tile.color = 'orange';
_tile.draw();
}
console.log("iso -> x: " + iso.x + " y: " + iso.y);
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var c = document.getElementById('c');
var ctx = c.getContext('2d');
function drawLine(ctx, x0, y0, x1, y1) {
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.stroke();
}
function drawRect(ctx, x0, y0, x1, y1, color) {
if(color === undefined) {
color = 'grey';
}
ctx.beginPath();
ctx.rect(x0, y0, x1, y1);
ctx.fillStyle = color;
ctx.fill();
}
function clearCanvas(ctx) {
ctx.beginPath();
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = "white";
ctx.fill();
}
// the axis and origin
var xAxis = {x : 1, y: 0.5};
var yAxis = {x : -1, y: 0.5};
var origin = {x : 0, y : 0};
var projection = {
xAxis: {x: 1, y: 0.5},
yAxis: {x: -1, y: 0.5},
origin: {x: 0, y: 0},
project: function(x, y) {
return {
x: this.xAxis.x * x + this.yAxis.x * y,
y: this.xAxis.y * x + this.yAxis.y * y
}
},
getInverseMatrix: function() {
// Inverse matrix
//
// M = [ a b ]
// [ c d ]
//
// 1 / ad - bc * [ d -b]
// [-c a]
//
// Determinant
var a = this.xAxis.x;
var b = this.yAxis.x;
var c = this.xAxis.y;
var d = this.yAxis.y;
var det = 1 / ((a * d) - (b * c));
return {
xAxis: {
x: det * d,
y: det * -(c)
},
yAxis: {
x: det * -(b),
y: det * a
}
};
},
global2iso: function(x, y) {
var invM = this.getInverseMatrix();
return {
x: invM.xAxis.x * x + invM.yAxis.x * y,
y: invM.xAxis.y * x + invM.yAxis.y * y
}
},
setUpAxis: function() {
// cludge factor dividing by two to
// fit the display area
ctx.setTransform(
this.xAxis.x, this.xAxis.y,
this.yAxis.x, this.yAxis.y,
origin.x, origin.y
);
}
};
var tile = {
width: 20,
height: 20,
padd: 0
};
var map = {
tiles: [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
],
size: function() {
return {
width: this.tiles[0].length,
height: this.tiles.length
};
}
};
var padd = 300;
function rect(x, y, color) {
this.x = x;
this.y = y;
this.iso = projection.project(this.x - padd, this.y);
this.width = tile.width;
this.height = tile.height;
this.tile = {
x: (this.x - padd) / this.width,
y: (this.y - padd) / this.height
};
this.color = color;
}
rect.prototype.draw = function() {
drawRect(ctx, this.x, this.y,
this.width, this.height, this.color)
};
// Prjection before drawing
projection.setUpAxis();
// Draw everything
var grid = {};
var obj = {};
for(var i = 0; i < map.size().width; i++) {
for(var j = 0; j < map.size().height; j++) {
var x = i * tile.width;
var y = j * tile.height;
if(map.tiles[i][j] === 1) {
obj = new rect(x + padd, y);
} else {
obj = new rect(x + padd, y, 'white');
}
grid['tile_' + i + '_' + j] = obj;
obj.draw();
}
}
c.addEventListener("mouseenter", function(e) {
e.target.style.border = '1px solid orange';
});
c.addEventListener("mousemove", function(e) {
c.x = event.pageX - event.target.offsetLeft;
c.y = event.pageY - event.target.offsetTop;
});
c.addEventListener("mouseout", function(e) {
e.target.style.border = '1px solid black';
});
c.addEventListener("mousedown", function(e) {
c.x = event.pageX - event.target.offsetLeft;
c.y = event.pageY - event.target.offsetTop;
var originX = c.x - padd;
var originY = c.y - padd/2;
var iso = projection.global2iso(originX, originY);
var gridX = Math.floor(iso.x / tile.width);
var gridY = Math.floor(iso.y / tile.height);
var _tile = grid['tile_' + gridX + '_' + gridY];
if(_tile !== undefined) {
console.log(_tile);
_tile.color = 'orange';
_tile.draw();
}
console.log("iso -> x: " + iso.x + " y: " + iso.y);
});
</script></body>
</html>
Raw
jsbin.kebuzi.js
var c = document.getElementById('c');
var ctx = c.getContext('2d');
function drawLine(ctx, x0, y0, x1, y1) {
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.stroke();
}
function drawRect(ctx, x0, y0, x1, y1, color) {
if(color === undefined) {
color = 'grey';
}
ctx.beginPath();
ctx.rect(x0, y0, x1, y1);
ctx.fillStyle = color;
ctx.fill();
}
function clearCanvas(ctx) {
ctx.beginPath();
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = "white";
ctx.fill();
}
// the axis and origin
var xAxis = {x : 1, y: 0.5};
var yAxis = {x : -1, y: 0.5};
var origin = {x : 0, y : 0};
var projection = {
xAxis: {x: 1, y: 0.5},
yAxis: {x: -1, y: 0.5},
origin: {x: 0, y: 0},
project: function(x, y) {
return {
x: this.xAxis.x * x + this.yAxis.x * y,
y: this.xAxis.y * x + this.yAxis.y * y
}
},
getInverseMatrix: function() {
// Inverse matrix
//
// M = [ a b ]
// [ c d ]
//
// 1 / ad - bc * [ d -b]
// [-c a]
//
// Determinant
var a = this.xAxis.x;
var b = this.yAxis.x;
var c = this.xAxis.y;
var d = this.yAxis.y;
var det = 1 / ((a * d) - (b * c));
return {
xAxis: {
x: det * d,
y: det * -(c)
},
yAxis: {
x: det * -(b),
y: det * a
}
};
},
global2iso: function(x, y) {
var invM = this.getInverseMatrix();
return {
x: invM.xAxis.x * x + invM.yAxis.x * y,
y: invM.xAxis.y * x + invM.yAxis.y * y
}
},
setUpAxis: function() {
// cludge factor dividing by two to
// fit the display area
ctx.setTransform(
this.xAxis.x, this.xAxis.y,
this.yAxis.x, this.yAxis.y,
origin.x, origin.y
);
}
};
var tile = {
width: 20,
height: 20,
padd: 0
};
var map = {
tiles: [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
],
size: function() {
return {
width: this.tiles[0].length,
height: this.tiles.length
};
}
};
var padd = 300;
function rect(x, y, color) {
this.x = x;
this.y = y;
this.iso = projection.project(this.x - padd, this.y);
this.width = tile.width;
this.height = tile.height;
this.tile = {
x: (this.x - padd) / this.width,
y: (this.y - padd) / this.height
};
this.color = color;
}
rect.prototype.draw = function() {
drawRect(ctx, this.x, this.y,
this.width, this.height, this.color)
};
// Prjection before drawing
projection.setUpAxis();
// Draw everything
var grid = {};
var obj = {};
for(var i = 0; i < map.size().width; i++) {
for(var j = 0; j < map.size().height; j++) {
var x = i * tile.width;
var y = j * tile.height;
if(map.tiles[i][j] === 1) {
obj = new rect(x + padd, y);
} else {
obj = new rect(x + padd, y, 'white');
}
grid['tile_' + i + '_' + j] = obj;
obj.draw();
}
}
c.addEventListener("mouseenter", function(e) {
e.target.style.border = '1px solid orange';
});
c.addEventListener("mousemove", function(e) {
c.x = event.pageX - event.target.offsetLeft;
c.y = event.pageY - event.target.offsetTop;
});
c.addEventListener("mouseout", function(e) {
e.target.style.border = '1px solid black';
});
c.addEventListener("mousedown", function(e) {
c.x = event.pageX - event.target.offsetLeft;
c.y = event.pageY - event.target.offsetTop;
var originX = c.x - padd;
var originY = c.y - padd/2;
var iso = projection.global2iso(originX, originY);
var gridX = Math.floor(iso.x / tile.width);
var gridY = Math.floor(iso.y / tile.height);
var _tile = grid['tile_' + gridX + '_' + gridY];
if(_tile !== undefined) {
console.log(_tile);
_tile.color = 'orange';
_tile.draw();
}
console.log("iso -> x: " + iso.x + " y: " + iso.y);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment