214 lines
21 KiB
HTML
214 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="th">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||
<meta http-equiv="Pragma" content="no-cache" />
|
||
<title>Editor ฉาก — Game</title>
|
||
<link rel="stylesheet" href="css/style.css?v=20260427-gallery">
|
||
</head>
|
||
<body>
|
||
<div class="container editor-page">
|
||
<h1>Editor ฉาก</h1>
|
||
<div class="editor-toolbar-wrap">
|
||
<div class="editor-toolbar-grid">
|
||
<section class="editor-card" aria-labelledby="editor-card-game-label">
|
||
<h2 class="editor-card__title" id="editor-card-game-label">ประเภทเกม</h2>
|
||
<div class="editor-card__row">
|
||
<label class="editor-field-grow">เลือกโหมด
|
||
<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="quiz_carry">ตอบคำถาม — หยิบคำตอบมาวางกลาง</option>
|
||
<option value="quiz_battle">Quiz Battle — โดม A B C (กด E)</option>
|
||
<option value="stack">สลับจังหวะลงตึก (Stack)</option>
|
||
<option value="jump_survive">กระโดดให้รอด (Jump Survival)</option>
|
||
<option value="space_shooter">ยิงยานอวกาศ (Space Shooter)</option>
|
||
<option value="balloon_boss">ลูกโป้งยิงบอส (Mega Virus)</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div class="game-type-hint editor-card__hint" id="game-type-hint" role="note" aria-labelledby="editor-card-game-label"></div>
|
||
</section>
|
||
|
||
<section class="editor-card" aria-labelledby="editor-card-map-label">
|
||
<h2 class="editor-card__title" id="editor-card-map-label">โหลด / ตั้งชื่อฉาก</h2>
|
||
<div class="editor-card__row editor-card__row--wrap">
|
||
<label>แก้จากฉากเดิม <select id="map-load"><option value="">โหลดรายการ...</option></select></label>
|
||
<button type="button" id="btn-load">โหลดฉาก</button>
|
||
<label class="editor-field-grow">ชื่อฉาก <input type="text" id="map-name" placeholder="ชื่อฉาก (ไม่ซ้ำ)"></label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editor-card" aria-labelledby="editor-card-grid-label">
|
||
<h2 class="editor-card__title" id="editor-card-grid-label">ขนาดกริด</h2>
|
||
<div class="editor-card__row editor-card__row--wrap">
|
||
<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 title="ลงจากมุมซ้ายบนของจุดเกิด — เน้นขยายแนวตั้งก่อน (เช่น 4 = สูง 4 ช่อง)">ตัวละคร สูง (แนวตั้ง) <input type="number" id="character-cells-h" value="1" min="1" max="4"></label>
|
||
<label title="ไปทางขวาจากมุมซ้ายบน — แนวนอน">× กว้าง (แนวนอน) <input type="number" id="character-cells-w" value="1" min="1" max="4"></label>
|
||
<button type="button" id="btn-new">สร้างกริดใหม่</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editor-card editor-card--wide" aria-labelledby="editor-card-draw-label">
|
||
<h2 class="editor-card__title" id="editor-card-draw-label">เครื่องมือวาด</h2>
|
||
<p class="editor-draw-build-hint" style="margin:0 0 0.4rem;font-size:0.74rem;color:#9ece6a;line-height:1.35;">มีโหมด <strong>รูปบนกริด</strong> ในเมนู «โหมดวาด» — ถ้าไม่เห็นข้อความนี้หรือไม่มีเมนูนั้น = หน้าเว็บยังเป็นไฟล์เก่า (ลอง <strong>Ctrl+F5</strong> หรืออัปโหลด <code>editor.html</code> / <code>js/editor.js</code> ขึ้นเซิร์ฟใหม่)</p>
|
||
<div class="editor-card__row editor-card__row--wrap">
|
||
<label class="editor-field-drawmode">โหมดวาด
|
||
<select id="draw-mode" title="จัดกลุ่มตามประเภท — ตัวเลือกที่ไม่ใช้กับโหมดเกมจะถูกซ่อน">
|
||
<optgroup label="พื้นฐาน / ทุกโหมด">
|
||
<option value="wall">กำแพง (เดินไม่ได้)</option>
|
||
<option value="noOverlap">โซนห้ามซ้อนผู้เล่น</option>
|
||
<option value="cellImage">รูปบนกริด (อัปโหลด / เลือกจากคลัง)</option>
|
||
<option value="interactive">โซน interactive (จุดกด/ใช้ได้)</option>
|
||
<option value="spawnArea" id="draw-mode-option-spawn-area">พื้นที่สุ่มจุดเกิด (ฟ้า — ผู้เล่นใหม่สุ่มในช่องนี้)</option>
|
||
<option value="startGame" id="draw-mode-option-start-game">พื้นที่เริ่มเกม (host ยืนแล้วกดเริ่มได้)</option>
|
||
<option value="color">สีช่อง (ทาสีบนกริด)</option>
|
||
</optgroup>
|
||
<optgroup label="พรมแดงสุดท้าย">
|
||
<option value="gauntletPlayerSpawn" id="draw-mode-option-gauntlet-player-spawn" hidden>ลำดับเกิด 1–6 (คลิกซ้ายตามลำดับ)</option>
|
||
</optgroup>
|
||
<optgroup label="Stack">
|
||
<option value="stackRelease" id="draw-mode-option-stack-release" hidden>จุดปล่อยตึก (crane / ด้านบน)</option>
|
||
<option value="stackLand" id="draw-mode-option-stack-land" hidden>จุดซ้อนตึก (แพลตฟอร์มรองรับ)</option>
|
||
</optgroup>
|
||
<optgroup label="ตอบคำถาม (ยืนโซน ถูก/ผิด)">
|
||
<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>
|
||
</optgroup>
|
||
<optgroup label="Quiz Battle">
|
||
<option value="quizBattlePath" id="draw-mode-option-quiz-battle-path" hidden>เส้นทางเดิน (ม่วง — วาดอย่างน้อย 1 ช่อง = จำกัดเดินเฉพาะเส้นทาง)</option>
|
||
<option value="quizBattleDome" id="draw-mode-option-quiz-battle-dome" hidden>โดมคำถาม (ช่องกด E ในเกม)</option>
|
||
</optgroup>
|
||
<optgroup label="กระโดดให้รอด">
|
||
<option value="jumpSurvivePlatform" id="draw-mode-option-jump-platform" hidden>แพลตฟอร์ม (ยืนได้ — ลอยขึ้นตามกล้องในเกม)</option>
|
||
</optgroup>
|
||
<optgroup label="ยิงยานอวกาศ">
|
||
<option value="shooterSpawnPaint" id="draw-mode-option-shooter-spawn" hidden>จุดเกิดยาน ผู้เล่น 1–6 (เลือกช่อง P ด้านขวา)</option>
|
||
</optgroup>
|
||
<optgroup label="ลูกโป้งยิงบอส">
|
||
<option value="balloonBossPlayerPaint" id="draw-mode-option-balloon-boss-player" hidden>จุดเกิดผู้เล่น 1–6 (เลือก P ด้านขวา)</option>
|
||
<option value="balloonBossBossPaint" id="draw-mode-option-balloon-boss-boss" hidden>จุดเกิดบอส (คลิกช่องเดียว — กลางจอในเกม)</option>
|
||
</optgroup>
|
||
<optgroup label="หยิบมาวาง (โซนกลาง + ตัวเลขช่อง)">
|
||
<option value="quizCarryHub" id="draw-mode-option-quiz-carry-hub" class="quiz-carry-mode-opt" hidden>โซนกลาง (วางคำตอบ + โชว์คำถาม)</option>
|
||
<option value="quizCarryOpt1" class="quiz-carry-mode-opt" hidden>ตัวเลือก 1</option>
|
||
<option value="quizCarryOpt2" class="quiz-carry-mode-opt" hidden>ตัวเลือก 2</option>
|
||
<option value="quizCarryOpt3" class="quiz-carry-mode-opt" hidden>ตัวเลือก 3</option>
|
||
<option value="quizCarryOpt4" class="quiz-carry-mode-opt" hidden>ตัวเลือก 4</option>
|
||
<option value="quizCarryOpt5" class="quiz-carry-mode-opt" hidden>ตัวเลือก 5</option>
|
||
<option value="quizCarryOpt6" class="quiz-carry-mode-opt" hidden>ตัวเลือก 6</option>
|
||
<option value="quizCarryOpt7" class="quiz-carry-mode-opt" hidden>ตัวเลือก 7</option>
|
||
<option value="quizCarryOpt8" class="quiz-carry-mode-opt" hidden>ตัวเลือก 8</option>
|
||
<option value="quizCarryOpt9" class="quiz-carry-mode-opt" hidden>ตัวเลือก 9</option>
|
||
<option value="quizCarryOpt10" class="quiz-carry-mode-opt" hidden>ตัวเลือก 10</option>
|
||
<option value="quizCarryOpt11" class="quiz-carry-mode-opt" hidden>ตัวเลือก 11</option>
|
||
<option value="quizCarryOpt12" class="quiz-carry-mode-opt" hidden>ตัวเลือก 12</option>
|
||
<option value="quizCarryOpt13" class="quiz-carry-mode-opt" hidden>ตัวเลือก 13</option>
|
||
<option value="quizCarryOpt14" class="quiz-carry-mode-opt" hidden>ตัวเลือก 14</option>
|
||
<option value="quizCarryOpt15" class="quiz-carry-mode-opt" hidden>ตัวเลือก 15</option>
|
||
<option value="quizCarryOpt16" class="quiz-carry-mode-opt" hidden>ตัวเลือก 16</option>
|
||
</optgroup>
|
||
</select>
|
||
</label>
|
||
<span id="cell-color-wrap" class="editor-cell-color" 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>
|
||
<div id="editor-grid-image-tools" class="editor-grid-image-tools" style="display:none;">
|
||
<div class="editor-grid-image-size-row">
|
||
<label>กว้าง (ช่อง) <input type="number" id="grid-image-brush-w" value="1" min="1" max="24" title="จำนวนช่องกริดแนวนอน"></label>
|
||
<label>สูง (ช่อง) <input type="number" id="grid-image-brush-h" value="1" min="1" max="24" title="จำนวนช่องกริดแนวตั้ง"></label>
|
||
</div>
|
||
<div class="editor-grid-image-gallery-wrap">
|
||
<span class="editor-grid-image-gallery-label">คลังรูป (คลิกเลือก)</span>
|
||
<div id="grid-cell-image-gallery" class="grid-cell-image-gallery" role="listbox" aria-label="คลังรูปบนกริด"></div>
|
||
</div>
|
||
<div class="editor-grid-image-upload-row">
|
||
<label>อัปโหลดเข้าคลัง <input type="file" id="grid-cell-image-upload" accept="image/*"></label>
|
||
<button type="button" id="btn-grid-image-remove-from-lib" title="ลบรูปที่เลือกในคลัง (สไปรต์ที่ใช้รูปนี้จะหาย)">ลบจากคลัง</button>
|
||
</div>
|
||
</div>
|
||
<label class="editor-toggle" title="ปิด = ไม่วาดกริด/ช่องฉาก แต่ยังแสดงรูปที่วาดบนกริด · Off = hide tile grid, grid images still show"><input type="checkbox" id="show-map-in-game" checked> โชว์กริดในเกม</label>
|
||
<button type="button" id="btn-clear-gauntlet-spawns" hidden title="ล้างรายการจุดเกิดพรมแดงที่กำหนดเอง">ล้างลำดับ 1–6</button>
|
||
<label id="shooter-slot-paint-wrap" class="editor-field-grow" style="display:none;" title="ช่องผู้เล่นลำดับที่ 1–6 ตรงกับคนในเกม (คุณ = ลำดับแรกจาก join)">ช่องเกิดยาน P
|
||
<select id="shooter-slot-paint">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
<option value="6">6</option>
|
||
</select>
|
||
</label>
|
||
<label id="balloon-boss-slot-paint-wrap" class="editor-field-grow" style="display:none;" title="ลำดับ P1–P6 เหมือนยิงยาน">ช่องเกิดผู้เล่น P
|
||
<select id="balloon-boss-slot-paint">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
<option value="6">6</option>
|
||
</select>
|
||
</label>
|
||
<button type="button" id="btn-clear-shooter-spawns" hidden title="ล้างจุดเกิดยานทั้งหมด">ล้างจุดเกิดยาน</button>
|
||
<button type="button" id="btn-clear-balloon-boss-spawns" hidden title="ล้างจุดเกิดผู้เล่น + บอส">ล้างจุดเกิดบอสโหมด</button>
|
||
<button type="button" id="btn-spawn">ตั้งจุดเกิด</button>
|
||
</div>
|
||
<div class="editor-card__row editor-card__row--actions">
|
||
<button type="button" id="btn-save" class="editor-btn-primary">บันทึกฉาก</button>
|
||
<button type="button" id="btn-play-test" title="บันทึกฉากแล้วเท่านั้น — เปิดแท็บใหม่เล่นทดสอบด้วยตัวละครตัวแรกที่สร้าง (จาก /Game/character.html)">ทดลองเล่น</button>
|
||
</div>
|
||
</section>
|
||
</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>
|
||
|
||
<section class="editor-card editor-card--bg" aria-labelledby="editor-card-bg-label">
|
||
<h2 class="editor-card__title" id="editor-card-bg-label">พื้นหลัง</h2>
|
||
<div class="editor-card__row editor-card__row--wrap">
|
||
<label>รูปแผนที่ <input type="file" id="bg-image" accept="image/*"></label>
|
||
<button type="button" id="btn-clear-bg">ลบรูปพื้นหลัง</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editor-card editor-card--help" aria-labelledby="editor-card-help-label">
|
||
<h2 class="editor-card__title" id="editor-card-help-label">วิธีใช้บนกริด</h2>
|
||
<ul class="editor-help-list legend editor-legend-short">
|
||
<li><strong>คลิกซ้าย</strong> = วาด · <strong>คลิกขวา</strong> = ลบ · ลากค้างได้</li>
|
||
<li>โหมดหลัก: กำแพง · โซนห้ามซ้อน · โซน interactive</li>
|
||
<li><strong>พื้นที่สุ่มจุดเกิด</strong> (ฟ้าอ่อน) — ไม่วาดช่องนี้ได้ ใช้ปุ่ม «ตั้งจุดเกิด»</li>
|
||
<li><strong>พื้นที่เริ่มเกม</strong> (ห้องโถง — ส้ม) — host ยืนแล้วกดเริ่ม</li>
|
||
<li><strong>ถามตอบ</strong>: โซนถูก/ผิด + พื้นที่คำถาม (ทอง)</li>
|
||
<li><strong>หยิบมาวาง</strong>: ม่วง = โซนกลาง (กำแพง) · <strong>ทอง</strong> = พื้นที่โชว์ข้อความคำถามบนแผนที่ (ถ้าไม่วาดทอง ข้อความไปที่โซนม่วง) · <strong>interactive เขียว</strong> = ยืนแล้วกด F ส่งคำตอบ · สี = ตัวเลือก 1–16 · <code>quizQuestions</code> ใส่ <code>choices</code> + <code>correctIndex</code> หรือ <code>answerTrue</code></li>
|
||
<li><strong>Stack</strong>: โหมดวาดจุดปล่อย (ฟ้า) · จุดซ้อนตึก (ชมพู)</li>
|
||
<li><strong>กระโดดให้รอด</strong>: โหมด <strong>แพลตฟอร์ม</strong> (ฟ้าอมเขียว) · กำแพง = ขอบซ้ายขวา/บน · Space / W = กระโดด</li>
|
||
<li><strong>ลูกโป้งยิงบอส</strong>: จุดเกิดผู้เล่น P1–P6 + <strong>จุดเกิดบอส</strong> 1 ช่อง · ในเกมเดินช้า ยิงมีดีเลย์ · ลูกโป้งหมด = ตกรอบ</li>
|
||
<li><strong>สีช่อง</strong>: เลือกโหมดสี + Alpha แล้วคลิกบนกริด</li>
|
||
<li><strong>รูปบนกริด</strong>: โหมด «รูปบนกริด» — ตั้งกว้าง×สูง (ช่อง) · เลือกรูปจากแกลเลอรี · คลิกซ้ายวาง (ทับสไปรต์ที่ทับกัน) · คลิกขาวางลบทั้งแผ่น · บันทึกฉากเก็บเป็น <code>gridImageSprites</code> (ไฟล์ใหญ่ = JSON ใหญ่)</li>
|
||
<li>ปิด «โชว์กริดในเกม» = ซ่อนกริด/กำแพงในเกม (รูปพื้นหลังยังแสดง)</li>
|
||
</ul>
|
||
</section>
|
||
</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="js/version.js?v=0.0169"></script>
|
||
<script src="js/editor.js?v=20260428-play-cache-bust"></script>
|
||
<div class="version-tag">v —</div>
|
||
</body>
|
||
</html>
|