79 lines
7.4 KiB
HTML
79 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="th">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Editor ฉาก — Game</title>
|
||
<link rel="stylesheet" href="css/style.css?v=0.0142">
|
||
</head>
|
||
<body>
|
||
<div class="container editor-page">
|
||
<h1>Editor ฉาก</h1>
|
||
<div class="editor-toolbar-wrap">
|
||
<div class="editor-toolbar">
|
||
<label>ประเภทเกม
|
||
<select id="game-type">
|
||
<option value="zep">เดินอิสระ (ZEP)</option>
|
||
<option value="lobby">ห้องโถง (รอผู้เล่น)</option>
|
||
<option value="gauntlet">พรมแดงสุดท้าย (Last Light)</option>
|
||
<option value="frogger">กบข้ามถนน</option>
|
||
<option value="quiz">เกมตอบคำถาม (ถูก/ผิด)</option>
|
||
<option value="stack">สลับจังหวะลงตึก (Stack)</option>
|
||
</select>
|
||
</label>
|
||
<span class="game-type-hint" id="game-type-hint"><strong>กบข้ามถนน</strong> = ตารางแถว · <strong>พรมแดงสุดท้าย</strong> = กระโดดหลบ · <strong>สลับลงตึก</strong> = กดจังหวะซ้อนบล็อก · <strong>ห้องโถง</strong> = วาดฉากรอผู้เล่น · <strong>พื้นที่เริ่มเกม</strong> = host ยืนช่องส้มก่อนกดเริ่ม</span>
|
||
<label>แก้จากฉากเดิม <select id="map-load"><option value="">โหลดรายการ...</option></select></label>
|
||
<button type="button" id="btn-load">โหลดฉาก</button>
|
||
<label>ชื่อฉาก <input type="text" id="map-name" placeholder="ชื่อฉาก (ไม่ซ้ำ)"></label>
|
||
<label>กว้าง <input type="number" id="map-w" value="20" min="10" max="50"></label>
|
||
<label>สูง <input type="number" id="map-h" value="15" min="10" max="40"></label>
|
||
<label>ขนาดタイル <input type="number" id="tile-size" value="32" min="16" max="64"></label>
|
||
<label>ขนาดตัวละคร (ช่อง) <input type="number" id="character-cells" value="1" min="1" max="4" title="ตัวละครจะใหญ่กี่ช่อง (1=ปกติ, 2=2x2)"></label>
|
||
<button type="button" id="btn-new">สร้างกริดใหม่</button>
|
||
<label>โหมดวาด:
|
||
<select id="draw-mode">
|
||
<option value="wall">กำแพง (เดินไม่ได้)</option>
|
||
<option value="noOverlap">โซนห้ามซ้อนผู้เล่น</option>
|
||
<option value="interactive">โซน interactive (จุดกด/ใช้ได้)</option>
|
||
<option value="spawnArea" id="draw-mode-option-spawn-area">พื้นที่สุ่มจุดเกิด (ฟ้า — ผู้เล่นใหม่สุ่มในช่องนี้)</option>
|
||
<option value="gauntletPlayerSpawn" id="draw-mode-option-gauntlet-player-spawn" hidden>พรมแดง: ลำดับเกิด 1–6 (คลิกซ้ายตามลำดับ)</option>
|
||
<option value="startGame" id="draw-mode-option-start-game">พื้นที่เริ่มเกม (host ยืนแล้วกดเริ่มได้)</option>
|
||
<option value="quizTrue" id="draw-mode-option-quiz-true">โซน ถูก (ตอบ จริง)</option>
|
||
<option value="quizFalse" id="draw-mode-option-quiz-false">โซน ผิด (ตอบ เท็จ)</option>
|
||
<option value="quizQuestion" id="draw-mode-option-quiz-question">พื้นที่โชว์ข้อความคำถาม</option>
|
||
<option value="color">สีช่อง</option>
|
||
</select>
|
||
</label>
|
||
<span id="cell-color-wrap" style="display:none;">
|
||
<label>สี <input type="color" id="cell-color" value="#24283b" title="สี"></label>
|
||
<label>Alpha <input type="range" id="cell-alpha" min="0" max="100" value="100" title="ความโปร่งใส 0=ใส 100=ทึบ"> <span id="cell-alpha-value">100</span>%</label>
|
||
</span>
|
||
<label class="editor-toggle"><input type="checkbox" id="show-map-in-game" checked> โชว์กริดในเกม</label>
|
||
<button type="button" id="btn-clear-gauntlet-spawns" hidden title="ล้างรายการจุดเกิดพรมแดงที่กำหนดเอง">ล้างลำดับ 1–6</button>
|
||
<button type="button" id="btn-spawn">ตั้งจุดเกิด</button>
|
||
<button type="button" id="btn-save">บันทึกฉาก</button>
|
||
<button type="button" id="btn-play-test" title="บันทึกฉากแล้วเท่านั้น — เปิดแท็บใหม่เล่นทดสอบด้วยตัวละครเริ่มต้น">ทดลองเล่น</button>
|
||
</div>
|
||
<div id="frogger-lanes-wrap" class="frogger-lanes" style="display:none;">
|
||
<h3 id="frogger-lanes-title">ตั้งค่าแถว — กบข้ามถนน</h3>
|
||
<p class="legend" id="frogger-lanes-legend">แถวบน (y=0) = ปลายทาง · แถวล่าง = จุดเกิด · ถนน/น้ำ ตั้งความเร็ว ทิศทาง และ <strong>ระยะห่าง</strong> (ยิ่งมากยิ่งห่าง เกมง่ายขึ้น)</p>
|
||
<div id="frogger-lanes-table"></div>
|
||
</div>
|
||
<div class="editor-bg-section">
|
||
<label>พื้นหลัง (รูปแผนที่) <input type="file" id="bg-image" accept="image/*"></label>
|
||
<button type="button" id="btn-clear-bg">ลบรูปพื้นหลัง</button>
|
||
</div>
|
||
<p class="legend editor-legend-short">คลิกซ้าย = วาด · คลิกขวา = ลบ · กำแพง · โซนห้ามซ้อน · โซน interactive · <strong>พื้นที่สุ่มจุดเกิด</strong> (ฟ้าอ่อน — ผู้เล่นเข้าห้องสุ่มยืนในช่องนี้; ไม่วาด = ใช้ปุ่มตั้งจุดเกิด) · <strong>พื้นที่เริ่มเกม</strong> (เฉพาะห้องโถง สีส้ม) · <strong>เกมถามตอบ</strong>: พื้นที่โชว์คำถาม (ทอง) · สีช่อง = เลือกสี+Alpha แล้วคลิกบนกริด · «โชว์กริดในเกม» = ยกเลิก = ไม่โชว์แค่กริด/กำแพง (รูปพื้นหลังยังโชว์)</p>
|
||
</div>
|
||
<div class="editor-workspace">
|
||
<div class="canvas-wrap"><canvas id="editor-canvas"></canvas></div>
|
||
<p class="legend" id="editor-status">บันทึกแล้วจะได้รหัสฉาก ใช้รหัสนี้ตอนสร้างห้องในล็อบบี้</p>
|
||
</div>
|
||
</div>
|
||
<script src="../app-base.js"></script>
|
||
<script src="js/version.js?v=0.0104"></script>
|
||
<script src="js/editor.js?v=0.016"></script>
|
||
<div class="version-tag">v —</div>
|
||
</body>
|
||
</html>
|