public/wardrobe_sheet.html
衣装見本ページ
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="robots" content="noindex,nofollow">
<title>ショップ品の見本(石とゾンビ)</title>
<style>
html,body{margin:0;padding:0;background:#efece4;color:#33302a;
font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;}
#cv{display:block;width:390px;}
</style>
</head>
<body>
<canvas id="cv"></canvas>
<script src="lib/shurechara.js"></script>
<script src="lib/wardrobe.js"></script>
<script>
/* ショップに並ぶ品を全部その場で描いて並べる紙。
ふだん見る大きさ(頭の半径15px)で潰れないかを確かめるために作った。
URLの後ろに ?big=1 を付けると衣装だけ大きく描く(形を確かめる用)。
?big=1&from=27 で28番目から。 */
(function () {
var W = 390, DPR = Math.min(2, window.devicePixelRatio || 1);
var q = location.search, BIG = /big=1/.test(q);
var FROM = (q.match(/from=(\d+)/) || [0, 0])[1] | 0;
var cv = document.getElementById('cv'), g = cv.getContext('2d');
var CO = WARDROBE.COSTUMES, HA = WARDROBE.HATS, ST = WARDROBE.STONES;
/* ---- 大きさの決め方 ---- */
var cCols = 6, cCellW = W / cCols, cCellH = 104, cR = 15; /* 衣装(本編と同じ小ささ) */
var hCols = 3, hCellW = W / hCols, hCellH = 92, hR = 12; /* 帽子(1つにつき髪型3種) */
var sCols = 5, sCellW = W / sCols, sCellH = 70; /* 石 */
var bCols = 3, bCellW = W / bCols, bCellH = 172, bR = 26; /* 大きく見る用 */
var list = BIG ? CO.slice(FROM) : CO;
var cRows = Math.ceil((BIG ? list.length : CO.length) / (BIG ? bCols : cCols));
var hRows = Math.ceil(HA.length / hCols), sRows = Math.ceil(ST.length / sCols);
var H = BIG ? (30 + cRows * bCellH + 14)
/* 見出しは3つとも 24px ぶん場所を取る(1つぶんしか数えないと下の名前が切れる) */
: (14 + 24 * 3 + cRows * cCellH + 26 + hRows * hCellH + 26 + sRows * sCellH + 16);
cv.width = W * DPR; cv.height = H * DPR; cv.style.height = H + 'px';
g.setTransform(DPR, 0, 0, DPR, 0, 0);
g.fillStyle = '#efece4'; g.fillRect(0, 0, W, H);
g.textAlign = 'center'; g.lineJoin = 'round'; g.lineCap = 'round';
/* 見出し */
function head(y, s) {
g.fillStyle = '#6a6152'; g.fillRect(8, y - 9, W - 16, 1);
g.fillStyle = '#33302a'; g.font = 'bold 11px sans-serif';
g.textAlign = 'left'; g.fillText(s, 8, y + 4); g.textAlign = 'center';
}
/* 品名と値段 */
function tag(cx, y, nm, price) {
g.fillStyle = '#33302a'; g.font = '8px sans-serif';
g.fillText(nm, cx, y);
g.fillStyle = '#8a7d5e'; g.font = '7px sans-serif';
g.fillText(price === 0 ? '既定' : (price + ''), cx, y + 8);
}
/* 人を1人描いて衣装を着せる */
function wear(item, cx, yHead, r, seed) {
var av = SHURE.fromSeed(seed), dir = (seed % 2) ? 1 : -1;
var shY = yHead + r * 1.30, bot = yHead + r * 3.70;
SHURE.draw(g, cx, yHead, r, dir, av, {}, bot);
item.draw(g, cx, shY, bot, r, SHURE.WEAR_COL[av.w], dir);
}
var y = 14;
if (BIG) {
/* ---- 形を確かめるための大きい並び ---- */
g.fillStyle = '#33302a'; g.font = 'bold 11px sans-serif';
g.textAlign = 'left'; g.fillText('衣装を大きく見る(' + (FROM + 1) + '番目から)', 8, 16); g.textAlign = 'center';
y = 30;
for (var bi = 0; bi < list.length; bi++) {
var bc = bi % bCols, br = (bi / bCols) | 0;
var bx = bc * bCellW + bCellW / 2, by = y + br * bCellH;
wear(list[bi], bx, by + 30, bR, (FROM + bi) * 37 + 3);
tag(bx, by + 152, list[bi].nm, list[bi].price);
}
return;
}
/* ---- 衣装 ---- */
head(y + 8, '特別衣装 ' + CO.length + '種(頭の半径15px=本編と同じ大きさ)');
y += 24;
for (var i = 0; i < CO.length; i++) {
var c = i % cCols, rw = (i / cCols) | 0;
var cx = c * cCellW + cCellW / 2, cy = y + rw * cCellH;
wear(CO[i], cx, cy + 20, cR, i * 37 + 3);
tag(cx, cy + 94, CO[i].nm, CO[i].price);
}
y += cRows * cCellH + 26;
/* ---- 帽子(1つにつき髪型3種。いちばん破綻しやすいアフロ・ロング・ぼさで見る) ---- */
head(y + 8, '帽子・頭装備 ' + HA.length + '種(髪型はアフロ・ロング・ぼさ)');
y += 24;
var hairs = [5, 3, 1];
for (var k = 0; k < HA.length; k++) {
var hc = k % hCols, hr = (k / hCols) | 0;
var gx = hc * hCellW, gy = y + hr * hCellH;
for (var t = 0; t < 3; t++) {
var av = SHURE.fix({ h: hairs[t], hc: (k + t) % SHURE.HAIR_COL.length, sk: (k + t) % 4, w: (k * 3 + t) % 8 });
var px = gx + 22 + t * 43, pyH = gy + 36, dir = t === 1 ? -1 : 1;
SHURE.draw(g, px, pyH, hR, dir, av, {}, pyH + hR * 3.0);
HA[k].draw(g, px, pyH, hR, dir, SHURE.HAIR_COL[av.hc]);
}
tag(gx + hCellW / 2, gy + 78, HA[k].nm, HA[k].price);
}
y += hRows * hCellH + 26;
/* ---- 石(投げている時の小ささと、形が分かる大きさの2つ) ---- */
head(y + 8, '石の見た目 ' + ST.length + '種(左が実際の大きさ・上が拡大)');
y += 24;
for (var s = 0; s < ST.length; s++) {
var sc = s % sCols, sr = (s / sCols) | 0;
var sx = sc * sCellW + sCellW / 2, sy = y + sr * sCellH;
g.save(); g.translate(sx + 6, sy + 20); ST[s].draw(g, 16, 0); g.restore();
g.save(); g.translate(sx - 22, sy + 24); ST[s].draw(g, 5, 0); g.restore();
tag(sx, sy + 48, ST[s].nm, ST[s].price);
}
})();
</script>
</body>
</html>