地占是中世纪占卜方式. 基本元素地占十六形如下:
大吉 小吉 男人 女人 红色 白色 喜悦 悲伤 结合 限制 获得 损失 群众 道路 龙头 龙尾
* * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * *
test.js
const draw_unit = 8;
const Geomancy = {
Way: [1, 1, 1, 1],
People: [2, 2, 2, 2],
Union: [2, 1, 1, 2],
Prison: [1, 2, 2, 1],
Head: [2, 1, 1, 1],
Tail: [1, 1, 1, 2],
Boy: [1, 1, 2, 1],
Girl: [1, 2, 1, 1],
Major: [2, 2, 1, 1],
Minor: [1, 1, 2, 2],
Red: [2, 1, 2, 2],
White: [2, 2, 1, 2],
Gain: [2, 1, 2, 1],
Loss: [1, 2, 1, 2],
Joy: [1, 2, 2, 2],
Sad: [2, 1, 1, 1],
width: 5 * draw_unit, // 元素占大小
height: 10 * draw_unit,
};
function rand_int(n) { // 生成1-n的整数
return Math.floor(Math.random() * n);
}
function draw_pt(ctx, pt) {
ctx.fillRect(pt[0], pt[1], draw_unit, draw_unit);
}
function draw_geomancy_elem(ctx, origin, item) {
var ox = origin[0];
var oy = origin[1];
if (item == null) return; // 不做图
for (var i = 0; i < item.length; i++) {
if (item[i] == 1) {
draw_pt(ctx, [ox + draw_unit * 2, oy + i * draw_unit * 2 + draw_unit * 1]);
} else if (item[i] == 2) {
draw_pt(ctx, [ox + draw_unit * 1, oy + i * draw_unit * 2 + draw_unit * 1]);
draw_pt(ctx, [ox + draw_unit * 3, oy + i * draw_unit * 2+ draw_unit * 1]);
}
}
}
function draw_shield(ctx, origin, el) { // 绘制地占盾
var ox = origin[0];
var oy = origin[1];
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0); // 基本框架
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 4);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 6);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 6);
ctx.moveTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.arc(ox + Geomancy.width * 4, oy + Geomancy.width * 4, Geomancy.width * 5.656, Math.PI * 0.25, Math.PI * 0.75);
ctx.moveTo(ox + Geomancy.width * 7, oy + Geomancy.width * 0); // 1-8宫
ctx.lineTo(ox + Geomancy.width * 7, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 6, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 5, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 5, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 3, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 3, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 2, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 1, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 1, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2); // 9-12宫
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 4); // 13-14宫
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 6);
if (el != null) {
draw_geomancy_elem(ctx, [ox + Geomancy.width * 7, oy + Geomancy.width * 0], el[0]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 6, oy + Geomancy.width * 0], el[1]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 5, oy + Geomancy.width * 0], el[2]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 4, oy + Geomancy.width * 0], el[3]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 3, oy + Geomancy.width * 0], el[4]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 2, oy + Geomancy.width * 0], el[5]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 1, oy + Geomancy.width * 0], el[6]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 0, oy + Geomancy.width * 0], el[7]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 6.5, oy + Geomancy.width * 2], el[8]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 4.5, oy + Geomancy.width * 2], el[9]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 2.5, oy + Geomancy.width * 2], el[10]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 0.5, oy + Geomancy.width * 2], el[11]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 5.5, oy + Geomancy.width * 4], el[12]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 1.5, oy + Geomancy.width * 4], el[13]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 6], el[14]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 8], el[15]);
}
ctx.closePath();
ctx.font = (draw_unit * 3) + "px \"Times New Roman\"";
ctx.fillText("Shield", ox + Geomancy.width * 3.2, oy + Geomancy.width * 10.2);
ctx.stroke();
}
function draw_house(ctx, origin, el) { // 绘制矩形十二宫
var ox = origin[0];
var oy = origin[1];
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0); // 基本框架
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 4);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 4);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 0);
ctx.moveTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 6);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 6);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 8, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 6);
ctx.moveTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 6);
if (el != null) {
draw_geomancy_elem(ctx, [ox + Geomancy.width * 1, oy + Geomancy.width * 3], el[0]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 0, oy + Geomancy.width * 5], el[1]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 1.5, oy + Geomancy.width * 6.3], el[2]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 6], el[3]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 5.5, oy + Geomancy.width * 6.3], el[4]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 7, oy + Geomancy.width * 5], el[5]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 6, oy + Geomancy.width * 3], el[6]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 7, oy + Geomancy.width * 1], el[7]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 5.5, oy + Geomancy.width * 0], el[8]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 0.2], el[9]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 1.5, oy + Geomancy.width * 0], el[10]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 0, oy + Geomancy.width * 1], el[11]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 4.5, oy + Geomancy.width * 2], el[12]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 2.5, oy + Geomancy.width * 2], el[13]);
draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 4], el[14]);
}
ctx.closePath();
ctx.font = (draw_unit * 3) + "px \"Times New Roman\"";
ctx.fillText("House", ox + Geomancy.width * 3.2, oy + Geomancy.width * 8.5);
ctx.stroke();
}
function draw_button(canvas, ctx, origin, text, cb) {
var ox = origin[0];
var oy = origin[1];
var w = draw_unit * 16;
var h = draw_unit * 8;
ctx.fillStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(ox, oy);
ctx.lineTo(ox + w, oy);
ctx.lineTo(ox + w, oy + h);
ctx.lineTo(ox, oy + h);
ctx.lineTo(ox, oy);
ctx.closePath();
ctx.fill()
ctx.fillStyle = "black";
ctx.font = (draw_unit * 5) + "px \"Times New Roman\"";
ctx.fillText(text, ox + draw_unit * 5, oy + draw_unit * 5);
canvas.addEventListener("click", function(evt) {
var rt = canvas.getBoundingClientRect();
var x = evt.clientX - rt.left;
var y = evt.clientY - rt.top;
if (x >= ox && x < ox + w && y >= oy && y < oy + h) {
cb();
}
});
}
function gen_geomancy_elem(base) {
var el = new Array(16);
if (base == null) {
el[0] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
el[1] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
el[2] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
el[3] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
} else {
el[0] = base[0]; el[1] = base[1]; el[2] = base[2]; el[3] = base[3];
}
el[4] = [el[0][0], el[1][0], el[2][0], el[3][0]];
el[5] = [el[0][1], el[1][1], el[2][1], el[3][1]];
el[6] = [el[0][2], el[1][2], el[2][2], el[3][2]];
el[7] = [el[0][3], el[1][3], el[2][3], el[3][3]];
el[8] = [2 - (el[0][0] + el[1][0]) % 2, 2 - (el[0][1] + el[1][1]) % 2, 2 - (el[0][2] + el[1][2]) % 2, 2 - (el[0][3] + el[1][3]) % 2];
el[9] = [2 - (el[2][0] + el[3][0]) % 2, 2 - (el[2][1] + el[3][1]) % 2, 2 - (el[2][2] + el[1][2]) % 2, 2 - (el[3][3] + el[1][3]) % 2];
el[10] = [2 - (el[4][0] + el[5][0]) % 2, 2 - (el[4][1] + el[5][1]) % 2, 2 - (el[4][2] + el[5][2]) % 2, 2 - (el[4][3] + el[5][3]) % 2];
el[11] = [2 - (el[6][0] + el[7][0]) % 2, 2 - (el[6][1] + el[7][1]) % 2, 2 - (el[6][2] + el[7][2]) % 2, 2 - (el[6][3] + el[7][3]) % 2];
el[12] = [2 - (el[8][0] + el[9][0]) % 2, 2 - (el[8][1] + el[9][1]) % 2, 2 - (el[8][2] + el[9][2]) % 2, 2 - (el[8][3] + el[9][3]) % 2];
el[13] = [2 - (el[10][0] + el[11][0]) % 2, 2 - (el[10][1] + el[11][1]) % 2, 2 - (el[10][2] + el[11][2]) % 2, 2 - (el[10][3] + el[11][3]) % 2];
el[14] = [2 - (el[12][0] + el[13][0]) % 2, 2 - (el[12][1] + el[13][1]) % 2, 2 - (el[12][2] + el[13][2]) % 2, 2 - (el[12][3] + el[13][3]) % 2];
el[15] = [2 - (el[14][0] + el[0][0]) % 2, 2 - (el[14][1] + el[0][1]) % 2, 2 - (el[14][2] + el[0][2]) % 2, 2 - (el[14][3] + el[0][3]) % 2];
return el;
}
function on_go() {
var el = gen_geomancy_elem();
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw_shield(ctx, [10, 10], el);
draw_house(ctx, [400, 10], el, 0);
draw_button(canvas, ctx, [300, 450], "Go", on_go);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var sz = (document.body.clientWidth>document.body.clientHeight)?document.body.clientWidth:document.body.clientHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
draw_shield(ctx, [10, 10], null);
draw_house(ctx, [400, 10], null, 0);
draw_button(canvas, ctx, [300, 450], "Go", on_go);
index.html
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body, html {
height:100%;
}
#canvas {
position:absolute;
height:100%; width:100%;
}
</style>
</head>
<body>
<canvas id="canvas" style="background-color: white;"></canvas>
<script type="text/javascript" src="test.js"></script>
</body>
</html>