deepseek/diablo2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Diablo2D — Shadows of Tristram: complete browser ARPG

Browse Source 
- Isometric canvas renderer (depth-sorted, FOV/fog, additive lighting)
- 3 classes x 20 skills, 4 acts x 4 floors + boss lairs, torment I-X
- Diablo-style loot: rarities, affix tiers, 14 legendaries, vendor, stash
- Rogue camp with 6 NPCs: Charsi/Akara/Kashya/Cain/Gheed/storage
- NPC quest chain (accept -> hunt -> turn in) with rewards & gating
- Procedural WebAudio SFX + generative music, EN/VI localization
- Saves, settings, waypoints, hardcore mode, PWA manifest
- 93-assertion headless suite + browser E2E via CDP
This commit is contained in:
deepseek
2026-08-23 06:59:36 +00:00
commit fc1fa2d51e
42 changed files with 11784 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+5
View File
@@ -0,0 +1,5 @@
# build artifacts
diablo2d-itch.zip
*.log
node_modules/
.DS_Store
LICENSE
+27
View File
@@ -0,0 +1,27 @@
MIT License
Copyright (c) 2026 Diablo2D contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
---
All graphics and audio are generated procedurally at runtime by the code in
this repository. No third-party assets are included. "Diablo" is a trademark
of Blizzard Entertainment; this project is an unaffiliated homage.
README.md
+131
View File
@@ -0,0 +1,131 @@
# Diablo2D — Shadows of Tristram
A dark, isometric **action-RPG that runs entirely in your browser** — no build step,
no server, no assets to download. Every tile, creature, spell effect, sound and
music track is generated procedurally in code. Inspired by classic Diablo and
modern browser ARPGs like Sephiria.
![class](https://img.shields.io/badge/classes-3-gold) ![acts](https://img.shields.io/badge/acts-4-red) ![offline](https://img.shields.io/badge/offline-100%25-green)
---
## Play
**Instant:** serve the folder with any static file server and open it.
```bash
cd diablo2d
python3 -m http.server 8080 # or: node server.js 8080
# open http://localhost:8080
```
It also runs straight from `file://` (double-click `index.html`) and can be
zipped as-is for **itch.io** (see *Publishing* below).
> Progress autosaves to `localStorage` every 90 seconds, on floor change,
> and when the tab closes. Export/import your hero as a code from Settings.
## Features
- **3 classes** — Crusader, Ranger, Sorceress — 20 hand-tuned skills across
3 talent branches each (actives + passives, 6-slot action bar).
- **4 acts × 4 floors** of procedurally generated dungeons:
room-and-corridor crypts, cellular cave systems, and a boss lair per act
(The Flesh Butcher, The Bone King, Aranea the Spider Queen, Malgor the
Lord of Terror) with multi-phase scripted attacks.
- **Diablo-style loot**: 40+ item bases, 4 rarities, ~30 affixes with
item-level tiers, 14 build-defining legendaries (Cleave Echo, Corpse Boom,
Voidstep…), vendor with rerolling stock, gamble-free sell/buy economy,
and a shared stash.
- **Elite monsters** with 10 random affixes (Frozen, Jailer, Necrotic…),
champion packs, and torment levels I–X for endless scaling after victory.
- **Full RPG systems**: strength/dex/vit/energy allocation, crit & crit damage,
elemental damage & resists, cooldown reduction, magic/gold find, shrines,
destructibles, health/mana potions on a potion belt.
- **Waypoint network** between acts, quest tracker, NPC dialogs
(blacksmith, healer, stash keeper), death penalty & hardcore mode.
- **Procedural audio**: WebAudio-synthesised SFX for every action and a
generative music sequencer with per-theme moods (town, crypt, cave, hell, boss).
- **English + Tiếng Việt**, damage numbers, screen shake, and label options.
## Controls
| Input | Action |
|---|---|
| **LMB** (hold) | Move / attack-move onto enemies / interact |
| **RMB, 1–3** | Cast bound skills |
| **Q / E** | Health / mana potion |
| **F or Space** | Interact — stairs, chests, shrines, NPCs |
| **Alt** | Toggle item labels |
| **I / C / T / J / M** | Inventory · Character · Skills · Quests · Map |
| **Esc** | Close panels / pause |
## Tech notes
- Pure vanilla ES3-style classic scripts (works from `file://`), global
`window.D2` namespace, ~10k lines across `js/core`, `js/data`, `js/game`,
`js/render`, `js/ui`.
- HTML5 Canvas isometric renderer (64×32 diamond tiles, painter's-algorithm
depth sort, raycast FOV + fog, additive lighting with torch flicker,
screen-space damage numbers).
- A\* pathfinding with per-frame budget, spatial-hash collision queries,
Bresenham line-of-sight, cellular-automata + room generator with
connectivity guarantees (stairs are never sealed off).
- WebAudio: zero audio files — every sound is a recipe of oscillators,
noise buffers and envelopes; music is a live sequencer per mood.
- i18n dictionary (EN/VI), settings + save slots in `localStorage`
under `d2d.*`, export/import via base64 code.
## Repository layout
```
index.html shell + HUD DOM + script load order
css/style.css full gothic UI theme
js/core/ util, i18n, save, input, audio
js/data/ balance, items, monsters, skills (all data-driven)
js/game/ world gen, entities, ai, combat, loot, player, orchestrator
js/render/ procedural sprites, isometric renderer, minimap
js/ui/ hud, panels, screens
js/main.js bootstrap + game loop
tools/ headless_test.js (81 assertions), browser E2E driver,
CDP runner, icon generator, zip packer
```
## Development
```bash
node tools/headless_test.js # 81-assertion simulation suite (no browser)
node tools/make_icons.mjs # regenerate PWA icons
node tools/build_zip.mjs # produce diablo2d-itch.zip
```
The headless suite boots the entire game in Node (stubbed DOM/canvas),
generates every floor, casts every skill of every class, kills every boss,
exercises economy/save-load, and soaks 3 600 combat frames.
### Browser smoke test (optional, needs the Playwright chromium shell)
```bash
python3 -m http.server 8942 &
chromium-headless-shell --no-sandbox --remote-debugging-port=9344 \
"http://127.0.0.1:8942/tools/browser_drive.html?phase=full&mute=1" &
node tools/cdp_run.mjs 9344 150 # polls the E2E log to completion
```
## Publishing
### itch.io
1. `node tools/build_zip.mjs` → `diablo2d-itch.zip`
2. Create a new project → kind of project: **HTML** → upload the zip.
3. Tick *This file will be played in the browser*, set viewport
**1280×720** or larger, enable fullscreen button. Done.
### Any static host (GitHub Pages, Netlify, S3…)
Upload the folder as-is. No build, no server code, no CORS issues —
everything is relative-path static files.
## License
Code and generated art: MIT (see `LICENSE`).
"Diablo" is a trademark of Blizzard Entertainment — this is an unaffiliated
fan-style homage; no Blizzard assets are used.
css/style.css
+684
View File
@@ -0,0 +1,684 @@
/* ============================================================
Diablo2D — style.css : gothic ARPG theme
============================================================ */
:root {
--bg: #070605;
--panel: rgba(24, 18, 12, 0.96);
--panel-soft: rgba(32, 24, 16, 0.92);
--border: #5a4426;
--border-hi: #8a6c3c;
--gold: #c8a35a;
--gold-hi: #efd28e;
--text: #d8cbb3;
--text-dim: #93876f;
--red: #a32c22;
--red-hi: #d84b37;
--blue-orb: #2456a8;
--rarity-common: #c8c8c8;
--rarity-magic: #7c9cf5;
--rarity-rare: #f2e34c;
--rarity-legendary: #ef8f34;
--rarity-quest: #4ade80;
--slot-bg: rgba(10, 8, 6, 0.85);
--font-serif: Georgia, 'Times New Roman', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%;
overflow: hidden;
background: var(--bg);
font-family: var(--font-serif);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
#app { position: fixed; inset: 0; }
canvas#game-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
cursor: crosshair;
image-rendering: auto;
}
.hidden { display: none !important; }
/* ============ shared gothic chrome ============ */
.panel-gothic {
background: linear-gradient(160deg, rgba(36,27,18,.97), rgba(20,14,9,.97));
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 12px 40px rgba(0,0,0,.75),
inset 0 0 60px rgba(0,0,0,.45);
}
.panel-title {
font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
color: var(--gold); text-align: center;
padding: 10px 0 8px;
border-bottom: 1px solid var(--border);
text-shadow: 0 0 12px rgba(200,163,90,.35);
user-select: none;
}
.btn {
display: inline-block;
font-family: var(--font-serif);
font-size: 15px; letter-spacing: 1px;
color: var(--text);
background: linear-gradient(180deg, #33261a, #201710);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px 22px;
cursor: pointer;
transition: all .12s ease;
text-shadow: 0 1px 2px #000;
user-select: none;
}
.btn:hover { color: var(--gold-hi); border-color: var(--border-hi); box-shadow: 0 0 14px rgba(200,163,90,.25); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.btn-primary { color: var(--gold-hi); border-color: var(--gold); background: linear-gradient(180deg, #4a3418, #2a1c0e); }
.btn-danger { color: var(--red-hi); }
.btn-danger:hover { box-shadow: 0 0 14px rgba(216,75,55,.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #14100b; }
::-webkit-scrollbar-thumb { background: #3d2f1e; border-radius: 5px; border: 1px solid #000; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }
/* ============ screens ============ */
.screen {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 50;
background:
radial-gradient(ellipse at 50% 30%, rgba(120,40,20,.14), transparent 55%),
radial-gradient(ellipse at center, rgba(10,7,5,.55), #050403 78%);
}
.game-logo {
font-size: clamp(48px, 9vw, 110px);
letter-spacing: 12px;
color: #b83a26;
text-shadow: 0 0 30px rgba(190,60,30,.55), 0 2px 0 #300b06, 0 6px 24px #000;
font-weight: bold;
}
.game-logo span { color: var(--gold); font-size: .45em; vertical-align: super; letter-spacing: 4px; }
.loading-inner { text-align: center; }
.loading-sub {
margin-top: 6px;
letter-spacing: 6px; text-transform: uppercase;
color: var(--text-dim); font-size: 14px;
}
.loading-bar {
width: 320px; height: 6px; margin: 34px auto 12px;
background: #171008; border: 1px solid var(--border); border-radius: 3px;
overflow: hidden;
}
#loading-progress {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--red), #e0763a);
box-shadow: 0 0 12px rgba(224,118,58,.8);
transition: width .2s ease;
}
#loading-tip { color: var(--text-dim); font-style: italic; font-size: 13px; min-height: 18px; }
/* title menu */
.title-menu { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 42px; }
.title-menu .btn { min-width: 280px; font-size: 17px; letter-spacing: 2px; padding: 11px 0; }
.title-savecard {
margin-top: 26px; padding: 10px 26px; text-align: center;
color: var(--text-dim); font-size: 13px;
border-top: 1px solid rgba(90,68,38,.35);
}
.title-savecard b { color: var(--gold); letter-spacing: 1px; }
.title-footer {
position: absolute; bottom: 18px; width: 100%;
text-align: center; color: #565043; font-size: 12px; letter-spacing: 1px;
}
/* class select */
.class-grid { display: flex; gap: 26px; padding: 30px; }
.class-card {
width: 250px; padding: 18px 16px 20px; cursor: pointer;
background: linear-gradient(170deg, rgba(38,28,19,.95), rgba(17,12,8,.95));
border: 1px solid var(--border); border-radius: 8px;
text-align: center;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.class-card:hover { transform: translateY(-6px); border-color: var(--border-hi); box-shadow: 0 14px 34px rgba(0,0,0,.6); }
.class-card.selected { border-color: var(--gold); box-shadow: 0 0 26px rgba(200,163,90,.35); }
.class-card canvas { width: 150px; height: 150px; margin-bottom: 8px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.7)); }
.class-card h3 { color: var(--gold-hi); letter-spacing: 2px; font-size: 18px; margin-bottom: 8px; }
.class-card p { font-size: 13px; line-height: 1.5; color: var(--text-dim); min-height: 78px; }
.class-card .class-stats { margin-top: 10px; font-size: 12px; color: var(--text); }
.class-card .class-stats span { display: inline-block; margin: 2px 6px; opacity: .85; }
.screen-center-col { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 900px; padding: 20px; }
/* settings rows */
.settings-panel { width: min(560px, 92vw); padding-bottom: 18px; }
.settings-body { padding: 18px 26px 6px; display: flex; flex-direction: column; gap: 13px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 15px; }
.setting-row label { color: var(--text); letter-spacing: .5px; }
input[type="range"] {
-webkit-appearance: none; appearance: none;
width: 210px; height: 6px; border-radius: 3px;
background: linear-gradient(90deg, #4a3418, #1c140c);
outline: none; border: 1px solid var(--border); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, var(--gold-hi), #7a5a24);
border: 1px solid #000;
box-shadow: 0 0 8px rgba(239,210,142,.5);
}
.toggle-switch {
position: relative; width: 52px; height: 24px;
background: #171008; border: 1px solid var(--border); border-radius: 12px;
cursor: pointer; transition: background .15s;
}
.toggle-switch::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #caa, #63302a);
transition: left .15s ease, background .15s;
}
.toggle-switch.on { background: #3d2a12; }
.toggle-switch.on::after { left: 30px; background: radial-gradient(circle at 35% 35%, var(--gold-hi), #7a5a24); box-shadow: 0 0 10px rgba(239,210,142,.6); }
select.gothiselect {
font-family: var(--font-serif); font-size: 14px;
background: #201710; color: var(--text);
border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px;
}
textarea.savecode {
width: 100%; height: 74px; resize: none;
background: #120d08; color: var(--text-dim);
border: 1px solid var(--border); border-radius: 4px;
font-family: monospace; font-size: 10px; padding: 6px;
}
/* help screen */
.help-panel { width: min(720px, 94vw); padding-bottom: 16px; }
.help-body { padding: 16px 30px 6px; font-size: 14px; line-height: 1.75; color: var(--text); }
.help-body h4 { color: var(--gold); margin: 10px 0 4px; letter-spacing: 1px; }
.help-keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin-top: 6px; }
.key-cap {
display: inline-block; min-width: 26px; text-align: center;
background: #241a10; border: 1px solid var(--border-hi); border-bottom-width: 3px;
border-radius: 4px; padding: 1px 7px; font-size: 12px; color: var(--gold-hi);
}
/* death & victory */
.death-title {
font-size: clamp(40px, 7vw, 84px); letter-spacing: 14px;
color: var(--red-hi);
text-shadow: 0 0 40px rgba(180,30,20,.7), 0 3px 0 #1a0503;
animation: deathPulse 2.6s ease-in-out infinite;
}
@keyframes deathPulse { 50% { text-shadow: 0 0 64px rgba(220,50,30,.9), 0 3px 0 #1a0503; } }
.victory-title {
font-size: clamp(30px, 5vw, 60px); letter-spacing: 8px;
color: var(--gold-hi);
text-shadow: 0 0 44px rgba(239,210,142,.65), 0 3px 0 #241503;
}
.screen-subtitle { margin-top: 14px; color: var(--text-dim); font-style: italic; font-size: 16px; text-align: center; max-width: 520px; }
.victory-stats { margin-top: 22px; font-size: 14px; color: var(--text); text-align: center; line-height: 1.9; }
.victory-stats b { color: var(--gold); }
/* ============ pause overlay ============ */
#pause-overlay {
position: absolute; inset: 0; z-index: 40;
background: rgba(4, 3, 2, .72);
backdrop-filter: blur(2px) brightness(.7);
display: flex; align-items: center; justify-content: center;
}
.pause-menu { display: flex; flex-direction: column; gap: 10px; padding: 26px 34px; min-width: 320px; }
.pause-menu h2 { text-align: center; color: var(--gold); letter-spacing: 4px; margin-bottom: 10px; font-weight: normal; }
.pause-menu .btn { width: 100%; }
/* ============ HUD ============ */
#hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-corner {
position: absolute; top: 12px; left: 12px;
max-width: 330px; font-size: 13px; line-height: 1.5;
color: var(--text); text-shadow: 0 1px 3px #000, 0 0 8px #000;
pointer-events: none !important;
}
#quest-tracker .quest-line { margin-bottom: 6px; }
#quest-tracker .quest-done { color: #7fc97f; text-decoration: line-through; opacity: .8; }
#quest-tracker .quest-header { color: var(--gold); letter-spacing: 1px; font-size: 12px; text-transform: uppercase; }
.hud-panel {
background: var(--panel-soft);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 6px 20px rgba(0,0,0,.55), inset 0 0 24px rgba(0,0,0,.4);
}
#minimap-box { position: absolute; top: 12px; right: 12px; padding: 5px; }
#minimap { display: block; border-radius: 3px; }
#minimap-label {
text-align: center; font-size: 11px; letter-spacing: 1px;
color: var(--gold); padding-top: 4px; text-transform: uppercase;
}
#buff-bar {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; pointer-events: none;
}
.buff-icon {
width: 40px; height: 40px; border-radius: 6px;
border: 1px solid var(--border-hi);
background: var(--panel-soft);
display: flex; align-items: center; justify-content: center;
font-size: 19px; position: relative; overflow: hidden;
box-shadow: 0 0 12px rgba(0,0,0,.6);
}
.buff-icon .buff-timer {
position: absolute; bottom: 0; left: 0; right: 0;
font-size: 9px; text-align: center; color: var(--gold-hi);
background: rgba(0,0,0,.55); padding-bottom: 1px;
}
/* bottom hud: orbs + hotbar */
#bottom-hud {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; align-items: flex-end; justify-content: space-between;
padding: 0 18px 10px;
pointer-events: none;
}
#bottom-hud > * { pointer-events: auto; }
.orb {
position: relative;
width: 108px; height: 108px;
border-radius: 50%;
border: 3px solid #2c2115;
box-shadow: 0 0 0 2px #000, inset 0 0 26px rgba(0,0,0,.9), 0 8px 24px rgba(0,0,0,.7);
overflow: hidden;
background: radial-gradient(circle at 50% 42%, #1c1611, #0a0705 72%);
}
.orb-fill { position: absolute; left: 0; right: 0; bottom: 0; transition: height .18s ease; }
.orb-fill.life {
background: linear-gradient(to top, #7e1408, #c93a20 62%, #e86a48);
box-shadow: 0 0 22px rgba(220,70,40,.55);
}
.orb-fill.mana {
background: linear-gradient(to top, #12306e, #2f66c4 62%, #5b93ea);
box-shadow: 0 0 22px rgba(70,120,230,.55);
}
.orb-fill::before {
content: ''; position: absolute; top: -4px; left: -6%; right: -6%; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.22);
filter: blur(1px);
}
.orb-gloss {
position: absolute; top: 8%; left: 14%; width: 46%; height: 30%;
border-radius: 50%;
background: radial-gradient(ellipse at 40% 30%, rgba(255,255,255,.28), transparent 65%);
pointer-events: none;
}
.orb-text {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 15px; color: #fff;
text-shadow: 0 1px 3px #000, 0 0 10px #000;
pointer-events: none;
}
#center-hud {
flex: 0 1 560px;
display: flex; flex-direction: column; align-items: center; gap: 7px;
margin-bottom: 4px;
}
#xp-bar-wrap {
position: relative; width: 100%; height: 13px;
background: #120d08; border: 1px solid var(--border); border-radius: 7px;
overflow: hidden;
}
#xp-bar {
height: 100%; width: 0%;
background: linear-gradient(90deg, #6d5116, #c8a35a);
box-shadow: 0 0 10px rgba(200,163,90,.5);
transition: width .25s ease;
}
#xp-text {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 9.5px; color: var(--gold-hi); letter-spacing: .5px;
text-shadow: 0 1px 2px #000;
}
#hotbar {
display: flex; align-items: center; gap: 8px;
background: var(--panel-soft);
border: 1px solid var(--border); border-radius: 8px;
padding: 6px 10px;
box-shadow: 0 8px 22px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.45);
}
.hotbar-group { display: flex; gap: 6px; }
.hotbar-sep { width: 1px; height: 40px; background: var(--border); opacity: .7; }
.hotbar-group.small { gap: 4px; }
.hb-slot {
position: relative; width: 46px; height: 46px;
background: var(--slot-bg);
border: 1px solid #4a3a22; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; user-select: none;
}
.hb-slot.small { width: 34px; height: 34px; }
.hb-slot:hover { border-color: var(--border-hi); box-shadow: 0 0 10px rgba(200,163,90,.3); }
.hb-slot canvas { width: 36px; height: 36px; }
.hb-slot .keybind {
position: absolute; top: -1px; left: 2px;
font-size: 9px; color: var(--gold); text-shadow: 0 1px 2px #000;
}
.hb-slot .cd-overlay {
position: absolute; inset: 0; border-radius: 6px;
background: rgba(0,0,0,.72);
pointer-events: none;
}
.hb-slot .mana-star {
position: absolute; right: 2px; bottom: 1px;
font-size: 9px; color: #6f9fe8; text-shadow: 0 1px 2px #000;
}
.hb-slot.empty-slot { opacity: .45; }
.hb-slot.potion-count {
position: absolute; right: 2px; bottom: 1px;
font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000;
}
#level-pill {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 96px;
background: var(--panel-soft); border: 1px solid var(--border);
border-radius: 14px; padding: 1px 14px;
font-size: 12px; color: var(--gold-hi); letter-spacing: 1px;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
#center-hud { position: relative; }
/* boss bar */
#boss-bar-wrap {
position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
width: min(520px, 60vw); text-align: center;
}
#boss-name {
font-size: 15px; letter-spacing: 4px; color: #e8b0a0;
text-transform: uppercase; text-shadow: 0 0 14px rgba(200,50,30,.8), 0 2px 3px #000;
margin-bottom: 4px;
}
#boss-bar {
height: 12px; background: rgba(10,6,4,.85);
border: 1px solid #6e2a1c; border-radius: 6px; overflow: hidden;
box-shadow: 0 0 18px rgba(120,20,10,.5);
}
#boss-fill {
height: 100%; width: 100%;
background: linear-gradient(90deg, #6e120a, #c22a18 70%, #e05540);
box-shadow: 0 0 12px rgba(220,60,30,.7);
transition: width .15s ease;
}
/* toasts */
#toasts {
position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column-reverse; align-items: center; gap: 5px;
pointer-events: none;
}
.toast {
background: rgba(16,11,7,.92);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
font-size: 13.5px;
padding: 6px 18px;
letter-spacing: .5px;
text-shadow: 0 1px 2px #000;
animation: toastIn .18s ease;
box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
.toast.gold { color: var(--gold-hi); }
.toast.bad { color: var(--red-hi); }
.toast.fadeout { opacity: 0; transition: opacity .5s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
/* ============ floating panels ============ */
#panels { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.fpanel {
position: absolute;
pointer-events: auto;
min-width: 240px;
}
.fpanel-head {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 14px;
}
.fpanel-head .panel-title { border: none; padding: 0; flex: 1; }
.fpanel-close {
width: 22px; height: 22px; line-height: 20px;
text-align: center; cursor: pointer;
color: var(--text-dim); font-size: 14px;
border: 1px solid transparent; border-radius: 4px;
user-select: none;
}
.fpanel-close:hover { color: var(--red-hi); border-color: var(--border); }
.fpanel-body { padding: 10px 14px 14px; }
#panel-inventory { right: 16px; top: 190px; width: 292px; }
#panel-character { left: 16px; top: 190px; width: 308px; }
#panel-skills { left: 16px; top: 130px; width: 560px; max-height: calc(100vh - 260px); }
#panel-stash { left: 50%; transform: translateX(-50%); top: 120px; width: 340px; }
#panel-vendor { left: 50%; transform: translateX(-50%); top: 110px; width: 640px; }
#panel-dialog { left: 50%; transform: translateX(-50%); bottom: 170px; width: min(560px, 90vw); }
#panel-quests { right: 16px; top: 130px; width: 330px; }
#panel-worldmap { left: 50%; transform: translateX(-50%); top: 50%; transform: translate(-50%, -50%); width: min(680px, 94vw); }
.inv-grid {
display: grid; grid-template-columns: repeat(5, 48px); gap: 5px;
justify-content: center;
}
.item-slot {
position: relative; width: 48px; height: 48px;
background: var(--slot-bg);
border: 1px solid #43351f; border-radius: 5px;
cursor: pointer;
}
.item-slot:hover { border-color: var(--border-hi); }
.item-slot.rarity-glow-magic { border-color: var(--rarity-magic); }
.item-slot.rarity-glow-rare { border-color: var(--rarity-rare); }
.item-slot.rarity-glow-legendary { border-color: var(--rarity-legendary); box-shadow: 0 0 10px rgba(239,143,52,.5); }
.item-slot canvas { width: 44px; height: 44px; display: block; margin: 1px auto; }
.item-slot .qty-badge {
position: absolute; right: 2px; bottom: 0;
font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000;
}
.equip-grid {
display: grid;
grid-template-columns: repeat(3, 54px);
gap: 6px; justify-content: center;
margin-bottom: 12px;
}
.equip-slot {
position: relative; width: 54px; height: 54px;
background: var(--slot-bg);
border: 1px dashed #4a3a22; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.equip-slot:hover { border-color: var(--border-hi); }
.equip-slot .slot-label {
font-size: 9px; color: #6b5c43; text-transform: uppercase; letter-spacing: 1px;
text-align: center;
}
.equip-slot canvas { width: 50px; height: 50px; position: absolute; }
.stat-list { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.stat-row { display: flex; justify-content: space-between; padding: 1px 4px; border-radius: 3px; }
.stat-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.stat-row .stat-val { color: var(--gold-hi); }
.stat-row.allocatable .stat-name { cursor: pointer; }
.stat-row .plus-btn {
width: 18px; height: 18px; line-height: 15px; text-align: center;
border: 1px solid var(--border-hi); border-radius: 3px;
color: var(--gold); cursor: pointer; font-size: 13px;
margin-left: 6px; user-select: none;
}
.stat-row .plus-btn:hover { background: #3d2a12; color: var(--gold-hi); }
.resist-strip { display: flex; justify-content: space-around; margin-top: 8px; font-size: 11px; }
.resist-strip span { color: var(--text-dim); }
.resist-strip b { color: var(--text); }
/* skills tree */
.skill-tree { display: flex; flex-direction: column; gap: 10px; }
.skill-branch-name {
color: var(--gold); letter-spacing: 2px; font-size: 12px; text-transform: uppercase;
border-bottom: 1px solid rgba(90,68,38,.4); padding-bottom: 3px; margin-bottom: 4px;
}
.skill-tier { display: flex; gap: 8px; align-items: center; }
.skill-node { position: relative; }
.skill-node .skill-btn {
position: relative; width: 56px; height: 56px;
background: var(--slot-bg); border: 1px solid #4a3a22; border-radius: 6px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.skill-node.locked .skill-btn { opacity: .38; filter: grayscale(.8); }
.skill-node.maxed .skill-btn { border-color: var(--gold); box-shadow: 0 0 12px rgba(200,163,90,.4); }
.skill-node .skill-rank {
position: absolute; right: 2px; bottom: 1px;
font-size: 11px; color: var(--gold-hi); text-shadow: 0 1px 2px #000;
}
.skill-node .skill-plus {
position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
width: 18px; height: 18px; line-height: 16px; text-align: center;
background: #2a1c0e; border: 1px solid var(--gold); border-radius: 50%;
color: var(--gold-hi); cursor: pointer; font-size: 12px;
box-shadow: 0 0 8px rgba(200,163,90,.5);
}
.skill-desc {
flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
padding-left: 6px;
}
.skill-desc b { color: var(--text); }
.skill-hotkey-select {
margin-top: 3px; font-size: 11px; color: var(--gold);
}
.skill-hotkey-select button {
font-family: inherit; font-size: 10px;
background: #201710; color: var(--text);
border: 1px solid var(--border); border-radius: 3px;
padding: 1px 7px; margin-right: 4px; cursor: pointer;
}
.skill-hotkey-select button.active { color: var(--gold-hi); border-color: var(--gold); background: #3d2a12; }
/* vendor / lists */
.vendor-layout { display: flex; gap: 14px; }
.vendor-list { display: flex; flex-direction: column; gap: 5px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.vendor-item-row {
display: flex; align-items: center; gap: 10px;
padding: 5px 8px; border: 1px solid #3a2d1a; border-radius: 5px;
background: rgba(14,10,6,.7);
cursor: pointer;
}
.vendor-item-row:hover { border-color: var(--border-hi); background: rgba(30,21,12,.85); }
.vendor-item-row.sold { opacity: .35; pointer-events: none; }
.vendor-price { margin-left: auto; color: var(--gold-hi); font-size: 13px; white-space: nowrap; }
.vendor-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.vendor-tab {
padding: 4px 16px; font-size: 13px; letter-spacing: 1px;
border: 1px solid var(--border); border-radius: 4px;
color: var(--text-dim); cursor: pointer; user-select: none;
}
.vendor-tab.active { color: var(--gold-hi); border-color: var(--gold); background: #2a1c0e; }
/* dialog */
.dialog-box { padding: 14px 20px 16px; }
.dialog-text { font-size: 15px; line-height: 1.6; font-style: italic; color: var(--text); margin-bottom: 12px; }
.dialog-options { display: flex; flex-direction: column; gap: 6px; }
.dialog-options .btn { text-align: left; font-size: 14px; padding: 7px 16px; }
/* world map */
.worldmap-nodes { display: flex; align-items: center; justify-content: center; gap: 0; padding: 24px 10px 10px; }
.wm-node {
width: 120px; text-align: center; cursor: pointer; user-select: none;
padding: 10px 6px; border: 1px solid var(--border); border-radius: 8px;
background: rgba(18,12,8,.85);
font-size: 12px;
}
.wm-node .wm-icon { font-size: 26px; margin-bottom: 4px; }
.wm-node .wm-depth { color: var(--text-dim); font-size: 11px; }
.wm-node.current { border-color: var(--gold); box-shadow: 0 0 16px rgba(200,163,90,.4); }
.wm-node.locked { opacity: .35; cursor: default; }
.wm-node:not(.locked):hover { border-color: var(--border-hi); }
.wm-arrow { color: var(--border-hi); font-size: 20px; padding: 0 8px; }
/* tooltip */
#tooltip {
position: fixed; z-index: 90;
max-width: 300px;
background: rgba(12, 8, 5, 0.97);
border: 1px solid var(--border);
border-radius: 5px;
padding: 9px 13px;
font-size: 13px; line-height: 1.55;
pointer-events: none;
box-shadow: 0 10px 30px rgba(0,0,0,.8);
}
.tt-title { font-size: 14.5px; letter-spacing: .5px; margin-bottom: 2px; }
.tt-type { color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.tt-affix { color: #8fb4f5; font-size: 12.5px; }
.tt-flavor { color: #8a7357; font-style: italic; font-size: 11.5px; margin-top: 6px; border-top: 1px solid rgba(90,68,38,.35); padding-top: 5px; }
.tt-compare { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(90,68,38,.35); font-size: 12px; color: var(--text-dim); }
.tt-value { color: var(--text); }
.tt-up { color: #7fd77f; }
.tt-down { color: #e07a6a; }
.tt-action { color: var(--gold); font-size: 11px; margin-top: 6px; letter-spacing: 1px; text-transform: uppercase; }
.tt-simple { white-space: pre-line; }
/* drag ghost */
#drag-ghost {
position: fixed; z-index: 99; pointer-events: none;
width: 48px; height: 48px;
opacity: .9;
filter: drop-shadow(0 6px 10px rgba(0,0,0,.7));
}
#drag-ghost canvas { width: 48px; height: 48px; }
/* ground item labels are drawn on canvas; nothing needed here */
/* small screens notice */
#rotate-notice { position: absolute; inset: 0; z-index: 200; background: #070605; display: none; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--text); font-size: 17px; line-height: 1.7; }
@media (max-width: 700px) {
#panel-inventory { width: 250px; }
.inv-grid { grid-template-columns: repeat(5, 42px); }
.item-slot { width: 42px; height: 42px; }
.orb { width: 84px; height: 84px; }
}
/* ===== NPC quest cards ===== */
.quest-title { color: var(--gold-hi); font-size: 15px; letter-spacing: 1px; margin: 6px 0 8px; text-transform: uppercase; }
.quest-desc { color: var(--text); font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.quest-reward { color: var(--gold); font-size: 12px; margin-bottom: 10px; }
.dialog-options { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.dialog-options .btn { text-align: left; }
icons/icon-180.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

icons/icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

icons/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

index.html
+128
View File
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Diablo2D — Shadows of Tristram</title>
<meta name="description" content="A dark isometric action-RPG. Descend procedurally generated dungeons, slay elites and bosses, collect legendary loot. Playable fully offline in your browser.">
<meta property="og:title" content="Diablo2D — Shadows of Tristram">
<meta property="og:description" content="Dark isometric action-RPG in your browser. Procedural dungeons, elite affixes, legendary loot, 3 classes.">
<meta name="theme-color" content="#0b0908">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%230b0908'/%3E%3Cpath d='M32 10 L52 26 L46 54 L18 54 L12 26 Z' fill='%23a32c22'/%3E%3Cpath d='M32 20 L42 28 L38 46 L26 46 L22 28 Z' fill='%23e9c87b'/%3E%3C/svg%3E">
<link rel="manifest" href="manifest.webmanifest">
<link rel="apple-touch-icon" href="icons/icon-180.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<canvas id="game-canvas"></canvas>
<!-- ======== IN-GAME HUD (DOM over canvas) ======== -->
<div id="hud" class="hidden">
<div id="quest-tracker" class="hud-corner"></div>
<div id="minimap-box" class="hud-panel">
<canvas id="minimap" width="216" height="150"></canvas>
<div id="minimap-label"></div>
</div>
<div id="buff-bar"></div>
<div id="bottom-hud">
<div id="orb-life" class="orb" title="">
<div class="orb-fill life" id="life-fill"></div>
<div class="orb-gloss"></div>
<div class="orb-text" id="life-text">0/0</div>
</div>
<div id="center-hud">
<div id="xp-bar-wrap"><div id="xp-bar"></div><div id="xp-text"></div></div>
<div id="hotbar">
<div class="hotbar-group" id="hb-skills"></div>
<div class="hotbar-sep"></div>
<div class="hotbar-group" id="hb-potions"></div>
<div class="hotbar-sep"></div>
<div class="hotbar-group small" id="hb-menus"></div>
</div>
<div id="level-pill"><span id="lvl-num">1</span></div>
</div>
<div id="orb-mana" class="orb">
<div class="orb-fill mana" id="mana-fill"></div>
<div class="orb-gloss"></div>
<div class="orb-text" id="mana-text">0/0</div>
</div>
</div>
<div id="toasts"></div>
<div id="boss-bar-wrap" class="hidden">
<div id="boss-name"></div>
<div id="boss-bar"><div id="boss-fill"></div></div>
</div>
</div>
<!-- ======== FLOATING PANELS ======== -->
<div id="panels"></div>
<div id="tooltip" class="hidden"></div>
<div id="drag-ghost" class="hidden"></div>
<!-- ======== FULL SCREENS ======== -->
<div id="screens">
<div id="screen-loading" class="screen">
<div class="loading-inner">
<h1 class="game-logo">DIABLO<span>2D</span></h1>
<div class="loading-sub">Shadows of Tristram</div>
<div class="loading-bar"><div id="loading-progress"></div></div>
<div id="loading-tip"></div>
</div>
</div>
<div id="screen-title" class="screen hidden"></div>
<div id="screen-classselect" class="screen hidden"></div>
<div id="screen-settings" class="screen hidden"></div>
<div id="screen-help" class="screen hidden"></div>
<div id="screen-death" class="screen hidden"></div>
<div id="screen-victory" class="screen hidden"></div>
</div>
<!-- ======== PAUSE OVERLAY ======== -->
<div id="pause-overlay" class="hidden">
<div class="pause-menu panel-gothic">
<h2 data-i18n="menu.paused">Paused</h2>
<button class="btn btn-primary" id="btn-resume" data-i18n="menu.resume">Resume</button>
<button class="btn" id="btn-pause-settings" data-i18n="menu.settings">Settings</button>
<button class="btn" id="btn-pause-help" data-i18n="menu.help">Help</button>
<button class="btn btn-danger" id="btn-save-exit" data-i18n="menu.saveexit">Save &amp; Exit to Title</button>
</div>
</div>
</div>
<!-- Core -->
<script src="js/core/util.js"></script>
<script src="js/core/i18n.js"></script>
<script src="js/core/save.js"></script>
<script src="js/core/input.js"></script>
<script src="js/core/audio.js"></script>
<!-- Data -->
<script src="js/data/balance.js"></script>
<script src="js/data/items.js"></script>
<script src="js/data/monsters.js"></script>
<script src="js/data/skills.js"></script>
<!-- Simulation -->
<script src="js/game/path.js"></script>
<script src="js/game/fov.js"></script>
<script src="js/game/world.js"></script>
<script src="js/game/entities.js"></script>
<script src="js/game/ai.js"></script>
<script src="js/game/combat.js"></script>
<script src="js/game/loot.js"></script>
<script src="js/game/player.js"></script>
<!-- Presentation -->
<script src="js/render/sprites.js"></script>
<script src="js/render/render.js"></script>
<script src="js/ui/hud.js"></script>
<script src="js/ui/panels.js"></script>
<script src="js/ui/screens.js"></script>
<!-- State machine & bootstrap -->
<script src="js/game/game.js"></script>
<script src="js/main.js"></script>
</body>
</html>
js/core/audio.js
+438
View File
@@ -0,0 +1,438 @@
/* ============================================================
* Diablo2D — audio.js : procedural WebAudio engine
* Synthesized SFX + adaptive generative music. Zero assets.
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
let ctx = null;
let masterGain = null, sfxGain = null, musicGain = null;
let noiseBuf = null;
let unlocked = false;
const vol = { master: 0.8, music: 0.55, sfx: 0.9 };
let activeVoices = 0;
const MAX_VOICES = 28;
/* ---------- core plumbing ---------- */
function unlock() {
if (unlocked && ctx && ctx.state === 'running') return;
try {
if (!ctx) {
ctx = new (window.AudioContext || window.webkitAudioContext)();
masterGain = ctx.createGain();
sfxGain = ctx.createGain();
musicGain = ctx.createGain();
sfxGain.connect(masterGain);
musicGain.connect(masterGain);
masterGain.connect(ctx.destination);
applyVolumes();
noiseBuf = makeNoiseBuffer();
}
if (ctx.state === 'suspended') ctx.resume();
unlocked = true;
if (pendingMood) playMusic(pendingMood);
} catch (e) {
console.warn('[audio] init failed', e);
}
}
function makeNoiseBuffer() {
const len = ctx.sampleRate * 1.2;
const buf = ctx.createBuffer(1, len, ctx.sampleRate);
const d = buf.getChannelData(0);
for (let i = 0; i < len; i++) d[i] = Math.random() * 2 - 1;
return buf;
}
function setVolumes(m, mu, sx) {
if (m !== undefined) vol.master = m;
if (mu !== undefined) vol.music = mu;
if (sx !== undefined) vol.sfx = sx;
applyVolumes();
}
function applyVolumes() {
if (!masterGain) return;
masterGain.gain.value = vol.master;
musicGain.gain.value = vol.music;
sfxGain.gain.value = vol.sfx;
}
function ready() { return unlocked && ctx && ctx.state === 'running'; }
function canPlay() {
if (!ready()) return false;
if (activeVoices >= MAX_VOICES) return false;
activeVoices++;
setTimeout(() => { activeViewsDec(); }, 4000);
return true;
}
function activeViewsDec() { activeVoices = Math.max(0, activeVoices - 1); }
/* ---------- synth primitives ---------- */
function outNode(dest, pan) {
if (pan !== undefined && ctx.createStereoPanner) {
const p = ctx.createStereoPanner();
p.pan.value = Math.max(-1, Math.min(1, pan));
p.connect(dest);
return p;
}
return dest;
}
/** basic enveloped oscillator */
function tone(o) {
if (!canPlay()) return;
const t0 = ctx.currentTime + (o.delay || 0);
const osc = ctx.createOscillator();
osc.type = o.type || 'sine';
osc.frequency.setValueAtTime(Math.max(20, o.freq), t0);
if (o.freqEnd) osc.frequency.exponentialRampToValueAtTime(Math.max(20, o.freqEnd), t0 + o.dur);
if (o.detune) osc.detune.value = o.detune;
const g = ctx.createGain();
const a = o.attack || 0.005;
const v = (o.vol || 0.5);
g.gain.setValueAtTime(0.0001, t0);
g.gain.exponentialRampToValueAtTime(v, t0 + a);
g.gain.exponentialRampToValueAtTime(0.0001, t0 + o.dur);
let node = g;
if (o.filter) {
const f = ctx.createBiquadFilter();
f.type = o.filter.type || 'lowpass';
f.frequency.value = o.filter.freq || 800;
f.Q.value = o.filter.q || 0.8;
g.connect(f); node = f;
}
osc.connect(g);
node.connect(outNode(o.dest || sfxGain, o.pan));
osc.start(t0);
osc.stop(t0 + o.dur + 0.05);
osc.onended = activeViewsDec;
}
/** enveloped filtered noise burst */
function noise(o) {
if (!canPlay()) return;
const t0 = ctx.currentTime + (o.delay || 0);
const src = ctx.createBufferSource();
src.buffer = noiseBuf;
src.loop = true;
src.playbackRate.value = o.rate || 1;
const f = ctx.createBiquadFilter();
f.type = o.filterType || 'bandpass';
f.frequency.setValueAtTime(o.freq || 1000, t0);
if (o.freqEnd) f.frequency.exponentialRampToValueAtTime(Math.max(30, o.freqEnd), t0 + o.dur);
f.Q.value = o.q || 1;
const g = ctx.createGain();
const a = o.attack || 0.004;
const v = (o.vol || 0.5);
g.gain.setValueAtTime(0.0001, t0);
g.gain.exponentialRampToValueAtTime(v, t0 + a);
g.gain.exponentialRampToValueAtTime(0.0001, t0 + o.dur);
src.connect(f); f.connect(g);
g.connect(outNode(o.dest || sfxGain, o.pan));
src.start(t0);
src.stop(t0 + o.dur + 0.05);
src.onended = activeViewsDec;
}
const mtof = m => 440 * Math.pow(2, (m - 69) / 12);
/* ---------- sfx recipes ---------- */
const sfxRecipes = {
click() { tone({ type:'square', freq:2200, dur:.04, vol:.10 }); },
hover() { tone({ type:'sine', freq:1400, dur:.03, vol:.05 }); },
error() { tone({ type:'square', freq:160, freqEnd:110, dur:.16, vol:.16 }); },
swing() { noise({ filterType:'bandpass', freq:2600, freqEnd:500, dur:.13, vol:.22, q:1.6 }); },
hit() { noise({ filterType:'lowpass', freq:900, freqEnd:200, dur:.09, vol:.32 });
tone({ type:'sine', freq:150, freqEnd:70, dur:.08, vol:.30 }); },
crit() { noise({ filterType:'lowpass', freq:900, freqEnd:200, dur:.09, vol:.32 });
tone({ type:'sine', freq:150, freqEnd:70, dur:.08, vol:.30 });
tone({ type:'triangle', freq:1800, freqEnd:900, dur:.12, vol:.18, delay:.02 }); },
playerhurt(){ tone({ type:'sawtooth', freq:190, freqEnd:80, dur:.18, vol:.26 });
noise({ filterType:'lowpass', freq:600, freqEnd:150, dur:.14, vol:.25 }); },
shoot() { noise({ filterType:'highpass', freq:1800, freqEnd:3400, dur:.07, vol:.17 }); },
fireball() { noise({ filterType:'lowpass', freq:400, freqEnd:2400, dur:.3, vol:.24 });
tone({ type:'sawtooth', freq:120, freqEnd:60, dur:.28, vol:.12 }); },
explode() { noise({ filterType:'lowpass', freq:2500, freqEnd:60, dur:.55, vol:.45 });
tone({ type:'sine', freq:90, freqEnd:34, dur:.5, vol:.42 }); },
ice() { tone({ type:'sine', freq:2300, dur:.14, vol:.11 });
tone({ type:'sine', freq:3100, dur:.12, vol:.09, delay:.05 });
noise({ filterType:'highpass', freq:5200, dur:.18, vol:.10 }); },
lightning() { noise({ filterType:'bandpass', freq:3000, q:.6, dur:.16, vol:.26 });
tone({ type:'sawtooth', freq:800, freqEnd:200, dur:.12, vol:.10 }); },
poison() { noise({ filterType:'bandpass', freq:500, q:2, freqEnd:220, dur:.3, vol:.18 }); },
coin() { tone({ type:'sine', freq:mtof(98), dur:.09, vol:.14 });
tone({ type:'sine', freq:mtof(105), dur:.14, vol:.14, delay:.06 }); },
pickup() { tone({ type:'triangle', freq:mtof(88), dur:.1, vol:.16 });
tone({ type:'triangle', freq:mtof(95), dur:.16, vol:.16, delay:.07 }); },
legendary() { [76,83,88,95].forEach((m,i)=>tone({type:'sine',freq:mtof(m),dur:.5,vol:.14,delay:i*.09}));
noise({filterType:'highpass',freq:6000,dur:.7,vol:.06,delay:.1}); },
potion() { tone({ type:'sine', freq:520, freqEnd:280, dur:.12, vol:.16 });
tone({ type:'sine', freq:430, freqEnd:210, dur:.14, vol:.16, delay:.11 }); },
levelup() { [64,68,71,76].forEach((m,i)=>tone({type:'triangle',freq:mtof(m),dur:.42,vol:.2,delay:i*.11}));
tone({ type:'sine', freq:mtof(88), dur:.9, vol:.12, delay:.44 }); },
die() { tone({ type:'sawtooth', freq:220, freqEnd:40, dur:.4, vol:.22 });
noise({ filterType:'lowpass', freq:800, freqEnd:100, dur:.35, vol:.2 }); },
bossdie() { noise({ filterType:'lowpass', freq:2500, freqEnd:60, dur:.55, vol:.45 });
tone({ type:'sine', freq:90, freqEnd:34, dur:.5, vol:.42 });
[52,46,40].forEach((m,i)=>tone({type:'sawtooth',freq:mtof(m),dur:1.1,vol:.22,delay:i*.16})); },
door() { tone({ type:'sawtooth', freq:90, freqEnd:130, dur:.5, vol:.12 });
noise({ filterType:'bandpass', freq:300, q:3, dur:.45, vol:.10 }); },
stairs() { tone({ type:'sine', freq:180, freqEnd:60, dur:.7, vol:.2 });
tone({ type:'sine', freq:270, freqEnd:90, dur:.7, vol:.12, delay:.1 }); },
shrine() { [57,64,69,72].forEach((m,i)=>tone({type:'sine',freq:mtof(m),dur:1.4,vol:.12,delay:i*.05,attack:.3}));
noise({filterType:'highpass',freq:7000,dur:1.2,vol:.05}); },
teleport() { tone({ type:'sine', freq:300, freqEnd:2400, dur:.25, vol:.16 });
noise({ filterType:'highpass', freq:1000, freqEnd:5000, dur:.25, vol:.14 }); },
buff() { [60,67,72].forEach((m,i)=>tone({type:'triangle',freq:mtof(m),dur:.7,vol:.14,delay:i*.04,attack:.05})); },
nova() { noise({ filterType:'bandpass', freq:300, freqEnd:3800, dur:.4, vol:.3, q:.7 });
tone({ type:'sawtooth', freq:70, freqEnd:200, dur:.35, vol:.16 }); },
bossroar() { tone({ type:'sawtooth', freq:110, freqEnd:38, dur:1.2, vol:.4 });
tone({ type:'square', freq:74, freqEnd:30, dur:1.2, vol:.22 });
noise({ filterType:'lowpass', freq:900, freqEnd:80, dur:1.1, vol:.3 }); },
buy() { coin(); coin(); },
sell() { coin(); },
questdone() { [67,72,76].forEach((m,i)=>tone({type:'sine',freq:mtof(m),dur:.6,vol:.16,delay:i*.1,attack:.03})); },
};
function sfx(name, opts = {}) {
if (!ready()) return;
const fn = sfxRecipes[name];
if (!fn) return;
try { fn(opts); } catch (e) { /* never crash gameplay over audio */ }
}
/* ---------- generative music ---------- */
// scale = semitone offsets (minor/major/dorian etc.), patterns are step arrays of scale indices or null
const MOODS = {
title: { root: 45, bpm: 58, scale: [0,2,3,5,7,8,10],
bass: [0,null,null,null,null,null,null,null,-2,null,null,null,null,null,null,null],
pad: [[0,3,7],[ -2,2,5 ]], padBeats: 8,
leadProb: .16, leadOct: 2, drums: null, bell: true },
town: { root: 48, bpm: 92, scale: [0,2,4,5,7,9,11],
bass: [0,null,null,4,null,null,2,null,5,null,null,4,null,null,1,null],
pad: [[0,4,7],[3,5,9],[-3,2,4],[0,4,7]], padBeats: 4,
leadProb: .3, leadOct: 2, drums: null, pluck: true },
crypt: { root: 38, bpm: 62, scale: [0,2,3,5,7,8,10],
bass: [0,null,null,null,null,null,0,null,-2,null,null,null,null,null,-2,null],
pad: [[0,3,7],[0,3,8],[1,5,8],[0,3,7]], padBeats: 8,
leadProb: .1, leadOct: 3, drums: null, choir: true },
cave: { root: 40, bpm: 76, scale: [0,2,3,5,7,9,10],
bass: [0,null,null,null,5,null,null,null,3,null,null,null,7,null,null,null],
pad: [[0,3,7],[5,7,10]], padBeats: 8,
leadProb: .12, leadOct: 2,
drums: { kick:[0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,1], snare:[], hat:[0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0] },
drip: true },
hell: { root: 33, bpm: 128, scale: [0,1,3,5,6,8,10],
bass: [0,0,null,0,null,0,1,null,0,0,null,0,3,1,0,null],
pad: [[0,1,6],[0,1,6]], padBeats: 8,
leadProb: .2, leadOct: 1,
drums: { kick:[1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0], snare:[0,0,0,0,1,0,0,0,0,0,0,0,1,0,1,0], hat:[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1] } },
boss: { root: 31, bpm: 142, scale: [0,1,3,5,7,8,10],
bass: [0,0,3,0,0,5,3,1,0,0,3,0,6,5,3,1],
pad: [[0,1,6],[-1,2,6]], padBeats: 8,
leadProb: .3, leadOct: 2,
drums: { kick:[1,0,0,1,0,0,1,0,1,0,0,1,0,0,1,0], snare:[0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,1], hat:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] } },
};
let pendingMood = null;
let currentMood = null;
let seqTimer = null;
let nextNoteTime = 0;
let step = 0;
let barCount = 0;
function playMusic(mood) {
if (!MOODS[mood]) mood = 'crypt';
pendingMood = mood;
if (!ready()) return;
if (currentMood === mood && seqTimer) return;
stopMusicNow();
currentMood = mood;
step = 0; barCount = 0;
nextNoteTime = ctx.currentTime + 0.08;
seqTimer = setInterval(seqTick, 60);
}
function stopMusic(fadeSec = 0.8) {
pendingMood = null;
if (!ctx || !musicGain) return;
const t0 = ctx.currentTime;
musicGain.gain.cancelScheduledValues(t0);
musicGain.gain.setValueAtTime(musicGain.gain.value, t0);
musicGain.gain.linearRampToValueAtTime(0.0001, t0 + fadeSec);
stopMusicNow(fadeSec);
setTimeout(() => { if (musicGain && !seqTimer) musicGain.gain.value = vol.music; }, fadeSec * 1000 + 60);
}
function stopMusicNow(delaySec = 0) {
if (seqTimer) { clearInterval(seqTimer); seqTimer = null; }
currentMood = null;
}
function seqTick() {
if (!currentMood || !ready()) return;
const M = MOODS[currentMood];
const spb = 60 / M.bpm; // seconds per beat (quarter)
const stepDur = spb / 4; // 16th steps
while (nextNoteTime < ctx.currentTime + 0.18) {
scheduleStep(M, step, nextNoteTime, stepDur);
nextNoteTime += stepDur;
step = (step + 1) % 16;
if (step === 0) barCount++;
}
}
function scheduleStep(M, st, time, stepDur) {
const scale = M.scale;
/* bass line */
const bIdx = M.bass[st];
if (bIdx !== null && bIdx !== undefined) {
const midi = M.root + bIdx + (scale[0] === undefined ? 0 : 0);
musicTone({ type: 'triangle', freq: mtof(midi), dur: stepDur * 2.4, vol: .17, time,
filter: { type: 'lowpass', freq: 320 } });
if (M.drums) musicTone({ type: 'sawtooth', freq: mtof(midi - 12), dur: stepDur * 1.6, vol: .06, time, filter:{type:'lowpass',freq:200} });
}
/* drums */
if (M.drums) {
if (M.drums.kick[st]) musicKick(time);
if (M.drums.snare[st]) musicNoise({ filterType: 'bandpass', freq: 1900, q: .8, dur: .09, vol: .1, time });
if (M.drums.hat[st]) musicNoise({ filterType: 'highpass', freq: 7500, dur: .03, vol: .045, time });
}
/* pad chord each padBeats */
if (M.pad && st === 0) {
const chord = M.pad[Math.floor(barCount / (M.padBeats / 16 || 1)) % M.pad.length] || M.pad[0];
for (const iv of chord) {
const midi = M.root + 12 + iv;
musicPad(midi, M.padBeats * stepDur, time);
}
}
/* lead / bell melody */
if (Math.random() < M.leadProb && st % 2 === 0) {
const deg = scale[Math.floor(Math.random() * scale.length)];
const midi = M.root + 12 * (M.leadOct || 2) + deg;
if (M.bell) musicBell(midi, time);
else if (M.pluck) musicPluck(midi, time);
else if (M.choir) musicChoirNote(midi, time, stepDur * 6);
else musicPluck(midi, time);
}
/* cave drip ambience */
if (M.drip && Math.random() < .05) {
musicTone({ type: 'sine', freq: 1700 + Math.random() * 900, dur: .1, vol: .035, time });
}
}
/* music-routed voice wrappers (respect global volume via musicGain) */
function musicTone(o) {
const saveDest = o.dest; o.dest = musicGain; o.time = o.time;
toneAt(o);
}
function musicNoise(o) { o.dest = musicGain; noiseAt(o); }
/* time-scheduled variants (absolute ctx time) — separate from sfx versions */
function toneAt(o) {
if (!ready()) return;
const t0 = o.time !== undefined ? o.time : ctx.currentTime;
const osc = ctx.createOscillator();
osc.type = o.type || 'sine';
osc.frequency.setValueAtTime(Math.max(20, o.freq), t0);
if (o.freqEnd) osc.frequency.exponentialRampToValueAtTime(Math.max(20, o.freqEnd), t0 + o.dur);
const g = ctx.createGain();
const a = o.attack || 0.01;
g.gain.setValueAtTime(0.0001, t0);
g.gain.exponentialRampToValueAtTime(o.vol || .2, t0 + a);
g.gain.exponentialRampToValueAtTime(0.0001, t0 + o.dur);
let node = g;
if (o.filter) {
const f = ctx.createBiquadFilter();
f.type = o.filter.type; f.frequency.value = o.filter.freq;
g.connect(f); node = f;
}
osc.connect(g); node.connect(o.dest || musicGain);
osc.start(t0); osc.stop(t0 + o.dur + .05);
}
function noiseAt(o) {
if (!ready()) return;
const t0 = o.time !== undefined ? o.time : ctx.currentTime;
const src = ctx.createBufferSource();
src.buffer = noiseBuf; src.loop = true;
const f = ctx.createBiquadFilter();
f.type = o.filterType || 'bandpass';
f.frequency.setValueAtTime(o.freq || 1000, t0);
if (o.freqEnd) f.frequency.exponentialRampToValueAtTime(Math.max(30, o.freqEnd), t0 + o.dur);
f.Q.value = o.q || 1;
const g = ctx.createGain();
g.gain.setValueAtTime(.0001, t0);
g.gain.exponentialRampToValueAtTime(o.vol || .2, t0 + (o.attack || .005));
g.gain.exponentialRampToValueAtTime(.0001, t0 + o.dur);
src.connect(f); f.connect(g); g.connect(o.dest || musicGain);
src.start(t0); src.stop(t0 + o.dur + .05);
}
function musicPad(midi, dur, time) {
[-7, +7].forEach(det => {
const osc = ctx.createOscillator();
osc.type = 'sawtooth';
osc.frequency.value = mtof(midi);
osc.detune.value = det;
const f = ctx.createBiquadFilter(); f.type = 'lowpass'; f.frequency.value = 620;
const g = ctx.createGain();
g.gain.setValueAtTime(.0001, time);
g.gain.linearRampToValueAtTime(.028, time + dur * .35);
g.gain.linearRampToValueAtTime(.0001, time + dur);
osc.connect(f); f.connect(g); g.connect(musicGain);
osc.start(time); osc.stop(time + dur + .1);
});
}
function musicBell(midi, time) {
toneAt({ type: 'sine', freq: mtof(midi), dur: 1.6, vol: .07, time, attack: .003 });
toneAt({ type: 'sine', freq: mtof(midi) * 2.01, dur: .9, vol: .03, time, attack: .003 });
}
function musicPluck(midi, time) {
toneAt({ type: 'triangle', freq: mtof(midi), dur: .3, vol: .09, time, attack: .002,
filter: { type: 'lowpass', freq: 2200 } });
}
function musicChoirNote(midi, time, dur) {
[-5, +5].forEach(det => toneAt({ type: 'sawtooth', freq: mtof(midi), detune: det, dur, vol: .022, time, attack: dur * .3,
filter: { type: 'lowpass', freq: 480 } }));
}
function musicKick(time) {
toneAt({ type: 'sine', freq: 130, freqEnd: 38, dur: .16, vol: .3, time, attack: .002 });
}
D2.audio = {
unlock, ready,
setVolumes, get volumes() { return { ...vol }; },
sfx, playMusic, stopMusic,
get currentMood() { return currentMood || pendingMood; },
};
})(window.D2);
js/core/i18n.js
+303
View File
@@ -0,0 +1,303 @@
/* ============================================================
* Diablo2D — i18n.js : English / Vietnamese localization
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const dict = {
en: {
/* generic */
ok: 'OK', cancel: 'Cancel', close: 'Close', yes: 'Yes', no: 'No',
back: 'Back', confirm: 'Confirm', none: 'None', level_short: 'Lv',
/* title */
'title.newgame': 'New Game', 'title.continue': 'Continue', 'title.settings': 'Settings',
'title.help': 'How to Play', 'title.credits': 'Credits',
'title.tagline': 'Shadows of Tristram',
'title.subtitle': 'A dark action-RPG for your browser',
'title.no_save': 'No saved hero found.',
'title.confirm_overwrite': 'Starting a new game will overwrite your saved hero. Continue?',
'title.saved_hero': 'Saved Hero',
'title.delete_save': 'Delete Save',
'title.confirm_delete': 'Permanently delete the saved hero?',
/* classes */
'class.crusader.name': 'Crusader',
'class.crusader.desc': 'A holy warrior clad in heavy armor. Wades into melee with sweeping strikes and unbreakable defenses.',
'class.ranger.name': 'Shadow Huntress',
'class.ranger.desc': 'A swift rogue who strikes from the shadows with bow and blade, bleeding her prey from afar.',
'class.sorceress.name': 'Sorceress',
'class.sorceress.desc': 'Master of fire, frost and storm. Fragile in body, devastating in arcane power.',
'class.select': 'Choose Your Fate',
'class.play': 'Begin Descent',
/* stats */
'stat.strength': 'Strength', 'stat.dexterity': 'Dexterity', 'stat.vitality': 'Vitality', 'stat.energy': 'Energy',
'stat.damage': 'Damage', 'stat.armor': 'Armor', 'stat.crit': 'Crit Chance', 'stat.critdmg': 'Crit Damage',
'stat.speed': 'Move Speed', 'stat.magicfind': 'Magic Find', 'stat.lifelench': 'Life per Kill',
'stat.fire': 'Fire Resist', 'stat.cold': 'Cold Resist', 'stat.lightning': 'Lightning Resist', 'stat.poison': 'Poison Resist',
'stat.points': 'Attribute Points', 'stat.skillpoints': 'Skill Points',
/* ui panels */
'ui.inventory': 'Inventory', 'ui.character': 'Character', 'ui.skills': 'Skills',
'ui.stash': 'Stash', 'ui.vendor': 'Blacksmith', 'ui.healer': 'Healer',
'ui.questlog': 'Quest Log', 'ui.map': 'World Map', 'ui.help': 'How to Play',
'ui.equip.weapon': 'Weapon', 'ui.equip.offhand': 'Off-hand', 'ui.equip.head': 'Head',
'ui.equip.chest': 'Body', 'ui.equip.hands': 'Hands', 'ui.equip.feet': 'Feet',
'ui.equip.amulet': 'Amulet', 'ui.equip.ring1': 'Ring', 'ui.equip.ring2': 'Ring',
'ui.gold': 'Gold', 'ui.sell': 'Sell', 'ui.buy': 'Buy', 'ui.repair_none': '',
'ui.heal_full': 'Full Restore', 'ui.price': 'Price',
'ui.empty_slot': 'Empty', 'ui.drop_confirm': 'This item will be destroyed. Drop it?',
/* hotbar */
'hb.health_potion': 'Health Potion', 'hb.mana_potion': 'Mana Potion',
'hb.inventory': 'Inventory (I)', 'hb.character': 'Character (C)', 'hb.skills': 'Skills (T)',
'hb.quests': 'Quest Log (J)', 'hb.map': 'Map (M)', 'hb.help': 'Help (F1)',
/* messages */
'msg.levelup': 'Level Up! Press C to assign points.',
'msg.skillpoint': 'New skill learned! Press T to view skills.',
'msg.not_enough_mana': 'Not enough mana!',
'msg.skill_cooldown': 'Skill is not ready.',
'msg.inventory_full': 'Inventory is full!',
'msg.potion_none': 'No potions left!',
'msg.boss_spawn': 'A great evil awakens...',
'msg.boss_slain': 'The guardian has fallen!',
'msg.act_clear': 'Act complete! The waypoint stirs...',
'msg.saved': 'Game saved.',
'msg.hardcore_death': 'Your hardcore hero has perished. The record burns.',
'msg.town_portal': 'Returned to town.',
'msg.elite_slain': 'Champion slain!',
'msg.shrine': 'You touch the shrine...',
/* quests */
'quest.main_prefix': 'Act {0}: ',
'quest.descend': 'Descend to depth {0}',
'quest.kill_boss': 'Slay {0}',
'quest.done': 'Complete',
/* death / victory */
'death.title': 'YOU HAVE DIED',
'death.subtitle': 'Even heroes fall... but darkness always offers another chance.',
'death.respawn': 'Awaken in Town', 'death.title_screen': 'Return to Title',
'victory.title': 'THE LORD OF TERROR IS VANQUISHED',
'victory.subtitle': 'Tristram breathes again — yet the depths always call louder.',
'victory.continue': 'Continue in Torment {0}', 'victory.title_screen': 'Return to Title',
'victory.stats': 'Run Statistics',
/* settings */
'set.master': 'Master Volume', 'set.music': 'Music', 'set.sfx': 'Sound Effects',
'set.lang': 'Language', 'set.shake': 'Screen Shake', 'set.dmgnum': 'Damage Numbers',
'set.labels': 'Item Labels', 'set.hardcore': 'Hardcore Mode (new game)',
'set.export': 'Export Save Code', 'set.import': 'Import Save Code', 'set.wipe': 'Erase All Data',
'set.copy_ok': 'Copied!', 'set.import_bad': 'Invalid save code.', 'set.import_ok': 'Save imported!',
'set.confirm_wipe': 'Erase ALL saved data? This cannot be undone.',
/* help */
'help.move': 'Left click — move / attack. Hold to keep moving toward cursor.',
'help.combat': 'Right click & keys 1–4 — cast skills. Q / E — potions.',
'help.items': 'Hold Alt to reveal ground item labels. Click an item to pick up.',
'help.panels': 'I inventory · C character · T skills · J quests · M map · Esc pause.',
'help.tip1': 'Champions glow with an aura — they hit harder but drop better loot.',
'help.tip2': 'Shrines grant powerful temporary blessings.',
'help.tip3': 'Resistances matter more than armor against elemental bosses.',
'help.keys_title': 'Controls',
/* town npcs */
'npc.charsi.name': 'Charsi',
'npc.akara.name': 'Akara',
'npc.kashya.name': 'Kashya',
'npc.cain.name': 'Deckard Cain',
'npc.gheed.name': 'Gheed',
'npc.stash.name': 'Camp Storage',
'msg.quest_accepted': 'Quest accepted: {0}',
'msg.quest_reward': 'Quest complete! +{0} gold',
'quest.seek_hint': 'Visit camp — new tasks await.',
'ui.rare_item': 'a Rare item',
'npc.charsi.name': 'Charsi',
'npc.akara.name': 'Akara',
'npc.kashya.name': 'Kashya',
'npc.cain.name': 'Deckard Cain',
'npc.gheed.name': 'Gheed',
'npc.stash.name': 'Kho trại',
'msg.quest_accepted': 'Đã nhận nhiệm vụ: {0}',
'msg.quest_reward': 'Nhiệm vụ hoàn thành! +{0} vàng',
'quest.seek_hint': 'Hãy ghé trại — có việc mới đang chờ.',
'ui.rare_item': 'một món Hiếm',
'npc.charsi.greet': 'Steel keeps you alive down there. Browse my wares.',
'npc.akara.greet': 'The Light mend you. What do you need, child?',
'npc.kashya.greet': 'The camp needs a blade like yours. We have work.',
'npc.cain.greet': 'Stay awhile and listen…',
'npc.gheed.greet': 'Psst. Finest goods in the camp — provenance uncertain.',
'npc.stash.greet': 'Your vault awaits.',
'npc.waypoint.greet': 'Where does fate pull you, hero?',
'ui.accept': 'Accept quest',
'ui.turn_in': 'Turn in',
'ui.reward': 'Reward',
'ui.later': 'Not now',
'ui.lore': 'Ask for lore',
'ui.buy_tome': 'Buy Skill Tome (+1 skill pt)',
'ui.respec': 'Respec all points',
'ui.gamble': 'Gamble for goods',
'ui.gamble_hint': 'Rarity unknown until bought…',
'ui.quest_done_return': 'Return to {0}',
'ui.tome_bought': 'Knowledge burns behind your eyes… (+1 skill point)',
'ui.respec_done': 'Your training is undone. Points refunded.',
'ui.gamble_win': 'Fortune favors you… this time.',
'quest.cull': 'Cull the Fallen',
'quest.cull.desc': 'Slay {0} denizens of the Cathedral depths. Kashya counts every kill.',
'quest.boss': 'The {0}',
'quest.boss.desc': 'Descend to the lair and destroy {0}. The camp will not rest until it is done.',
'quest.torment': 'Echoes of Terror',
'quest.torment.desc': 'Malgor is dead, yet his echo festers. Open torment {0} and cull it anew.',
'town.enter': 'Tristram Outpost — Sanctuary',
/* misc */
'floor.depth': 'Depth {0}',
'act.names.0': 'The Ravaged Cathedral',
'act.names.1': 'The Weeping Catacombs',
'act.names.2': 'The Fungal Depths',
'act.names.3': "Hell's Threshold",
torment: 'Torment {0}',
'loading.tips.0': 'Elites drop enchanted loot. Hunt the glowing ones.',
'loading.tips.1': 'Potions refill each time you visit town.',
'loading.tips.2': 'Fire melts flesh; cold freezes bone. Bring both.',
'loading.tips.3': 'Barrels and urns hide coins... and sometimes worse.',
'loading.tips.4': 'Magic Find increases rare and legendary drops.',
'credits.line1': 'Design, code, art & audio — procedurally generated, no external assets.',
'credits.line2': 'Inspired by the classics that defined the genre.',
},
vi: {
ok: 'Đồng ý', cancel: 'Hủy', close: 'Đóng', yes: 'Có', no: 'Không',
back: 'Quay lại', confirm: 'Xác nhận', none: 'Không', level_short: 'Cấp',
'title.newgame': 'Chơi mới', 'title.continue': 'Tiếp tục', 'title.settings': 'Cài đặt',
'title.help': 'Hướng dẫn chơi', 'title.credits': 'Thông tin',
'title.tagline': 'Bóng Đêm Tristram',
'title.subtitle': 'Action-RPG tối giản chạy ngay trên trình duyệt',
'title.no_save': 'Không tìm thấy bản lưu nào.',
'title.confirm_overwrite': 'Bắt đầu game mới sẽ xóa hero đã lưu. Tiếp tục?',
'title.saved_hero': 'Hero đã lưu',
'title.delete_save': 'Xóa bản lưu',
'title.confirm_delete': 'Xóa vĩnh viễn hero đã lưu?',
'class.crusader.name': 'Thập Tự Quân',
'class.crusader.desc': 'Chiến binh thánh thiện trong bộ giáp nặng, quét sạch kẻ thù bằng chém rộng và phòng thủ thép.',
'class.ranger.name': 'Nữ Thợ Săn Bóng Đêm',
'class.ranger.desc': 'Nữ sát thủ nhanh nhẹn, hạ gục con mồi từ xa bằng cung tên độc và bóng tối.',
'class.sorceress.name': 'Pháp Sư',
'class.sorceress.desc': 'Bậc thầy hỏa, băng và lôi. Thân yếu nhưng sức mạnh huyền thuật tàn khốc.',
'class.select': 'Chọn Số Phận Của Bạn',
'class.play': 'Bắt Đầu Hạ Sơn',
'stat.strength': 'Sức mạnh', 'stat.dexterity': 'Nhuệ', 'stat.vitality': 'Sinh lực', 'stat.energy': 'Năng lượng',
'stat.damage': 'Sát thương', 'stat.armor': 'Giáp', 'stat.crit': 'Tỷ lệ chí mạng', 'stat.critdmg': 'ST chí mạng',
'stat.speed': 'Tốc độ chạy', 'stat.magicfind': 'May mắn tìm đồ', 'stat.lifelench': 'Hồi máu mỗi lần hạ',
'stat.fire': 'Kháng Hỏa', 'stat.cold': 'Kháng Băng', 'stat.lightning': 'Kháng Lôi', 'stat.poison': 'Kháng Độc',
'stat.points': 'Điểm thuộc tính', 'stat.skillpoints': 'Điểm kỹ năng',
'ui.inventory': 'Túi đồ', 'ui.character': 'Nhân vật', 'ui.skills': 'Kỹ năng',
'ui.stash': 'Kho đồ', 'ui.vendor': 'Thợ Rèn', 'ui.healer': 'Pháp Sư Trị Liệu',
'ui.questlog': 'Nhật nhiệm vụ', 'ui.map': 'Bản đồ thế giới', 'ui.help': 'Hướng dẫn',
'ui.equip.weapon': 'Vũ khí', 'ui.equip.offhand': 'Tay trái', 'ui.equip.head': 'Đầu',
'ui.equip.chest': 'Thân', 'ui.equip.hands': 'Tay', 'ui.equip.feet': 'Chân',
'ui.equip.amulet': 'Mặt dây', 'ui.equip.ring1': 'Nhẫn', 'ui.equip.ring2': 'Nhẫn',
'ui.gold': 'Vàng', 'ui.sell': 'Bán', 'ui.buy': 'Mua',
'ui.heal_full': 'Hồi phục hoàn toàn', 'ui.price': 'Giá',
'ui.empty_slot': 'Trống', 'ui.drop_confirm': 'Vật phẩm sẽ bị phá hủy. Vứt bỏ?',
'hb.health_potion': 'Bình máu', 'hb.mana_potion': 'Bình mana',
'hb.inventory': 'Túi đồ (I)', 'hb.character': 'Nhân vật (C)', 'hb.skills': 'Kỹ năng (T)',
'hb.quests': 'Nhiệm vụ (J)', 'hb.map': 'Bản đồ (M)', 'hb.help': 'Trợ giúp (F1)',
'msg.levelup': 'Lên cấp! Nhấn C để cộng điểm.',
'msg.skillpoint': 'Kỹ năng mới! Nhấn T để xem kỹ năng.',
'msg.not_enough_mana': 'Không đủ mana!',
'msg.skill_cooldown': 'Kỹ năng chưa hồi xong.',
'msg.inventory_full': 'Túi đồ đầy!',
'msg.potion_none': 'Hết bình hồi máu!',
'msg.boss_spawn': 'Một ma lực khổng lồ thức dậy...',
'msg.boss_slain': 'Ác thần đã bị hạ!',
'msg.act_clear': 'Hoàn thành chương! Điểm dịch chuyển rung lên...',
'msg.saved': 'Đã lưu game.',
'msg.hardcore_death': 'Hero Hardcore của bạn đã chết. Bản lưu bị thiêu rụi.',
'msg.town_portal': 'Đã về trấn.',
'msg.elite_slain': 'Đã hạ tinh anh!',
'msg.shrine': 'Bạn chạm vào đền thờ...',
'quest.main_prefix': 'Chương {0}: ',
'quest.descend': 'Hạ xuống độ sâu {0}',
'quest.kill_boss': 'Hạ gục {0}',
'quest.done': 'Hoàn thành',
'death.title': 'BẠN ĐÃ CHẾT',
'death.subtitle': 'Anh hùng cũng có thể ngã... nhưng bóng tối luôn cho thêm một cơ hội.',
'death.respawn': 'Thức dậy ở trấn', 'death.title_screen': 'Về màn hình chính',
'victory.title': 'CHÚA TỂ KINH HOÀNG ĐÃ BỊ TIÊU DIỆT',
'victory.subtitle': 'Tristram lại được thở — nhưng vực sâu luôn gọi to hơn.',
'victory.continue': 'Tiếp tục ở Torment {0}', 'victory.title_screen': 'Về màn hình chính',
'victory.stats': 'Thống kê chuyến chiến',
'set.master': 'Âm lượng tổng', 'set.music': 'Nhạc nền', 'set.sfx': 'Hiệu ứng âm thanh',
'set.lang': 'Ngôn ngữ', 'set.shake': 'Rung màn hình', 'set.dmgnum': 'Số sát thương',
'set.labels': 'Nhãn đồ trên đất', 'set.hardcore': 'Chế độ Hardcore (chơi mới)',
'set.export': 'Xuất mã lưu', 'set.import': 'Nhập mã lưu', 'set.wipe': 'Xóa toàn bộ dữ liệu',
'set.copy_ok': 'Đã sao chép!', 'set.import_bad': 'Mã lưu không hợp lệ.', 'set.import_ok': 'Đã nhập bản lưu!',
'set.confirm_wipe': 'Xóa TOÀN BỘ dữ liệu đã lưu? Không thể hoàn tác.',
'help.move': 'Chuột trái — di chuyển / tấn công. Giữ để liên tục đi theo con trỏ.',
'help.combat': 'Chuột phải & phím 1–4 — dùng kỹ năng. Q / E — bình máu, bình mana.',
'help.items': 'Giữ Alt để hiện nhãn đồ trên đất. Nhấp vào món để nhặt.',
'help.panels': 'I túi đồ · C nhân vật · T kỹ năng · J nhiệm vụ · M bản đồ · Esc tạm dừng.',
'help.tip1': 'Tinh anh phát sáng quanh thân — mạnh hơn nhưng rớt đồ tốt hơn.',
'help.tip2': 'Đền thờ ban phước tạm thời rất mạnh.',
'help.tip3': 'Kháng nguyên tố quan trọng hơn giáp khi đấu boss hệ elemental.',
'help.keys_title': 'Điều khiển',
'npc.charsi.greet': 'Thép giữ bạn sống dưới đó. Xem hàng của ta đi.',
'npc.akara.greet': 'Ánh Sáng chữa lành ngươi. Con cần gì nào?',
'npc.kashya.greet': 'Trại cần một lưỡi kiếm như ngươi. Ta có việc đây.',
'npc.cain.greet': 'Ở lại nghe ta kể chuyện này…',
'npc.gheed.greet': 'Này. Hàng tốt nhất trại — nguồn gốc thì… khỏi hỏi.',
'npc.stash.greet': 'Kho của bạn đang chờ.',
'npc.waypoint.greet': 'Định mệnh đang kéo bạn đến đâu, anh hùng?',
'ui.accept': 'Nhận nhiệm vụ',
'ui.turn_in': 'Trả nhiệm vụ',
'ui.reward': 'Thưởng',
'ui.later': 'Để sau',
'ui.lore': 'Hỏi chuyện xưa',
'ui.buy_tome': 'Mua Sách Kỹ năng (+1 điểm)',
'ui.respec': 'Phân bổ lại toàn bộ điểm',
'ui.gamble': 'Đánh bạc đổi hàng',
'ui.gamble_hint': 'Đến khi mua mới biết hiếm hay thường…',
'ui.quest_done_return': 'Quay về gặp {0}',
'ui.tome_bought': 'Tri thức bừng cháy trong đầu con… (+1 điểm kỹ năng)',
'ui.respec_done': 'Toàn bộ điểm đã hoàn trả.',
'ui.gamble_win': 'Thần may mắn đứng về phía ngươi… lần này.',
'quest.cull': 'Thanh tẩy Kẻ ngã ngã',
'quest.cull.desc': 'Hạ {0} sinh vật trong hang động. Kashya đếm từng mạng.',
'quest.boss': '{0}',
'quest.boss.desc': 'Xuống tới hang ổ và tiêu diệt {0}. Trại sẽ không yên khi nó còn sống.',
'quest.torment': 'Ám ảnh Khủng khiếp',
'quest.torment.desc': 'Malgor chết rồi nhưng bóng ma nó còn. Mở torment {0} và thanh tẩy lại.',
'town.enter': 'Trấn Tristram — Nơi Tôn Nghiêm',
'floor.depth': 'Độ sâu {0}',
'act.names.0': 'Nhà thờ hoang tàn',
'act.names.1': 'Hầm mộ than khóc',
'act.names.2': 'Vực nấm sâu thẳm',
'act.names.3': 'Ngưỡng cửa Địa Ngục',
torment: 'Torment {0}',
'loading.tips.0': 'Tinh anh rớt đồ phù phép. Săn những con phát sáng.',
'loading.tips.1': 'Bình hồi máu được nạp lại mỗi khi về trấn.',
'loading.tips.2': 'Lửa thiêu thịt; băng đóng băng xương. Mang cả hai.',
'loading.tips.3': 'Thùng rượu và lư đồng giấu vàng... đôi khi còn giấu cả thứ khác.',
'loading.tips.4': 'May mắn tìm đồ tăng tỷ lệ rớt đồ hiếm và huyền thoại.',
'credits.line1': 'Thiết kế, lập trình, hình ảnh & âm nhạc — sinh ra thủ tục, không dùng tài nguyên ngoài.',
'credits.line2': 'Lấy cảm hứng từ những tựa game kinh điển định hình thể loại.',
},
};
let lang = 'en';
function t(key, ...vars) {
let s = (dict[lang] && dict[lang][key]) ?? dict.en[key] ?? key;
vars.forEach((v, i) => { s = s.replaceAll('{' + i + '}', String(v)); });
return s;
}
function setLang(l) { lang = (dict[l] ? l : 'en'); if (typeof document !== 'undefined') document.documentElement.lang = lang; }
function getLang() { return lang; }
function languages() { return Object.keys(dict); }
/* apply data-i18n attributes inside a root element */
function applyDom(root = document) {
root.querySelectorAll('[data-i18n]').forEach(el => {
el.textContent = t(el.getAttribute('data-i18n'));
});
root.querySelectorAll('[data-i18n-title]').forEach(el => {
el.title = t(el.getAttribute('data-i18n-title'));
});
}
D2.i18n = { t, setLang, getLang, languages, applyDom, dict };
})(window.D2);
js/core/input.js
+124
View File
@@ -0,0 +1,124 @@
/* ============================================================
* Diablo2D — input.js : unified mouse/keyboard state
* Canvas-only listeners; DOM UI handles its own events.
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const state = {
mx: 0, my: 0, // canvas-space cursor
left: false, right: false, mid: false,
leftPressed: false, // true only on frame of press
rightPressed: false,
wheelDelta: 0,
keys: new Set(), // currently held (KeyboardEvent.code)
pressedKeys: new Set(), // pressed this frame
releasedKeys: new Set(),
anyKeyPress: false,
lastMouseWorld: null,
};
let canvas = null;
const _pressedQueueKeys = new Set();
const _releasedQueueKeys = new Set();
function init(targetCanvas) {
canvas = targetCanvas;
window.addEventListener('keydown', (e) => {
if (e.repeat) return;
state.keys.add(e.code);
_pressedQueueKeys.add(e.code);
state.anyKeyPress = true;
// block browser scroll/space navigation during gameplay
if (['Space', 'ArrowUp', 'ArrowDown', 'Tab'].includes(e.code)) e.preventDefault();
}, { passive: false });
window.addEventListener('keyup', (e) => {
state.keys.delete(e.code);
_releasedQueueKeys.add(e.code);
});
window.addEventListener('blur', () => {
state.keys.clear();
state.left = state.right = false;
});
canvas.addEventListener('mousemove', (e) => {
const r = canvas.getBoundingClientRect();
state.mx = e.clientX - r.left;
state.my = e.clientY - r.top;
/* authoritative resync: if the browser says buttons are up, believe it.
Heals a missed mouseup (released outside the window, alt-tab, etc.) */
if (typeof e.buttons === 'number') {
if (!(e.buttons & 1)) state.left = false;
if (!(e.buttons & 2)) state.right = false;
if (!(e.buttons & 4)) state.mid = false;
}
});
canvas.addEventListener('mousedown', (e) => {
updateMousePos(e);
if (e.button === 0) { state.left = true; state.leftPressed = true; }
if (e.button === 2) { state.right = true; state.rightPressed = true; }
if (e.button === 1) { state.mid = true; e.preventDefault(); }
});
const releaseAll = () => { state.left = false; state.right = false; state.mid = false; };
window.addEventListener('mouseup', (e) => {
if (e.button === 0) state.left = false;
if (e.button === 2) state.right = false;
if (e.button === 1) state.mid = false;
});
/* cursor left the page / OS took the pointer / touch cancelled */
document.documentElement.addEventListener('mouseleave', releaseAll);
window.addEventListener('pointercancel', releaseAll);
document.addEventListener('visibilitychange', () => {
if (document.hidden) releaseAll();
});
canvas.addEventListener('contextmenu', (e) => e.preventDefault());
canvas.addEventListener('wheel', (e) => {
state.wheelDelta += Math.sign(e.deltaY);
e.preventDefault();
}, { passive: false });
window.addEventListener('mousedown', (e) => { // audio unlock gesture
D2.audio && D2.audio.unlock();
}, { once: false, capture: true });
}
function updateMousePos(e) {
const r = canvas.getBoundingClientRect();
state.mx = e.clientX - r.left;
state.my = e.clientY - r.top;
}
/** call at end of each simulation frame */
function endFrame() {
state.leftPressed = false;
state.rightPressed = false;
state.wheelDelta = 0;
state.pressedKeys.clear();
state.releasedKeys.clear();
for (const k of _pressedQueueKeys) state.pressedKeys.add(k);
for (const k of _releasedQueueKeys) state.releasedKeys.add(k);
_pressedQueueKeys.clear();
_releasedQueueKeys.clear();
state.anyKeyPress = false;
}
const isDown = code => state.keys.has(code);
const wasPressed = code => state.pressedKeys.has(code);
const wasReleased = code => state.releasedKeys.has(code);
/* virtual press used by UI hotbar buttons */
function injectPress(code) {
_pressedQueueKeys.add(code);
}
D2.input = { state, init, endFrame, isDown, wasPressed, wasReleased, injectPress };
})(window.D2);
js/core/save.js
+101
View File
@@ -0,0 +1,101 @@
/* ============================================================
* Diablo2D — save.js : localStorage persistence layer
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const PREFIX = 'd2d.';
const SAVE_VERSION = 3;
let storageOk = true;
try {
localStorage.setItem(PREFIX + '__probe', '1');
localStorage.removeItem(PREFIX + '__probe');
} catch (e) {
storageOk = false;
}
function get(key, fallback = null) {
if (!storageOk) return fallback;
try {
const raw = localStorage.getItem(PREFIX + key);
if (raw == null) return fallback;
return JSON.parse(raw);
} catch (e) {
console.warn('[save] corrupt entry', key, e);
return fallback;
}
}
function set(key, value) {
if (!storageOk) return false;
try {
localStorage.setItem(PREFIX + key, JSON.stringify(value));
return true;
} catch (e) {
console.error('[save] write failed', e);
return false;
}
}
function remove(key) {
if (!storageOk) return;
try { localStorage.removeItem(PREFIX + key); } catch (e) {}
}
function hasMeta() {
return !!get('meta', null);
}
function writeMeta(meta) {
meta.version = SAVE_VERSION;
meta.savedAt = Date.now();
set('meta', meta);
}
function readMeta() {
return get('meta', null);
}
function wipeAll() {
remove('meta');
remove('char');
remove('world');
remove('settings');
}
/* full snapshot: meta + char + world */
function serializeSnapshot() {
return JSON.stringify({
v: SAVE_VERSION,
meta: readMeta(),
char: get('char'),
world: get('world'),
});
}
function restoreSnapshot(text) {
try {
const obj = JSON.parse(text);
if (!obj || typeof obj !== 'object' || !obj.char) return false;
if (obj.meta) set('meta', obj.meta);
if (obj.char) set('char', obj.char);
if (obj.world) set('world', obj.world);
return true;
} catch (e) {
return false;
}
}
D2.save = {
version: SAVE_VERSION,
get storageOk() { return storageOk; },
KEY: { META: 'meta', CHAR: 'char', WORLD: 'world', SETTINGS: 'settings' },
get, set, remove,
hasMeta, writeMeta, readMeta,
wipeAll,
serializeSnapshot, restoreSnapshot,
};
})(window.D2);
js/core/util.js
+134
View File
@@ -0,0 +1,134 @@
/* ============================================================
* Diablo2D — util.js : math, RNG, misc helpers
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const TAU = Math.PI * 2;
const clamp = (v, a, b) => v < a ? a : (v > b ? b : v);
const lerp = (a, b, t) => a + (b - a) * t;
const smoothstep = (a, b, x) => { const t = clamp((x - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); };
const dist2 = (ax, ay, bx, by) => { const dx = ax - bx, dy = ay - by; return dx * dx + dy * dy; };
const dist = (ax, ay, bx, by) => Math.sqrt(dist2(ax, ay, bx, by));
const angleTo = (ax, ay, bx, by) => Math.atan2(by - ay, bx - ax);
const wrapAngle = a => { while (a > Math.PI) a -= TAU; while (a < -Math.PI) a += TAU; return a; };
const approachAngle = (cur, target, maxStep) => {
let d = wrapAngle(target - cur);
if (Math.abs(d) <= maxStep) return target;
return cur + Math.sign(d) * maxStep;
};
const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
const easeInQuad = t => t * t;
/* deterministic RNG */
function mulberry32(seed) {
let a = seed >>> 0;
return function () {
a |= 0; a = (a + 0x6D2B79F5) | 0;
let t = Math.imul(a ^ (a >>> 15), 1 | a);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
class RNG {
constructor(seed) {
this.seedFn = mulberry32(seed);
this.seed = seed >>> 0;
}
next() { return this.seedFn(); }
range(a, b) { return a + this.seedFn() * (b - a); } // float [a,b)
int(a, b) { return Math.floor(this.range(a, b + 1)); } // int [a,b]
chance(p) { return this.seedFn() < p; }
pick(arr) { return arr[Math.floor(this.seedFn() * arr.length)]; }
weighted(entries) { // [{v,w}] or [[val,weight]]
let total = 0;
for (const e of entries) total += e.w !== undefined ? e.w : e[1];
let roll = this.seedFn() * total;
for (const e of entries) {
roll -= e.w !== undefined ? e.w : e[1];
if (roll <= 0) return e.v !== undefined ? e.v : e[0];
}
const last = entries[entries.length - 1];
return last.v !== undefined ? last.v : last[0];
}
shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(this.seedFn() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
}
let _uid = 1;
const uid = () => _uid++;
function fmtNum(n) {
n = Math.round(n);
if (Math.abs(n) >= 1000000) return (n / 1000000).toFixed(1) + 'M';
if (Math.abs(n) >= 10000) return (n / 1000).toFixed(1) + 'k';
return String(n);
}
function roman(n) {
if (n <= 0) return '0';
const map = [[1000,'M'],[900,'CM'],[500,'D'],[400,'CD'],[100,'C'],[90,'XC'],[50,'L'],[40,'XL'],[10,'X'],[9,'IX'],[5,'V'],[4,'IV'],[1,'I']];
let out = '';
for (const [v, s] of map) while (n >= v) { out += s; n -= v; }
return out;
}
function deepClone(o) { return JSON.parse(JSON.stringify(o)); }
/* color helpers: '#rrggbb' <-> [r,g,b] */
function hexToRgb(hex) {
const h = hex.replace('#', '');
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
}
function rgbToHex(r, g, b) {
const c = v => clamp(Math.round(v), 0, 255).toString(16).padStart(2, '0');
return '#' + c(r) + c(g) + c(b);
}
function lerpColor(c1, c2, t) {
const a = typeof c1 === 'string' ? hexToRgb(c1) : c1;
const b = typeof c2 === 'string' ? hexToRgb(c2) : c2;
return rgbToHex(lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t));
}
function shade(hex, f) { // f<1 darken, f>1 lighten
const [r, g, b] = hexToRgb(hex);
return rgbToHex(r * f, g * f, b * f);
}
function rgba(hex, alpha) {
const [r, g, b] = hexToRgb(hex);
return `rgba(${r},${g},${b},${alpha})`;
}
/* simple event bus */
class Bus {
constructor() { this._l = new Map(); }
on(evt, fn) {
if (!this._l.has(evt)) this._l.set(evt, []);
this._l.get(evt).push(fn);
}
off(evt, fn) {
const l = this._l.get(evt);
if (l) { const i = l.indexOf(fn); if (i >= 0) l.splice(i, 1); }
}
emit(evt, ...args) {
const l = this._l.get(evt);
if (l) for (const fn of [...l]) fn(...args);
}
}
D2.util = {
TAU, clamp, lerp, smoothstep, dist, dist2, angleTo, wrapAngle, approachAngle,
easeOutCubic, easeInQuad,
mulberry32, RNG, uid,
fmtNum, roman, deepClone,
hexToRgb, rgbToHex, lerpColor, shade, rgba,
Bus,
};
})(window.D2);
js/data/balance.js
+142
View File
@@ -0,0 +1,142 @@
/* ============================================================
* Diablo2D — balance.js : tuning constants & progression curves
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const BAL = {
/* --- progression --- */
maxLevel: 40,
statPointsPerLevel: 5,
skillPointsPerLevel: 1,
xpForLevel(l) { return Math.floor(58 * Math.pow(l, 1.72) + 24 * l); },
/* --- player base --- */
baseHp: 42, hpPerVit: 3.4, hpPerLevel: 7.5,
baseMana: 18, manaPerEne: 2.2, manaPerLevel: 3.5,
baseArmor: 3,
baseCrit: 0.05, baseCritDmg: 1.5,
baseSpeed: 3.4, // tiles / second
baseAttackCd: 0.62, // seconds (modified by weapon aps)
hpRegenPerSec: 0.35, manaRegenPerSec: 1.4,
/* primary stat -> derived */
meleeDmgPerStr: 0.011, // +1.1% weapon dmg / str
rangedDmgPerDex: 0.011,
castDmgPerEne: 0.012,
armorPerStr: 0.25,
critPerDex: 0.0018, // +0.18% / dex
dodgePerDex: 0.0022,
/* caps */
resistCap: 0.72,
armorDrCap: 0.78,
critCap: 0.75,
speedCap: 6.2,
/* --- monsters --- */
monsterLevel(act, floorIdx, torment) { return 1 + act * 4 + floorIdx + (torment || 0) * 9; },
mHp(mlvl) { return Math.floor(15 + 9.2 * Math.pow(mlvl, 1.36)); },
mDmg(mlvl) { return Math.floor(2.4 + 2.1 * Math.pow(mlvl, 1.28)); },
mXp(mlvl) { return Math.floor(7 + 5.2 * Math.pow(mlvl, 1.35)); },
mArmor(mlvl) { return Math.floor(2 + 1.6 * mlvl); },
eliteHpMult: 2.2, eliteDmgMult: 1.38, eliteXpMult: 2.4, eliteSizeMult: 1.22,
bossHpMult: 7.0, bossDmgMult: 1.55, bossXpMult: 12, bossSizeMult: 1.85,
/* --- combat --- */
armorK: 34 + 6.2, // DR = armor/(armor + K*mlvl) — K applied as armorK*mlvl
knockback: 0.16, // tiles
hitFlashTime: 0.12,
corpseTime: 14,
goldDropBase(mlvl) { return Math.floor(3 + 2.6 * mlvl * (0.8 + Math.random() * 0.5)); },
/* --- drops --- */
dropChances: {
gold: 0.42, potionHp: 0.11, potionMp: 0.075, gear: 0.145, gearEliteBonus: 0.35, gearBoss: 1.0,
},
rarityWeights: { common: 100, magic: 34, rare: 9.5, legendary: 1.35 },
magicFindRarityBoost(mf) { return 1 + mf / 100 * 0.85; }, // mf stat in percent points
potionStackMax: 12,
potionHealPct: 0.32,
potionManaPct: 0.38,
potionHealFlat(mlvl) { return 14 + 6 * mlvl; },
/* --- economy --- */
vendorStockSize: [8, 13],
vendorRerollCostMult: 0.0,
sellRatio: 0.28,
buyMarkup: 1.0,
healerCost(level) { return 12 + level * 6; },
stashRows: 7,
/* --- death --- */
deathGoldPenalty: 0.12,
/* --- acts --- */
/* ---- quest chain (Diablo-style: accept from NPCs, hunt, turn in) ---- */
questKillBase(act) { return 12 + act * 4; },
gambleCost(level) { return 80 + level * 45; },
tomeCost(level) { return 120 + level * 60; },
respecCost(level) { return 300 + level * 90; },
QUESTS: [
// Act I
{ id: 'a0_cull', giver: 'kashya', act: 0, type: 'kills', target: 15,
title: 'quest.cull', desc: 'quest.cull.desc', reward: { gold: 180, xp: 90 } },
{ id: 'a0_boss', giver: 'cain', act: 0, requires: 'a0_cull', type: 'boss',
title: 'quest.boss', desc: 'quest.boss.desc', reward: { gold: 450, xp: 320, itemLevelBonus: 2 } },
// Act II
{ id: 'a1_cull', giver: 'kashya', act: 1, type: 'kills', target: 18,
title: 'quest.cull', desc: 'quest.cull.desc', reward: { gold: 380, xp: 700 } },
{ id: 'a1_boss', giver: 'cain', act: 1, requires: 'a1_cull', type: 'boss',
title: 'quest.boss', desc: 'quest.boss.desc', reward: { gold: 800, xp: 1500, itemLevelBonus: 3 } },
// Act III
{ id: 'a2_cull', giver: 'kashya', act: 2, type: 'kills', target: 22,
title: 'quest.cull', desc: 'quest.cull.desc', reward: { gold: 900, xp: 4200 } },
{ id: 'a2_boss', giver: 'cain', act: 2, requires: 'a2_cull', type: 'boss',
title: 'quest.boss', desc: 'quest.boss.desc', reward: { gold: 1600, xp: 8000, itemLevelBonus: 4 } },
// Act IV
{ id: 'a3_cull', giver: 'kashya', act: 3, type: 'kills', target: 26,
title: 'quest.cull', desc: 'quest.cull.desc', reward: { gold: 2000, xp: 22000 } },
{ id: 'a3_boss', giver: 'cain', act: 3, requires: 'a3_cull', type: 'boss',
title: 'quest.boss', desc: 'quest.boss.desc', reward: { gold: 3500, xp: 40000, itemLevelBonus: 5 } },
// Post-victory repeatable hook
{ id: 'torment_1', giver: 'cain', act: 3, requiresVictory: true, type: 'boss', torment: true,
title: 'quest.torment', desc: 'quest.torment.desc', reward: { gold: 5000, xp: 60000, itemLevelBonus: 6 } },
],
questById(id) { return this.QUESTS.find(q => q.id === id); },
acts: [
{ name: 'act.names.0', floors: 4, boss: 'butcher', theme: 'cathedral', music: 'crypt' },
{ name: 'act.names.1', floors: 4, boss: 'boneking', theme: 'catacombs', music: 'crypt' },
{ name: 'act.names.2', floors: 4, boss: 'spiderqueen', theme: 'caves', music: 'cave' },
{ name: 'act.names.3', floors: 4, boss: 'terrorlord', theme: 'hell', music: 'hell' },
],
floorsPerAct: 4, // last floor of each act is the boss lair
maxTorment: 10,
/* --- shrine buffs --- */
shrineDuration: 45,
shrineBuffPower: { dmg: 0.35, speed: 0.3, armor: 0.5, xp: 0.5, regen: 4 },
/* --- skills --- */
skillMaxRank: 5,
tierUnlockLevels: [1, 4, 8, 13, 19],
manaCostRank(base) { return Math.round(base * (1 + 0.14 * 4)); }, // computed per rank elsewhere
cooldownReductionCap: 0.55,
/* --- misc --- */
interactRange: 1.35,
pickupRange: 1.15,
aggroRange: 7.5,
deaggroLeash: 14,
maxProjectiles: 260,
maxParticles: 700,
maxFloatingText: 90,
};
BAL.armorK = 40; // final constant
D2.BAL = BAL;
})(window.D2);
js/data/items.js
+410
View File
@@ -0,0 +1,410 @@
/* ============================================================
* Diablo2D — items.js : item bases, affixes, legendaries, rolling
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const RARITIES = {
common: { color: '#c8c8c8', mult: 1.00, affixes: [0, 0], weight: 100 },
magic: { color: '#7c9cf5', mult: 1.08, affixes: [1, 2], weight: 34 },
rare: { color: '#f2e34c', mult: 1.16, affixes: [3, 4], weight: 9.5 },
legendary: { color: '#ef8f34', mult: 1.28, affixes: [0, 1], weight: 1.35 },
};
const SLOTS = ['weapon', 'offhand', 'head', 'chest', 'hands', 'feet', 'amulet', 'ring'];
/* ---------------- base items ---------------- */
/* dmg:[min,max] at minIlvl; armor base; aps = attacks per second */
const BASES = [
/* weapons */
{ id: 'dagger', name: { en: 'Dagger', vi: 'Dao Găm' }, slot: 'weapon', kind: 'melee', minIlvl: 1, tier: 1, dmg: [2, 5], aps: 1.62 },
{ id: 'shortsword', name: { en: 'Short Sword', vi: 'Kiếm Ngắn' }, slot: 'weapon', kind: 'melee', minIlvl: 1, tier: 1, dmg: [3, 7], aps: 1.38 },
{ id: 'club', name: { en: 'Club', vi: 'Gậy Thô' }, slot: 'weapon', kind: 'melee', minIlvl: 1, tier: 1, dmg: [4, 8], aps: 1.18 },
{ id: 'longsword', name: { en: 'Long Sword', vi: 'Kiếm Dài' }, slot: 'weapon', kind: 'melee', minIlvl: 7, tier: 2, dmg: [6, 12], aps: 1.32 },
{ id: 'battleaxe', name: { en: 'Battle Axe', vi: 'Rìu Chiến' }, slot: 'weapon', kind: 'melee', minIlvl: 10, tier: 2, dmg: [9, 16], aps: 1.08 },
{ id: 'mace', name: { en: 'Mace', vi: 'Chùy' }, slot: 'weapon', kind: 'melee', minIlvl: 9, tier: 2, dmg: [8, 14], aps: 1.15 },
{ id: 'warhammer', name: { en: 'War Hammer', vi: 'Búa Chiến' }, slot: 'weapon', kind: 'melee', minIlvl: 17, tier: 3, dmg: [13, 21], aps: 0.95 },
{ id: 'greatsword', name: { en: 'Great Sword', vi: 'Đại Kiếm' }, slot: 'weapon', kind: 'melee', minIlvl: 19, tier: 3, dmg: [15, 24], aps: 1.0 },
{ id: 'reaver', name: { en: 'Reaver Axe', vi: 'Rìu Hủy Diệt' }, slot: 'weapon', kind: 'melee', minIlvl: 26, tier: 4, dmg: [20, 33], aps: 1.02 },
{ id: 'shortbow', name: { en: 'Short Bow', vi: 'Cung Ngắn' }, slot: 'weapon', kind: 'ranged', minIlvl: 1, tier: 1, dmg: [3, 6], aps: 1.45 },
{ id: 'huntingbow', name: { en: 'Hunting Bow', vi: 'Cung Săn Bắn' }, slot: 'weapon', kind: 'ranged', minIlvl: 8, tier: 2, dmg: [7, 12], aps: 1.32 },
{ id: 'longbow', name: { en: 'Long Bow', vi: 'Cung Dài' }, slot: 'weapon', kind: 'ranged', minIlvl: 16, tier: 3, dmg: [11, 19], aps: 1.18 },
{ id: 'shadowbow', name: { en: 'Shadow Bow', vi: 'Cung Bóng Đêm' }, slot: 'weapon', kind: 'ranged', minIlvl: 25, tier: 4, dmg: [17, 28], aps: 1.24 },
{ id: 'gnarledstaff', name: { en: 'Gnarled Staff', vi: 'Trượng Gồ Ghề' }, slot: 'weapon', kind: 'cast', minIlvl: 1, tier: 1, dmg: [3, 6], aps: 1.28, implicit: { manaFlat: 4 } },
{ id: 'oakstaff', name: { en: 'Oak Staff', vi: 'Trượng Sồi' }, slot: 'weapon', kind: 'cast', minIlvl: 9, tier: 2, dmg: [6, 11], aps: 1.22, implicit: { manaFlat: 8 } },
{ id: 'runestaff', name: { en: 'Rune Staff', vi: 'Trượng Phù Văn' }, slot: 'weapon', kind: 'cast', minIlvl: 17, tier: 3, dmg: [10, 18], aps: 1.15, implicit: { manaFlat: 14 } },
{ id: 'archspire', name: { en: 'Arch Spire', vi: 'Tháp Pháp Thuật' }, slot: 'weapon', kind: 'cast', minIlvl: 26, tier: 4, dmg: [15, 27], aps: 1.1, implicit: { manaFlat: 22 } },
/* offhand */
{ id: 'buckler', name: { en: 'Buckler', vi: 'Khiên Nhỏ' }, slot: 'offhand', kind: 'shield', minIlvl: 1, tier: 1, armor: 4, implicit: { blockChance: 8 } },
{ id: 'kiteshield', name: { en: 'Kite Shield', vi: 'Khiên Diềm' }, slot: 'offhand', kind: 'shield', minIlvl: 10, tier: 2, armor: 10, implicit: { blockChance: 12 } },
{ id: 'towerward', name: { en: 'Tower Ward', vi: 'Lá Chắn Tháp' }, slot: 'offhand', kind: 'shield', minIlvl: 20, tier: 3, armor: 19, implicit: { blockChance: 16 } },
{ id: 'quiver', name: { en: 'Quiver', vi: 'Túi Đao' }, slot: 'offhand', kind: 'focus', minIlvl: 1, tier: 1, armor: 1, implicit: { attackSpeedPct: 5 } },
{ id: 'focusorb', name: { en: 'Focus Orb', vi: 'Cầu Tập Trung' }, slot: 'offhand', kind: 'focus', minIlvl: 1, tier: 1, armor: 1, implicit: { manaRegen: 0.5 } },
/* head */
{ id: 'cap', name: { en: 'Cap', vi: 'Mũ Vải' }, slot: 'head', kind: 'armor', minIlvl: 1, tier: 1, armor: 3 },
{ id: 'helm', name: { en: 'Helm', vi: 'Mũ Giáp' }, slot: 'head', kind: 'armor', minIlvl: 8, tier: 2, armor: 8 },
{ id: 'great Helm', name: { en: 'Great Helm', vi: 'Mũ Giáp Lớn' }, slot: 'head', kind: 'armor', minIlvl: 18, tier: 3, armor: 15 },
{ id: 'crownplate', name: { en: 'Crown Plate', vi: 'Vương Miện Thép' }, slot: 'head', kind: 'armor', minIlvl: 27, tier: 4, armor: 23 },
/* chest */
{ id: 'leatherarmor', name: { en: 'Leather Armor', vi: 'Giáp Da' }, slot: 'chest', kind: 'armor', minIlvl: 1, tier: 1, armor: 6 },
{ id: 'chainmail', name: { en: 'Chain Mail', vi: 'Giáp Xích' }, slot: 'chest', kind: 'armor', minIlvl: 9, tier: 2, armor: 14 },
{ id: 'platearmor', name: { en: 'Plate Armor', vi: 'Giáp Tấm' }, slot: 'chest', kind: 'armor', minIlvl: 19, tier: 3, armor: 26 },
{ id: 'doomplate', name: { en: 'War Plate', vi: 'Giáp Chiến Thần' }, slot: 'chest', kind: 'armor', minIlvl: 28, tier: 4, armor: 40 },
/* hands */
{ id: 'gloves', name: { en: 'Gloves', vi: 'Găng Vải' }, slot: 'hands', kind: 'armor', minIlvl: 1, tier: 1, armor: 2 },
{ id: 'gauntlets', name: { en: 'Gauntlets', vi: 'Găng Sắt' }, slot: 'hands', kind: 'armor', minIlvl: 10, tier: 2, armor: 6 },
{ id: 'warmitts', name: { en: 'War Mitts', vi: 'Găng Chiến' }, slot: 'hands', kind: 'armor', minIlvl: 21, tier: 3, armor: 11 },
/* feet */
{ id: 'boots', name: { en: 'Boots', vi: 'Ủng' }, slot: 'feet', kind: 'armor', minIlvl: 1, tier: 1, armor: 2, implicit: { moveSpeedPct: 4 } },
{ id: 'greaves', name: { en: 'Greaves', vi: 'Giáp Chân' }, slot: 'feet', kind: 'armor', minIlvl: 11, tier: 2, armor: 6, implicit: { moveSpeedPct: 6 } },
{ id: 'warboots', name: { en: 'War Treads', vi: 'Ủng Chiến Binh' }, slot: 'feet', kind: 'armor', minIlvl: 22, tier: 3, armor: 11, implicit: { moveSpeedPct: 8 } },
/* jewelry */
{ id: 'amulet', name: { en: 'Amulet', vi: 'Mặt Dây' }, slot: 'amulet', kind: 'jewelry', minIlvl: 1, tier: 1 },
{ id: 'ring', name: { en: 'Ring', vi: 'Nhẫn' }, slot: 'ring', kind: 'jewelry', minIlvl: 1, tier: 1 },
];
// fix accidental key with space
BASES.find(b => b.id === 'great Helm').id = 'greathelm';
/* ---------------- affixes ---------------- */
/* tiers: choose highest tier with t.ilvl <= ilvl; value uniform in [min,max] */
const AFFIXES = [
{ id: 'str', pre: { en: 'Mighty', vi: 'Uy Lực' }, suf: { en: 'of Strength', vi: 'của Sức Mạnh' }, slots: 'any', stat: 'str',
tiers: [{ ilvl: 1, min: 1, max: 3 }, { ilvl: 9, min: 2, max: 5 }, { ilvl: 18, min: 4, max: 8 }, { ilvl: 27, min: 7, max: 13 }] },
{ id: 'dex', pre: { en: 'Deft', vi: 'Thoăn' }, suf: { en: 'of Dexterity', vi: 'của Nhuệ' }, slots: 'any', stat: 'dex',
tiers: [{ ilvl: 1, min: 1, max: 3 }, { ilvl: 9, min: 2, max: 5 }, { ilvl: 18, min: 4, max: 8 }, { ilvl: 27, min: 7, max: 13 }] },
{ id: 'vit', pre: { en: 'Stout', vi: 'Vững' }, suf: { en: 'of Vitality', vi: 'của Sinh Lực' }, slots: 'any', stat: 'vit',
tiers: [{ ilvl: 1, min: 1, max: 3 }, { ilvl: 9, min: 2, max: 5 }, { ilvl: 18, min: 4, max: 8 }, { ilvl: 27, min: 7, max: 13 }] },
{ id: 'ene', pre: { en: 'Arcane', vi: 'Huyền Bí' }, suf: { en: 'of Energy', vi: 'của Năng Lượng' }, slots: 'any', stat: 'ene',
tiers: [{ ilvl: 1, min: 1, max: 3 }, { ilvl: 9, min: 2, max: 5 }, { ilvl: 18, min: 4, max: 8 }, { ilvl: 27, min: 7, max: 13 }] },
{ id: 'dmgpct', pre: { en: 'Brutal', vi: 'Man Dại' }, suf: null, slots: ['weapon', 'amulet', 'ring'], stat: 'dmgPct',
tiers: [{ ilvl: 1, min: 6, max: 12 }, { ilvl: 12, min: 10, max: 20 }, { ilvl: 24, min: 18, max: 32 }] },
{ id: 'flatdmg', pre: { en: 'Cruel', vi: 'Tàn Nhẫn' }, suf: { en: 'of Wounds', vi: 'của Vết Thương' }, slots: ['weapon', 'ring', 'amulet'], stat: '_flatDmg',
tiers: [{ ilvl: 1, min: 1, max: 3 }, { ilvl: 12, min: 3, max: 7 }, { ilvl: 24, min: 6, max: 13 }] },
{ id: 'crit', pre: { en: 'Keen', vi: 'Sắc Bén' }, suf: { en: 'of Precision', vi: 'của Chuẩn Xác' }, slots: 'any', stat: 'critChance',
tiers: [{ ilvl: 1, min: 2, max: 4 }, { ilvl: 12, min: 3, max: 6 }, { ilvl: 24, min: 5, max: 9 }] },
{ id: 'critdmg', pre: { en: 'Savage', vi: 'Hung Tợn' }, suf: null, slots: ['weapon', 'hands', 'ring', 'amulet'], stat: 'critDmgPct',
tiers: [{ ilvl: 4, min: 10, max: 22 }, { ilvl: 16, min: 18, max: 36 }, { ilvl: 26, min: 30, max: 55 }] },
{ id: 'aspd', pre: { en: 'Swift', vi: 'Nhanh Nhẹn' }, suf: null, slots: ['weapon', 'hands', 'ring'], stat: 'attackSpeedPct',
tiers: [{ ilvl: 1, min: 4, max: 8 }, { ilvl: 14, min: 7, max: 13 }, { ilvl: 25, min: 11, max: 19 }] },
{ id: 'mspd', pre: { en: 'Fleet', vi: 'Thanh Nhẹ' }, suf: null, slots: ['feet', 'ring', 'amulet'], stat: 'moveSpeedPct',
tiers: [{ ilvl: 1, min: 4, max: 8 }, { ilvl: 14, min: 7, max: 12 }] },
{ id: 'armor', pre: { en: 'Stalwart', vi: 'Kiên Cố' }, suf: { en: 'of Warding', vi: 'của Che Chở' }, slots: ['head', 'chest', 'hands', 'feet', 'offhand'], stat: 'armor',
tiers: [{ ilvl: 1, min: 3, max: 7 }, { ilvl: 12, min: 8, max: 16 }, { ilvl: 24, min: 16, max: 32 }] },
{ id: 'hp', pre: { en: 'Robust', vi: 'Trâu Bò' }, suf: { en: 'of Life', vi: 'của Máu' }, slots: 'any', stat: 'hpFlat',
tiers: [{ ilvl: 1, min: 6, max: 12 }, { ilvl: 10, min: 12, max: 24 }, { ilvl: 20, min: 24, max: 46 }, { ilvl: 29, min: 42, max: 80 }] },
{ id: 'mana', pre: { en: 'Clear', vi: 'Trong Trời' }, suf: { en: 'of Mana', vi: 'của Mana' }, slots: 'any', stat: 'manaFlat',
tiers: [{ ilvl: 1, min: 4, max: 9 }, { ilvl: 12, min: 9, max: 18 }, { ilvl: 24, min: 16, max: 32 }] },
{ id: 'hpreg', pre: { en: 'Renewing', vi: 'Hồi Phục' }, suf: { en: 'of Regeneration', vi: 'của Tái Tạo' }, slots: ['chest', 'amulet', 'ring'], stat: 'hpRegen',
tiers: [{ ilvl: 1, min: 1, max: 3 }, { ilvl: 15, min: 3, max: 7 }] },
{ id: 'mpreg', pre: { en: 'Flowing', vi: 'Chảy Chảy' }, suf: { en: 'of the Well', vi: 'của Giếng Mana' }, slots: ['head', 'hands', 'amulet', 'ring', 'offhand'], stat: 'manaRegen',
tiers: [{ ilvl: 1, min: .4, max: 1 }, { ilvl: 15, min: 1, max: 2.2 }] },
{ id: 'lok', pre: null, suf: { en: 'of Feasting', vi: 'của Thịnh Soạn' }, slots: ['weapon', 'ring', 'amulet'], stat: 'lifeOnKill',
tiers: [{ ilvl: 1, min: 1, max: 3 }, { ilvl: 14, min: 3, max: 7 }, { ilvl: 26, min: 6, max: 13 }] },
{ id: 'mf', pre: { en: 'Lucky', vi: 'May Mắn' }, suf: { en: 'of Fortune', vi: 'của Vận May' }, slots: 'any', stat: 'magicFind',
tiers: [{ ilvl: 1, min: 5, max: 12 }, { ilvl: 15, min: 10, max: 22 }, { ilvl: 26, min: 18, max: 35 }] },
{ id: 'gf', pre: { en: 'Golden', vi: 'Vàng Óng' }, suf: { en: 'of Greed', vi: 'của Tham Lam' }, slots: 'any', stat: 'goldFind',
tiers: [{ ilvl: 1, min: 8, max: 18 }, { ilvl: 15, min: 15, max: 32 }] },
{ id: 'fire', pre: { en: 'Flaming', vi: 'Rực Lửa' }, suf: { en: 'of Embers', vi: 'của Than Hồng' }, slots: ['weapon', 'ring', 'amulet'], stat: 'fireDmg',
tiers: [{ ilvl: 1, min: 2, max: 5 }, { ilvl: 12, min: 5, max: 11 }, { ilvl: 24, min: 10, max: 21 }] },
{ id: 'cold', pre: { en: 'Frozen', vi: 'Băng Giá' }, suf: { en: 'of Frost', vi: 'của Sương Muối' }, slots: ['weapon', 'ring', 'amulet'], stat: 'coldDmg',
tiers: [{ ilvl: 1, min: 2, max: 4 }, { ilvl: 12, min: 4, max: 9 }, { ilvl: 24, min: 8, max: 17 }] },
{ id: 'lit', pre: { en: 'Crackling', vi: 'Rét Rít' }, suf: { en: 'of Storms', vi: 'của Bão Tố' }, slots: ['weapon', 'ring', 'amulet'], stat: 'litDmg',
tiers: [{ ilvl: 1, min: 1, max: 6 }, { ilvl: 12, min: 4, max: 13 }, { ilvl: 24, min: 9, max: 24 }] },
{ id: 'pois', pre: { en: 'Venomous', vi: 'Nhiễm Độc' }, suf: { en: 'of the Serpent', vi: 'của Con Rắn' }, slots: ['weapon', 'ring', 'amulet'], stat: 'poisDmg',
tiers: [{ ilvl: 1, min: 3, max: 7 }, { ilvl: 12, min: 6, max: 14 }, { ilvl: 24, min: 12, max: 26 }] },
{ id: 'resfire', pre: null, suf: { en: 'of Flame Ward', vi: 'chống Hỏa' }, slots: 'any', stat: 'resFire',
tiers: [{ ilvl: 1, min: 5, max: 12 }, { ilvl: 16, min: 10, max: 22 }, { ilvl: 27, min: 16, max: 34 }] },
{ id: 'rescold', pre: null, suf: { en: 'of Ice Ward', vi: 'chống Băng' }, slots: 'any', stat: 'resCold',
tiers: [{ ilvl: 1, min: 5, max: 12 }, { ilvl: 16, min: 10, max: 22 }, { ilvl: 27, min: 16, max: 34 }] },
{ id: 'reslit', pre: null, suf: { en: 'of Storm Ward', vi: 'chống Lôi' }, slots: 'any', stat: 'resLit',
tiers: [{ ilvl: 1, min: 5, max: 12 }, { ilvl: 16, min: 10, max: 22 }, { ilvl: 27, min: 16, max: 34 }] },
{ id: 'respois', pre: null, suf: { en: 'of Venom Ward', vi: 'chống Độc' }, slots: 'any', stat: 'resPois',
tiers: [{ ilvl: 1, min: 5, max: 12 }, { ilvl: 16, min: 10, max: 22 }, { ilvl: 27, min: 16, max: 34 }] },
{ id: 'cdr', pre: { en: 'Temporal', vi: 'Thời Không' }, suf: null, slots: ['head', 'hands', 'amulet', 'ring'], stat: 'cdr',
tiers: [{ ilvl: 6, min: 4, max: 8 }, { ilvl: 20, min: 7, max: 13 }] },
{ id: 'thorns', pre: { en: 'Spiked', vi: 'Gai Góc' }, suf: { en: 'of Retribution', vi: 'của Trừng Phạt' }, slots: ['head', 'chest', 'offhand', 'amulet'], stat: 'thorns',
tiers: [{ ilvl: 1, min: 2, max: 5 }, { ilvl: 14, min: 5, max: 12 }, { ilvl: 25, min: 10, max: 22 }] },
];
/* ---------------- legendaries ---------------- */
const LEGENDARIES = [
{ id: 'butchers_cleaver', base: 'battleaxe', name: { en: "Butcher's Cleaver", vi: 'Cán Dao Của Đồ Tể' },
special: 'cleaveEcho', stats: { dmgPct: 20, str: 8, hpFlat: 25 },
flavor: { en: 'Fresh meat!', vi: 'Thịt tươi đây!' } },
{ id: 'windstring', base: 'longbow', name: { en: 'Windstring', vi: 'Dây Gió' },
special: 'doubleShot', stats: { attackSpeedPct: 14, dex: 10 },
flavor: { en: 'Twice the arrows, twice the silence.', vi: 'Gấp đôi mũi tên, gấp đôi im lặng.' } },
{ id: 'emberheart', base: 'runestaff', name: { en: 'Emberheart', vi: 'Tim Than Hồng' },
special: 'fireNovaOnKill', stats: { fireDmg: 18, ene: 12 },
flavor: { en: 'It still beats.', vi: 'Nó vẫn còn đập.' } },
{ id: 'frostweave', base: 'platearmor', name: { en: 'Frostweave', vi: 'Vải Băng' },
special: 'chillAttacker', stats: { armor: 20, resCold: 25 },
flavor: { en: 'Cold embraces those who dare.', vi: 'Băng giá ôm lấy kẻ dám lại gần.' } },
{ id: 'abyss_ring', base: 'ring', name: { en: 'Ring of the Abyss', vi: 'Nhẫn Vực Sâu' },
special: 'allSkills', stats: { manaFlat: 20, ene: 8 },
flavor: { en: 'Stare long enough and it stares back.', vi: 'Nhìn đủ lâu, nó sẽ nhìn lại.' } },
{ id: 'gravebind', base: 'amulet', name: { en: 'Gravebind', vi: 'Dây Mộ' },
special: 'execHeal', stats: { lifeOnKill: 8, vit: 10 },
flavor: { en: 'Every death feeds the root.', vi: 'Mỗi cái chết nuôi cái rễ.' } },
{ id: 'stormrunners', base: 'warboots', name: { en: 'Stormrunners', vi: 'Dạo Bước Bão' },
special: 'stormDash', stats: { moveSpeedPct: 16, cdr: 10 },
flavor: { en: 'The ground remembers nothing.', vi: 'Mặt đất chẳng nhớ gì cả.' } },
{ id: 'aegis_ash', base: 'greathelm', name: { en: 'Aegis of Ash', vi: 'Hộ Khiên Tro Tàn' },
special: null, stats: { thorns: 18, resFire: 30, armor: 22, str: 8 },
flavor: { en: 'What burned once cannot burn again.', vi: 'Đã cháy một lần thì không cháy lần nữa.' } },
{ id: 'bloodletter', base: 'dagger', name: { en: 'Bloodletter', vi: 'Xả Máu' },
special: 'lifesteal', stats: { critChance: 8, aspd: 10 },
flavor: { en: 'It drinks before you feast.', vi: 'Nó uống trước khi bạn ăn mừng.' } },
{ id: 'crown_torment', base: 'crownplate', name: { en: 'Crown of Torment', vi: 'Vương Miện Đày Ái' },
special: 'eliteSlayer', stats: { dmgPct: 12, hpFlat: 30 },
flavor: { en: 'Kneel, champions. Your king is here.', vi: 'Quỳ xuống, các tinh anh. Vua của chúng mày tới rồi.' } },
{ id: 'vortex_gauntlets', base: 'gauntlets', name: { en: 'Vortex Gauntlets', vi: 'Găng Xoáy Ốc' },
special: 'chainOnHit', stats: { litDmg: 12, attackSpeedPct: 8 },
flavor: { en: 'One strike becomes a storm.', vi: 'Một đòn hóa thành cơn bão.' } },
{ id: 'doomplate_leg', base: 'doomplate', name: { en: 'Doomplate of Ruin', vi: 'Giáp Tấm Hủy Diệt' },
special: 'corpseBoom', stats: { armor: 34, vit: 12, thorns: 12 },
flavor: { en: 'They die standing closer than they think.', vi: 'Chúng chết ở khoảng cách gần hơn chúng tưởng.' } },
{ id: 'serpent_coil', base: 'ring', name: { en: 'Serpent Coil', vi: 'Vòng Xuyên Rắn' },
special: 'venomStrike', stats: { poisDmg: 14, dex: 8 },
flavor: { en: 'The bite you never saw.', vi: 'Cú cắn bạn không bao giờ thấy.' } },
{ id: 'voidwalker_treads', base: 'greaves', name: { en: 'Voidwalker Treads', vi: 'Dạo Bước Hư Không' },
special: 'voidstep', stats: { moveSpeedPct: 10, cdr: 12 },
flavor: { en: 'Distance is a rumor.', vi: 'Khoảng cách chỉ là tin đồn.' } },
];
/* ---------------- name generation ---------------- */
const RARE_PRE = ['Doom', 'Grim', 'Blood', 'Storm', 'Night', 'Ash', 'Bone', 'Vile', 'Wraith', 'Storm', 'Sun', 'Shadow', 'Hell', 'Raven'];
const RARE_SUF = ['bane', 'song', 'weaver', 'fang', 'howl', 'brand', 'shroud', 'mark', 'veil', 'claw', 'render', 'wail'];
const RARE_OF = {
en: ['the Lost', 'the Fallen', 'the Deep', 'the Hunt', 'the Void', 'Sorrow', 'Ruin', 'the Pact', 'the Pyre', 'the Plague'],
vi: ['Người Lạc', 'Kẻ Sa Đọa', 'Vực Sâu', 'Cuộc Săn', 'Hư Không', 'Nỗi Đau', 'Sự Hủy Diệt', 'Khế Ước', 'Lửa Thiêu', 'Cơn Dịch'],
};
function lang() { return (D2.i18n && D2.i18n.getLang()) || 'en'; }
function pick(arr) { return arr[(Math.random() * arr.length) | 0]; }
function ri(a, b) { return a + Math.floor(Math.random() * (b - a + 1)); }
function baseName(base) {
const n = base.name[lang()];
return n || base.name.en;
}
function makeName(base, rarity, rolled) {
if (rarity === 'common') return baseName(base);
if (rarity === 'magic') {
const withPre = rolled.find(a => AFFIX_MAP[a.id].pre);
const withSuf = rolled.find(a => AFFIX_MAP[a.id].suf);
let n = baseName(base);
if (withPre && (!withSuf || Math.random() < 0.5)) n = AFFIX_MAP[withPre.id].pre[lang()] + ' ' + n;
else if (withSuf) n += ' ' + AFFIX_MAP[withSuf.id].suf[lang()];
else if (withPre) n = AFFIX_MAP[withPre.id].pre[lang()] + ' ' + n;
return n;
}
if (rarity === 'rare') {
let n = pick(RARE_PRE) + pick(RARE_SUF);
if (Math.random() < 0.4) n += ' ' + pick(RARE_OF[lang()] || RARE_OF.en);
return n;
}
return baseName(base);
}
const AFFIX_MAP = {};
for (const a of AFFIXES) AFFIX_MAP[a.id] = a;
/* ---------------- rolling ---------------- */
function tierValue(affix, ilvl) {
let best = affix.tiers[0];
for (const t of affix.tiers) if (t.ilvl <= ilvl) best = t;
const v = ri(best.min * 10, best.max * 10) / 10;
return Math.round(v * 10) / 10;
}
function eligibleAffixes(slot) {
return AFFIXES.filter(a => a.slots === 'any' || (Array.isArray(a.slots) && a.slots.includes(slot)));
}
function scaleBase(base, ilvl, rarityMult) {
const grow = 1 + 0.105 * Math.max(0, ilvl - base.minIlvl);
const out = {};
if (base.dmg) {
out.dmgMin = Math.max(1, Math.round(base.dmg[0] * grow * rarityMult));
out.dmgMax = Math.max(out.dmgMin + 1, Math.round(base.dmg[1] * grow * rarityMult));
out.aps = base.aps;
}
if (base.armor) out.armor = Math.max(1, Math.round(base.armor * grow * rarityMult));
if (base.implicit) out.stats = Object.assign({}, base.implicit);
else out.stats = {};
return out;
}
/** main entry: roll a randomized item */
function rollItem(ilvl, opts = {}) {
ilvl = Math.max(1, Math.round(ilvl));
const slot = opts.slot || pick(SLOTS);
/* pick base among eligible, favoring higher tiers */
const cands = BASES.filter(b => b.slot === slot && b.minIlvl <= ilvl);
if (!cands.length) return null;
const weighted = cands.map(b => ({ v: b, w: Math.pow(b.tier, 1.6) }));
const base = weightedPick(weighted);
/* rarity */
let rarity = opts.rarity;
if (!rarity) {
const mf = opts.magicFind || 0;
const boost = D2.BAL.magicFindRarityBoost(mf);
const wts = [
{ v: 'legendary', w: RARITIES.legendary.weight * boost * (opts.boss ? 7 : 1) * (opts.elite ? 2.6 : 1) },
{ v: 'rare', w: RARITIES.rare.weight * boost * (opts.elite ? 1.7 : 1) },
{ v: 'magic', w: RARITIES.magic.weight * (opts.elite ? 1.3 : 1) },
{ v: 'common', w: RARITIES.common.weight },
];
rarity = weightedPick(wts);
}
const rar = RARITIES[rarity];
const item = {
uid: D2.util.uid(),
slot, baseId: base.id, kind: base.kind,
rarity, ilvl,
reqLevel: Math.max(1, ilvl - 1),
};
Object.assign(item, scaleBase(base, ilvl, rar.mult));
/* legendary: fixed identity */
if (rarity === 'legendary') {
const pool = opts.legendaryPool || LEGENDARIES;
let leg = pick(pool);
if (opts.slot) {
const matching = pool.filter(l => {
const lb = BASES.find(b => b.id === l.base);
return lb && lb.slot === slot;
});
if (matching.length) leg = pick(matching);
}
item.baseId = leg.base;
const lb = BASES.find(b => b.id === leg.base);
Object.assign(item, scaleBase(lb, ilvl, RARITIES.legendary.mult));
item.legendaryId = leg.id;
item.special = leg.special;
item.flavor = leg.flavor ? (leg.flavor[lang()] || leg.flavor.en) : null;
item.name = leg.name[lang()] || leg.name.en;
for (const [k, vBase] of Object.entries(leg.stats)) {
const grow = 1 + 0.055 * Math.max(0, ilvl - lb.minIlvl);
item.stats[k] = (item.stats[k] || 0) + Math.round(vBase * grow);
}
if (Math.random() < 0.65) {
const extra = rollAffixes(eligibleAffixes(slot), 1, ilvl, item.stats);
for (const a of extra) item.stats[a.stat === '_flatDmg' ? 'flatDmg' : a.stat] =
(item.stats[a.stat === '_flatDmg' ? 'flatDmg' : a.stat] || 0) + a.val;
}
item.value = price(item);
return item;
}
/* affix count */
const count = ri(rar.affixes[0], rar.affixes[1]);
const rolled = rollAffixes(eligibleAffixes(slot), count, ilvl, item.stats);
for (const a of rolled) {
if (a.stat === '_flatDmg') {
// flat damage adds both sides
const f = Math.round(a.val);
item.flatDmg = f;
} else {
item.stats[a.stat] = (item.stats[a.stat] || 0) + a.val;
}
}
item.name = makeName(base, rarity, rolled);
item.value = price(item);
return item;
}
function rollAffixes(pool, count, ilvl, existingStats) {
const out = [];
const usedIds = new Set();
const avail = [...pool];
while (out.length < count && avail.length) {
const a = weightedPick(avail.map(x => ({ v: x, w: 1 })));
avail.splice(avail.indexOf(a), 1);
if (usedIds.has(a.id)) continue;
usedIds.add(a.id);
out.push({ id: a.id, stat: a.stat, val: tierValue(a, ilvl) });
}
return out;
}
function weightedPick(entries) {
let total = 0;
for (const e of entries) total += e.w;
let r = Math.random() * total;
for (const e of entries) { r -= e.w; if (r <= 0) return e.v; }
return entries[entries.length - 1].v;
}
function price(item) {
let core = 0;
if (item.dmgMax) core = (item.dmgMin + item.dmgMax) / 2 * item.aps * 6;
else if (item.armor) core = item.armor * 4.2;
else core = 10;
let statScore = 0;
for (const v of Object.values(item.stats || {})) statScore += typeof v === 'number' ? Math.abs(v) : 0;
if (item.flatDmg) statScore += item.flatDmg * 2;
return Math.max(5, Math.round((core + statScore * 2.2) * (1 + item.ilvl * 0.06) *
({ common: 1, magic: 1.6, rare: 2.6, legendary: 6 }[item.rarity])));
}
/* starter gear per class */
function startingWeapon(cls) {
const baseId = cls === 'crusader' ? 'shortsword' : cls === 'ranger' ? 'shortbow' : 'gnarledstaff';
const base = BASES.find(b => b.id === baseId);
return {
uid: D2.util.uid(), slot: 'weapon', baseId, kind: base.kind, rarity: 'common',
ilvl: 1, reqLevel: 1, name: baseName(base),
dmgMin: base.dmg[0], dmgMax: base.dmg[1], aps: base.aps,
stats: base.implicit ? { ...base.implicit } : {},
value: 10,
};
}
function startingArmor() {
const base = BASES.find(b => b.id === 'leatherarmor');
return {
uid: D2.util.uid(), slot: 'chest', baseId: 'leatherarmor', kind: 'armor', rarity: 'common',
ilvl: 1, reqLevel: 1, name: baseName(base),
armor: base.armor, stats: {}, value: 8,
};
}
function startingPotion() {
const base = BASES.find(b => b.id === 'cap');
void base;
return null;
}
/* vendor stock */
function vendorStock(mlvl, count) {
const out = [];
for (let i = 0; i < count; i++) {
const it = rollItem(Math.max(1, mlvl + ri(-1, 2)), { magicFind: 0 });
if (it) out.push(it);
}
return out;
}
D2.Items = {
RARITIES, SLOTS, BASES, AFFIXES, LEGENDARIES, AFFIX_MAP,
rollItem, price, baseName, startingWeapon, startingArmor, vendorStock,
baseById: id => BASES.find(b => b.id === id),
legendaryById: id => LEGENDARIES.find(l => l.id === id),
isWeapon: it => !!it.dmgMax,
};
})(window.D2);
js/data/monsters.js
+258
View File
@@ -0,0 +1,258 @@
/* ============================================================
* Diablo2D — monsters.js : bestiary, elite affixes, bosses
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
/* ai archetypes: melee | ranged | caster | charger | swarm | flyer | summoner */
const SPECIES = [
/* ---- ACT I : The Ravaged Cathedral ---- */
{ id: 'skeleton', name: { en: 'Skeleton', vi: 'Xương Khô' }, acts: [0], ai: 'melee',
hpMult: 0.9, dmgMult: 1.0, speed: 2.5, radius: 0.32, range: 0.95, cd: 1.15, xpMult: 1.0,
palette: { body: '#cfc7ae', accent: '#8a8272' }, shape: 'skeleton' },
{ id: 'skel_archer', name: { en: 'Skeleton Archer', vi: 'Cung Thủ Xương' }, acts: [0], ai: 'ranged',
hpMult: 0.75, dmgMult: 0.9, speed: 2.2, radius: 0.3, range: 6.5, cd: 1.7, xpMult: 1.15,
proj: { kind: 'arrow', speed: 8.5, color: '#d8cba8' },
palette: { body: '#cfc7ae', accent: '#6e5b34' }, shape: 'skeleton_bow' },
{ id: 'fallen', name: { en: 'Fallen One', vi: 'Kẻ Sa Đọa' }, acts: [0], ai: 'swarm',
hpMult: 0.55, dmgMult: 0.75, speed: 3.6, radius: 0.26, range: 0.85, cd: 0.85, xpMult: 0.85,
palette: { body: '#b0522f', accent: '#e8c26a' }, shape: 'imp' },
{ id: 'zombie', name: { en: 'Zombie', vi: 'Thi Sống' }, acts: [0, 1], ai: 'melee',
hpMult: 1.6, dmgMult: 1.1, speed: 1.35, radius: 0.36, range: 1.0, cd: 1.5, xpMult: 1.2,
palette: { body: '#7a8a62', accent: '#4c5840' }, shape: 'zombie' },
{ id: 'bat', name: { en: 'Cave Bat', vi: 'Dơi Hang' }, acts: [0, 2], ai: 'flyer',
hpMult: 0.45, dmgMult: 0.7, speed: 4.3, radius: 0.24, range: 0.8, cd: 0.8, xpMult: 0.8,
palette: { body: '#4a3a52', accent: '#8a6aa2' }, shape: 'bat' },
{ id: 'cultist', name: { en: 'Dark Cultist', vi: 'Giáo Đồ Bóng Tối' }, acts: [0], ai: 'caster',
hpMult: 0.8, dmgMult: 1.15, speed: 2.1, radius: 0.32, range: 6.0, cd: 2.1, xpMult: 1.4,
proj: { kind: 'shadowbolt', speed: 6.5, color: '#a06ad8' },
special: 'blinkAway',
palette: { body: '#5a2a4a', accent: '#c23a3a' }, shape: 'cultist' },
/* ---- ACT II : The Weeping Catacombs ---- */
{ id: 'bone_warrior', name: { en: 'Bone Warrior', vi: 'Chiến Binh Xương' }, acts: [1], ai: 'melee',
hpMult: 1.25, dmgMult: 1.2, speed: 2.8, radius: 0.34, range: 1.0, cd: 1.05, xpMult: 1.25,
palette: { body: '#d8d0bc', accent: '#7a3040' }, shape: 'skeleton' },
{ id: 'tomb_spider', name: { en: 'Tomb Spider', vi: 'Nhện Mộ' }, acts: [1, 2], ai: 'ranged',
hpMult: 0.9, dmgMult: 0.95, speed: 2.6, radius: 0.33, range: 5.0, cd: 1.6, xpMult: 1.3,
proj: { kind: 'spit', speed: 7.0, color: '#8adf5a', elem: 'pois', slow: 0.35, slowDur: 1.6 },
palette: { body: '#3a4a2e', accent: '#8adf5a' }, shape: 'spider' },
{ id: 'wraith', name: { en: 'Wraith', vi: 'Bóng Ma' }, acts: [1], ai: 'flyer',
hpMult: 0.85, dmgMult: 1.1, speed: 3.4, radius: 0.3, range: 0.9, cd: 1.1, xpMult: 1.5,
elem: 'cold', chillOnHit: true,
palette: { body: '#6a86b8', accent: '#cfe4ff' }, shape: 'wraith' },
{ id: 'cursed_priest', name: { en: 'Cursed Priest', vi: 'Tu Sĩ Nguyền Rủa' }, acts: [1], ai: 'summoner',
hpMult: 1.0, dmgMult: 0.8, speed: 1.9, radius: 0.33, range: 6.5, cd: 3.4, xpMult: 1.8,
summon: { species: 'skeleton', count: 2, maxAlive: 5 },
proj: { kind: 'shadowbolt', speed: 6.0, color: '#b08ae8' },
special: 'blinkAway',
palette: { body: '#443a5e', accent: '#e8e0b0' }, shape: 'cultist' },
{ id: 'hellhound', name: { en: 'Hellhound', vi: 'Hầu Địa Ngục' }, acts: [1, 3], ai: 'charger',
hpMult: 1.1, dmgMult: 1.3, speed: 3.0, radius: 0.34, range: 1.0, cd: 1.2, xpMult: 1.45,
chargeRange: 6, elem: 'fire',
palette: { body: '#702a20', accent: '#ff9a3a' }, shape: 'hound' },
/* ---- ACT III : The Fungal Depths ---- */
{ id: 'sporeling', name: { en: 'Sporeling', vi: 'Bào Tử Linh' }, acts: [2], ai: 'swarm',
hpMult: 0.6, dmgMult: 0.8, speed: 3.2, radius: 0.27, range: 0.85, cd: 0.9, xpMult: 0.9,
corpsePoison: true,
palette: { body: '#5a8a3a', accent: '#c8e88a' }, shape: 'shroom' },
{ id: 'cave_troll', name: { en: 'Cave Troll', vi: 'Troll Hang' }, acts: [2], ai: 'charger',
hpMult: 2.2, dmgMult: 1.5, speed: 1.9, radius: 0.46, range: 1.2, cd: 1.6, xpMult: 2.2,
chargeRange: 7,
palette: { body: '#5e6a56', accent: '#a8b89a' }, shape: 'troll' },
{ id: 'bog_witch', name: { en: 'Bog Witch', vi: 'Phù Thủy Đầm Lầy' }, acts: [2], ai: 'caster',
hpMult: 0.95, dmgMult: 1.2, speed: 2.0, radius: 0.32, range: 6.0, cd: 2.0, xpMult: 1.7,
proj: { kind: 'venomorb', speed: 6.0, color: '#9adf3a', elem: 'pois', pool: true },
special: 'blinkAway',
palette: { body: '#3e5a2e', accent: '#b8e86a' }, shape: 'cultist' },
{ id: 'acid_spitter', name: { en: 'Acid Spitter', vi: 'Phun Axit' }, acts: [2], ai: 'ranged',
hpMult: 1.0, dmgMult: 1.05, speed: 2.3, radius: 0.35, range: 5.5, cd: 1.5, xpMult: 1.35,
proj: { kind: 'acid', speed: 7.5, color: '#d8f04a', elem: 'pois' },
palette: { body: '#6a7a2a', accent: '#e8f56a' }, shape: 'zombie' },
{ id: 'mushroom_cap', name: { en: 'Spore Cap', vi: 'Nấm Bào Tử' }, acts: [2], ai: 'melee',
hpMult: 1.4, dmgMult: 0.9, speed: 1.6, radius: 0.38, range: 1.0, cd: 1.4, xpMult: 1.4,
explodeOnDeath: { elem: 'pois', radius: 2.2, dmgMult: 1.4 },
palette: { body: '#8a5a3a', accent: '#c88a5a' }, shape: 'shroom_big' },
/* ---- ACT IV : Hell's Threshold ---- */
{ id: 'demon_imp', name: { en: 'Demon Imp', vi: 'Yêu Tinh' }, acts: [3], ai: 'swarm',
hpMult: 0.7, dmgMult: 0.95, speed: 3.8, radius: 0.27, range: 0.9, cd: 0.8, xpMult: 1.1,
elem: 'fire',
palette: { body: '#a83a2a', accent: '#ffb03a' }, shape: 'imp' },
{ id: 'hell_knight', name: { en: 'Hell Knight', vi: 'Kỵ Sĩ Địa Ngục' }, acts: [3], ai: 'melee',
hpMult: 1.9, dmgMult: 1.35, speed: 2.5, radius: 0.38, range: 1.05, cd: 1.1, xpMult: 1.9,
palette: { body: '#3a3038', accent: '#c22a2a' }, shape: 'knight' },
{ id: 'flame_archer', name: { en: 'Flame Archer', vi: 'Cung Thủ Lửa' }, acts: [3], ai: 'ranged',
hpMult: 0.9, dmgMult: 1.2, speed: 2.6, radius: 0.31, range: 7.0, cd: 1.5, xpMult: 1.5,
proj: { kind: 'firearrow', speed: 9.0, color: '#ff7a3a', elem: 'fire' },
palette: { body: '#5e2a20', accent: '#ff9a3a' }, shape: 'skeleton_bow' },
{ id: 'succubus', name: { en: 'Succubus', vi: 'Ác Nữ' }, acts: [3], ai: 'caster',
hpMult: 1.0, dmgMult: 1.35, speed: 2.4, radius: 0.32, range: 6.5, cd: 1.9, xpMult: 1.9,
proj: { kind: 'fireball', speed: 7.0, color: '#ff5a2a', elem: 'fire', aoe: 1.2 },
special: 'blinkAway',
palette: { body: '#7a2a4e', accent: '#ffb0c8' }, shape: 'cultist' },
{ id: 'pit_lord', name: { en: 'Pit Lord', vi: 'Chúa Vực' }, acts: [3], ai: 'charger',
hpMult: 2.6, dmgMult: 1.65, speed: 1.8, radius: 0.5, range: 1.25, cd: 1.5, xpMult: 2.6,
chargeRange: 8, elem: 'fire',
palette: { body: '#5a1e18', accent: '#ff6a2a' }, shape: 'troll' },
{ id: 'void_walker', name: { en: 'Void Walker', vi: 'Bước Qua Hư Không' }, acts: [3], ai: 'melee',
hpMult: 1.2, dmgMult: 1.4, speed: 2.9, radius: 0.33, range: 1.0, cd: 1.0, xpMult: 1.8,
special: 'blinkTo',
palette: { body: '#2a2440', accent: '#8a6aff' }, shape: 'wraith' },
];
const SPECIES_MAP = {};
for (const s of SPECIES) SPECIES_MAP[s.id] = s;
/* ---------------- elite (champion) affixes ---------------- */
const ELITE_AFFIXES = [
{ id: 'extrafast', name: { en: 'Extra Fast', vi: 'Siêu Nhanh' }, color: '#ffd24a',
apply: m => { m.speed *= 1.4; } },
{ id: 'extrastrong', name: { en: 'Extra Strong', vi: 'Siêu Mạnh' }, color: '#ff5a4a',
apply: m => { m.dmg *= 1.42; } },
{ id: 'tough', name: { en: 'Ironback', vi: 'Lưng Thép' }, color: '#9ab0c8',
apply: m => { m.maxHp *= 1.6; m.hp = m.maxHp; } },
{ id: 'fireench', name: { en: 'Fire Enchanted', vi: 'Phép Hỏa' }, color: '#ff8a3a',
apply: m => { m.elem = 'fire'; m.deathNova = { elem: 'fire', radius: 2.4 }; } },
{ id: 'coldench', name: { en: 'Cold Enchanted', vi: 'Phép Băng' }, color: '#6ab8ff',
apply: m => { m.elem = 'cold'; m.chillOnHit = true; m.deathNova = { elem: 'cold', radius: 2.4, chill: true }; } },
{ id: 'litench', name: { en: 'Lightning Enchanted', vi: 'Phép Lôi' }, color: '#ffe86a',
apply: m => { m.chainOnHitChance = 0.35; } },
{ id: 'vampiric', name: { en: 'Vampiric', vi: 'Hút Máu' }, color: '#c83a6a',
apply: m => { m.lifestealPct = 0.12; } },
{ id: 'regen', name: { en: 'Regenerator', vi: 'Tái Tạo' }, color: '#6ade8a',
apply: m => { m.regenPct = 0.02; } },
{ id: 'teleport', name: { en: 'Teleporter', vi: 'Dịch Chuyển' }, color: '#b08aff',
apply: m => { m.special = 'blinkTo'; } },
{ id: 'fanatic', name: { en: 'Fanatic', vi: 'Cuồng Tín' }, color: '#ffa04a',
apply: m => { m.cdMult = 0.6; } },
];
function rollEliteAffixes() {
const pool = [...ELITE_AFFIXES];
const out = [];
const n = Math.random() < 0.42 ? 2 : 1;
for (let i = 0; i < n && pool.length; i++) {
out.push(pool.splice((Math.random() * pool.length) | 0, 1)[0]);
}
return out;
}
/* ---------------- bosses ---------------- */
const BOSSES = [
{ id: 'butcher', name: { en: 'The Flesh Butcher', vi: 'Đồ Tể Xác Thịt' }, act: 0,
base: 'zombie', size: 1.9, hpMult: 1.0, dmgMult: 1.0, speed: 2.3, radius: 0.62,
palette: { body: '#8a4a3a', accent: '#d84a2a' }, shape: 'butcher',
attacks: ['cleaveArc', 'chargeAt', 'summonFallen', 'frenzy'],
intro: { en: 'Fresh meat!', vi: 'Thịt tươi đây!' } },
{ id: 'boneking', name: { en: 'The Bone King', vi: 'Vua Xương Khô' }, act: 1,
base: 'skeleton', size: 1.8, hpMult: 1.05, dmgMult: 1.0, speed: 2.2, radius: 0.58,
palette: { body: '#e0d8c0', accent: '#5a8ac8' }, shape: 'boneking',
attacks: ['boneSpearVolley', 'summonSkeletons', 'curseRing', 'blinkAway'],
intro: { en: 'My legions are endless...', vi: 'Quân đội của ta là vô tận...' } },
{ id: 'spiderqueen', name: { en: 'Aranea, Spider Queen', vi: 'Aranea, Nữ Hoàng Nhện' }, act: 2,
base: 'tomb_spider', size: 2.0, hpMult: 1.1, dmgMult: 1.05, speed: 2.4, radius: 0.64,
palette: { body: '#2e3a24', accent: '#a8e84a' }, shape: 'queenspider',
attacks: ['poisonPools', 'webVolley', 'spawnSpiderlings', 'lunge'],
intro: { en: 'You will make a fine broodmother.', vi: 'Bạn sẽ làm mẫu vật nuôi tốt đấy.' } },
{ id: 'terrorlord', name: { en: "Malgor, Lord of Terror", vi: 'Malgor, Chúa Tể Kinh Hoàng' }, act: 3,
base: 'pit_lord', size: 2.3, hpMult: 1.35, dmgMult: 1.1, speed: 2.2, radius: 0.72,
palette: { body: '#6e1a10', accent: '#ffb02a' }, shape: 'terrorlord',
attacks: ['fireNovaRing', 'lightningSpiral', 'meteorRain', 'chargeAt', 'enrage'],
intro: { en: 'I AM THE SIN OF THIS WORLD!', vi: 'TA LÀ TỘI LỖI CỦA THẾ GIAN NÀY!' } },
];
const BOSS_MAP = {};
for (const b of BOSSES) BOSS_MAP[b.id] = b;
/* ---------------- stat rolling ---------------- */
/**
* Build concrete combat stats for a monster instance.
* Returns plain object used by entities.Monster.
*/
function buildMonster(speciesId, mlvl, opts = {}) {
const sp = typeof speciesId === 'string' ? SPECIES_MAP[speciesId] : speciesId;
if (!sp) throw new Error('unknown species ' + speciesId);
const BAL = D2.BAL;
let eliteAffixes = [];
if (opts.elite) eliteAffixes = rollEliteAffixes();
const boss = !!opts.bossDef;
const bd = opts.bossDef || null;
const m = {
speciesId: sp.id, def: sp,
level: mlvl,
isElite: eliteAffixes.length > 0,
isBoss: boss,
bossDef: bd,
name: boss ? (bd.name[lang()] || bd.name.en) : (sp.name[lang()] || sp.name.en),
shape: bd ? bd.shape : sp.shape,
palette: bd ? bd.palette : sp.palette,
maxHp: Math.round(BAL.mHp(mlvl) * sp.hpMult * (bd ? bd.hpMult : 1)),
dmg: BAL.mDmg(mlvl) * sp.dmgMult,
speed: sp.speed,
radius: sp.radius * (bd ? bd.size : 1),
attackRange: sp.range,
attackCd: sp.cd,
cdMult: 1,
xpReward: Math.round(BAL.mXp(mlvl) * sp.xpMult),
elem: sp.elem || null,
proj: sp.proj || null,
summon: sp.summon || null,
special: sp.special || null,
chargeRange: sp.chargeRange || 0,
explodeOnDeath: sp.explodeOnDeath || null,
corpsePoison: !!sp.corpsePoison,
chillOnHit: !!sp.chillOnHit,
resists: { fire: 0, cold: 0, lit: 0, pois: 0 },
};
if (bd && bd.attacks) m.attacks = bd.attacks.slice();
if (m.isElite) {
m.maxHp = Math.round(m.maxHp * BAL.eliteHpMult);
m.dmg *= BAL.eliteDmgMult;
m.xpReward = Math.round(m.xpReward * BAL.eliteXpMult);
m.radius *= BAL.eliteSizeMult;
m.eliteColor = eliteAffixes[0].color;
m.eliteName = eliteAffixes.map(a => a.name[lang()] || a.name.en).join(' ');
for (const af of eliteAffixes) af.apply(m);
}
if (boss) {
m.maxHp = Math.round(m.maxHp * BAL.bossHpMult);
m.dmg *= BAL.bossDmgMult;
m.xpReward = Math.round(m.xpReward * BAL.bossXpMult);
m.radius = sp.radius * bd.size;
m.speed = bd.speed || m.speed;
m.cdMult = 1.15;
}
m.hp = m.maxHp;
return m;
}
/** weighted random species valid for act */
function rollSpeciesForAct(actIdx) {
const pool = SPECIES.filter(s => s.acts.includes(actIdx));
if (!pool.length) return SPECIES[0];
return weighted(pool.map(s => ({ v: s, w: s.ai === 'melee' ? 2.2 : 1 })));
}
function weighted(entries) {
let total = 0;
for (const e of entries) total += e.w;
let r = Math.random() * total;
for (const e of entries) { r -= e.w; if (r <= 0) return e.v; }
return entries[entries.length - 1].v;
}
function lang() { return (D2.i18n && D2.i18n.getLang()) || 'en'; }
D2.Monsters = {
SPECIES, SPECIES_MAP, ELITE_AFFIXES, BOSSES, BOSS_MAP,
buildMonster, rollSpeciesForAct, rollEliteAffixes,
};
})(window.D2);
js/data/skills.js
+227
View File
@@ -0,0 +1,227 @@
/* ============================================================
* Diablo2D — skills.js : class skill trees (data-driven)
* Engine implements each `castType`; params scale with rank.
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const MAX_RANK = D2.BAL.skillMaxRank;
function L(o) { return o[(D2.i18n && D2.i18n.getLang()) || 'en'] || o.en; }
/* ---------------- CRUSADER ---------------- */
const crusader = [
/* Zeal */
{ id: 'cleave', branch: 'zeal', tier: 0, type: 'active', maxRank: MAX_RANK, icon: 'cleave',
name: { en: 'Cleave', vi: 'Chém Rộng' },
desc: r => ({ en: `Sweeping strike hits all enemies in front for ${100 + 20 * r}% weapon damage.`, vi: `Vung chém trúng mọi kẻ địch phía trước với ${100 + 20 * r}% sát thương vũ khí.` }),
manaCost: () => 0, cooldown: 0.42,
castType: 'meleeArc', params: r => ({ arcDeg: 160, range: 1.65, dmgPct: 100 + 20 * r }) },
{ id: 'whirlwind', branch: 'zeal', tier: 1, type: 'active', maxRank: MAX_RANK, icon: 'whirlwind',
name: { en: 'Whirlwind', vi: 'Vòng Xoáy' },
desc: r => ({ en: `Spin for 1s, shredding nearby enemies for ${55 + 11 * r}% weapon damage per tick. You may move while spinning.`, vi: `Xoay trong 1s, xé nát kẻ địch gần với ${55 + 11 * r}% ST vũ khí mỗi nhịp. Di chuyển được khi xoay.` }),
manaCost: r => 8 + r, cooldown: 5.5,
castType: 'whirlwind', params: r => ({ range: 1.8, dmgPct: 55 + 11 * r, duration: 1.0 }) },
{ id: 'consecrate', branch: 'zeal', tier: 2, type: 'active', maxRank: MAX_RANK, icon: 'consecrate',
name: { en: 'Consecration', vi: 'Thánh Hóa' },
desc: r => ({ en: `Sanctify the ground at your cursor. Deals ${140 + 34 * r}% weapon damage over 3s to enemies within it.`, vi: `Thánh hóa mặt đất tại con trỏ. Gây ${140 + 34 * r}% ST vũ khí trong 3s lên kẻ địch trong vùng.` }),
manaCost: r => 14 + 2 * r, cooldown: 8,
castType: 'groundAoE', params: r => ({ radius: 2.6, delay: 0.25, duration: 3, dmgPct: 140 + 34 * r, elem: 'holy' }) },
/* Wrath */
{ id: 'charge', branch: 'wrath', tier: 0, type: 'active', maxRank: MAX_RANK, icon: 'charge',
name: { en: 'Charge', vi: 'Xung Phong' },
desc: r => ({ en: `Dash forward, damaging enemies in your path for ${130 + 26 * r}% weapon damage and stunning them ${0.5 + 0.14 * r}s.`, vi: `Lao về phía trước, gây ${130 + 26 * r}% ST vũ khí và làm choáng ${0.5 + 0.14 * r}s.` }),
manaCost: () => 6, cooldown: 6,
castType: 'dash', params: r => ({ distance: 5.2, speed: 16, dmgPct: 130 + 26 * r, stun: 0.5 + 0.14 * r }) },
{ id: 'warcry', branch: 'wrath', tier: 1, type: 'active', maxRank: MAX_RANK, icon: 'warcry',
name: { en: 'War Cry', vi: 'Chiến Khúc' },
desc: r => ({ en: `Roar: +${15 + 5 * r}% damage and +${12 + 6 * r}% armor for 8s.`, vi: `Gầm thét: +${15 + 5 * r}% sát thương và +${12 + 6 * r}% giáp trong 8s.` }),
manaCost: r => 10 + r, cooldown: 18,
castType: 'buffSelf', params: r => ({ dur: 8, mods: { dmgPct: 15 + 5 * r, armorPct: 12 + 6 * r }, icon: 'warcry', name: { en: 'War Cry', vi: 'Chiến Khúc' } }) },
{ id: 'seismic', branch: 'wrath', tier: 2, type: 'active', maxRank: MAX_RANK, icon: 'seismic',
name: { en: 'Seismic Slam', vi: 'Trấn Địa Kích' },
desc: r => ({ en: `Slam the earth: cone shockwave deals ${170 + 38 * r}% weapon damage, knocks back and stuns ${0.8 + 0.2 * r}s.`, vi: `Đập đất: sóng xung kích hình nón gây ${170 + 38 * r}% ST vũ khí, hất văng và choáng ${0.8 + 0.2 * r}s.` }),
manaCost: r => 16 + 3 * r, cooldown: 9,
castType: 'cone', params: r => ({ arcDeg: 70, range: 4.6, dmgPct: 170 + 38 * r, knockback: 2.4, stun: 0.8 + 0.2 * r }) },
/* Bulwark (passives) */
{ id: 'ironskin', branch: 'bulwark', tier: 0, type: 'passive', maxRank: MAX_RANK, icon: 'ironskin',
name: { en: 'Iron Skin', vi: 'Da Thép' },
desc: r => ({ en: `+${6 + 4 * r}% total armor.`, vi: `+${6 + 4 * r}% tổng giáp.` }),
mods: r => ({ armorPct: 6 + 4 * r }) },
{ id: 'renewal', branch: 'bulwark', tier: 1, type: 'passive', maxRank: MAX_RANK, icon: 'renewal',
name: { en: 'Renewal', vi: 'Tái Sinh' },
desc: r => ({ en: `Regenerate ${(0.8 + 0.7 * r).toFixed(1)}% max life per second.`, vi: `Hồi ${(0.8 + 0.7 * r).toFixed(1)}% máu tối đa mỗi giây.` }),
mods: r => ({ regenHpPct: 0.8 + 0.7 * r }) },
{ id: 'laststand', branch: 'bulwark', tier: 2, type: 'passive', maxRank: MAX_RANK, icon: 'laststand',
name: { en: 'Last Stand', vi: 'Đường Lui Cuối' },
desc: r => ({ en: `Below 35% life: take ${8 + 4 * r}% less damage and deal +${10 + 5 * r}% more.`, vi: `Dưới 35% máu: nhận ít hơn ${8 + 4 * r}% sát thương và gây thêm +${10 + 5 * r}%.` }),
mods: r => ({ lowLifeDR: 8 + 4 * r, lowLifeDmg: 10 + 5 * r }) },
];
/* ---------------- RANGER ---------------- */
const ranger = [
/* Marksmanship */
{ id: 'multishot', branch: 'mark', tier: 0, type: 'active', maxRank: MAX_RANK, icon: 'multishot',
name: { en: 'Multishot', vi: 'Liên Thanh' },
desc: r => ({ en: `Fire ${4 + Math.floor((r - 1) / 2)} arrows in a wide arc for ${85 + 17 * r}% weapon damage each.`, vi: `Bắn ${4 + Math.floor((r - 1) / 2)} mũi tên hình quạt, mỗi mũi ${85 + 17 * r}% ST vũ khí.` }),
manaCost: r => 8 + r, cooldown: 0.9,
castType: 'projSpread', params: r => ({ count: 4 + Math.floor((r - 1) / 2), spreadDeg: 42, dmgPct: 85 + 17 * r, speed: 11 }) },
{ id: 'piercingbolt', branch: 'mark', tier: 1, type: 'active', maxRank: MAX_RANK, icon: 'piercingbolt',
name: { en: 'Piercing Bolt', vi: 'Mũi Tên Xuyên Phá' },
desc: r => ({ en: `A heavy bolt pierces all enemies in a line for ${190 + 42 * r}% weapon damage.`, vi: `Một mũi tên nặng xuyên qua mọi kẻ địch trên đường đi, gây ${190 + 42 * r}% ST vũ khí.` }),
manaCost: r => 12 + 2 * r, cooldown: 4.5,
castType: 'projSpread', params: r => ({ count: 1, spreadDeg: 0, dmgPct: 190 + 42 * r, speed: 15, pierce: true, size: 1.4 }) },
{ id: 'arrowstorm', branch: 'mark', tier: 2, type: 'active', maxRank: MAX_RANK, icon: 'arrowstorm',
name: { en: 'Arrow Storm', vi: 'Mưa Mũi Tên' },
desc: r => ({ en: `Rain ${3 + Math.floor(r / 2)} waves of arrows on an area, each dealing ${70 + 15 * r}% weapon damage.`, vi: `Gây ${3 + Math.floor(r / 2)} đợt mưa tên lên một vùng, mỗi đợt ${70 + 15 * r}% ST vũ khí.` }),
manaCost: r => 18 + 3 * r, cooldown: 11,
castType: 'volleyArea', params: r => ({ waves: 3 + Math.floor(r / 2), waveDelay: 0.4, radius: 2.4, dmgPct: 70 + 15 * r }) },
/* Shadowcraft */
{ id: 'shadowstep', branch: 'shadow', tier: 0, type: 'active', maxRank: MAX_RANK, icon: 'shadowstep',
name: { en: 'Shadow Step', vi: 'Bóng Đêm Bước' },
desc: r => ({ en: `Blink toward the cursor. Your next attack within 3s is a guaranteed critical (+${50 + 25 * r}% crit damage).`, vi: `Dịch chuyển tới con trỏ. Đòn đánh tiếp theo trong 3s chắc chắn chí mạng (+${50 + 25 * r}% ST chí mạng).` }),
manaCost: () => 10, cooldown: 7,
castType: 'blink', params: r => ({ range: 5.5, guaranteedCritDur: 3, bonusCritDmg: 50 + 25 * r }) },
{ id: 'fanofknives', branch: 'shadow', tier: 1, type: 'active', maxRank: MAX_RANK, icon: 'fanofknives',
name: { en: 'Fan of Knives', vi: 'Quạt Dao Găm' },
desc: r => ({ en: `Hurl ${8 + 2 * r} knives in all directions for ${95 + 19 * r}% weapon damage, causing bleeding.`, vi: `Phóng ${8 + 2 * r} dao găm ra mọi hướng, gây ${95 + 19 * r}% ST vũ khí và làm chảy máu.` }),
manaCost: r => 14 + 2 * r, cooldown: 8,
castType: 'novaProj', params: r => ({ count: 8 + 2 * r, dmgPct: 95 + 19 * r, speed: 9, bleed: true }) },
{ id: 'smokeveil', branch: 'shadow', tier: 2, type: 'active', maxRank: MAX_RANK, icon: 'smokeveil',
name: { en: 'Smoke Veil', vi: 'Màn Khói' },
desc: r => ({ en: `Vanish into smoke: +${25 + 7 * r}% dodge for 5s. Enemies lose track of you.`, vi: `Tan vào khói: +${25 + 7 * r}% né tránh trong 5s. Kẻ địch mất dấu bạn.` }),
manaCost: r => 12 + 2 * r, cooldown: 16,
castType: 'buffSelf', params: r => ({ dur: 5, mods: { dodgePct: 25 + 7 * r }, icon: 'smokeveil', name: { en: 'Smoke Veil', vi: 'Màn Khói' } }) },
/* Poacher (passives) */
{ id: 'predator', branch: 'poach', tier: 0, type: 'passive', maxRank: MAX_RANK, icon: 'predator',
name: { en: 'Predator Instinct', vi: 'Bản Năng Thợ Săn' },
desc: r => ({ en: `+${8 + 6 * r}% critical damage.`, vi: `+${8 + 6 * r}% sát thương chí mạng.` }),
mods: r => ({ critDmgPct: 8 + 6 * r }) },
{ id: 'bleedingedge', branch: 'poach', tier: 1, type: 'passive', maxRank: MAX_RANK, icon: 'bleedingedge',
name: { en: 'Bleeding Edge', vi: 'Lưỡi Chảy Máu' },
desc: r => ({ en: `Attacks cause bleeding: ${10 + 10 * r}% weapon damage over 3s.`, vi: `Đòn đánh gây chảy máu: ${10 + 10 * r}% ST vũ khí trong 3s.` }),
mods: r => ({ bleedOnHitPct: 10 + 10 * r }) },
{ id: 'swiftvantage', branch: 'poach', tier: 2, type: 'passive', maxRank: MAX_RANK, icon: 'swiftvantage',
name: { en: 'Swift Vantage', vi: 'Lợi Thế Thần Tốc' },
desc: r => ({ en: `+${4 + 2 * r}% move speed and +${3 + 2 * r}% attack speed.`, vi: `+${4 + 2 * r}% tốc chạy và +${3 + 2 * r}% tốc đánh.` }),
mods: r => ({ moveSpeedPct: 4 + 2 * r, attackSpeedPct: 3 + 2 * r }) },
];
/* ---------------- SORCERESS ---------------- */
const sorceress = [
/* Pyromancy */
{ id: 'firebolt', branch: 'pyro', tier: 0, type: 'active', maxRank: MAX_RANK, icon: 'firebolt',
name: { en: 'Fire Bolt', vi: 'Tiểu Hỏa' },
desc: r => ({ en: `Hurl a bolt of fire for ${135 + 32 * r}% weapon damage. Cheap and reliable.`, vi: `Phóng một mũi lửa gây ${135 + 32 * r}% ST vũ khí. Rẻ và đáng tin.` }),
manaCost: () => 4, cooldown: 0.55,
castType: 'projSpread', params: r => ({ count: 1, spreadDeg: 0, dmgPct: 135 + 32 * r, speed: 10, elem: 'fire', size: 1.15 }) },
{ id: 'meteor', branch: 'pyro', tier: 1, type: 'active', maxRank: MAX_RANK, icon: 'meteor',
name: { en: 'Meteor', vi: 'Thiên Thạch' },
desc: r => ({ en: `Call a meteor to crash after 0.8s: ${260 + 58 * r}% weapon damage in a large area, leaving burning ground.`, vi: `Triệu hồi thiên thạch rơi sau 0.8s: ${260 + 58 * r}% ST vũ khí vùng lớn, để lại mặt đất cháy.` }),
manaCost: r => 22 + 4 * r, cooldown: 9,
castType: 'meteor', params: r => ({ radius: 2.6, delay: 0.8, dmgPct: 260 + 58 * r, burnGround: 2.5 }) },
{ id: 'flamewave', branch: 'pyro', tier: 2, type: 'active', maxRank: MAX_RANK, icon: 'flamewave',
name: { en: 'Flame Wave', vi: 'Sóng Lửa' },
desc: r => ({ en: `Erupt in a ring of fire: ${200 + 44 * r}% weapon damage around you and ignite enemies.`, vi: `Bùng nổ vòng lửa quanh bạn: ${200 + 44 * r}% ST vũ khí và thiêu rụi kẻ địch.` }),
manaCost: r => 20 + 4 * r, cooldown: 7,
castType: 'nova', params: r => ({ radius: 3.4, dmgPct: 200 + 44 * r, elem: 'fire', ignite: true }) },
/* Cryomancy */
{ id: 'iceshards', branch: 'cryo', tier: 0, type: 'active', maxRank: MAX_RANK, icon: 'iceshards',
name: { en: 'Ice Shards', vi: 'Mảnh Băng' },
desc: r => ({ en: `Launch ${5} piercing shards for ${90 + 20 * r}% weapon damage each, chilling enemies.`, vi: `Phóng 5 mảnh băng xuyên phá, mỗi mảnh ${90 + 20 * r}% ST vũ khí, làm lạnh kẻ địch.` }),
manaCost: r => 9 + 2 * r, cooldown: 1.4,
castType: 'projSpread', params: r => ({ count: 5, spreadDeg: 36, dmgPct: 90 + 20 * r, speed: 9.5, elem: 'cold', pierce: true, slow: 0.35, slowDur: 1.8 }) },
{ id: 'frostnova', branch: 'cryo', tier: 1, type: 'active', maxRank: MAX_RANK, icon: 'frostnova',
name: { en: 'Frost Nova', vi: 'Tinh Băng' },
desc: r => ({ en: `Freeze everything near you for ${1.0 + 0.22 * r}s and deal ${110 + 24 * r}% weapon damage.`, vi: `Đóng băng mọi thứ gần bạn ${1.0 + 0.22 * r}s và gây ${110 + 24 * r}% ST vũ khí.` }),
manaCost: r => 18 + 3 * r, cooldown: 8,
castType: 'nova', params: r => ({ radius: 3.0, dmgPct: 110 + 24 * r, elem: 'cold', freeze: 1.0 + 0.22 * r }) },
{ id: 'blizzard', branch: 'cryo', tier: 2, type: 'active', maxRank: MAX_RANK, icon: 'blizzard',
name: { en: 'Blizzard', vi: 'Bão Tuyết' },
desc: r => ({ en: `A storm batters an area for 3s: ${90 + 20 * r}% weapon damage per second, heavily chilled.`, vi: `Bão tuyết cuồn cuộn 3s: ${90 + 20 * r}% ST vũ khí mỗi giây, làm lạnh mạnh.` }),
manaCost: r => 24 + 5 * r, cooldown: 12,
castType: 'groundAoE', params: r => ({ radius: 2.8, delay: 0.3, duration: 3, dmgPct: 90 + 20 * r, elem: 'cold', slow: 0.5, slowDur: 1.2 }) },
/* Stormweaving */
{ id: 'chainlightning', branch: 'storm', tier: 0, type: 'active', maxRank: MAX_RANK, icon: 'chainlightning',
name: { en: 'Chain Lightning', vi: 'Lôi Điện Xích' },
desc: r => ({ en: `Lightning arcs between ${2 + r} enemies for ${150 + 33 * r}% weapon damage.`, vi: `Sét lan truyền giữa ${2 + r} kẻ địch, gây ${150 + 33 * r}% ST vũ khí.` }),
manaCost: r => 14 + 2 * r, cooldown: 2.6,
castType: 'chainLightning', params: r => ({ jumps: 2 + r, range: 5.5, dmgPct: 150 + 33 * r }) },
{ id: 'teleport', branch: 'storm', tier: 1, type: 'active', maxRank: MAX_RANK, icon: 'teleport',
name: { en: 'Teleport', vi: 'Di Chuyển' },
desc: r => ({ en: `Instantly teleport to the cursor location (${4.5 + 0.5 * r} tile range).`, vi: `Dịch chuyển tức thời đến vị trí con trỏ (${(4.5 + 0.5 * r).toFixed(1)} ô).` }),
manaCost: r => 12 + r, cooldown: 4.5,
castType: 'blink', params: r => ({ range: 4.5 + 0.5 * r }) },
{ id: 'arcaneecho', branch: 'storm', tier: 2, type: 'passive', maxRank: MAX_RANK, icon: 'arcaneecho',
name: { en: 'Arcane Echo', vi: 'Vọng Âm Huyền Thuật' },
desc: r => ({ en: `-(${3 + 3 * r})% cooldowns and +${0.3 + 0.25 * r} mana per second.`, vi: `-(giảm) ${3 + 3 * r}% thời gian hồi kỹ năng và +${(0.3 + 0.25 * r).toFixed(2)} mana/giây.` }),
mods: r => ({ cdrPct: 3 + 3 * r, manaRegenFlat: 0.3 + 0.25 * r }) },
];
const CLASSES = {
crusader: {
id: 'crusader',
name: { en: 'Crusader', vi: 'Thập Tự Quân' },
branches: [
{ id: 'zeal', name: { en: 'Zeal', vi: 'Cuồng Tín' } },
{ id: 'wrath', name: { en: 'Wrath', vi: 'Thịnh Nộ' } },
{ id: 'bulwark', name: { en: 'Bulwark', vi: 'Bức Tường Thép' } },
],
skills: crusader,
baseMods: { str: 8, dex: 4, vit: 8, ene: 3 },
weaponKind: 'melee',
palette: { body: '#8a8f9c', accent: '#c8a35a', cloth: '#5a2a2a' },
basic: { castType: 'meleeArc', params: { arcDeg: 120, range: 1.45, dmgPct: 100 } },
descKey: 'class.crusader.desc',
},
ranger: {
id: 'ranger',
name: { en: 'Shadow Huntress', vi: 'Nữ Thợ Săn Bóng Đêm' },
branches: [
{ id: 'mark', name: { en: 'Marksmanship', vi: 'Bách Bộ Xuyên Dương' } },
{ id: 'shadow', name: { en: 'Shadowcraft', vi: 'Nghệ Thuật Bóng Tối' } },
{ id: 'poach', name: { en: 'Poacher', vi: 'Thợ Săn Mồi' } },
],
skills: ranger,
baseMods: { str: 4, dex: 9, vit: 5, ene: 5 },
weaponKind: 'ranged',
palette: { body: '#3e5a46', accent: '#8adf5a', cloth: '#2a3a30' },
basic: { castType: 'projSpread', params: { count: 1, spreadDeg: 0, dmgPct: 100, speed: 12 } },
descKey: 'class.crusader.desc'.replace('crusader', 'ranger'),
},
sorceress: {
id: 'sorceress',
name: { en: 'Sorceress', vi: 'Pháp Sư' },
branches: [
{ id: 'pyro', name: { en: 'Pyromancy', vi: 'Hỏa Thuật' } },
{ id: 'cryo', name: { en: 'Cryomancy', vi: 'Băng Thuật' } },
{ id: 'storm', name: { en: 'Stormweaving', vi: 'Lôi Pháp' } },
],
skills: sorceress,
baseMods: { str: 3, dex: 4, vit: 5, ene: 10 },
weaponKind: 'cast',
palette: { body: '#5e3a72', accent: '#c86aff', cloth: '#3a2450' },
basic: { castType: 'projSpread', params: { count: 1, spreadDeg: 0, dmgPct: 100, speed: 9, size: 1.2 } },
descKey: 'class.sorceress.desc',
},
};
/** all skills of a class flattened, with tier unlock level attached */
function skillsFor(clsId) {
const c = CLASSES[clsId];
return c.skills.map(s => Object.assign({}, s, { unlockLevel: D2.BAL.tierUnlockLevels[s.tier] || 1 }));
}
function findSkill(clsId, skillId) {
return CLASSES[clsId].skills.find(s => s.id === skillId);
}
D2.Skills = { CLASSES, skillsFor, findSkill, MAX_RANK };
})(window.D2);
js/game/ai.js
+609
View File
@@ -0,0 +1,609 @@
/* ============================================================
* Diablo2D — ai.js : monster behavior trees + boss scripts
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
let astarBudget = 0; // global per-frame budget for pathfinding
const rnd = Math.random;
function resetFrame() { astarBudget = 6; }
/* ---------------- main entry ---------------- */
function updateMonster(game, m, dt) {
if (m.dead) return;
/* statuses */
if (m.frozen > 0) {
m.frozen -= dt;
m.moving = false;
D2.combat.updateDots(game, m, dt, false);
return;
}
D2.combat.updateDots(game, m, dt, false);
/* regen elite */
if (m.regenPct && m.hp < m.maxHp) {
m.regenAcc += dt;
if (m.regenAcc >= 1) { m.hp = Math.min(m.maxHp, m.hp + m.maxHp * m.regenPct); m.regenAcc -= 1; }
}
const p = game.player;
if (!p || p.dead) { m.moving = false; return; }
const dx = p.x - m.x, dy = p.y - m.y;
const dist = Math.sqrt(dx * dx + dy * dy);
m.distToPlayer = dist;
/* aggro acquisition */
m.aggroCheckT = (m.aggroCheckT || 0) - dt;
if (!m.aggro && m.aggroCheckT <= 0) {
m.aggroCheckT = 0.35;
if (dist < D2.BAL.aggroRange &&
D2.path.hasLOS((x, y) => game.world.transparent(x, y),
m.x | 0, m.y | 0, p.x | 0, p.y | 0)) {
m.aggro = true;
if (m.isBoss && !m.introDone) bossIntro(game, m);
else if (!m.isBoss && rnd() < 0.25) game.sfx('die', { vol: 0.08 });
}
}
/* leash */
if (m.aggro && !m.isBoss) {
const homeDist = Math.hypot(m.x - m.homeX, m.y - m.homeY);
if (homeDist > D2.BAL.deaggroLeash) {
m.aggro = false;
m.hp = Math.min(m.maxHp, m.hp + m.maxHp * 0.3);
m.x = m.homeX; m.y = m.homeY;
}
}
/* cooldowns */
m.cdT -= dt;
m.specialCd -= dt;
if (m.attackAnim > 0) m.attackAnim -= dt;
if (m.hurtFlash > 0) m.hurtFlash -= dt;
if (m.chillT > 0) { m.chillT -= dt; if (m.chillT <= 0) m.chillSlow = 0; }
const speed = m.speed * (1 - (m.chillSlow || 0)) * (m.speedBuff || 1);
/* boss script takes priority */
if (m.isBoss) { bossUpdate(game, m, dt, dist, dx, dy); return; }
switch (m.def.ai) {
case 'melee': case 'swarm': meleeBrain(game, m, dt, dist, dx, dy, speed); break;
case 'flyer': flyerBrain(game, m, dt, dist, dx, dy, speed); break;
case 'ranged': rangedBrain(game, m, dt, dist, dx, dy, speed); break;
case 'caster': casterBrain(game, m, dt, dist, dx, dy, speed); break;
case 'summoner': summonerBrain(game, m, dt, dist, dx, dy, speed); break;
case 'charger': chargerBrain(game, m, dt, dist, dx, dy, speed); break;
default: meleeBrain(game, m, dt, dist, dx, dy, speed);
}
separation(game, m, dt);
}
/* ---------------- shared movement ---------------- */
function steer(game, m, dx, dy, speed, dt, ignoreWalls = false) {
const d = Math.hypot(dx, dy) || 1;
let vx = dx / d, vy = dy / d;
if (!ignoreWalls) {
/* try direct; if blocked ahead use pathfinding fallback */
const probeX = m.x + vx * 0.5, probeY = m.y + vy * 0.5;
if (!game.world.isWalkable(probeX, probeY)) {
if (astarBudget > 0) {
astarBudget--;
m.pathT -= 0.6; // force refresh
const path = D2.path.find(
(x, y) => game.world.isWalkable(x, y),
game.world.w, game.world.h,
m.x | 0, m.y | 0, (m.x + vx * 4) | 0, (m.y + vy * 4) | 0, 900);
m.path = path;
m.pathIdx = 0;
}
if (m.path && m.pathIdx < m.path.length) {
const node = m.path[m.pathIdx];
const ndx = node.x + 0.5 - m.x, ndy = node.y + 0.5 - m.y;
const nd = Math.hypot(ndx, ndy) || 1;
if (nd < 0.4) m.pathIdx++;
else { vx = ndx / nd; vy = ndy / nd; }
} else {
/* slide along wall */
const tx = -vy, ty = vx;
vx = tx; vy = ty;
}
}
}
D2.combat.tryMove(game, m, vx * speed * dt, vy * speed * dt * 0.55);
m.moving = true;
}
function separation(game, m, dt) {
const near = game.queryMonsters(m.x, m.y, m.radius + 0.55);
for (const o of near) {
if (o === m || o.dead) continue;
const dx = m.x - o.x, dy = m.y - o.y;
const d = Math.hypot(dx, dy) || 0.01;
const minD = m.radius + o.radius;
if (d < minD) {
const push = (minD - d) * 2.2;
D2.combat.tryMove(game, m, (dx / d) * push * dt * 8, (dy / d) * push * dt * 8 * 0.55);
}
}
}
function startWindup(m, duration) {
m.state = 'windup';
m.stateT = duration;
m.attackAnim = duration + 0.15;
}
/* ---------------- brains ---------------- */
function meleeBrain(game, m, dt, dist, dx, dy, speed) {
if (!m.aggro) { idleWander(game, m, dt, speed * 0.4); return; }
if (m.state === 'windup') {
m.stateT -= dt;
if (m.stateT <= 0) {
D2.combat.monsterMeleeHit(game, m);
m.state = 'chase';
m.cdT = m.attackCd * (m.cdMult || 1);
game.sfx('swing', { vol: 0.12 });
}
return;
}
if (dist <= m.attackRange + game.player.radius && m.cdT <= 0) {
startWindup(m, 0.32);
return;
}
if (dist > m.attackRange * 0.8) {
steer(game, m, dx, dy, speed, dt);
/* swarm zigzag */
if (m.def.ai === 'swarm' && rnd() < 0.05) {
D2.combat.tryMove(game, m, (rnd() - .5) * 0.3, (rnd() - .5) * 0.3);
}
} else {
m.moving = false;
}
}
function flyerBrain(game, m, dt, dist, dx, dy, speed) {
if (!m.aggro) { idleWander(game, m, dt, speed * 0.6); return; }
if (m.state === 'windup') {
m.stateT -= dt;
if (m.stateT <= 0) {
D2.combat.monsterMeleeHit(game, m);
m.state = 'chase';
m.cdT = m.attackCd * (m.cdMult || 1);
}
return;
}
if (dist <= m.attackRange + game.player.radius && m.cdT <= 0) {
startWindup(m, 0.26);
return;
}
/* flyers ignore walls */
const d = dist || 1;
D2.combat.tryMove(game, m, (dx / d) * speed * dt, (dy / d) * speed * dt * 0.55, true);
m.moving = true;
/* keep inside floor-ish area */
m.x = D2.util.clamp(m.x, 1, game.world.w - 1);
m.y = D2.util.clamp(m.y, 1, game.world.h - 1);
}
function rangedBrain(game, m, dt, dist, dx, dy, speed) {
if (!m.aggro) { idleWander(game, m, dt, speed * 0.4); return; }
const minBand = m.attackRange * 0.45;
if (m.state === 'windup') {
m.stateT -= dt;
if (m.stateT <= 0) {
D2.combat.fireMonsterProjectile(game, m);
m.state = 'chase';
m.cdT = m.attackCd * (m.cdMult || 1);
}
return;
}
if (dist <= m.attackRange && m.cdT <= 0 &&
D2.path.hasLOS((x, y) => game.world.transparent(x, y), m.x | 0, m.y | 0, game.player.x | 0, game.player.y | 0)) {
startWindup(m, 0.4);
return;
}
if (dist < minBand) steer(game, m, -dx, -dy, speed, dt);
else if (dist > m.attackRange) steer(game, m, dx, dy, speed, dt);
else m.moving = false;
}
function casterBrain(game, m, dt, dist, dx, dy, speed) {
if (!m.aggro) { idleWander(game, m, dt, speed * 0.4); return; }
/* blink away when pressured */
if (m.special === 'blinkAway' && dist < 2.6 && m.specialCd <= 0) {
blinkAway(game, m);
m.specialCd = 5;
return;
}
rangedBrain(game, m, dt, dist, dx, dy, speed);
}
function summonerBrain(game, m, dt, dist, dx, dy, speed) {
if (!m.aggro) { idleWander(game, m, dt, speed * 0.4); return; }
if (m.summon && m.specialCd <= 0) {
const minions = game.countMinionsOf(m.uid);
if (minions < m.summon.maxAlive) {
for (let i = 0; i < m.summon.count; i++) {
const ang = rnd() * Math.PI * 2;
const sx = m.x + Math.cos(ang) * 1.2, sy = m.y + Math.sin(ang) * 1.2;
if (D2.combat.canStand(game.world, sx, sy, 0.3)) {
game.spawnMonster(m.summon.species, sx, sy, { ownerUid: m.uid });
game.spawnParticles(sx, sy, { count: 8, color: '#b08aff', speed: 2.5, life: 0.5, size: 2.4, z: 8 });
}
}
game.sfx('buff', { vol: .3 });
m.specialCd = 7;
} else {
m.specialCd = 2;
}
return;
}
casterBrain(game, m, dt, dist, dx, dy, speed);
}
function chargerBrain(game, m, dt, dist, dx, dy, speed) {
/* mid-charge */
if (m.state === 'charging') {
m.stateT -= dt;
D2.combat.tryMove(game, m, m.chargeVX * dt, m.chargeVY * dt * 0.55, true);
m.moving = true;
game.spawnParticles(m.x, m.y, { count: 1, color: '#ff8a3a', speed: 1, life: 0.25, size: 2, z: 6 });
/* contact damage */
if (dist < m.radius + game.player.radius + 0.2 && !m.chargeHit) {
m.chargeHit = true;
D2.combat.monsterHitPlayer(game, m, 1.5, m.elem);
D2.render.addShake(0.25);
}
if (m.stateT <= 0) {
m.state = 'chase';
m.cdT = 1.0;
m.specialCd = 4.5;
}
return;
}
/* begin charge */
if (m.aggro && m.chargeRange && dist > 2.4 && dist < m.chargeRange && m.specialCd <= 0) {
const d = dist || 1;
m.chargeVX = (dx / d) * speed * 3.2;
m.chargeVY = (dy / d) * speed * 3.2 * 0.55;
m.state = 'charging';
m.stateT = 0.55;
m.chargeHit = false;
m.telegraphed = 0.25;
game.sfx('bossroar', { vol: 0.18 });
return;
}
meleeBrain(game, m, dt, dist, dx, dy, speed);
}
function idleWander(game, m, dt, speed) {
m.wanderT = (m.wanderT || 0) - dt;
if (m.wanderT <= 0) {
m.wanderT = 1.5 + rnd() * 2.5;
m.wanderDX = (rnd() - .5) * 2;
m.wanderDY = (rnd() - .5) * 2;
}
if (m.wanderDX || m.wanderDY) {
D2.combat.tryMove(game, m, m.wanderDX * speed * dt, m.wanderDY * speed * dt * 0.55);
m.moving = true;
} else m.moving = false;
}
function blinkAway(game, m) {
for (let tries = 0; tries < 12; tries++) {
const ang = rnd() * Math.PI * 2;
const d = 3.5 + rnd() * 3;
const nx = m.x + Math.cos(ang) * d, ny = m.y + Math.sin(ang) * d;
if (D2.combat.canStand(game.world, nx, ny, m.radius) &&
game.world.tileAt(nx | 0, ny | 0) === D2.world.T.FLOOR) {
game.spawnParticles(m.x, m.y, { count: 10, color: '#b08aff', speed: 2.5, life: 0.4, size: 2.4, z: 8 });
m.x = nx; m.y = ny;
game.spawnParticles(nx, ny, { count: 10, color: '#b08aff', speed: 2.5, life: 0.4, size: 2.4, z: 8 });
game.sfx('teleport', { vol: .3 });
return true;
}
}
return false;
}
/* ---------------- boss brain ---------------- */
function bossIntro(game, m) {
m.introDone = true;
m.aggro = true;
game.sfx('bossroar');
D2.render.addShake(0.5);
game.toast(D2.i18n.t('msg.boss_spawn'), 'bad');
game.showBossBar(m);
if (m.bossDef.intro) game.addFloatText(m.x, m.y - 1, m.bossDef.intro[D2.i18n.getLang()] || m.bossDef.intro.en, '#ff8a6a', 16);
}
function bossUpdate(game, m, dt, dist, dx, dy) {
const p = game.player;
const speed = m.speed * (1 - (m.chillSlow || 0)) * (m.speedBuff || 1);
/* phase 2 enrage */
if (!m.phase2 && m.hp < m.maxHp * 0.5 && m.attacks.includes('enrage')) {
m.phase2 = true;
m.speedBuff = 1.3;
m.cdMult = 0.72;
game.sfx('bossroar');
D2.render.addShake(0.5);
game.toast('⚠ ' + m.name + ' ⚠', 'bad');
game.spawnParticles(m.x, m.y, { count: 30, color: '#ff4a1a', speed: 6, life: 0.7, size: 3, z: 12 });
}
m.bossAtkT = (m.bossAtkT || 1.2) - dt;
/* executing a scripted attack sequence */
if (m.busyT > 0) {
m.busyT -= dt;
if (m.busyAttack) m.busyAttack(game, m, dt);
if (m.busyT <= 0 && m.busyEnd) { const f = m.busyEnd; m.busyEnd = null; f(); }
return;
}
/* pick an attack */
if (m.bossAtkT <= 0 && !p.dead) {
const chosen = pickBossAttack(game, m, dist);
if (chosen) {
m.bossAtkT = (m.isElite ? 1.2 : 1.7) * (m.cdMult || 1) + rnd() * 0.8;
return;
}
m.bossAtkT = 0.5;
}
/* default: chase & melee */
if (dist <= m.attackRange + p.radius && m.cdT <= 0) {
startWindup(m, 0.38);
m.pendingBasic = true;
} else if (m.state === 'windup') {
m.stateT -= dt;
if (m.stateT <= 0) {
D2.combat.monsterMeleeHit(game, m);
m.cdT = m.attackCd * (m.cdMult || 1) * 0.7;
m.state = 'chase';
game.sfx('swing', { vol: 0.2 });
}
return;
} else if (dist > m.attackRange * 0.85) {
steer(game, m, dx, dy, speed, dt);
} else m.moving = false;
}
function pickBossAttack(game, m, dist) {
const p = game.player;
const candidates = [];
for (const a of m.attacks || []) {
switch (a) {
case 'cleaveArc': if (dist < 3.2) candidates.push({ a, w: 3 }); break;
case 'chargeAt': if (dist > 3 && dist < 10) candidates.push({ a, w: 2.5 }); break;
case 'lunge': if (dist > 2 && dist < 5) candidates.push({ a, w: 2 }); break;
case 'boneSpearVolley': if (dist < 11) candidates.push({ a, w: 2.5 }); break;
case 'webVolley': if (dist < 10) candidates.push({ a, w: 2.5 }); break;
case 'summonFallen': if ((m.summonsDone || 0) < 2) candidates.push({ a, w: 1.5 }); break;
case 'summonSkeletons': candidates.push({ a, w: 1.6 }); break;
case 'spawnSpiderlings': candidates.push({ a, w: 1.8 }); break;
case 'curseRing': if (dist < 6) candidates.push({ a, w: 1.8 }); break;
case 'poisonPools': if (dist < 9) candidates.push({ a, w: 2.2 }); break;
case 'fireNovaRing': if (dist < 7) candidates.push({ a, w: 2.4 }); break;
case 'lightningSpiral': candidates.push({ a, w: 2 }); break;
case 'meteorRain': candidates.push({ a, w: 2.2 }); break;
}
}
if (!candidates.length) return null;
const total = candidates.reduce((s, c) => s + c.w, 0);
let roll = rnd() * total;
let chosen = candidates[candidates.length - 1];
for (const c of candidates) { roll -= c.w; if (roll <= 0) { chosen = c; break; } }
execBossAttack(game, m, chosen.a, dist);
return chosen.a;
}
function execBossAttack(game, m, attack, dist) {
const p = game.player;
switch (attack) {
case 'cleaveArc': {
m.attackAnim = 0.5;
game.sfx('bossroar', { vol: 0.25 });
busy(m, 0.5, () => {
const baseAng = Math.atan2(p.y - m.y, p.x - m.x);
game.addEffect({
type: 'swingArc', x: m.x, y: m.y, t: 0, dur: 0.22,
ang: baseAng, arc: Math.PI, range: 3.2, color: '#ff8a5a',
});
const pd = D2.util.dist(p.x, p.y, m.x, m.y);
const ang = Math.atan2(p.y - m.y, p.x - m.x);
if (pd < 3.4 && Math.abs(D2.util.wrapAngle(ang - baseAng)) < Math.PI / 2) {
D2.combat.monsterHitPlayer(game, m, 1.6, null);
D2.render.addShake(0.35);
}
});
break;
}
case 'chargeAt': case 'lunge': {
const d = dist || 1;
const spd = attack === 'chargeAt' ? 14 : 11;
m.chargeVX = (p.x - m.x) / d * spd;
m.chargeVY = (p.y - m.y) / d * spd * 0.55;
m.chargeHit = false;
m.busyT = attack === 'chargeAt' ? 0.6 : 0.4;
m.busyAttack = (g, mm, dt) => {
D2.combat.tryMove(g, mm, mm.chargeVX * dt, mm.chargeVY * dt * 0.55, true);
g.spawnParticles(mm.x, mm.y, { count: 2, color: '#ff6a3a', speed: 2, life: 0.3, size: 2.4, z: 8 });
const dd = D2.util.dist(p.x, p.y, mm.x, mm.y);
if (dd < mm.radius + p.radius + 0.3 && !mm.chargeHit) {
mm.chargeHit = true;
D2.combat.monsterHitPlayer(g, mm, 1.5, null);
D2.render.addShake(0.4);
}
mm.moving = true;
};
game.sfx('bossroar', { vol: 0.2 });
break;
}
case 'summonFallen': case 'summonSkeletons': case 'spawnSpiderlings': {
const speciesMap = { summonFallen: 'fallen', summonSkeletons: 'skeleton', spawnSpiderlings: 'tomb_spider' };
const species = speciesMap[attack];
const n = attack === 'spawnSpiderlings' ? 4 : 3;
m.summonsDone = (m.summonsDone || 0) + 1;
game.sfx('buff');
for (let i = 0; i < n; i++) {
const ang = (i / n) * Math.PI * 2;
const sx = m.x + Math.cos(ang) * 2, sy = m.y + Math.sin(ang) * 2 * 0.6;
if (D2.combat.canStand(game.world, sx, sy, 0.3))
game.spawnMonster(species, sx, sy, { ownerUid: m.uid, aggroed: true });
}
game.spawnParticles(m.x, m.y, { count: 20, color: '#b08aff', speed: 4, life: 0.6, size: 2.6, z: 10 });
busy(m, 0.7);
break;
}
case 'frenzy': case 'enrage': break; // handled in phase logic
case 'boneSpearVolley': {
m.attackAnim = 0.45;
const n = m.phase2 ? 7 : 5;
const base = Math.atan2(p.y - m.y, p.x - m.x);
for (let i = 0; i < n; i++) {
const a = base + (i / (n - 1) - 0.5) * 0.9;
game.projectiles.push(new D2.entities.Projectile({
x: m.x, y: m.y,
vx: Math.cos(a) * 7.5, vy: Math.sin(a) * 7.5 * 0.55,
speed: 7.5, dmg: m.dmg * 0.85, elem: 'phys', fromPlayer: false,
visual: 'bolt', color: '#d8e8b0', life: 2.2,
}));
}
game.sfx('shoot', { vol: .4 });
busy(m, 0.45);
break;
}
case 'webVolley': {
const n = 3;
const base = Math.atan2(p.y - m.y, p.x - m.x);
for (let i = 0; i < n; i++) {
const a = base + (i - 1) * 0.28;
game.projectiles.push(new D2.entities.Projectile({
x: m.x, y: m.y,
vx: Math.cos(a) * 6, vy: Math.sin(a) * 6 * 0.55,
speed: 6, dmg: m.dmg * 0.6, elem: 'phys', fromPlayer: false,
visual: 'orb', color: '#d8f0c8',
slow: 0.6, slowDur: 2.2, life: 2.4,
}));
}
game.sfx('poison', { vol: .4 });
busy(m, 0.5);
break;
}
case 'curseRing': {
game.sfx('nova', { vol: .5 });
game.addEffect({
type: 'telegraph', x: m.x, y: m.y, t: 0, delay: 0.9, radius: 5.5, color: '#b08aff',
onDone: () => {
game.addEffect({ type: 'nova', x: m.x, y: m.y, t: 0, dur: 0.5, radius: 5.5, color: '#b08aff', lightPunch: 6 });
const dd = D2.util.dist(p.x, p.y, m.x, m.y);
if (dd <= 5.5) {
D2.combat.monsterHitPlayer(game, m, 1.1, null);
game.player.chillT = 2; game.player.chillSlow = 0.4;
}
},
});
busy(m, 0.9);
break;
}
case 'poisonPools': {
game.sfx('poison');
for (let i = 0; i < 3; i++) {
const ox = (i - 1) * 1.8 + (rnd() - .5);
const oy = (rnd() - .5) * 2;
game.addEffect({
type: 'groundAoE', x: p.x + ox, y: p.y + oy, t: 0,
delay: 0.55, duration: 3.5, tickT: 0,
radius: 1.6, dmgPct: m.dmg * 0.5, elem: 'pois', fromMonster: true,
color: '#8adf5a', lightPunch: 2,
});
}
busy(m, 0.55);
break;
}
case 'fireNovaRing': {
game.sfx('nova');
const waves = [[2.6, 0], [4.2, 0.45], [5.8, 0.9]];
for (const [radius, delay] of waves) {
game.addEffect({
type: 'telegraph', x: m.x, y: m.y, t: 0, delay: delay + 0.35, radius, color: '#ff6a2a',
onDone: () => {
game.addEffect({ type: 'nova', x: m.x, y: m.y, t: 0, dur: 0.5, radius, color: '#ff6a2a', lightPunch: radius });
const dd = D2.util.dist(p.x, p.y, m.x, m.y);
if (Math.abs(dd - radius) < 1.1 || dd < radius * 0.4) {
D2.combat.monsterHitPlayer(game, m, 1.0, 'fire');
}
game.spawnParticles(m.x, m.y, { count: 18, color: '#ff8a3a', speed: 6, life: 0.5, size: 2.8, z: 10 });
},
});
}
busy(m, 1.3);
break;
}
case 'lightningSpiral': {
game.sfx('lightning');
const shots = m.phase2 ? 30 : 22;
const durTotal = 1.3;
for (let i = 0; i < shots; i++) {
const angle = (i / shots) * Math.PI * 4; // double spiral
game.addEffect({
type: 'timed', t: 0, endAt: 0.15 + (i / shots) * durTotal, fired: false,
fire: (g) => {
const a = angle + g.time * 2;
g.projectiles.push(new D2.entities.Projectile({
x: m.x, y: m.y,
vx: Math.cos(a) * 6.5, vy: Math.sin(a) * 6.5 * 0.55,
speed: 6.5, dmg: m.dmg * 0.55, elem: 'lit', fromPlayer: false,
visual: 'bolt', color: '#ffee6a', life: 1.8,
}));
if (i % 6 === 0) game.sfx('lightning', { vol: .2 });
},
});
}
busy(m, durTotal + 0.2);
break;
}
case 'meteorRain': {
game.sfx('fireball');
const n = m.phase2 ? 6 : 4;
for (let i = 0; i < n; i++) {
game.addEffect({
type: 'telegraph',
x: p.x + (rnd() - .5) * 6, y: p.y + (rnd() - .5) * 4,
t: 0, delay: 0.7 + i * 0.22, radius: 1.7, color: '#ff5a1a',
onDone: (fx) => {
D2.combat.dealRadiusDamage(game, fx.x, fx.y, 1.7, m.dmg * 1.2, { elem: 'fire', fromMonster: true });
game.spawnParticles(fx.x, fx.y, { count: 14, color: '#ff8a3a', speed: 5, life: 0.5, size: 2.8, z: 12, gravity: 10 });
game.sfx('explode', { vol: .4 });
},
});
}
busy(m, 1.6);
break;
}
}
}
function busy(m, t, onEnd) {
m.busyT = t;
m.busyAttack = null;
m.busyEnd = onEnd || null;
}
D2.ai = { updateMonster, resetFrame, blinkAway };
})(window.D2);
js/game/combat.js
+841
View File
@@ -0,0 +1,841 @@
/* ============================================================
* Diablo2D — combat.js : damage pipeline & skill implementation
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const BAL = () => D2.BAL;
const rnd = Math.random;
const ri = (a, b) => a + Math.floor(rnd() * (b - a + 1));
/* ================= player damage ================= */
function mainStatPct(player) {
const s = player.stats;
const cls = player.classId;
if (cls === 'crusader') return s.str * BAL().meleeDmgPerStr;
if (cls === 'ranger') return s.dex * BAL().rangedDmgPerDex;
return s.ene * BAL().castDmgPerEne;
}
function weaponDamageRange(player) {
const w = player.equip.weapon;
const s = player.stats;
let min = 2, max = 4;
if (w && w.dmgMax) { min = w.dmgMin; max = w.dmgMax; }
if (s.flatDmg) { min += s.flatDmg; max += s.flatDmg; }
const mult = 1 + mainStatPct(player) / 100 + (s.dmgPct || 0) / 100;
return { min: Math.max(1, Math.round(min * mult)), max: Math.max(2, Math.round(max * mult)) };
}
function rollPlayerHit(player, dmgPct, opts = {}) {
const r = weaponDamageRange(player);
let dmg = (ri(r.min, r.max)) * (dmgPct / 100);
const s = player.stats;
const elem = opts.elem || 'phys';
if (elem === 'fire' && s.fireDmg) dmg += s.fireDmg;
else if (elem === 'cold' && s.coldDmg) dmg += s.coldDmg;
else if (elem === 'lit' && s.litDmg) dmg += s.litDmg;
else if (elem === 'pois' && s.poisDmg) dmg += s.poisDmg;
else if (elem === 'phys') {
dmg += ((s.fireDmg || 0) + (s.coldDmg || 0) + (s.litDmg || 0) + (s.poisDmg || 0)) * 0.5;
}
/* elite slayer */
if (opts.target && opts.target.isElite && s.eliteDmgPct) dmg *= 1 + s.eliteDmgPct / 100;
/* last stand */
const hpPct = player.hp / player.maxHp;
if (s.lowLifeDmg && hpPct < 0.35) dmg *= 1 + s.lowLifeDmg / 100;
/* crit */
let crit = false;
if (!opts.noCrit) {
const cc = (s.critChance || 0) / 100 + BAL().baseCrit;
if (opts.guaranteedCrit || rnd() < Math.min(cc, BAL().critCap)) {
crit = true;
dmg *= 1 + BAL().baseCritDmg - 1 + (s.critDmgPct || 0) / 100;
}
}
return { dmg: Math.max(1, Math.round(dmg)), crit };
}
/* ================= damage application ================= */
function applyToMonster(game, m, hit, opts = {}) {
if (m.dead) return 0;
let dmg = hit.dmg;
/* monster armor: implicit via level, mild */
const armor = BAL().mArmor(m.level) * (m.isBoss ? 1.6 : 1);
const dr = armor / (armor + 40 + 8 * (game.player ? game.player.level : 10));
dmg *= (1 - dr * 0.5);
/* resists */
const elem = opts.elem || 'phys';
if (elem !== 'phys' && m.resists && m.resists[elem]) dmg *= (1 - m.resists[elem]);
dmg = Math.max(1, Math.round(dmg));
m.hp -= dmg;
m.hurtFlash = BAL().hitFlashTime;
/* floating number */
game.addFloatText(m.x, m.y, (hit.crit ? '' : '') + dmg,
hit.crit ? '#ffd24a' : elemColor(opts.elem), hit.crit ? 16 : 12);
if (hit.crit) {
game.sfx('crit', { vol: .5 });
D2.render.addShake(0.12);
} else {
game.sfx(opts.silentHit ? null : 'hit', { vol: .35 });
}
/* blood particles */
game.spawnParticles(m.x, m.y, {
count: hit.crit ? 10 : 6, color: elemBlood(opts.elem),
speed: 3.5, life: 0.5, size: 2.6, z: 8, gravity: 14,
});
/* knockback */
if (opts.knockback && !m.isBoss) {
const ang = Math.atan2(m.y - (opts.fromY ?? m.y - 1), m.x - (opts.fromX ?? m.x));
const kb = opts.knockback;
tryMove(game, m, Math.cos(ang) * kb, Math.sin(ang) * kb, true);
}
/* on-hit procs from player */
if (opts.src === 'player') {
const s = game.player.stats;
/* lifesteal legendary */
if (s.lifestealPct) healPlayer(game, dmg * s.lifestealPct);
/* chain on hit */
if (s.chainOnHitPct && rnd() < s.chainOnHitPct) chainZap(game, m, 2, hit.dmg * 0.4);
/* venom strike */
if (s.venomOnHit) applyDot(game, m, { elem: 'pois', dps: dmg * 0.25, dur: 3 });
/* bleed passive */
if (s.bleedOnHitPct && !opts.noBleed) {
applyDot(game, m, { elem: 'phys', dps: weaponDamageRange(game.player).max * s.bleedOnHitPct / 100 / 3, dur: 3, bleed: true });
}
/* chill attacker flag on melee (handled in ai) */
}
if (m.hp <= 0) killMonster(game, m, { skillId: opts.skillId });
else {
/* aggro on damage */
m.aggro = true;
if (m.state === 'idle') m.state = 'chase';
}
return dmg;
}
function elemColor(elem) {
return { fire: '#ff8a4a', cold: '#8ad8ff', lit: '#ffee6a', pois: '#9adf3a', holy: '#ffe8b0', phys: '#f2ece0' }[elem] || '#f2ece0';
}
function elemBlood(elem) {
return { fire: '#ff6a2a', cold: '#a8e0ff', lit: '#fff0a0', pois: '#8adf5a', holy: '#ffe8b0', phys: '#a8231a' }[elem] || '#a8231a';
}
function healPlayer(game, amount) {
const p = game.player;
if (p.dead) return;
const before = p.hp;
p.hp = Math.min(p.maxHp, p.hp + amount);
if (p.hp - before >= 1) {
game.addFloatText(p.x, p.y - 0.3, '+' + Math.round(p.hp - before), '#7ade8a', 11);
}
}
/* chain lightning proc between monsters */
function chainZap(game, from, jumps, dmg) {
let cur = from;
const hitSet = new Set([from.uid]);
for (let i = 0; i < jumps; i++) {
const next = game.nearestMonster(cur.x, cur.y, 5.5, m => !m.dead && !hitSet.has(m.uid));
if (!next) break;
hitSet.add(next.uid);
/* zap visual */
for (let k = 0; k < 6; k++) {
game.spawnParticles(D2.util.lerp(cur.x, next.x, k / 6), D2.util.lerp(cur.y, next.y, k / 6), {
count: 1, color: '#ffee6a', speed: 0.5, life: 0.18, size: 2.2, z: 10,
});
}
applyToMonster(game, next, { dmg: Math.round(dmg), crit: false }, { elem: 'lit', src: 'player', silentHit: true });
cur = next;
dmg *= 0.75;
}
}
/* ================= monster → player ================= */
function monsterHitPlayer(game, m, mult = 1, elem = null) {
const p = game.player;
if (p.dead) return;
const s = p.stats;
/* dodge */
const dodge = Math.min(0.5, (s.dodgePct || 0) / 100 + p.level * BAL().dodgePerDex);
if (rnd() < dodge) {
game.addFloatText(p.x, p.y, 'dodge', '#9ab0c8', 11);
return;
}
/* block */
if (s.blockChance && rnd() * 100 < s.blockChance) {
game.addFloatText(p.x, p.y, 'block', '#c8a35a', 12);
game.sfx('hit', { vol: .25 });
return;
}
let dmg = m.dmg * mult;
const e = elem || m.elem;
if (e && e !== 'phys') {
const resKey = { fire: 'resFire', cold: 'resCold', lit: 'resLit', pois: 'resPois' }[e];
const res = Math.min(BAL().resistCap, (s[resKey] || 0) / 100);
dmg *= (1 - res);
}
/* armor DR */
const armor = s.armor;
const dr = armor / (armor + BAL().armorK * m.level);
dmg *= (1 - Math.min(BAL().armorDrCap, dr));
/* last stand DR */
if (s.lowLifeDR && p.hp / p.maxHp < 0.35) dmg *= 1 - s.lowLifeDR / 100;
/* smoke veil dodge already; flat reduction none */
dmg = Math.max(1, Math.round(dmg));
p.hp -= dmg;
p.hurtFlash = BAL().hitFlashTime;
game.addFloatText(p.x, p.y, '-' + dmg, '#ff6a5a', 13);
game.sfx('playerhurt', { vol: .5 });
D2.render.addShake(0.18);
game.spawnParticles(p.x, p.y, { count: 5, color: '#a8231a', speed: 3, life: 0.4, size: 2.4, z: 8, gravity: 14 });
/* chill attacker response (frostweave) */
if (s.chillAttacker && !m.chilledByPlayer) {
m.chillT = 2; m.chillSlow = 0.35; m.chilledByPlayer = true;
setTimeoutSafe(() => { m.chilledByPlayer = false; }, 2500);
}
/* vampiric monster heals */
if (m.lifestealPct) m.hp = Math.min(m.maxHp, m.hp + dmg * m.lifestealPct);
if (p.hp <= 0) game.onPlayerDeath();
}
function setTimeoutSafe(fn, ms) {
if (typeof setTimeout === 'function') setTimeout(fn, ms);
}
/* ================= kill & rewards ================= */
function killMonster(game, m, opts = {}) {
if (m.dead) return;
m.dead = true;
m.dying = true;
const p = game.player;
/* death effects */
if (m.deathNova) {
game.addEffect({
type: 'nova', x: m.x, y: m.y, t: 0, dur: 0.5, radius: m.deathNova.radius,
color: m.deathNova.elem === 'cold' ? '#8ad8ff' : '#ff8a3a',
onDone: () => dealRadiusDamage(game, m.x, m.y, m.deathNova.radius,
m.dmg * 1.2, { elem: m.deathNova.elem, fromMonster: true, chill: m.deathNova.chill }),
});
}
if (m.corpsePoison) {
game.addGroundDecal(m.x, m.y, 1.4, 'rgba(120,220,80,.25)', 3);
game.addEffect({
type: 'nova', x: m.x, y: m.y, t: 0, dur: 0.4, radius: 1.6, color: '#8adf5a',
onDone: () => dealRadiusDamage(game, m.x, m.y, 1.6, m.dmg, { elem: 'pois', fromMonster: true }),
});
}
if (m.explodeOnDeath) {
const ex = m.explodeOnDeath;
game.addEffect({
type: 'nova', x: m.x, y: m.y, t: 0, dur: 0.45, radius: ex.radius,
color: ex.elem === 'pois' ? '#8adf5a' : '#ff8a3a',
onDone: () => dealRadiusDamage(game, m.x, m.y, ex.radius, m.dmg * ex.dmgMult, { elem: ex.elem, fromMonster: true }),
});
}
/* corpse decal + gib particles */
game.addGroundDecal(m.x, m.y, m.radius * 1.3, 'rgba(90,16,10,.5)', BAL().corpseTime);
game.spawnParticles(m.x, m.y, {
count: m.isBoss ? 40 : 12, color: '#7a1a10', speed: m.isBoss ? 7 : 4.5,
life: 0.8, size: 3, z: 10, gravity: 16,
});
game.sfx(m.isBoss ? 'bossdie' : 'die', { vol: m.isBoss ? 0.8 : 0.45 });
/* rewards */
const xpGain = Math.round(m.xpReward * (1 + (p.buffMod('xpGain') || 0)));
game.gainXp(xpGain, m);
if (game.onQuestKill) game.onQuestKill(m);
p.kills++;
if (m.isElite) { p.eliteKills++; game.toast(D2.i18n.t('msg.elite_slain'), 'gold'); }
if (m.isBoss) { p.bossKills++; game.onBossKilled(m); }
/* life on kill */
const s = p.stats;
if (s.lifeOnKill) healPlayer(game, s.lifeOnKill);
if (s.execHeal && (m.isElite || m.isBoss)) healPlayer(game, p.maxHp * 0.15);
if (s.goldPerKill) game.giveGold(Math.round(s.goldPerKill));
/* legendary on-kill effects */
if (s.fireNovaOnKill) {
game.addEffect({
type: 'nova', x: m.x, y: m.y, t: 0, dur: 0.4, radius: 2.2, color: '#ff8a3a',
onDone: () => dealRadiusDamage(game, m.x, m.y, 2.2, weaponDamageRange(p).max * 1.2, { elem: 'fire', src: 'player' }),
});
}
if (s.corpseBoom && rnd() < 0.2) {
dealRadiusDamage(game, m.x, m.y, 2.0, weaponDamageRange(p).max, { elem: 'phys', src: 'player' });
game.spawnParticles(m.x, m.y, { count: 16, color: '#ff8a3a', speed: 5, life: 0.5, size: 2.6, z: 8 });
}
/* loot */
if (D2.loot) D2.loot.dropFor(game, m);
if (m.isBoss) {
D2.render.addShake(0.6);
game.addLight(m.x, m.y, 8, '#ff8a3a', 0.9, 1.2);
}
game.onMonsterRemoved(m);
}
/* AoE damage helper */
function dealRadiusDamage(game, x, y, radius, dmg, opts = {}) {
if (opts.fromMonster) {
const p = game.player;
if (p && !p.dead) {
const d = D2.util.dist(p.x, p.y, x, y);
if (d <= radius + p.radius) monsterHitPlayer(game, { dmg: dmg, level: opts.level || game.player.level, elem: opts.elem }, 1, opts.elem);
}
} else {
const hits = game.queryMonsters(x, y, radius + 0.4);
for (const m of hits) {
applyToMonster(game, m, rollPlayerHit(game.player, dmg, { elem: opts.elem, noCrit: true, target: m }),
{ elem: opts.elem, src: 'player' });
}
}
}
/* ================= dots & statuses ================= */
function applyDot(game, target, dot) {
target.dots = target.dots || [];
const existing = target.dots.find(d => d.elem === dot.elem);
if (existing) { existing.dps = Math.max(existing.dps, dot.dps); existing.t = Math.max(existing.t, dot.dur); }
else target.dots.push({ elem: dot.elem, dps: dot.dps, t: dot.dur, bleed: dot.bleed });
}
function updateDots(game, target, dt, isPlayer) {
if (!target.dots || !target.dots.length) return;
for (let i = target.dots.length - 1; i >= 0; i--) {
const d = target.dots[i];
d.t -= dt;
const tick = d.dps * dt;
if (isPlayer) {
target.hp -= tick;
if (target.hp <= 0) game.onPlayerDeath();
} else {
target.hp -= tick;
if (rnd() < dt * 3) game.addFloatText(target.x, target.y, Math.round(d.dps), elemColor(d.elem), 10);
if (target.hp <= 0) killMonster(game, target, {});
}
if (d.t <= 0) target.dots.splice(i, 1);
}
}
/* ================= movement helper ================= */
function tryMove(game, e, dx, dy, ignoreProps = false) {
const w = game.world;
const nx = e.x + dx, ny = e.y + dy;
const r = e.radius * 0.9;
/* axis-separated collision */
if (canStand(w, nx, e.y, r, ignoreProps)) e.x = nx;
if (canStand(w, e.x, ny, r, ignoreProps)) e.y = ny;
}
function canStand(world, x, y, r, ignoreProps) {
for (const [ox, oy] of [[r, 0], [-r, 0], [0, r], [0, -r], [r * .7, r * .7], [-r * .7, r * .7], [r * .7, -r * .7], [-r * .7, -r * .7]]) {
const tx = Math.floor(x + ox), ty = Math.floor(y + oy);
if (world.tileAt(tx, ty) !== D2.world.T.FLOOR) return false;
if (!ignoreProps && world.propMap.has(tx + ',' + ty)) return false;
}
return true;
}
/* ================= player skills ================= */
function playerBasicAttack(game, aimX, aimY) {
const p = game.player;
if (p.attackCd > 0 || p.dead || p.channel) return;
const cls = D2.Skills.CLASSES[p.classId];
const basic = cls.basic;
if (basic.castType === 'meleeArc') {
doMeleeArc(game, p, aimX, aimY, basic.params.dmgPct, basic.params.arcDeg, basic.params.range);
} else {
const ang = Math.atan2(aimY - p.y, aimX - p.x);
fireProjectiles(game, p, ang, basic.params, 100);
if (p.stats.doubleShot) {
const ang2 = ang + 0.12;
fireProjectiles(game, p, ang2, { ...basic.params, count: 1, spreadDeg: 0 }, 60);
}
game.sfx('shoot', { vol: .3 });
}
p.attackAnim = 0.28;
p.attackCd = 1 / ((p.equip.weapon ? p.equip.weapon.aps : 1.3) * (1 + (p.stats.attackSpeedPct || 0) / 100));
}
function doMeleeArc(game, p, aimX, aimY, dmgPct, arcDeg, range, opts = {}) {
const baseAng = Math.atan2(aimY - p.y, aimX - p.x);
const halfArc = (arcDeg * Math.PI / 180) / 2;
const hits = game.queryMonsters(p.x, p.y, range + 0.5);
let any = false;
for (const m of hits) {
const ang = Math.atan2(m.y - p.y, m.x - p.x);
if (Math.abs(D2.util.wrapAngle(ang - baseAng)) <= halfArc &&
D2.util.dist(p.x, p.y, m.x, m.y) <= range + m.radius) {
const hit = rollPlayerHit(p, dmgPct, { elem: opts.elem, target: m, guaranteedCrit: p.guaranteedCritT > 0 });
applyToMonster(game, m, hit, { elem: opts.elem, src: 'player', fromX: p.x, fromY: p.y, knockback: opts.knockback, skillId: opts.skillId });
if (opts.stun && !m.isBoss) { m.frozen = Math.max(m.frozen, opts.stun); }
any = true;
}
}
p.guaranteedCritT = 0;
game.sfx(any ? 'hit' : 'swing', { vol: .4 });
/* swing arc visual */
game.addEffect({
type: 'swingArc', x: p.x, y: p.y, t: 0, dur: 0.18,
ang: baseAng, arc: arcDeg * Math.PI / 180, range,
color: opts.elem ? elemColor(opts.elem) : '#e8d8b0',
});
/* smash barrels & urns in the swing */
if (game.world && game.world.props) {
for (const pr of [...game.world.props]) {
if (pr.type !== 'barrel' && pr.type !== 'urn') continue;
const cx = pr.x + 0.5, cy = pr.y + 0.5;
const d = D2.util.dist(p.x, p.y, cx, cy);
if (d < range + 0.5) {
const ang = Math.atan2(cy - p.y, cx - p.x);
if (Math.abs(D2.util.wrapAngle(ang - baseAng)) < halfArc + 0.3) {
breakProp(game, pr);
}
}
}
}
return any;
}
function fireProjectiles(game, p, baseAng, params, dmgPct) {
const n = params.count || 1;
const spread = (params.spreadDeg || 0) * Math.PI / 180;
const elem = params.elem || (p.classId === 'sorceress' ? 'lit' : 'phys');
for (let i = 0; i < n; i++) {
const off = n > 1 ? (i / (n - 1) - 0.5) * spread : 0;
const a = baseAng + off;
const hit = rollPlayerHit(p, dmgPct, { elem, noCrit: false });
const pr = new D2.entities.Projectile({
x: p.x + Math.cos(a) * 0.4, y: p.y + Math.sin(a) * 0.4,
vx: Math.cos(a) * (params.speed || 10), vy: Math.sin(a) * (params.speed || 10) * 0.55,
speed: params.speed || 10,
dmg: hit.dmg, crit: hit.crit,
elem, fromPlayer: true,
pierce: !!params.pierce, maxHits: params.pierce ? 99 : 1,
visual: elem === 'phys' ? (p.classId === 'ranger' ? 'arrow' : 'knife') : 'orb',
color: elemColor(elem),
size: params.size || 1,
slow: params.slow || 0, slowDur: params.slowDur || 0,
bleed: !!params.bleed,
freeze: params.freeze || 0,
life: 1.6,
});
game.projectiles.push(pr);
}
}
/* main skill cast dispatcher */
function castSkill(game, player, skill, rank, aimX, aimY) {
if (player.dead || player.channel) return false;
const params = skill.params(rank);
const manaCost = skill.manaCost(rank);
if (player.mana < manaCost) {
game.toast(D2.i18n.t('msg.not_enough_mana'), 'bad');
game.sfx('error');
return false;
}
const cdLeft = game.skillCooldownLeft(skill.id);
if (cdLeft > 0) {
game.sfx('error');
return false;
}
player.mana -= manaCost;
const cdr = Math.min(BAL().cooldownReductionCap, (player.stats.cdrPct || 0) / 100);
game.setSkillCooldown(skill.id, skill.cooldown * (1 - cdr));
const elem = params.elem || (skill.branch === 'pyro' ? 'fire' : skill.branch === 'cryo' ? 'cold' : skill.branch === 'storm' ? 'lit' : null);
switch (skill.castType) {
case 'meleeArc':
doMeleeArc(game, player, aimX, aimY, params.dmgPct, params.arcDeg, params.range, { elem, knockback: params.knockback, stun: params.stun, skillId: skill.id });
if (player.stats.cleaveEcho) {
setTimeoutSafe(() => {
if (!game.player.dead) doMeleeArc(game, game.player, aimX, aimY, params.dmgPct * 0.5, params.arcDeg, params.range + 0.3, { elem, skillId: skill.id, noCrit: true });
}, 140);
}
game.sfx('swing', { vol: .5 });
break;
case 'whirlwind':
player.channel = {
type: 'whirlwind', t: params.duration, tick: 0,
params, skillId: skill.id, elem,
};
game.sfx('nova', { vol: .4 });
break;
case 'dash': {
const ang = Math.atan2(aimY - player.y, aimX - player.x);
player.channel = {
type: 'dash', t: params.distance / params.speed, tick: 0,
vx: Math.cos(ang) * params.speed, vy: Math.sin(ang) * params.speed * 0.55,
params, skillId: skill.id, hitSet: new Set(), elem,
};
game.sfx('nova', { vol: .35 });
break;
}
case 'cone':
doMeleeArc(game, player, aimX, aimY, params.dmgPct, params.arcDeg, params.range, { elem: 'phys', knockback: params.knockback, stun: params.stun, skillId: skill.id });
D2.render.addShake(0.3);
game.sfx('explode', { vol: .4 });
break;
case 'projSpread': {
const ang = Math.atan2(aimY - player.y, aimX - player.x);
fireProjectiles(game, player, ang, params, params.dmgPct);
game.sfx(elem === 'fire' ? 'fireball' : elem === 'cold' ? 'ice' : elem === 'lit' ? 'lightning' : 'shoot', { vol: .45 });
break;
}
case 'novaProj': {
const n = params.count;
for (let i = 0; i < n; i++) {
const a = (i / n) * Math.PI * 2;
fireProjectiles(game, player, a, { count: 1, spreadDeg: 0, dmgPct: params.dmgPct, speed: params.speed, elem: 'phys' }, params.dmgPct);
}
game.sfx('swing', { vol: .5 });
break;
}
case 'nova': {
game.addEffect({
type: 'nova', x: player.x, y: player.y, t: 0, dur: 0.45, radius: params.radius,
color: elemColor(elem), lightPunch: params.radius,
});
const hits = game.queryMonsters(player.x, player.y, params.radius + 0.5);
for (const m of hits) {
const hit = rollPlayerHit(player, params.dmgPct, { elem, target: m, guaranteedCrit: player.guaranteedCritT > 0 });
applyToMonster(game, m, hit, { elem, src: 'player', fromX: player.x, fromY: player.y, knockback: 1.2, skillId: skill.id });
if (params.freeze && !m.isBoss) m.frozen = Math.max(m.frozen, params.freeze);
if (params.ignite) applyDot(game, m, { elem: 'fire', dps: hit.dmg * 0.3, dur: 2.5 });
}
player.guaranteedCritT = 0;
game.sfx(elem === 'cold' ? 'ice' : 'nova', { vol: .6 });
game.addLight(player.x, player.y, params.radius + 2, elemColor(elem), 0.8, 0.5);
break;
}
case 'groundAoE': {
const clamped = clampAim(game, player, aimX, aimY, 8);
game.addEffect({
type: 'groundAoE', x: clamped.x, y: clamped.y, t: 0,
delay: params.delay, duration: params.duration, tickT: 0,
radius: params.radius, dmgPct: params.dmgPct, elem,
slow: params.slow, slowDur: params.slowDur, skillId: skill.id,
color: elemColor(elem), lightPunch: params.radius,
});
game.sfx(elem === 'cold' ? 'ice' : 'fireball', { vol: .5 });
break;
}
case 'volleyArea': {
const clamped = clampAim(game, player, aimX, aimY, 9);
for (let w = 0; w < params.waves; w++) {
game.addEffect({
type: 'telegraph', x: clamped.x + (rnd() - .5) * params.radius, y: clamped.y + (rnd() - .5) * params.radius * 0.6,
t: 0, delay: 0.25 + w * params.waveDelay, radius: 1.3, color: '#d8cba8',
onDone: (fx) => {
dealRadiusDamage(game, fx.x, fx.y, 1.3, params.dmgPct, { elem: 'phys', src: 'player' });
game.spawnParticles(fx.x, fx.y, { count: 5, color: '#d8cba8', speed: 3, life: 0.3, size: 2, z: 12, gravity: 18 });
},
});
}
game.sfx('shoot', { vol: .5 });
break;
}
case 'meteor': {
const clamped = clampAim(game, player, aimX, aimY, 9);
game.addEffect({
type: 'telegraph', x: clamped.x, y: clamped.y, t: 0, delay: params.delay,
radius: params.radius, color: '#ff5a1a',
onDone: (fx) => {
dealRadiusDamage(game, fx.x, fx.y, params.radius, params.dmgPct, { elem: 'fire', src: 'player' });
game.spawnParticles(fx.x, fx.y, { count: 26, color: '#ff8a3a', speed: 7, life: 0.6, size: 3, z: 14, gravity: 10 });
game.addGroundDecal(fx.x, fx.y, params.radius * 0.8, 'rgba(40,16,8,.55)', 6);
D2.render.addShake(0.5);
game.sfx('explode', { vol: .8 });
game.addLight(fx.x, fx.y, params.radius + 3, '#ff8a3a', 1, 0.6);
},
});
game.sfx('fireball', { vol: .6 });
break;
}
case 'chainLightning': {
let cur = null;
/* first target nearest to aim */
const aimHits = game.queryMonsters(aimX, aimY, 2.5);
cur = aimHits.length ? aimHits[0] : game.nearestMonster(player.x, player.y, params.range, m => !m.dead);
const hitSet = new Set();
let dmgBase = params.dmgPct;
for (let j = 0; j < params.jumps && cur; j++) {
hitSet.add(cur.uid);
const hit = rollPlayerHit(player, dmgBase, { elem: 'lit', target: cur });
applyToMonster(game, cur, hit, { elem: 'lit', src: 'player', skillId: skill.id });
/* visual zap */
for (let k = 0; k < 8; k++) {
game.spawnParticles(
D2.util.lerp(j === 0 ? player.x : prevX, cur.x, k / 8),
D2.util.lerp(j === 0 ? player.y : prevY, cur.y, k / 8),
{ count: 1, color: '#ffee6a', speed: 0.4, life: 0.22, size: 2.4, z: 12 });
}
var prevX = cur.x, prevY = cur.y;
game.addLight(cur.x, cur.y, 2.5, '#ffee6a', 0.7, 0.25);
cur = game.nearestMonster(cur.x, cur.y, params.range * 0.6, m => !m.dead && !hitSet.has(m.uid));
dmgBase *= 0.8;
}
if (!hitSet.size) game.sfx('error');
else game.sfx('lightning', { vol: .6 });
break;
}
case 'blink': {
const clamped = clampAim(game, player, aimX, aimY, params.range);
game.spawnParticles(player.x, player.y, { count: 12, color: '#b08aff', speed: 3, life: 0.4, size: 2.4, z: 10 });
if (canStand(game.world, clamped.x, clamped.y, player.radius)) {
player.x = clamped.x; player.y = clamped.y;
} else {
/* step back toward player until valid */
for (let s = 1; s <= 6; s++) {
const bx = D2.util.lerp(player.x, clamped.x, 1 - s / 6);
const by = D2.util.lerp(player.y, clamped.y, 1 - s / 6);
if (canStand(game.world, bx, by, player.radius)) { player.x = bx; player.y = by; break; }
}
}
game.spawnParticles(player.x, player.y, { count: 14, color: '#b08aff', speed: 3.5, life: 0.45, size: 2.6, z: 10 });
game.sfx('teleport');
if (params.guaranteedCritDur) {
player.guaranteedCritT = params.guaranteedCritDur;
player.guaranteedCritBonus = params.bonusCritDmg;
}
break;
}
case 'buffSelf': {
player.buffs.push({
id: skill.id, name: skill.name, icon: params.icon,
t: params.dur, dur: params.dur, mods: params.mods,
});
if (skill.id === 'smokeveil') player.smokeveilT = params.dur;
game.sfx('buff');
game.toast((skill.name[D2.i18n.getLang()] || skill.name.en) + '!');
D2.player.recompute(game.player);
break;
}
default:
console.warn('unknown castType', skill.castType);
return false;
}
return true;
}
function clampAim(game, player, aimX, aimY, maxRange) {
const d = D2.util.dist(player.x, player.y, aimX, aimY);
if (d <= maxRange) {
if (canStand(game.world, aimX, aimY, 0.3)) return { x: aimX, y: aimY };
}
const ang = Math.atan2(aimY - player.y, aimX - player.x);
const dd = Math.min(d, maxRange);
for (let s = dd; s > 0.5; s -= 0.4) {
const x = player.x + Math.cos(ang) * s, y = player.y + Math.sin(ang) * s;
if (canStand(game.world, x, y, 0.3)) return { x, y };
}
return { x: player.x, y: player.y };
}
/* channel & dash per-frame update */
function updateChannels(game, player, dt) {
const ch = player.channel;
if (!ch) return;
if (ch.type === 'whirlwind') {
ch.t -= dt;
ch.tick -= dt;
player.attackAnim = 0.2;
if (ch.tick <= 0) {
ch.tick = 0.18;
const hits = game.queryMonsters(player.x, player.y, ch.params.range + 0.4);
for (const m of hits) {
const hit = rollPlayerHit(player, ch.params.dmgPct, { elem: ch.elem, target: m, noCrit: rnd() > 0.2 });
applyToMonster(game, m, hit, { elem: ch.elem, src: 'player', skillId: ch.skillId, silentHit: rnd() > 0.4 });
}
game.spawnParticles(player.x, player.y, { count: 3, color: '#c8e8ff', speed: 4, life: 0.25, size: 2, z: 8 });
if (hits.length) game.sfx('swing', { vol: .25 });
}
if (ch.t <= 0) player.channel = null;
} else if (ch.type === 'dash') {
ch.t -= dt;
tryMove(game, player, ch.vx * dt, ch.vy * dt, true);
game.spawnParticles(player.x, player.y, { count: 2, color: '#ffb04a', speed: 1.5, life: 0.3, size: 2.2, z: 6 });
const hits = game.queryMonsters(player.x, player.y, player.radius + 0.6);
for (const m of hits) {
if (ch.hitSet.has(m.uid)) continue;
ch.hitSet.add(m.uid);
const hit = rollPlayerHit(player, ch.params.dmgPct, { elem: ch.elem, target: m });
applyToMonster(game, m, hit, { elem: ch.elem, src: 'player', fromX: player.x, fromY: player.y, skillId: ch.skillId });
if (ch.params.stun && !m.isBoss) m.frozen = Math.max(m.frozen, ch.params.stun);
}
if (ch.t <= 0) player.channel = null;
}
}
/* ================= monster attacks ================= */
function monsterMeleeHit(game, m) {
const d = D2.util.dist(m.x, m.y, game.player.x, game.player.y);
if (d <= m.attackRange + game.player.radius + 0.25) {
monsterHitPlayer(game, m, 1, m.elem);
if (m.chillOnHit) { game.player.chillT = 1.5; game.player.chillSlow = 0.25; }
}
}
function fireMonsterProjectile(game, m, override = {}) {
const proj = m.proj;
if (!proj) return;
const p = game.player;
const ang = Math.atan2(p.y - m.y, p.x - m.x) + (rnd() - .5) * 0.08;
game.projectiles.push(new D2.entities.Projectile({
x: m.x, y: m.y,
vx: Math.cos(ang) * proj.speed, vy: Math.sin(ang) * proj.speed * 0.55,
speed: proj.speed,
dmg: m.dmg * (override.dmgMult || 0.9),
elem: proj.elem || m.elem || 'phys',
fromPlayer: false,
visual: proj.kind === 'arrow' || proj.kind === 'firearrow' ? 'arrow' : 'bolt',
color: proj.color || '#fff',
slow: proj.slow || 0, slowDur: proj.slowDur || 0,
aoe: proj.aoe || 0, pool: proj.pool || false,
life: 2.4,
}));
game.sfx(proj.elem === 'fire' ? 'fireball' : proj.elem === 'pois' ? 'poison' : 'shoot', { vol: .3 });
}
/* projectile hit resolution (called by game loop) */
function projectileHit(game, pr, target) {
if (pr.fromPlayer) {
const hit = { dmg: pr.dmg, crit: pr.crit };
applyToMonster(game, target, hit, {
elem: pr.elem, src: 'player',
knockback: 0.3 * pr.size,
});
if (pr.slow) { target.chillT = Math.max(target.chillT || 0, pr.slowDur); target.chillSlow = pr.slow; }
if (pr.freeze && !target.isBoss) target.frozen = Math.max(target.frozen, pr.freeze);
} else {
monsterHitPlayer(game, { dmg: pr.dmg, level: pr.level || game.player.level, elem: pr.elem }, 1, pr.elem);
if (pr.aoe) {
dealRadiusDamage(game, pr.x, pr.y, pr.aoe, pr.dmg * 0.6, { elem: pr.elem, fromMonster: true });
game.spawnParticles(pr.x, pr.y, { count: 10, color: pr.color, speed: 4, life: 0.4, size: 2.6, z: 8 });
}
if (pr.pool) {
game.addGroundDecal(pr.x, pr.y, 1.3, 'rgba(140,220,80,.3)', 3.5);
game.addEffect({
type: 'groundAoE', x: pr.x, y: pr.y, t: 0, delay: 0.1, duration: 3, tickT: 0,
radius: 1.3, dmgPct: pr.dmg, elem: pr.elem, fromMonster: true,
color: '#8adf5a',
});
}
}
}
/* ground AoE ticking (both player & monster sourced) */
function tickGroundAoe(game, fx, dt) {
fx.tickT -= dt;
if (fx.tickT <= 0) {
fx.tickT = 0.5;
if (fx.fromMonster) {
const p = game.player;
if (p && !p.dead && D2.util.dist(p.x, p.y, fx.x, fx.y) <= fx.radius) {
monsterHitPlayer(game, { dmg: fx.dmgPct, level: game.player.level, elem: fx.elem }, 0.5, fx.elem);
}
} else {
const hits = game.queryMonsters(fx.x, fx.y, fx.radius);
for (const m of hits) {
const hit = rollPlayerHit(game.player, fx.dmgPct * 0.5, { elem: fx.elem, noCrit: true, target: m });
applyToMonster(game, m, hit, { elem: fx.elem, src: 'player', skillId: fx.skillId, silentHit: true });
if (fx.slow) { m.chillT = Math.max(m.chillT || 0, fx.slowDur || 1); m.chillSlow = fx.slow; }
}
if (hits.length) game.spawnParticles(fx.x + (rnd() - .5) * fx.radius, fx.y + (rnd() - .5) * fx.radius * 0.6, {
count: 3, color: fx.color, speed: 2, life: 0.4, size: 2.2, z: 10,
});
}
}
}
/* ================= destructibles & shrines ================= */
function breakProp(game, prop) {
game.world.removeProp(prop);
game.sfx('explode', { vol: .3 });
const col = prop.type === 'urn' ? '#b8a888' : '#8a6a42';
game.spawnParticles(prop.x + 0.5, prop.y + 0.5, { count: 10, color: col, speed: 4, life: 0.5, size: 2.6, z: 8, gravity: 16 });
if (D2.loot) D2.loot.rollPropLoot(game, prop.x + 0.5, prop.y + 0.5, prop.type);
}
function activateShrine(game, prop) {
prop.used = true;
const BAL = D2.BAL;
const P = BAL.shrineBuffPower;
const defs = {
dmg: { id: 'shrine_dmg', mods: { dmgPct: P.dmg * 100 } },
speed: { id: 'shrine_spd', mods: { moveSpeedPct: P.speed * 100 } },
armor: { id: 'shrine_arm', mods: { armorPct: P.armor * 100 } },
xp: { id: 'shrine_xp', mods: { xpGain: P.xp * 100 } },
regen: { id: 'shrine_reg', mods: { regenHpFlat: P.regen } },
};
const d = defs[prop.buff] || defs.dmg;
const names = {
shrine_dmg: { en: 'Rage of the Fallen', vi: 'Thịnh Nộ Kẻ Sa Đọa' },
shrine_spd: { en: 'Winds of the Deep', vi: 'Gió Vực Sâu' },
shrine_arm: { en: 'Bulwark of Stone', vi: 'Tường Đá Bất Diệt' },
shrine_xp: { en: 'Wisdom of Ages', vi: 'Trí Tuệ Nghìn Năm' },
shrine_reg: { en: 'Fountain of Life', vi: 'Suối Nguồn Sống' },
};
game.player.buffs.push({
id: d.id, name: names[d.id], icon: 'renewal',
t: BAL.shrineDuration, dur: BAL.shrineDuration, mods: d.mods,
});
D2.player.recompute(game.player);
game.sfx('shrine');
game.toast(D2.i18n.t('msg.shrine'));
game.spawnParticles(prop.x + .5, prop.y + .5, { count: 20, color: '#ffe86a', speed: 3.5, life: 0.8, size: 2.4, z: 12 });
game.addLight(prop.x, prop.y, 4, '#ffe86a', 0.8, 1);
}
D2.combat = {
weaponDamageRange, rollPlayerHit,
applyToMonster, dealRadiusDamage, killMonster,
monsterHitPlayer, monsterMeleeHit, fireMonsterProjectile, projectileHit,
applyDot, updateDots, tickGroundAoe,
playerBasicAttack, castSkill, updateChannels, doMeleeArc, fireProjectiles,
tryMove, canStand, breakProp, activateShrine, healPlayer,
elemColor, chainZap,
};
})(window.D2);
js/game/entities.js
+178
View File
@@ -0,0 +1,178 @@
/* ============================================================
* Diablo2D — entities.js : entity classes & spatial index
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
let nextUid = 1;
/* ---------------- Player ---------------- */
class Player {
constructor(classId) {
this.uid = nextUid++;
this.kind = 'player';
this.classId = classId;
this.x = 0; this.y = 0;
this.radius = 0.34;
this.dead = false;
/* progression */
this.level = 1;
this.xp = 0;
this.gold = 60;
this.statPoints = 0;
this.skillPoints = 0;
this.attributes = { str: 0, dex: 0, vit: 0, ene: 0 }; // allocated points
this.skills = {}; // skillId -> rank
this.hotbar = ['basic', null, null, null, null]; // slot0=basic(LMB), 1=RMB, 2..4 keys
this.potions = { hp: 4, mp: 3 };
this.inventory = []; // items
this.equip = { weapon: null, offhand: null, head: null, chest: null, hands: null, feet: null, amulet: null, ring1: null, ring2: null };
/* derived (recomputed) */
this.stats = {};
this.maxHp = 50; this.hp = 50;
this.maxMana = 20; this.mana = 20;
/* movement / anim */
this.moving = false;
this.walkPhase = 0;
this.attackAnim = 0;
this.hurtFlash = 0;
this.attackCd = 0;
this.channel = null; // whirlwind/dash state
this.guaranteedCritT = 0;
this.smokeveilT = 0;
this.buffs = []; // {id,name,icon,t,dur,mods}
this.dots = [];
/* run meta */
this.kills = 0;
this.eliteKills = 0;
this.bossKills = 0;
this.deaths = 0;
}
}
/* ---------------- Monster ---------------- */
class Monster {
constructor(statBlock, x, y) {
Object.assign(this, statBlock);
this.uid = nextUid++;
this.kind = 'monster';
this.x = x; this.y = y;
this.homeX = x; this.homeY = y;
this.dead = false;
this.dying = false;
/* ai state */
this.state = 'idle'; // idle | chase | windup | recover | charging | fleeing
this.aggro = false;
this.stateT = 0;
this.attackT = 0; // windup progress
this.attackAnim = 0;
this.hurtFlash = 0;
this.cdT = 0; // attack cooldown
this.specialCd = 0;
this.chargeVX = 0; this.chargeVY = 0;
this.path = null; this.pathIdx = 0; this.pathT = 0;
this.moving = false; this.speedFactor = 1;
/* statuses */
this.frozen = 0;
this.chillT = 0; this.chillSlow = 0;
this.dots = [];
this.regenAcc = 0;
}
}
/* ---------------- Projectile ---------------- */
const projectiles = [];
class Projectile {
constructor(o) {
Object.assign(this, {
x: 0, y: 0, vx: 0, vy: 0,
speed: 10, dmg: 5, elem: null,
fromPlayer: true,
pierce: false,
maxHits: 1,
hits: new Set(),
life: 2.2,
visual: 'bolt',
color: '#fff',
size: 1,
slow: 0, slowDur: 0,
bleed: false,
aoe: 0,
pool: false,
freeze: 0,
knockback: 0,
guaranteedCrit: false,
ownerSkillId: null,
z: 0,
}, o);
this.uid = nextUid++;
this.dead = false;
}
}
/* ---------------- Pickup ---------------- */
class Pickup {
constructor(kind, x, y, extra = {}) {
this.uid = nextUid++;
this.kind = kind; // gold | potion | item
this.x = x; this.y = y;
this.amount = extra.amount || 0;
this.item = extra.item || null;
this.potionType = extra.potionType || null;
this.t = 0; // age (for pop animation)
this.magnet = false;
}
}
/* ---------------- Spatial hash for monsters ---------------- */
class Grid {
constructor(cell = 2.5) { this.cell = cell; this.map = new Map(); }
key(x, y) { return ((x / this.cell) | 0) + ',' + ((y / this.cell) | 0); }
rebuild(entities) {
this.map.clear();
for (const e of entities) {
if (e.dead) continue;
const k = this.key(e.x, e.y);
let arr = this.map.get(k);
if (!arr) { arr = []; this.map.set(k, arr); }
arr.push(e);
}
}
query(x, y, r, out = []) {
out.length = 0;
const c = this.cell;
const x0 = ((x - r) / c) | 0, x1 = ((x + r) / c) | 0;
const y0 = ((y - r) / c) | 0, y1 = ((y + r) / c) | 0;
for (let gy = y0; gy <= y1; gy++) {
for (let gx = x0; gx <= x1; gx++) {
const arr = this.map.get(gx + ',' + gy);
if (arr) for (const e of arr) {
const dx = e.x - x, dy = e.y - y;
if (dx * dx + dy * dy <= r * r) out.push(e);
}
}
}
return out;
}
nearest(x, y, maxR, filter) {
let best = null, bd = maxR * maxR;
const cand = this.query(x, y, maxR, []);
for (const e of cand) {
if (filter && !filter(e)) continue;
const d = (e.x - x) ** 2 + (e.y - y) ** 2;
if (d < bd) { bd = d; best = e; }
}
return best;
}
}
D2.entities = { Player, Monster, Projectile, Pickup, Grid };
})(window.D2);
js/game/fov.js
+45
View File
@@ -0,0 +1,45 @@
/* ============================================================
* Diablo2D — fov.js : raycast visibility & fog of war
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const RAY_COUNT = 160;
/**
* Update world.visible / world.explored from (cx, cy) within radius.
* world must expose: w, h, transparent(x,y), visible(Uint8), explored(Uint8)
*/
function compute(world, cx, cy, radius) {
const { w, h } = world;
world.visible.fill(0);
const r2 = radius * radius;
const mark = (x, y) => {
if (x < 0 || y < 0 || x >= w || y >= h) return;
const i = y * w + x;
world.visible[i] = 1;
world.explored[i] = 1;
};
mark(cx, cy);
for (let i = 0; i < RAY_COUNT; i++) {
const ang = (i / RAY_COUNT) * Math.PI * 2;
const dx = Math.cos(ang), dy = Math.sin(ang);
let x = cx + 0.5, y = cy + 0.5;
for (let d = 0; d < radius; d += 0.5) {
x += dx * 0.5; y += dy * 0.5;
const tx = x | 0, ty = y | 0;
if (tx < 0 || ty < 0 || tx >= w || ty >= h) break;
const ddx = x - cx - 0.5, ddy = y - cy - 0.5;
if (ddx * ddx + ddy * ddy > r2) break;
mark(tx, ty);
if (!world.transparent(tx, ty)) break;
}
}
}
D2.fov = { compute };
})(window.D2);
js/game/game.js
+1081
View File
File diff suppressed because it is too large Load Diff
js/game/loot.js
+149
View File
@@ -0,0 +1,149 @@
/* ============================================================
* Diablo2D — loot.js : drops, gold, pickups
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const rnd = Math.random;
function goldFindMult(player) {
return 1 + ((player.stats && player.stats.goldFind) || 0) / 100;
}
function magicFindOf(player) {
return (player.stats && player.stats.magicFind) || 0;
}
/** main drop routine when a monster dies */
function dropFor(game, m) {
const p = game.player;
const DC = D2.BAL.dropChances;
const x = m.x, y = m.y;
/* --- gold --- */
let goldChance = DC.gold + (m.isElite ? 0.4 : 0) + (m.isBoss ? 1 : 0);
if (m.isBoss) goldChance = 1;
if (rnd() < goldChance) {
let amount = D2.BAL.goldDropBase(m.level) * goldFindMult(p);
if (m.isElite) amount *= 2.6;
if (m.isBoss) amount *= 7;
amount = Math.max(1, Math.round(amount));
const piles = m.isBoss ? 4 : amount > 40 ? 2 : 1;
for (let i = 0; i < piles; i++) {
game.pickups.push(new D2.entities.Pickup('gold',
x + (rnd() - .5) * 0.8, y + (rnd() - .5) * 0.8,
{ amount: Math.max(1, Math.round(amount / piles)) }));
}
}
/* --- potions --- */
const potChance = (DC.potionHp + DC.potionMp) * (m.isElite ? 1.8 : 1);
if (rnd() < potChance || m.isBoss) {
const type = rnd() < 0.62 ? 'hp' : 'mp';
game.pickups.push(new D2.entities.Pickup('potion',
x + (rnd() - .5) * .6, y + (rnd() - .5) * .6, { potionType: type }));
}
if (m.isBoss) {
game.pickups.push(new D2.entities.Pickup('potion', x + .5, y, { potionType: 'hp' }));
game.pickups.push(new D2.entities.Pickup('potion', x - .5, y, { potionType: 'mp' }));
}
/* --- gear --- */
let gearChance = DC.gear + (m.isElite ? DC.gearEliteBonus : 0);
if (m.isBoss) gearChance = DC.gearBoss;
const rolls = m.isBoss ? 4 : 1;
for (let i = 0; i < rolls; i++) {
if (rnd() >= gearChance && !(m.isBoss && i === 0)) continue;
const opts = {
magicFind: magicFindOf(p),
elite: m.isElite,
boss: m.isBoss,
slot: rnd() < 0.55 ? undefined :
D2.Items.SLOTS[(rnd() * D2.Items.SLOTS.length) | 0],
};
if (m.isBoss && i === 0) {
/* guaranteed flagship drop: legendary 40%, else rare */
opts.rarity = rnd() < 0.4 ? 'legendary' : 'rare';
}
const item = D2.Items.rollItem(Math.max(1, m.level), opts);
if (item) {
game.pickups.push(new D2.entities.Pickup('item',
x + (rnd() - .5) * 1.2, y + (rnd() - .5) * 1.2, { item }));
if (item.rarity === 'legendary') {
game.sfx('legendary');
game.toast('✦ ' + item.name, 'gold');
game.addLight(x, y, 3, '#ef8f34', 0.9, 2.5);
} else if (item.rarity === 'rare') {
game.sfx('pickup');
}
}
}
}
/** barrels / urns / chests */
function rollPropLoot(game, x, y, propType) {
if (propType === 'shrine' || String(propType).startsWith('npc_')) return;
if (propType === 'chest') {
/* chests are generous */
const n = 1 + (rnd() < 0.4 ? 1 : 0);
for (let i = 0; i < n; i++) {
const item = D2.Items.rollItem(Math.max(1, game.monsterLevel()),
{ magicFind: magicFindOf(game.player) + 15 });
if (item) game.pickups.push(new D2.entities.Pickup('item', x + (rnd() - .5), y + (rnd() - .5) * .6, { item }));
}
const g = Math.round(D2.BAL.goldDropBase(game.monsterLevel()) * 2 * goldFindMult(game.player));
game.pickups.push(new D2.entities.Pickup('gold', x, y + .3, { amount: g }));
game.sfx('coin');
return;
}
/* barrels & urns */
if (rnd() < 0.45) {
const amount = Math.max(1, Math.round(D2.BAL.goldDropBase(Math.max(1, game.monsterLevel() - 2)) * 0.5 * goldFindMult(game.player)));
game.pickups.push(new D2.entities.Pickup('gold', x, y, { amount }));
} else if (rnd() < 0.14) {
game.pickups.push(new D2.entities.Pickup('potion', x, y, {
potionType: rnd() < 0.65 ? 'hp' : 'mp'
}));
} else if (rnd() < 0.05) {
const item = D2.Items.rollItem(Math.max(1, game.monsterLevel() - 1));
if (item) game.pickups.push(new D2.entities.Pickup('item', x, y, { item }));
}
}
/** collect a pickup; returns true if consumed */
function collect(game, pk) {
const p = game.player;
switch (pk.kind) {
case 'gold': {
p.gold += pk.amount;
game.sfx('coin', { vol: .35 });
return true;
}
case 'potion': {
if (p.potions[pk.potionType] >= D2.BAL.potionStackMax) return false;
p.potions[pk.potionType]++;
game.sfx('pickup', { vol: .3 });
return true;
}
case 'item': {
if (p.inventory.length >= 40) {
game.toast(D2.i18n.t('msg.inventory_full'), 'bad');
return false;
}
p.inventory.push(pk.item);
game.sfx(pk.item.rarity === 'legendary' ? 'legendary' : 'pickup', { vol: .45 });
if (pk.item.rarity === 'magic' || pk.item.rarity === 'rare' || pk.item.rarity === 'legendary') {
game.toast(pk.item.name, pk.item.rarity === 'legendary' ? 'gold' : '');
}
if (D2.ui) D2.ui.refreshInventory();
return true;
}
}
return false;
}
D2.loot = { dropFor, rollPropLoot, collect };
})(window.D2);
js/game/path.js
+128
View File
@@ -0,0 +1,128 @@
/* ============================================================
* Diablo2D — path.js : A* pathfinding + line of sight
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const DIRS = [
[1, 0, 1], [-1, 0, 1], [0, 1, 1], [0, -1, 1],
[1, 1, 1.414], [1, -1, 1.414], [-1, 1, 1.414], [-1, -1, 1.414],
];
/**
* A* over world tiles. walkable(x,y) -> bool.
* Returns array of {x,y} tile coords (excluding start), or null.
*/
function find(walkable, w, h, sx, sy, tx, ty, maxNodes = 4000) {
if (!walkable(tx, ty)) return null;
if (sx === tx && sy === ty) return [];
const open = new MinHeap();
const gScore = new Float32Array(w * h).fill(Infinity);
const cameFrom = new Int32Array(w * h).fill(-1);
const closed = new Uint8Array(w * h);
const idx = (x, y) => y * w + x;
gScore[idx(sx, sy)] = 0;
open.push(idx(sx, sy), octile(sx, sy, tx, ty));
let nodes = 0;
while (open.size > 0 && nodes < maxNodes) {
const cur = open.pop();
const cx = cur % w, cy = (cur / w) | 0;
if (closed[cur]) continue;
closed[cur] = 1;
nodes++;
if (cx === tx && cy === ty) {
const path = [];
let n = cur;
while (n !== idx(sx, sy) && n >= 0) {
path.push({ x: n % w, y: (n / w) | 0 });
n = cameFrom[n];
}
path.reverse();
return path;
}
for (const [dx, dy, cost] of DIRS) {
const nx = cx + dx, ny = cy + dy;
if (nx < 0 || ny < 0 || nx >= w || ny >= h) continue;
if (!walkable(nx, ny)) continue;
// no corner cutting
if (dx !== 0 && dy !== 0) {
if (!walkable(cx + dx, cy) || !walkable(cx, cy + dy)) continue;
}
const ni = idx(nx, ny);
if (closed[ni]) continue;
const tentative = gScore[cur] + cost;
if (tentative < gScore[ni]) {
gScore[ni] = tentative;
cameFrom[ni] = cur;
open.push(ni, tentative + octile(nx, ny, tx, ty) * 1.02);
}
}
}
return null;
}
function octile(x0, y0, x1, y1) {
const dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0);
return (dx + dy) + (1.414 - 2) * Math.min(dx, dy);
}
/** lightweight binary min-heap keyed by f-score */
class MinHeap {
constructor() { this.items = []; this.f = []; this.size = 0; }
push(idx, f) {
let i = this.size++;
this.items[i] = idx; this.f[i] = f;
while (i > 0) {
const p = (i - 1) >> 1;
if (this.f[p] <= this.f[i]) break;
this.swap(p, i); i = p;
}
}
pop() {
const top = this.items[0];
this.size--;
if (this.size > 0) {
this.items[0] = this.items[this.size];
this.f[0] = this.f[this.size];
let i = 0;
for (;;) {
const l = 2 * i + 1, r = l + 1;
let m = i;
if (l < this.size && this.f[l] < this.f[m]) m = l;
if (r < this.size && this.f[r] < this.f[m]) m = r;
if (m === i) break;
this.swap(m, i); i = m;
}
}
return top;
}
swap(a, b) {
[this.items[a], this.items[b]] = [this.items[b], this.items[a]];
[this.f[a], this.f[b]] = [this.f[b], this.f[a]];
}
}
/** Bresenham line-of-sight through walkable/transparent tiles */
function hasLOS(transparent, x0, y0, x1, y1) {
let dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0);
const sx = x0 < x1 ? 1 : -1, sy = y0 < y1 ? 1 : -1;
let err = dx - dy;
let x = x0, y = y0;
for (;;) {
if (x === x1 && y === y1) return true;
const e2 = 2 * err;
if (e2 > -dy) { err -= dy; x += sx; }
if (e2 < dx) { err += dx; y += sy; }
if (x === x1 && y === y1) return true;
if (!transparent(x, y)) return false;
}
}
D2.path = { find, hasLOS, MinHeap };
})(window.D2);
js/game/player.js
+327
View File
@@ -0,0 +1,327 @@
/* ============================================================
* Diablo2D — player.js : stats aggregation, leveling, skills UI logic
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
/* special legendary flags -> stat keys */
const SPECIAL_MAP = {
cleaveEcho: 'cleaveEcho',
doubleShot: 'doubleShot',
fireNovaOnKill: 'fireNovaOnKill',
chillAttacker: 'chillAttacker',
allSkills: null, // handled via skillBonusLevels
execHeal: 'execHeal',
stormDash: 'dashCdrPct', // value applied below
lifesteal: 'lifestealPct',
eliteSlayer: 'eliteDmgPct',
chainOnHit: 'chainOnHitPct',
corpseBoom: 'corpseBoom',
venomStrike: 'venomOnHit',
voidstep: 'blinkCdrPct',
};
function createPlayer(classId) {
const p = new D2.entities.Player(classId);
/* baseMods are applied inside recompute(); attributes hold allocated points only */
/* starter gear */
p.equip.weapon = D2.Items.startingWeapon(classId);
p.equip.chest = D2.Items.startingArmor();
/* auto-assign starting actives to hotbar */
const actives = D2.Skills.skillsFor(classId).filter(s => s.type === 'active' && s.tier === 0);
let slot = 1;
for (const a of actives) {
if (slot >= 5) break;
p.skills[a.id] = 0; // rank 0 = known-but-untrained? no: grant rank 1 free
p.skills[a.id] = 1;
p.hotbar[slot] = a.id;
slot++;
}
recompute(p);
p.hp = p.maxHp;
p.mana = p.maxMana;
return p;
}
/** full stat aggregation */
function recompute(p) {
const oldMaxHp = p.maxHp, oldMaxMana = p.maxMana;
const BAL = D2.BAL;
const s = {};
const add = (k, v) => { s[k] = (s[k] || 0) + v; };
/* class base */
const cls = D2.Skills.CLASSES[p.classId];
for (const [k, v] of Object.entries(cls.baseMods)) add(k, v);
add('armor', D2.BAL.baseArmor);
/* allocated attributes */
for (const [k, v] of Object.entries(p.attributes)) if (v) add(k, v);
/* per-level growth (small) */
add('str', Math.floor(p.level / 4));
add('dex', Math.floor(p.level / 4));
add('vit', Math.floor(p.level / 3));
add('ene', Math.floor(p.level / 4));
/* equipment */
let skillBonusLevels = 0;
for (const slotKey of Object.keys(p.equip)) {
const it = p.equip[slotKey];
if (!it) continue;
if (it.stats) for (const [k, v] of Object.entries(it.stats)) add(k, v);
if (it.armor) add('armor', it.armor);
if (it.flatDmg) add('flatDmg', it.flatDmg);
if (it.special === 'allSkills') skillBonusLevels = 1;
const flag = SPECIAL_MAP[it.special];
if (flag === 'lifestealPct') s.lifestealPct = 0.06;
else if (flag === 'chainOnHitPct') s.chainOnHitPct = 0.15;
else if (flag === 'eliteDmgPct') s.eliteDmgPct = 25;
else if (flag === 'dashCdrPct') s.dashCdrPct = 30;
else if (flag === 'blinkCdrPct') s.blinkCdrPct = 30;
else if (flag) s[flag] = true;
}
/* passives from learned skills */
for (const [skillId, rank] of Object.entries(p.skills)) {
if (!rank || rank <= 0) continue;
const sk = D2.Skills.findSkill(p.classId, skillId);
if (!sk || sk.type !== 'passive') continue;
const mods = sk.mods(rank);
for (const [k, v] of Object.entries(mods)) add(k, v);
}
/* active buffs */
for (const b of p.buffs) {
if (b.mods) for (const [k, v] of Object.entries(b.mods)) add(k, v);
}
/* shrine/regen derived */
p.stats = s;
/* derived attributes */
p.maxHp = Math.round(BAL.baseHp + s.vit * BAL.hpPerVit + (p.level - 1) * BAL.hpPerLevel + (s.hpFlat || 0));
p.maxMana = Math.round(BAL.baseMana + s.ene * BAL.manaPerEne + (p.level - 1) * BAL.manaPerLevel + (s.manaFlat || 0));
/* keep ratio when max grows */
if (oldMaxHp > 0 && p.maxHp > oldMaxHp) p.hp += p.maxHp - oldMaxHp;
if (oldMaxMana > 0 && p.maxMana > oldMaxMana) p.mana += p.maxMana - oldMaxMana;
p.hp = D2.util.clamp(p.hp, 0, p.maxHp);
p.mana = D2.util.clamp(p.mana, 0, p.maxMana);
p.moveSpeed = Math.min(BAL.speedCap,
BAL.baseSpeed * (1 + (s.moveSpeedPct || 0) / 100));
p.skillBonusLevels = skillBonusLevels;
}
function buffMod(p, key) {
let v = 0;
for (const b of p.buffs) if (b.mods && b.mods[key]) v += b.mods[key];
return v;
}
PlayerProtoInit();
function PlayerProtoInit() {
D2.entities.Player.prototype.buffMod = function (key) { return buffMod(this, key); };
}
/* ---------------- XP & levels ---------------- */
function gainXp(game, amount, source) {
const p = game.player;
amount = Math.round(amount * (1 + buffMod(p, 'xpGain') / 100));
p.xp += amount;
game.addFloatText(
source ? source.x : p.x,
source ? source.y - 0.5 : p.y - 0.5,
'+' + amount + ' xp', '#c8a35a', 11);
while (p.level < D2.BAL.maxLevel && p.xp >= D2.BAL.xpForLevel(p.level)) {
levelUp(game);
}
if (D2.ui) { D2.ui.refreshHud(); }
}
function levelUp(game) {
const p = game.player;
p.level++;
p.statPoints += D2.BAL.statPointsPerLevel;
p.skillPoints += D2.BAL.skillPointsPerLevel;
recompute(p);
p.hp = p.maxHp;
p.mana = p.maxMana;
game.sfx('levelup');
game.toast(D2.i18n.t('msg.levelup'), 'gold');
game.addFloatText(p.x, p.y, 'LEVEL ' + p.level + '!', '#ffe86a', 18);
game.spawnParticles(p.x, p.y, { count: 26, color: '#ffe86a', speed: 4.5, life: 0.9, size: 2.8, z: 14 });
game.addLight(p.x, p.y, 5, '#ffe86a', 0.9, 1);
if (D2.ui) { D2.ui.refreshHud(); D2.ui.refreshCharacter(); D2.ui.refreshSkills(); }
}
function allocateStat(p, key) {
if (p.statPoints <= 0) return false;
if (!(key in p.attributes)) return false;
p.attributes[key]++;
p.statPoints--;
recompute(p);
return true;
}
/* ---------------- skills ---------------- */
function getSkillRank(p, skillId) {
const r = p.skills[skillId] || 0;
if (r > 0 && p.skillBonusLevels) {
const sk = D2.Skills.findSkill(p.classId, skillId);
if (sk && sk.type === 'active') return Math.min(sk.maxRank, r + p.skillBonusLevels);
}
return r;
}
function canLearnSkill(p, skill) {
if ((p.skills[skill.id] || 0) >= skill.maxRank) return 'maxed';
if (p.level < skill.unlockLevel) return 'level';
if (p.skillPoints <= 0) return 'points';
return true;
}
function learnSkill(game, skill) {
const p = game.player;
const ok = canLearnSkill(p, skill);
if (ok !== true) {
if (game && game.sfx) game.sfx('error');
return false;
}
p.skills[skill.id] = (p.skills[skill.id] || 0) + 1;
p.skillPoints--;
/* auto-assign to hotbar on first rank */
if (p.skills[skill.id] === 1 && !p.hotbar.includes(skill.id)) {
const empty = p.hotbar.findIndex((v, i) => i > 0 && v == null);
if (empty >= 0) p.hotbar[empty] = skill.id;
}
if (game && game.sfx) game.sfx('buff');
recompute(p);
if (D2.ui) { D2.ui.refreshSkills(); D2.ui.refreshHotbar(); }
return true;
}
/* ---------------- potions ---------------- */
let beltCd = 0;
function usePotion(game, type) {
const p = game.player;
if (beltCd > 0) return false;
if (p.potions[type] <= 0) {
game.toast(D2.i18n.t('msg.potion_none'), 'bad');
if (game && game.sfx) game.sfx('error');
return false;
}
const BAL = D2.BAL;
if (type === 'hp') {
if (p.hp >= p.maxHp) return false;
const heal = p.maxHp * BAL.potionHealPct + BAL.potionHealFlat(p.level);
D2.combat.healPlayer(game, heal);
} else {
if (p.mana >= p.maxMana) return false;
const restore = p.maxMana * BAL.potionManaPct + BAL.potionHealFlat(p.level) * 0.6;
p.mana = Math.min(p.maxMana, p.mana + restore);
game.addFloatText(p.x, p.y - .3, '+' + Math.round(restore), '#6f9fe8', 11);
}
p.potions[type]--;
beltCd = 0.8;
game.sfx('potion');
if (D2.ui) D2.ui.refreshHotbar();
return true;
}
function tickBelt(dt) { if (beltCd > 0) beltCd -= dt; }
/* ---------------- equip/unequip ---------------- */
function resolvePlayer(g) { return g && g.player ? g.player : g; }
function equipItem(game, item, fromInventoryIdx) {
const p = resolvePlayer(game);
let slotKey = item.slot;
if (item.slot === 'ring') {
if (!p.equip.ring1) slotKey = 'ring1';
else if (!p.equip.ring2) slotKey = 'ring2';
else slotKey = 'ring1';
}
const prev = p.equip[slotKey];
p.equip[slotKey] = item;
if (fromInventoryIdx != null) {
p.inventory.splice(fromInventoryIdx, 1);
}
if (prev) p.inventory.push(prev);
recompute(p);
if (game && game.sfx) game.sfx('pickup');
if (D2.ui) { D2.ui.refreshInventory(); D2.ui.refreshCharacter(); D2.ui.refreshHotbar(); }
return true;
}
function unequipSlot(game, slotKey) {
const p = resolvePlayer(game);
const it = p.equip[slotKey];
if (!it) return false;
if (p.inventory.length >= 40) {
if (game && game.toast) game.toast(D2.i18n.t('msg.inventory_full'), 'bad');
return false;
}
p.equip[slotKey] = null;
p.inventory.push(it);
recompute(p);
if (game && game.sfx) game.sfx('click');
if (D2.ui) { D2.ui.refreshInventory(); D2.ui.refreshCharacter(); }
return true;
}
function sellItem(game, invIdxOrItem, priceOverride) {
const p = resolvePlayer(game);
let item, idx = invIdxOrItem;
if (typeof invIdxOrItem === 'object') { item = invIdxOrItem; idx = p.inventory.indexOf(item); }
else item = p.inventory[idx];
if (!item) return false;
const val = priceOverride != null ? priceOverride : Math.round(item.value * D2.BAL.sellRatio);
if (idx >= 0) p.inventory.splice(idx, 1);
else {
/* equipped? */
for (const k of Object.keys(p.equip)) if (p.equip[k] === item) p.equip[k] = null;
}
p.gold += val;
if (game && game.sfx) game.sfx('sell');
recompute(p);
if (D2.ui) { D2.ui.refreshVendor(); D2.ui.refreshInventory(); D2.ui.refreshCharacter(); }
return val;
}
function buyItem(game, item) {
const p = resolvePlayer(game);
if (p.gold < item.value) {
if (game && game.toast) game.toast(D2.i18n.t('msg.not_enough_mana').replace(/mana/i, 'gold'), 'bad');
if (game && game.sfx) game.sfx('error');
return false;
}
if (p.inventory.length >= 40) {
if (game && game.toast) game.toast(D2.i18n.t('msg.inventory_full'), 'bad');
return false;
}
p.gold -= item.value;
p.inventory.push(item);
if (game && game.sfx) game.sfx('buy');
if (D2.ui) { D2.ui.refreshVendor(); D2.ui.refreshInventory(); }
return true;
}
D2.player = {
createPlayer, recompute, gainXp, allocateStat,
getSkillRank, canLearnSkill, learnSkill,
usePotion, tickBelt,
equipItem, unequipSlot, sellItem, buyItem,
buffMod,
};
})(window.D2);
js/game/world.js
+513
View File
@@ -0,0 +1,513 @@
/* ============================================================
* Diablo2D — world.js : procedural dungeon & town generation
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const T = { VOID: 0, FLOOR: 1, WALL: 2 };
const THEMES = {
cathedral: {
gen: 'rooms', floorsPerRoom: 0.9,
floorCols: ['#4a3f38', '#52453c', '#453b34', '#57493e'],
wallTop: '#2c2622', wallFace: '#3a322c',
accent: '#7a5a3a', torch: '#ff9a4a', fog: '#0a0806', ambient: 0.16,
music: 'crypt',
},
catacombs: {
gen: 'rooms',
floorCols: ['#3a4048', '#414750', '#363c44', '#464c55'],
wallTop: '#23282e', wallFace: '#30363d',
accent: '#4a6a8a', torch: '#7ab8ff', fog: '#07090c', ambient: 0.12,
music: 'crypt',
},
caves: {
gen: 'caves',
floorCols: ['#3e4a34', '#46523a', '#38442e', '#4d5940'],
wallTop: '#242c20', wallFace: '#323e2a',
accent: '#5a8a3a', torch: '#b8e86a', fog: '#080a06', ambient: 0.14,
music: 'cave',
},
hell: {
gen: 'caves',
floorCols: ['#48302a', '#50362e', '#422a24', '#583a30'],
wallTop: '#281512', wallFace: '#38201a',
accent: '#c83a1a', torch: '#ff5a2a', fog: '#100604', ambient: 0.18,
music: 'hell',
},
town: {
gen: 'town',
floorCols: ['#55503e', '#5c5644', '#4e4938', '#635d49'],
wallTop: '#33291e', wallFace: '#453829',
accent: '#8a7a4a', torch: '#ffb84a', fog: '#0c0a08', ambient: 0.32,
music: 'town',
},
};
/* ---------------- helpers ---------------- */
function idx(w, x, y) { return y * w + x; }
function inBounds(w, h, x, y) { return x >= 0 && y >= 0 && x < w && y < h; }
/* ---------------- rooms & corridors generator ---------------- */
function genRooms(rng, w, h, roomAttempts) {
const tiles = new Uint8Array(w * h);
const rooms = [];
for (let i = 0; i < roomAttempts && rooms.length < 14; i++) {
const rw = rng.int(6, 13), rh = rng.int(5, 10);
const rx = rng.int(2, w - rw - 3), ry = rng.int(2, h - rh - 3);
const room = { x: rx, y: ry, w: rw, h: rh, cx: (rx + rw / 2) | 0, cy: (ry + rh / 2) | 0 };
if (rooms.some(r => overlap(room, r, 2))) continue;
rooms.push(room);
carveRect(tiles, w, room);
}
/* L corridors between consecutive rooms */
for (let i = 1; i < rooms.length; i++) {
const a = rooms[i - 1], b = rooms[i];
carveL(tiles, w, a.cx, a.cy, b.cx, b.cy);
}
/* a couple of loops */
for (let k = 0; k < 3 && rooms.length > 4; k++) {
const a = rng.pick(rooms), b = rng.pick(rooms);
if (a !== b) carveL(tiles, w, a.cx, a.cy, b.cx, b.cy);
}
return { tiles, rooms };
}
function overlap(a, b, pad) {
return a.x - pad < b.x + b.w && a.x + a.w + pad > b.x &&
a.y - pad < b.y + b.h && a.y + a.h + pad > b.y;
}
function carveRect(tiles, w, r) {
for (let y = r.y; y < r.y + r.h; y++)
for (let x = r.x; x < r.x + r.w; x++)
tiles[idx(w, x, y)] = T.FLOOR;
}
function carveL(tiles, w, x0, y0, x1, y1) {
let x = x0, y = y0;
const horizFirst = Math.random() < 0.5;
const step = () => { tiles[idx(w, x, y)] = T.FLOOR; };
step();
if (horizFirst) {
while (x !== x1) { x += Math.sign(x1 - x); step(); }
while (y !== y1) { y += Math.sign(y1 - y); step(); }
} else {
while (y !== y1) { y += Math.sign(y1 - y); step(); }
while (x !== x1) { x += Math.sign(x1 - x); step(); }
}
}
/* ---------------- cellular cave generator ---------------- */
function genCaves(rng, w, h) {
const tiles = new Uint8Array(w * h);
const wallP = 0.44;
for (let y = 0; y < h; y++)
for (let x = 0; x < w; x++)
tiles[idx(w, x, y)] = (x === 0 || y === 0 || x === w - 1 || y === h - 1 || rng.next() < wallP) ? T.WALL : T.FLOOR;
for (let pass = 0; pass < 4; pass++) {
const next = Uint8Array.from(tiles);
for (let y = 1; y < h - 1; y++) {
for (let x = 1; x < w - 1; x++) {
let walls = 0;
for (let dy = -1; dy <= 1; dy++)
for (let dx = -1; dx <= 1; dx++) {
if (!dx && !dy) continue;
if (tiles[idx(w, x + dx, y + dy)] !== T.FLOOR) walls++;
}
next[idx(w, x, y)] = walls >= 5 ? T.WALL : T.FLOOR;
}
}
tiles.set(next);
}
/* keep only the largest connected region */
const seen = new Uint8Array(w * h);
let best = null;
for (let y = 0; y < h; y++) {
for (let x = 0; x < w; x++) {
const i0 = idx(w, x, y);
if (tiles[i0] !== T.FLOOR || seen[i0]) continue;
const region = [];
const stack = [[x, y]];
seen[i0] = 1;
while (stack.length) {
const [cx, cy] = stack.pop();
region.push([cx, cy]);
for (const [dx, dy] of [[1,0],[-1,0],[0,1],[0,-1]]) {
const nx = cx + dx, ny = cy + dy;
if (!inBounds(w, h, nx, ny)) continue;
const ni = idx(w, nx, ny);
if (!seen[ni] && tiles[ni] === T.FLOOR) { seen[ni] = 1; stack.push([nx, ny]); }
}
}
if (!best || region.length > best.length) best = region;
}
}
const keep = new Set(best.map(([x, y]) => idx(w, x, y)));
for (let i = 0; i < tiles.length; i++)
if (tiles[i] === T.FLOOR && !keep.has(i)) tiles[i] = T.VOID;
/* pseudo-rooms = flood-fill pockets for prop/spawn logic */
const rooms = [];
const grid = {};
for (const [x, y] of best) grid[x + ',' + y] = true;
// sample room anchors on a coarse grid where floor exists
for (let gy = 6; gy < h - 6; gy += 9) {
for (let gx = 6; gx < w - 6; gx += 9) {
if (grid[gx + ',' + gy]) rooms.push({ x: gx - 3, y: gy - 3, w: 7, h: 7, cx: gx, cy: gy });
}
}
return { tiles, rooms };
}
/* ---------------- walls around floors ---------------- */
function buildWalls(tiles, w, h) {
const out = Uint8Array.from(tiles);
for (let y = 0; y < h; y++) {
for (let x = 0; x < w; x++) {
if (tiles[idx(w, x, y)] !== T.VOID) continue;
let touchesFloor = false;
for (let dy = -1; dy <= 1 && !touchesFloor; dy++)
for (let dx = -1; dx <= 1; dx++) {
const nx = x + dx, ny = y + dy;
if (inBounds(w, h, nx, ny) && tiles[idx(w, nx, ny)] === T.FLOOR) { touchesFloor = true; break; }
}
if (touchesFloor) out[idx(w, x, y)] = T.WALL;
}
}
return out;
}
/* ---------------- floor assembly ---------------- */
/**
* opts: { act, floorIdx, seed, bossLair, torment }
* Returns the World object used by simulation & rendering.
*/
function generateFloor(opts) {
const act = opts.act | 0;
const floorIdx = opts.floorIdx | 0;
const themeId = D2.BAL.acts[act].theme;
const theme = THEMES[themeId];
const rng = new D2.util.RNG(opts.seed >>> 0);
const isBoss = !!opts.bossLair;
const w = isBoss ? 52 : 62, h = isBoss ? 38 : 62;
let tiles, rooms;
if (isBoss) {
tiles = new Uint8Array(w * h);
const m = 4;
const room = { x: m, y: m, w: w - m * 2, h: h - m * 2 };
carveRect(tiles, w, room);
rooms = [room];
/* pillars for cover */
for (let py = room.y + 4; py < room.y + room.h - 3; py += 6) {
for (let px = room.x + 5; px < room.x + room.w - 4; px += 8) {
tiles[idx(w, px, py)] = T.WALL;
tiles[idx(w, px + 1, py)] = T.WALL;
}
}
} else if (theme.gen === 'rooms') {
({ tiles, rooms } = genRooms(rng, w, h, 90));
} else {
({ tiles, rooms } = genCaves(rng, w, h));
}
const finalTiles = buildWalls(tiles, w, h);
/* variants for art */
const variant = new Uint8Array(w * h);
for (let i = 0; i < variant.length; i++) variant[i] = (rng.next() * 4) | 0;
const world = {
w, h,
tiles: finalTiles,
variant,
theme, themeId, act, floorIdx,
isBossLair: isBoss,
seed: opts.seed >>> 0,
torment: opts.torment | 0,
rooms,
props: [],
propMap: new Map(), // "x,y" -> blocking prop
spawns: [],
visible: new Uint8Array(w * h),
explored: new Uint8Array(w * h),
torches: [], // light sources {x,y,color,r,flicker}
spawnX: 0, spawnY: 0,
stairsDown: null, stairsUp: null,
mlvl: D2.BAL.monsterLevel(act, floorIdx, opts.torment | 0),
tileAt(x, y) { return inBounds(w, h, x, y) ? finalTiles[idx(w, x, y)] : T.VOID; },
isWalkable(x, y) {
if (this.tileAt(Math.floor(x), Math.floor(y)) !== T.FLOOR) return false;
return !this.propMap.has(Math.floor(x) + ',' + Math.floor(y));
},
transparent(x, y) { return this.tileAt(x, y) === T.FLOOR; },
randomFloorIn(room) {
for (let tries = 0; tries < 30; tries++) {
const x = rng.int(room.x, room.x + room.w - 1);
const y = rng.int(room.y, room.y + room.h - 1);
if (finalTiles[idx(w, x, y)] === T.FLOOR && !this.propMap.has(x + ',' + y)) return { x, y };
}
return null;
},
addProp(p) {
p.uid = D2.util.uid();
this.props.push(p);
if (p.blocking) this.propMap.set(p.x + ',' + p.y, p);
if (p.type === 'torch') this.torches.push({ x: p.x, y: p.y });
return p;
},
removeProp(p) {
const i = this.props.indexOf(p);
if (i >= 0) this.props.splice(i, 1);
this.propMap.delete(p.x + ',' + p.y);
},
};
/* ---- spawn point = first room center ---- */
const startRoom = rooms[0];
world.spawnX = startRoom.cx; world.spawnY = startRoom.cy;
/* ---- stairs ---- */
if (!isBoss) {
const lastRoom = farthestRoom(world, rooms, startRoom);
const sp = world.randomFloorIn(lastRoom) || { x: lastRoom.cx, y: lastRoom.cy };
world.stairsDown = { x: sp.x, y: sp.y };
world.addProp({ type: 'stairs_down', x: sp.x, y: sp.y, blocking: false });
} else {
world.stairsUp = { x: startRoom.cx, y: startRoom.cy };
world.addProp({ type: 'stairs_up', x: startRoom.cx, y: startRoom.cy, blocking: false });
}
populateProps(world, rng, theme);
populateMonsters(world, rng, act, isBoss);
ensureRouteToStairs(world);
return world;
}
/* Remove blocking props along one spawn→stairs route so caves
with 1-wide tunnels can never be sealed by barrels. */
function ensureRouteToStairs(world) {
if (!world.stairsDown || world.isTown) return;
const tilesPath = D2.path.find(
(x, y) => world.transparent(x, y),
world.w, world.h,
world.spawnX, world.spawnY,
world.stairsDown.x, world.stairsDown.y, 30000);
if (!tilesPath) return;
for (const n of tilesPath) {
const pr = world.propMap.get(n.x + ',' + n.y);
if (pr && pr.blocking) world.removeProp(pr);
}
}
function farthestRoom(world, rooms, from) {
let best = rooms[rooms.length - 1], bestD = -1;
for (const r of rooms) {
const d = (r.cx - from.cx) ** 2 + (r.cy - from.cy) ** 2;
if (d > bestD) { bestD = d; best = r; }
}
return best;
}
/* ---------------- props ---------------- */
function populateProps(world, rng, theme) {
const { w, h } = world;
const at = (x, y) => world.tileAt(x, y) === T.FLOOR && !world.propMap.has(x + ',' + y);
/* torches along walls */
const torchSpots = [];
for (let y = 1; y < h - 1; y++)
for (let x = 1; x < w - 1; x++)
if (world.tiles[idx(w, x, y)] === T.WALL &&
world.tileAt(x, y + 1) === T.FLOOR)
torchSpots.push([x, y]);
rng.shuffle(torchSpots);
const torchCount = Math.min(18, torchSpots.length);
for (let i = 0; i < torchCount; i++) {
const [x, y] = torchSpots[i];
world.addProp({ type: 'torch', x, y: y, blocking: false, light: true });
}
if (world.isBossLair) {
/* a chest behind the boss area */
return;
}
for (const room of world.rooms.slice(1)) {
/* barrels & urns */
const clusterN = rng.int(0, 3);
for (let c = 0; c < clusterN; c++) {
const bx = rng.int(room.x + 1, room.x + room.w - 2);
const by = rng.int(room.y + 1, room.y + room.h - 2);
const n = rng.int(1, 3);
for (let i = 0; i < n; i++) {
const x = Math.min(room.x + room.w - 1, bx + i % 2), y = by;
if (at(x, y)) world.addProp({
type: rng.chance(0.5) ? 'barrel' : 'urn',
x, y, blocking: true, hp: 1,
});
}
}
/* chest */
if (rng.chance(0.3)) {
const spot = world.randomFloorIn(room);
if (spot) world.addProp({ type: 'chest', x: spot.x, y: spot.y, blocking: true, opened: false });
}
/* shrine (rare) */
if (rng.chance(0.05)) {
const spot = world.randomFloorIn(room);
if (spot) world.addProp({
type: 'shrine', x: spot.x, y: spot.y, blocking: false, used: false,
buff: rng.pick(['dmg', 'speed', 'armor', 'xp', 'regen']),
});
}
}
}
/* ---------------- monsters ---------------- */
function populateMonsters(world, rng, act, isBoss) {
if (isBoss) {
const bd = D2.Monsters.BOSS_MAP[D2.BAL.acts[act].boss];
world.spawns.push({ boss: bd.id, x: world.w / 2, y: world.h * 0.68 });
/* honor guard */
const guard = D2.Monsters.rollSpeciesForAct(act);
for (let i = 0; i < 4; i++) {
world.spawns.push({ speciesId: guard.id, x: world.w / 2 + (rng.range(-5, 5)), y: world.h * 0.55 + rng.range(-2, 2), elite: false });
}
return;
}
const density = 0.55 + world.act * 0.12 + world.floorIdx * 0.05;
for (const room of world.rooms.slice(1)) {
if (world.stairsDown && room === nearestRoomToStairs(world)) continue;
const packs = Math.max(1, Math.round((room.w * room.h) / 55 * density));
for (let p = 0; p < packs; p++) {
const species = D2.Monsters.rollSpeciesForAct(act);
const packSize = species.ai === 'swarm' ? rng.int(3, 5) : rng.int(2, 4);
const packElite = rng.chance(0.13);
const base = world.randomFloorIn(room);
if (!base) continue;
for (let i = 0; i < packSize; i++) {
const sx = Math.max(1, Math.min(world.w - 2, base.x + ((rng.next() * 5) | 0) - 2));
const sy = Math.max(1, Math.min(world.h - 2, base.y + ((rng.next() * 5) | 0) - 2));
if (world.tileAt(sx, sy) === T.FLOOR)
world.spawns.push({ speciesId: species.id, x: sx, y: sy, elite: packElite });
}
}
}
}
function nearestRoomToStairs(world) {
if (!world.rooms.length || !world.stairsDown) return null;
let best = null, bd = Infinity;
for (const r of world.rooms) {
const d = (r.cx - world.stairsDown.x) ** 2 + (r.cy - world.stairsDown.y) ** 2;
if (d < bd) { bd = d; best = r; }
}
return best;
}
/* ---------------- town ---------------- */
function generateTown(seed) {
const w = 56, h = 40;
const rng = new D2.util.RNG((seed ^ 0x7A6E) >>> 0);
const theme = THEMES.town;
const tiles = new Uint8Array(w * h).fill(T.VOID);
const border = 2;
for (let y = border; y < h - border; y++)
for (let x = border; x < w - border; x++)
tiles[idx(w, x, y)] = T.FLOOR;
const world = {
w, h, tiles, variant: new Uint8Array(w * h),
theme, themeId: 'town', act: -1, floorIdx: -1,
isBossLair: false, isTown: true, seed: seed >>> 0, torment: 0,
rooms: [], props: [], propMap: new Map(),
spawns: [], visible: new Uint8Array(w * h), explored: new Uint8Array(w * h),
torches: [], spawnX: (w / 2) | 0, spawnY: (h * 0.62) | 0,
stairsDown: null, stairsUp: null, mlvl: 1,
tileAt(x, y) { return inBounds(w, h, x, y) ? tiles[idx(w, x, y)] : T.VOID; },
isWalkable(x, y) {
if (this.tileAt(Math.floor(x), Math.floor(y)) !== T.FLOOR) return false;
return !this.propMap.has(Math.floor(x) + ',' + Math.floor(y));
},
transparent(x, y) { return this.tileAt(x, y) === T.FLOOR; },
randomFloorIn(room) { return null; },
addProp(p) {
p.uid = D2.util.uid();
this.props.push(p);
if (p.blocking) this.propMap.set(p.x + ',' + p.y, p);
if (p.type === 'torch') this.torches.push({ x: p.x, y: p.y });
return p;
},
removeProp(p) {
const i = this.props.indexOf(p);
if (i >= 0) this.props.splice(i, 1);
this.propMap.delete(p.x + ',' + p.y);
},
};
/* Rogue-camp buildings along the top (charsi/akara/stash/kashya/cain/gheed) */
const bw = 7, bh = 6;
const buildings = [
{ x: 3, npc: 'charsi' }, // blacksmith
{ x: 11, npc: 'akara' }, // healer & magic
{ x: 19, npc: 'stash' }, // camp storage
{ x: 27, npc: 'kashya' }, // rogue captain — hunt quests
{ x: 35, npc: 'cain' }, // elder lore — main quests
{ x: 43, npc: 'gheed' }, // gambler
].map(b => ({ ...b, w: bw, h: bh, y: 4 }));
for (const b of buildings) {
for (let y = b.y; y < b.y + b.h; y++)
for (let x = b.x; x < b.x + b.w; x++)
tiles[idx(w, x, y)] = T.WALL;
/* doorway at bottom center */
const doorX = b.x + (b.w >> 1);
tiles[idx(w, doorX, b.y + b.h - 1)] = T.FLOOR;
tiles[idx(w, doorX, b.y + b.h - 2)] = T.FLOOR;
world.addProp({ type: 'npc_' + b.npc, x: doorX, y: b.y + b.h - 4, blocking: true });
world.addProp({ type: 'torch', x: b.x - 1, y: b.y + b.h, blocking: false, light: true });
world.addProp({ type: 'torch', x: b.x + b.w, y: b.y + b.h, blocking: false, light: true });
}
/* waypoint stone center */
world.addProp({ type: 'waypoint', x: (w / 2) | 0, y: (h * 0.38) | 0, blocking: true });
/* decorative props */
for (let i = 0; i < 10; i++) {
const x = rng.int(border + 1, w - border - 2), y = rng.int(h * 0.55 | 0, h - border - 2);
if (world.tileAt(x, y) === T.FLOOR && !world.propMap.has(x + ',' + y))
world.addProp({ type: rng.chance(0.5) ? 'barrel' : 'bones', x, y, blocking: rng.chance(0.5), hp: 1 });
}
/* fence posts around perimeter */
for (let x = border; x < w - border; x += 3) {
world.addProp({ type: 'bones', x, y: h - border, blocking: false });
world.addProp({ type: 'bones', x, y: border - 1 >= 0 ? border : border, blocking: false });
}
/* explored everywhere in town */
world.explored.fill(1);
return world;
}
D2.world = { T, THEMES, generateFloor, generateTown };
})(window.D2);
js/main.js
+184
View File
@@ -0,0 +1,184 @@
/* ============================================================
* Diablo2D — main.js : bootstrap & game loop
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
let lastT = 0;
let hudRefreshT = 0;
const G = D2.game;
/* ---------------- pause ---------------- */
function togglePause() {
const overlay = document.getElementById('pause-overlay');
if (G.state === 'playing') {
G.state = 'paused';
overlay.classList.remove('hidden');
D2.audio.stopMusic(0.3);
} else if (G.state === 'paused') {
G.state = 'playing';
overlay.classList.add('hidden');
if (G.world) D2.audio.playMusic(G.world.isTown ? 'town' : (G.world.isBossLair ? 'boss' : G.world.theme.music));
}
}
function exitToTitle() {
G.saveGame();
G.state = 'title';
document.getElementById('pause-overlay').classList.add('hidden');
D2.ui.closeAllPanels();
D2.ui.hideHud();
D2.ui.showTitle();
}
function openHelpInGame() {
G.state = 'paused';
document.getElementById('pause-overlay').classList.add('hidden');
D2.ui.showHelp(() => {
if (G.player && !G.player.dead) {
G.state = 'playing';
D2.ui.hideScreens();
} else {
D2.ui.showTitle();
}
});
}
/* ---------------- boot ---------------- */
function boot() {
/* load persisted settings before anything uses them */
const savedSettings = D2.save.get(D2.save.KEY.SETTINGS);
if (savedSettings) Object.assign(G.settings, savedSettings);
D2.i18n.setLang(G.settings.lang);
const canvas = document.getElementById('game-canvas');
D2.render.init(canvas);
D2.input.init(canvas);
D2.audio.playMusic('title'); // becomes pending until first gesture
/* staged loading for the progress bar feel */
D2.ui.showLoading();
const steps = [
['Carving tiles…', () => { D2.sprites.init(); }],
['Binding sigils…', () => { D2.ui.init(); D2.ui.initPanels(); }],
['Raising the dead…', () => { D2.game.updateQuests(); }],
['Opening the gates…', () => {}],
];
let i = 0;
const stepFn = () => {
if (i < steps.length) {
const [label, fn] = steps[i];
try { fn(); } catch (e) { console.error('boot step failed:', label, e); }
i++;
D2.ui.setLoadingProgress(i / steps.length);
setTimeout(stepFn, 120);
} else {
finishBoot();
}
};
setTimeout(stepFn, 200);
}
function finishBoot() {
wirePauseMenu();
window.D2.main = api; // expose after full init
G.applySettings();
/* click anywhere unlocks audio */
const unlock = () => { D2.audio.unlock(); };
window.addEventListener('mousedown', unlock, { once: true });
window.addEventListener('keydown', unlock, { once: true });
/* autosave on tab close while playing */
window.addEventListener('beforeunload', () => {
if ((G.state === 'playing' || G.state === 'paused') && G.player) G.saveGame();
});
document.addEventListener('visibilitychange', () => {
if (document.hidden && G.state === 'playing') togglePause();
});
G.state = 'title';
D2.ui.showTitle();
requestAnimationFrame(loop);
}
function wirePauseMenu() {
document.getElementById('btn-resume').addEventListener('click', togglePause);
document.getElementById('btn-pause-settings').addEventListener('click', () => {
D2.ui.showSettings(() => {
document.getElementById('screen-settings').classList.add('hidden');
if (G.state === 'paused') document.getElementById('pause-overlay').classList.remove('hidden');
});
document.getElementById('pause-overlay').classList.add('hidden');
});
document.getElementById('btn-pause-help').addEventListener('click', () => {
document.getElementById('pause-overlay').classList.add('hidden');
D2.ui.showHelp(() => {
document.getElementById('screen-help').classList.add('hidden');
document.getElementById('pause-overlay').classList.remove('hidden');
});
});
document.getElementById('btn-save-exit').addEventListener('click', exitToTitle);
}
/* ---------------- main loop ---------------- */
function loop(t) {
requestAnimationFrame(loop);
const dt = Math.min(0.05, (t - lastT) / 1000 || 0.016);
lastT = t;
/* consume this frame's inputs first, act on them, clear edges LAST */
D2.ui.tickGlobalKeys();
if (G.state === 'playing') {
G.update(dt);
D2.render.frame(G, dt);
D2.ui.tick(dt);
hudRefreshT -= dt;
if (hudRefreshT <= 0) { hudRefreshT = 0.12; D2.ui.refreshHud(); }
} else if (G.state === 'paused' || G.state === 'dead' || G.state === 'victory') {
/* keep rendering the frozen world behind overlays */
if (G.world) D2.render.frame(G, 0);
}
D2.input.endFrame();
}
/* ---------------- public api ---------------- */
const api = {
togglePause,
exitToTitle,
openHelp: openHelpInGame,
openClassSelect() {
D2.ui.showClassSelect();
},
startNewGame(classId) {
D2.ui.hideScreens();
D2.ui.hideHud ? null : 0;
D2.ui.showHud();
G.startNewGame(classId);
D2.ui.refreshHud();
D2.ui.renderQuestTracker();
D2.ui.toast(D2.i18n.t('class.' + classId + '.name'), 'gold');
setTimeout(() => {
D2.ui.toast(D2.i18n.getLang() === 'vi'
? '🗣 Hãy nói chuyện với Kashya & Cain trong trại (phím F)'
: '🗣 Speak with Kashya & Cain in camp (press F)', 'gold');
}, 1200);
},
startContinue() {
D2.ui.hideScreens();
D2.ui.showHud();
if (G.continueGame()) {
D2.ui.refreshHud();
D2.ui.renderQuestTracker();
}
},
};
window.addEventListener('DOMContentLoaded', boot);
})(window.D2);
js/render/render.js
+1102
View File
File diff suppressed because it is too large Load Diff
js/render/sprites.js
+769
View File
@@ -0,0 +1,769 @@
/* ============================================================
* Diablo2D — sprites.js : procedural baked art (tiles, props, icons)
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const TW = 64, TH = 32; // iso tile diamond size
const WALL_H = 46;
const cache = {
themes: {}, // themeId -> {floors[], wallBlock}
props: {}, // key -> canvas
skills: {}, // iconId -> canvas
};
function mkCanvas(w, h) {
const c = document.createElement('canvas');
c.width = w; c.height = h;
return c;
}
/* ---------------- iso helpers ---------------- */
function diamondPath(ctx, cx, cy, hw, hh) {
ctx.beginPath();
ctx.moveTo(cx, cy - hh);
ctx.lineTo(cx + hw, cy);
ctx.lineTo(cx, cy + hh);
ctx.lineTo(cx - hw, cy);
ctx.closePath();
}
/* ---------------- floor tiles ---------------- */
function bakeFloorTile(theme, colA, variant) {
const c = mkCanvas(TW, TH);
const ctx = c.getContext('2d');
const shade = [1, 0.92, 1.06, 0.85][variant];
const base = D2.util.shade(colA, shade);
diamondPath(ctx, TW / 2, TH / 2, TW / 2, TH / 2);
ctx.fillStyle = base;
ctx.fill();
/* subtle inner texture */
ctx.save();
diamondPath(ctx, TW / 2, TH / 2, TW / 2, TH / 2);
ctx.clip();
const rnd = new D2.util.RNG(variant * 7919 + colA.length * 131);
ctx.globalAlpha = 0.14;
for (let i = 0; i < 10; i++) {
const x = rnd.range(6, TW - 6), y = rnd.range(4, TH - 4);
ctx.fillStyle = i % 2 ? '#000' : '#fff';
ctx.fillRect(x, y, rnd.range(3, 10), 1);
}
/* grout lines */
ctx.globalAlpha = 0.25;
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(TW / 2, 0); ctx.lineTo(TW, TH / 2);
ctx.moveTo(TW / 2, TH); ctx.lineTo(0, TH / 2);
ctx.stroke();
/* cracks on some variants */
if (variant === 2 || variant === 3) {
ctx.globalAlpha = 0.3;
ctx.beginPath();
let x = TW * 0.3, y = TH * 0.5;
ctx.moveTo(x, y);
for (let i = 0; i < 4; i++) { x += rnd.range(-8, 12); y += rnd.range(-6, 6); ctx.lineTo(x, y); }
ctx.stroke();
}
ctx.restore();
return c;
}
function bakeWallBlock(theme) {
const c = mkCanvas(TW + 4, WALL_H + TH + 4);
const ctx = c.getContext('2d');
const ox = 2, oy = WALL_H + 2;
/* front-left face (SW) */
ctx.fillStyle = theme.wallFace;
ctx.beginPath();
ctx.moveTo(ox, oy - TH / 2);
ctx.lineTo(ox + TW / 2, oy);
ctx.lineTo(ox + TW / 2, oy - WALL_H);
ctx.lineTo(ox, oy - WALL_H - TH / 2);
ctx.closePath();
ctx.fill();
/* front-right face (SE) */
ctx.fillStyle = D2.util.shade(theme.wallFace, 0.72);
ctx.beginPath();
ctx.moveTo(ox + TW / 2, oy);
ctx.lineTo(ox + TW, oy - TH / 2);
ctx.lineTo(ox + TW, oy - TH / 2 - WALL_H);
ctx.lineTo(ox + TW / 2, oy - WALL_H);
ctx.closePath();
ctx.fill();
/* top */
diamondPath(ctx, ox + TW / 2, oy - WALL_H - TH / 2 + TH / 2, TW / 2, TH / 2);
ctx.fillStyle = theme.wallTop;
ctx.fill();
ctx.strokeStyle = 'rgba(255,255,255,.05)';
ctx.stroke();
/* brick lines on faces */
ctx.strokeStyle = 'rgba(0,0,0,.28)';
ctx.lineWidth = 1;
for (let row = 1; row < 4; row++) {
const yy = oy - (row / 4) * WALL_H;
ctx.beginPath();
ctx.moveTo(ox, yy - TH / 2 * (1 - row / 4));
ctx.lineTo(ox + TW / 2, yy);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(ox + TW / 2, yy);
ctx.lineTo(ox + TW, yy - TH / 2 * (1 - row / 4));
ctx.stroke();
}
return c;
}
/* ---------------- props ---------------- */
function bakeProps() {
const P = cache.props;
/* barrel */
let c = mkCanvas(40, 46); let x = c.getContext('2d');
barrelShape(x, 20, 30, '#6a4a2a', '#4a3018');
P.barrel = c;
/* urn */
c = mkCanvas(36, 42); x = c.getContext('2d');
x.fillStyle = '#8a7a5e';
x.beginPath(); x.ellipse(18, 26, 11, 13, 0, 0, Math.PI * 2); x.fill();
x.fillStyle = '#a89a78';
x.beginPath(); x.ellipse(18, 16, 7, 5, 0, 0, Math.PI * 2); x.fill();
x.fillStyle = '#3a3020'; x.fillRect(14, 8, 8, 5);
highlight(x, 13, 20, 5);
P.urn = c;
/* chest closed / open */
c = mkCanvas(48, 42); x = c.getContext('2d');
x.fillStyle = '#5e3f22'; roundRect(x, 6, 18, 36, 20, 3); x.fill();
x.fillStyle = '#7a5530'; roundRect(x, 6, 8, 36, 14, 6); x.fill();
x.strokeStyle = '#c8a35a'; x.lineWidth = 2;
x.strokeRect(6, 18, 36, 1);
x.fillStyle = '#c8a35a'; x.fillRect(21, 16, 6, 8);
metalEdges(x, 6, 8, 36, 30);
P.chest_closed = c;
c = mkCanvas(48, 42); x = c.getContext('2d');
x.fillStyle = '#5e3f22'; roundRect(x, 6, 18, 36, 20, 3); x.fill();
x.fillStyle = '#241505'; x.fillRect(8, 14, 32, 8);
x.fillStyle = '#7a5530'; roundRect(x, 4, 4, 40, 10, 5); x.fill();
metalEdges(x, 6, 8, 36, 30);
P.chest_open = c;
/* shrine (rune glow added at runtime) */
c = mkCanvas(52, 60); x = c.getContext('2d');
x.fillStyle = '#5a564e';
x.beginPath(); x.moveTo(26, 6); x.lineTo(42, 20); x.lineTo(38, 54); x.lineTo(14, 54); x.lineTo(10, 20); x.closePath(); x.fill();
x.fillStyle = '#6c685e';
x.beginPath(); x.moveTo(26, 6); x.lineTo(34, 14); x.lineTo(22, 22); x.closePath(); x.fill();
P.shrine = c;
/* torch bracket (flame drawn dynamically) */
c = mkCanvas(24, 44); x = c.getContext('2d');
x.fillStyle = '#3a2c1c'; x.fillRect(10, 18, 5, 22);
x.fillStyle = '#55432c'; x.fillRect(7, 14, 11, 8);
P.torch = c;
/* stairs down (dark pit with steps) */
c = mkCanvas(TW, TH + 18); x = c.getContext('2d');
x.save();
x.translate(TW / 2, 9);
diamondPath(x, 0, 0, TW / 2 - 2, TH / 2 - 1); x.fillStyle = '#0c0906'; x.fill();
x.clip();
for (let i = 0; i < 5; i++) {
diamondPath(x, 0, -i * 3.5, (TW / 2 - 3) * (1 - i * 0.09), (TH / 2 - 1) * (1 - i * 0.09));
x.fillStyle = ['#181310', '#221b15', '#2c231a', '#372c1f', '#43362a'][i];
x.fill();
}
x.restore();
P.stairs_down = c;
/* stairs up */
c = mkCanvas(TW, TH + 18); x = c.getContext('2d');
x.save();
x.translate(TW / 2, 9);
diamondPath(x, 0, 0, TW / 2 - 2, TH / 2 - 1); x.fillStyle = '#d8cba8'; x.fill();
x.clip();
for (let i = 0; i < 5; i++) {
diamondPath(x, 0, i * 3.5, (TW / 2 - 3) * (1 - i * 0.09), (TH / 2 - 1) * (1 - i * 0.09));
x.fillStyle = ['#cfc2a0', '#bfb294', '#afa286', '#9f9278', '#8f826a'][i];
x.fill();
}
x.restore();
P.stairs_up = c;
/* bones decor */
c = mkCanvas(36, 20); x = c.getContext('2d');
x.strokeStyle = '#cfc7ae'; x.lineWidth = 3; x.lineCap = 'round';
x.beginPath(); x.moveTo(6, 14); x.lineTo(28, 8); x.stroke();
x.beginPath(); x.moveTo(10, 6); x.lineTo(24, 15); x.stroke();
x.fillStyle = '#cfc7ae';
x.beginPath(); x.arc(29, 7, 4, 0, Math.PI * 2); x.fill();
x.fillStyle = '#222'; x.fillRect(28, 5, 2, 2); x.fillRect(31, 6, 2, 2);
P.bones = c;
/* waypoint stone */
c = mkCanvas(48, 62); x = c.getContext('2d');
x.fillStyle = '#4e5a66';
x.beginPath(); x.moveTo(24, 4); x.lineTo(38, 16); x.lineTo(34, 56); x.lineTo(14, 56); x.lineTo(10, 16); x.closePath(); x.fill();
x.fillStyle = '#61707e';
x.beginPath(); x.moveTo(24, 4); x.lineTo(31, 12); x.lineTo(17, 20); x.closePath(); x.fill();
x.strokeStyle = '#8ac4ff'; x.lineWidth = 2;
x.beginPath(); x.arc(24, 30, 8, 0, Math.PI * 2); x.stroke();
x.beginPath(); x.moveTo(24, 22); x.lineTo(24, 38); x.moveTo(17, 30); x.lineTo(31, 30); x.stroke();
P.waypoint = c;
/* NPCs */
c = mkCanvas(52, 58); x = c.getContext('2d'); // blacksmith
humanoid(x, 26, 34, { body: '#5a4a3a', accent: '#8a6a3a', cloth: '#3a2c1c' }, 1.15);
x.fillStyle = '#333'; x.fillRect(38, 40, 14, 8); // anvil block
x.fillStyle = '#555'; x.fillRect(36, 36, 18, 5);
P.npc_smith = c;
c = mkCanvas(52, 58); x = c.getContext('2d'); // healer
humanoid(x, 26, 34, { body: '#d8d4c8', accent: '#e8c87b', cloth: '#b8b4a8' }, 1.1);
x.strokeStyle = '#e86a5a'; x.lineWidth = 3;
x.beginPath(); x.moveTo(26, 22); x.lineTo(26, 40); x.moveTo(18, 30); x.lineTo(34, 30); x.stroke();
P.npc_healer = c;
c = mkCanvas(52, 58); x = c.getContext('2d'); // stash keeper chest
x.fillStyle = '#4a3a26'; roundRect(x, 10, 22, 32, 26, 4); x.fill();
x.fillStyle = '#5e4a30'; roundRect(x, 10, 14, 32, 12, 5); x.fill();
x.fillStyle = '#c8a35a'; x.fillRect(23, 20, 6, 10);
metalEdges(x, 10, 14, 32, 34);
P.npc_stash = c;
c = mkCanvas(52, 58); x = c.getContext('2d'); // Charsi the smith (renamed key)
humanoid(x, 26, 34, { body: '#8a6a52', accent: '#c89a5a', cloth: '#4a3626' }, 1.15);
x.fillStyle = '#333'; x.fillRect(38, 40, 14, 8);
x.fillStyle = '#555'; x.fillRect(36, 36, 18, 5);
P.npc_charsi = P.npc_smith;
c = mkCanvas(52, 58); x = c.getContext('2d'); // Akara — robed priestess
humanoid(x, 26, 34, { body: '#c8b090', accent: '#e86a5a', cloth: '#7a2c3a' }, 1.05);
x.fillStyle = '#e8d8a8';
x.beginPath(); x.moveTo(26, 14); x.lineTo(34, 22); x.lineTo(18, 22); x.closePath(); x.fill();
x.strokeStyle = '#f0e0b0'; x.lineWidth = 2;
x.beginPath(); x.moveTo(26, 24); x.lineTo(26, 44); x.stroke();
P.npc_akara = c;
c = mkCanvas(52, 58); x = c.getContext('2d'); // Kashya — rogue captain
humanoid(x, 26, 34, { body: '#7a6a5a', accent: '#a83a3a', cloth: '#3a3236' }, 1.1);
x.strokeStyle = '#9a8a6a'; x.lineWidth = 3;
x.beginPath(); x.moveTo(40, 10); x.quadraticCurveTo(46, 26, 42, 44); x.stroke(); // bow
x.fillStyle = '#8a2c2c';
x.beginPath(); x.moveTo(20, 16); x.lineTo(32, 16); x.lineTo(26, 10); x.closePath(); x.fill();
P.npc_kashya = c;
c = mkCanvas(52, 58); x = c.getContext('2d'); // Deckard Cain — elder scholar
humanoid(x, 26, 34, { body: '#c0b09a', accent: '#d8cba8', cloth: '#584a38' }, 0.92);
x.fillStyle = '#e8e0d0';
x.beginPath(); x.arc(26, 18, 9, Math.PI * 0.15, Math.PI * 0.85); x.fill(); // white beard
x.fillStyle = '#6a5030'; x.fillRect(14, 30, 12, 9);
x.fillStyle = '#e8dcc0'; x.fillRect(15, 31, 10, 7); // open book
P.npc_cain = c;
c = mkCanvas(52, 58); x = c.getContext('2d'); // Gheed — rotund merchant
humanoid(x, 26, 36, { body: '#b08a62', accent: '#d8b04a', cloth: '#6a4a2c' }, 1.28);
x.fillStyle = '#e8c84a';
x.beginPath(); x.arc(26, 30, 6, 0, Math.PI * 2); x.fill(); // coin pouch glint
x.strokeStyle = '#caa232'; x.lineWidth = 2;
x.beginPath(); x.moveTo(33, 34); x.lineTo(39, 40); x.stroke();
P.npc_gheed = c;
}
function barrelShape(x, cx, baseY, main, dark) {
x.fillStyle = dark;
x.beginPath(); x.ellipse(cx, baseY - 4, 13, 5, 0, 0, Math.PI * 2); x.fill();
x.fillStyle = main;
x.beginPath();
x.moveTo(cx - 12, baseY - 4);
x.bezierCurveTo(cx - 16, baseY - 16, cx - 16, baseY - 26, cx - 11, baseY - 34);
x.lineTo(cx + 11, baseY - 34);
x.bezierCurveTo(cx + 16, baseY - 26, cx + 16, baseY - 16, cx + 12, baseY - 4);
x.closePath(); x.fill();
x.strokeStyle = '#3a2812'; x.lineWidth = 2;
x.beginPath(); x.moveTo(cx - 13, baseY - 12); x.quadraticCurveTo(cx, baseY - 8, cx + 13, baseY - 12); x.stroke();
x.beginPath(); x.moveTo(cx - 13, baseY - 26); x.quadraticCurveTo(cx, baseY - 22, cx + 13, baseY - 26); x.stroke();
highlight(x, cx - 6, baseY - 22, 4);
}
function humanoid(x, cx, baseY, pal, s = 1) {
const S = v => v * s;
x.fillStyle = pal.cloth;
roundRect(x, cx - S(8), baseY - S(26), S(16), S(20), S(4)); x.fill(); // torso
x.fillStyle = pal.body;
x.beginPath(); x.arc(cx, baseY - S(32), S(6.5), 0, Math.PI * 2); x.fill(); // head
roundRect(x, cx - S(11), baseY - S(8), S(6), S(9), 2); x.fill(); // legs
roundRect(x, cx + S(5), baseY - S(8), S(6), S(9), 2); x.fill();
x.fillStyle = pal.accent;
roundRect(x, cx - S(10), baseY - S(22), S(20), S(4), 2); x.fill(); // belt
}
function metalEdges(x, rx, ry, rw, rh) {
x.strokeStyle = 'rgba(200,163,90,.5)';
x.lineWidth = 1.5;
x.strokeRect(rx, ry, rw, rh);
}
function roundRect(x, rx, ry, rw, rh, r) {
x.beginPath();
x.moveTo(rx + r, ry);
x.arcTo(rx + rw, ry, rx + rw, ry + rh, r);
x.arcTo(rx + rw, ry + rh, rx, ry + rh, r);
x.arcTo(rx, ry + rh, rx, ry, r);
x.arcTo(rx, ry, rx + rw, ry, r);
x.closePath();
}
function highlight(x, hx, hy, hr) {
x.fillStyle = 'rgba(255,255,255,.18)';
x.beginPath(); x.ellipse(hx, hy, hr, hr * 1.8, -0.4, 0, Math.PI * 2); x.fill();
}
/* ---------------- item icons ---------------- */
const MAT_COLORS = {
melee: ['#9aa0aa', '#7a808a'], ranged: ['#8a6a42', '#6e5432'], cast: ['#7a5a9a', '#5e4478'],
shield: ['#7a808a', '#5a606a'], armor: ['#8a8578', '#6a665a'], jewelry: ['#c8a35a', '#a8853a'],
};
/** returns a fresh canvas with the item's icon */
function itemIconCanvas(item, size = 48) {
const c = mkCanvas(size, size);
const x = c.getContext('2d');
x.save();
x.scale(size / 48, size / 48);
const rarCol = D2.Items.RARITIES[item.rarity].color;
const kind = item.kind || 'armor';
switch (item.slot) {
case 'weapon': drawWeaponIcon(x, item, kind, rarCol); break;
case 'offhand': kind === 'shield' ? drawShieldIcon(x, rarCol) : drawFocusIcon(x, kind, rarCol); break;
case 'head': drawHelmIcon(x, rarCol); break;
case 'chest': drawChestIcon(x, rarCol); break;
case 'hands': drawGlovesIcon(x, rarCol); break;
case 'feet': drawBootsIcon(x, rarCol); break;
case 'amulet': drawAmuletIcon(x, rarCol); break;
case 'ring': drawRingIcon(x, rarCol); break;
}
x.restore();
return c;
}
function drawWeaponIcon(x, item, kind, rarCol) {
if (kind === 'melee') {
const heavy = ['battleaxe', 'warhammer', 'reaver'].includes(item.baseId);
const blunt = ['club', 'mace', 'warhammer'].includes(item.baseId);
x.translate(24, 24); x.rotate(-Math.PI / 4);
if (heavy && !blunt) { // axe
x.fillStyle = '#6a4a2a'; x.fillRect(-2.5, -4, 5, 26);
x.fillStyle = MAT_COLORS.melee[0];
x.beginPath(); x.moveTo(2, -4); x.quadraticCurveTo(20, -2, 14, 10); x.lineTo(2, 8); x.closePath(); x.fill();
x.beginPath(); x.moveTo(-2, -4); x.quadraticCurveTo(-20, -2, -14, 10); x.lineTo(-2, 8); x.closePath(); x.fill();
} else if (blunt) { // mace
x.fillStyle = '#6a4a2a'; x.fillRect(-2.5, 0, 5, 22);
x.fillStyle = MAT_COLORS.melee[0];
x.beginPath(); x.arc(0, -5, 9, 0, Math.PI * 2); x.fill();
x.fillStyle = '#555'; x.fillRect(-9, -7, 18, 4);
} else { // sword / dagger
const len = item.baseId === 'greatsword' ? 30 : item.baseId === 'dagger' ? 16 : 24;
x.fillStyle = '#6a4a2a'; x.fillRect(-2, len - 4, 4, 10);
x.fillStyle = MAT_COLORS.melee[0];
x.beginPath(); x.moveTo(-3, len - 6); x.lineTo(-3, -len + 6); x.lineTo(0, -len); x.lineTo(3, -len + 6); x.lineTo(3, len - 6); x.closePath(); x.fill();
x.fillStyle = '#c8a35a'; x.fillRect(-8, len - 6, 16, 4);
}
} else if (kind === 'ranged') { // bow
x.strokeStyle = MAT_COLORS.ranged[0]; x.lineWidth = 4;
x.beginPath(); x.arc(20, 24, 16, Math.PI * 0.6, -Math.PI * 0.6); x.stroke();
x.strokeStyle = '#d8cba8'; x.lineWidth = 1.5;
x.beginPath(); x.moveTo(20 + 16 * Math.cos(Math.PI * 0.6), 24 + 16 * Math.sin(Math.PI * 0.6));
x.lineTo(20 + 16 * Math.cos(-Math.PI * 0.6), 24 + 16 * Math.sin(-Math.PI * 0.6)); x.stroke();
x.strokeStyle = rarCol; x.lineWidth = 3;
x.beginPath(); x.moveTo(8, 24); x.lineTo(34, 24); x.stroke();
x.beginPath(); x.moveTo(34, 24); x.lineTo(28, 21); x.moveTo(34, 24); x.lineTo(28, 27); x.stroke();
} else { // staff
x.translate(24, 24); x.rotate(Math.PI / 5);
x.fillStyle = '#6a4a2a'; roundRect(x, -3, -8, 6, 32, 3); x.fill();
const g = x.createRadialGradient(0, -12, 1, 0, -12, 10);
g.addColorStop(0, '#fff'); g.addColorStop(0.4, rarCol); g.addColorStop(1, 'rgba(0,0,0,0)');
x.fillStyle = g;
x.beginPath(); x.arc(0, -12, 10, 0, Math.PI * 2); x.fill();
}
}
function drawShieldIcon(x, rarCol) {
x.fillStyle = MAT_COLORS.shield[0];
x.beginPath();
x.moveTo(24, 6); x.quadraticCurveTo(40, 8, 39, 22); x.quadraticCurveTo(38, 38, 24, 44);
x.quadraticCurveTo(10, 38, 9, 22); x.quadraticCurveTo(8, 8, 24, 6);
x.closePath(); x.fill();
x.strokeStyle = '#444'; x.lineWidth = 2; x.stroke();
x.strokeStyle = rarCol; x.lineWidth = 2.5;
x.beginPath(); x.moveTo(24, 14); x.lineTo(24, 34); x.moveTo(15, 24); x.lineTo(33, 24); x.stroke();
}
function drawFocusIcon(x, kind, rarCol) {
if (kind === 'focus') {
const g = x.createRadialGradient(24, 24, 2, 24, 24, 16);
g.addColorStop(0, '#dff'); g.addColorStop(0.5, '#6ab8ff'); g.addColorStop(1, '#245');
x.fillStyle = g;
x.beginPath(); x.arc(24, 24, 14, 0, Math.PI * 2); x.fill();
x.strokeStyle = '#c8a35a'; x.lineWidth = 2.5;
x.beginPath(); x.arc(24, 24, 16, 0, Math.PI * 2); x.stroke();
} else { // quiver
x.fillStyle = '#6a4a2a'; roundRect(x, 16, 12, 16, 26, 4); x.fill();
x.strokeStyle = '#c8a35a'; x.lineWidth = 2;
for (let i = 0; i < 3; i++) {
x.beginPath(); x.moveTo(19 + i * 5, 14); x.lineTo(19 + i * 5, 4); x.stroke();
}
}
}
function drawHelmIcon(x, rarCol) {
x.fillStyle = MAT_COLORS.armor[0];
x.beginPath(); x.arc(24, 26, 15, Math.PI, 0); x.lineTo(39, 34); x.lineTo(9, 34); x.closePath(); x.fill();
x.fillStyle = '#222'; x.fillRect(15, 24, 18, 5);
x.fillStyle = rarCol; x.fillRect(22, 10, 4, 8);
}
function drawChestIcon(x, rarCol) {
x.fillStyle = MAT_COLORS.armor[0];
x.beginPath();
x.moveTo(14, 10); x.lineTo(34, 10); x.lineTo(40, 18); x.lineTo(36, 42); x.lineTo(12, 42); x.lineTo(8, 18);
x.closePath(); x.fill();
x.fillStyle = 'rgba(0,0,0,.25)';
x.fillRect(21, 10, 6, 32);
x.strokeStyle = rarCol; x.lineWidth = 2;
x.beginPath(); x.moveTo(14, 20); x.lineTo(34, 20); x.stroke();
}
function drawGlovesIcon(x, rarCol) {
x.fillStyle = MAT_COLORS.armor[0];
roundRect(x, 8, 16, 13, 20, 4); x.fill();
roundRect(x, 27, 16, 13, 20, 4); x.fill();
roundRect(x, 8, 34, 13, 8, 3); x.fill();
roundRect(x, 27, 34, 13, 8, 3); x.fill();
x.strokeStyle = rarCol; x.lineWidth = 2;
x.beginPath(); x.moveTo(14, 16); x.lineTo(14, 30); x.moveTo(33, 16); x.lineTo(33, 30); x.stroke();
}
function drawBootsIcon(x, rarCol) {
x.fillStyle = MAT_COLORS.armor[0];
roundRect(x, 12, 10, 10, 26, 3); x.fill();
roundRect(x, 12, 32, 22, 8, 3); x.fill();
roundRect(x, 26, 10, 10, 26, 3); x.fill();
roundRect(x, 26, 32, 14, 8, 3); x.fill();
x.fillStyle = rarCol;
x.fillRect(12, 28, 10, 3); x.fillRect(26, 28, 10, 3);
}
function drawAmuletIcon(x, rarCol) {
x.strokeStyle = '#c8a35a'; x.lineWidth = 2.5;
x.beginPath(); x.arc(24, 22, 12, Math.PI * 0.15, Math.PI * 0.85, true); x.stroke();
const g = x.createRadialGradient(24, 34, 1, 24, 34, 8);
g.addColorStop(0, '#fff'); g.addColorStop(0.5, rarCol); g.addColorStop(1, '#222');
x.fillStyle = g;
x.beginPath(); x.moveTo(24, 26); x.lineTo(31, 33); x.lineTo(24, 43); x.lineTo(17, 33); x.closePath(); x.fill();
x.strokeStyle = '#c8a35a'; x.lineWidth = 1.5; x.stroke();
}
function drawRingIcon(x, rarCol) {
x.strokeStyle = MAT_COLORS.jewelry[0]; x.lineWidth = 5;
x.beginPath(); x.arc(24, 27, 11, 0, Math.PI * 2); x.stroke();
x.strokeStyle = 'rgba(255,255,255,.4)'; x.lineWidth = 1.5;
x.beginPath(); x.arc(24, 27, 13, Math.PI * 1.1, Math.PI * 1.6); x.stroke();
const g = x.createRadialGradient(24, 12, 1, 24, 12, 7);
g.addColorStop(0, '#fff'); g.addColorStop(0.6, rarCol); g.addColorStop(1, '#222');
x.fillStyle = g;
x.beginPath(); x.arc(24, 12, 6, 0, Math.PI * 2); x.fill();
}
/* ---------------- skill icons ---------------- */
const SKILL_ICON_STYLE = {
cleave: { col: '#e8d8b0', draw: (x) => arcSweep(x, '#e8d8b0') },
whirlwind: { col: '#c8e8ff', draw: (x) => spiral(x, '#c8e8ff') },
consecrate: { col: '#ffe86a', draw: (x) => pillar(x, '#ffe86a') },
charge: { col: '#ffb04a', draw: (x) => arrowFat(x, '#ffb04a') },
warcry: { col: '#ff6a4a', draw: (x) => shoutRings(x, '#ff6a4a') },
seismic: { col: '#d8a84a', draw: (x) => crackBurst(x, '#d8a84a') },
ironskin: { col: '#aab4be', draw: (x) => shieldGlyph(x, '#aab4be') },
renewal: { col: '#7ade8a', draw: (x) => crossPulse(x, '#7ade8a') },
laststand: { col: '#e85a4a', draw: (x) => heartGuard(x, '#e85a4a') },
multishot: { col: '#d8cba8', draw: (x) => fanArrows(x, '#d8cba8', 3) },
piercingbolt: { col: '#ffe8b0', draw: (x) => fanArrows(x, '#ffe8b0', 1) },
arrowstorm: { col: '#ffd24a', draw: (x) => rainDown(x, '#ffd24a') },
shadowstep: { col: '#8a6aff', draw: (x) => blinkGlyph(x, '#8a6aff') },
fanofknives: { col: '#c8d8e8', draw: (x) => radialKnives(x, '#c8d8e8') },
smokeveil: { col: '#9aa8b8', draw: (x) => puffCloud(x, '#9aa8b8') },
predator: { col: '#ff8a4a', draw: (x) => eyeGlyph(x, '#ff8a4a') },
bleedingedge: { col: '#e83a5a', draw: (x) => dropletBlade(x, '#e83a5a') },
swiftvantage: { col: '#8ad8ff', draw: (x) => windLines(x, '#8ad8ff') },
firebolt: { col: '#ff7a2a', draw: (x) => fireOrb(x, '#ff7a2a') },
meteor: { col: '#ff5a1a', draw: (x) => fallingRock(x, '#ff5a1a') },
flamewave: { col: '#ffa02a', draw: (x) => novaRing(x, '#ffa02a') },
iceshards: { col: '#8ad8ff', draw: (x) => radialKnives(x, '#8ad8ff') },
frostnova: { col: '#b8ecff', draw: (x) => snowflake(x, '#b8ecff') },
blizzard: { col: '#c8f0ff', draw: (x) => rainDown(x, '#c8f0ff') },
chainlightning: { col: '#ffee6a', draw: (x) => boltZigzag(x, '#ffee6a') },
teleport: { col: '#c86aff', draw: (x) => blinkGlyph(x, '#c86aff') },
arcaneecho: { col: '#b08aff', draw: (x) => spiral(x, '#b08aff') },
basic_melee: { col: '#e8d8b0', draw: (x) => swordGlyph(x, '#e8d8b0') },
basic_ranged: { col: '#d8cba8', draw: (x) => fanArrows(x, '#d8cba8', 1) },
basic_cast: { col: '#c86aff', draw: (x) => fireOrb(x, '#c86aff') },
potion_hp: { col: '#e84a3a', draw: (x) => potionGlyph(x, '#e84a3a') },
potion_mp: { col: '#4a7ae8', draw: (x) => potionGlyph(x, '#4a7ae8') },
};
function skillIconCanvas(iconId, size = 48) {
const key = iconId + '_' + size;
if (!cache.skills[key]) {
const c = mkCanvas(size, size);
const x = c.getContext('2d');
x.save();
x.scale(size / 48, size / 48);
const st = SKILL_ICON_STYLE[iconId] || { col: '#ccc', draw: xx => orb(xx, '#ccc') };
/* backdrop */
const g = x.createRadialGradient(24, 24, 4, 24, 24, 24);
g.addColorStop(0, 'rgba(60,50,40,.9)');
g.addColorStop(1, 'rgba(15,10,8,.95)');
x.fillStyle = g;
x.fillRect(0, 0, 48, 48);
x.strokeStyle = 'rgba(200,163,90,.35)';
x.strokeRect(1, 1, 46, 46);
st.draw(x);
x.restore();
cache.skills[key] = c;
}
return cache.skills[key];
}
function cloneCanvas(src) {
const c = mkCanvas(src.width, src.height);
c.getContext('2d').drawImage(src, 0, 0);
return c;
}
/* little glyph helpers */
function orb(x, col) {
const g = x.createRadialGradient(24, 22, 2, 24, 22, 13);
g.addColorStop(0, '#fff'); g.addColorStop(0.45, col); g.addColorStop(1, 'rgba(0,0,0,.1)');
x.fillStyle = g; x.beginPath(); x.arc(24, 22, 13, 0, 7); x.fill();
}
function fireOrb(x, col) { orb(x, col);
x.strokeStyle = col; x.lineWidth = 2;
x.beginPath(); x.moveTo(24, 36); x.quadraticCurveTo(20, 30, 24, 26); x.stroke();
}
function arcSweep(x, col) {
x.strokeStyle = col; x.lineWidth = 5; x.lineCap = 'round';
x.beginPath(); x.arc(24, 30, 15, Math.PI * 1.15, Math.PI * 1.85); x.stroke();
x.lineWidth = 2;
x.beginPath(); x.arc(24, 30, 9, Math.PI * 1.2, Math.PI * 1.8); x.stroke();
}
function spiral(x, col) {
x.strokeStyle = col; x.lineWidth = 3.5; x.lineCap = 'round';
x.beginPath();
for (let a = 0; a < Math.PI * 4; a += 0.2) {
const r = 3 + a * 1.7;
const px = 24 + Math.cos(a) * r, py = 24 + Math.sin(a) * r * 0.8;
a === 0 ? x.moveTo(px, py) : x.lineTo(px, py);
}
x.stroke();
}
function pillar(x, col) {
const g = x.createLinearGradient(0, 8, 0, 40);
g.addColorStop(0, 'rgba(255,255,255,.9)'); g.addColorStop(1, 'rgba(0,0,0,0)');
x.fillStyle = g;
x.fillRect(18, 8, 12, 32);
x.strokeStyle = col; x.lineWidth = 2;
x.beginPath(); x.arc(24, 36, 12, Math.PI, 0); x.stroke();
}
function arrowFat(x, col) {
x.fillStyle = col;
x.beginPath(); x.moveTo(40, 24); x.lineTo(26, 16); x.lineTo(30, 24); x.lineTo(26, 32); x.closePath(); x.fill();
x.fillRect(8, 21, 20, 6);
}
function shoutRings(x, col) {
x.strokeStyle = col;
x.lineWidth = 2.5;
for (const r of [6, 12, 18]) { x.globalAlpha = 1 - r / 22; x.beginPath(); x.arc(24, 26, r, 0, 7); x.stroke(); }
x.globalAlpha = 1;
}
function crackBurst(x, col) {
x.strokeStyle = col; x.lineWidth = 3; x.lineCap = 'round';
for (let i = 0; i < 6; i++) {
const a = i / 6 * Math.PI * 2;
x.beginPath(); x.moveTo(24, 26);
x.lineTo(24 + Math.cos(a) * 16, 26 + Math.sin(a) * 13);
x.stroke();
}
}
function shieldGlyph(x, col) {
x.fillStyle = col;
x.beginPath(); x.moveTo(24, 8); x.quadraticCurveTo(38, 12, 37, 24);
x.quadraticCurveTo(35, 36, 24, 42); x.quadraticCurveTo(13, 36, 11, 24);
x.quadraticCurveTo(10, 12, 24, 8); x.closePath(); x.fill();
x.fillStyle = 'rgba(0,0,0,.3)';
x.beginPath(); x.moveTo(24, 8); x.lineTo(24, 42); x.lineTo(13, 36); x.lineTo(11, 24); x.quadraticCurveTo(10, 12, 24, 8); x.closePath(); x.fill();
}
function crossPulse(x, col) {
x.fillStyle = col;
x.fillRect(20, 10, 8, 28); x.fillRect(10, 20, 28, 8);
x.strokeStyle = col; x.globalAlpha = .5; x.lineWidth = 2;
x.beginPath(); x.arc(24, 24, 19, 0, 7); x.stroke(); x.globalAlpha = 1;
}
function heartGuard(x, col) {
x.fillStyle = col;
x.beginPath();
x.moveTo(24, 38); x.bezierCurveTo(6, 24, 14, 8, 24, 18); x.bezierCurveTo(34, 8, 42, 24, 24, 38);
x.fill();
x.strokeStyle = '#fff'; x.lineWidth = 2; x.globalAlpha = .6;
x.beginPath(); x.moveTo(24, 18); x.lineTo(24, 34); x.stroke(); x.globalAlpha = 1;
}
function fanArrows(x, col, n) {
x.strokeStyle = col; x.lineWidth = 3; x.lineCap = 'round';
const angles = n === 1 ? [0] : [-0.5, 0, 0.5];
for (const a of angles) {
x.save(); x.translate(24, 34); x.rotate(a);
x.beginPath(); x.moveTo(0, 0); x.lineTo(0, -22); x.stroke();
x.beginPath(); x.moveTo(-3, -18); x.lineTo(0, -24); x.lineTo(3, -18); x.stroke();
x.restore();
}
}
function rainDown(x, col) {
x.strokeStyle = col; x.lineWidth = 2.5; x.lineCap = 'round';
for (let i = 0; i < 5; i++) {
const px = 8 + i * 8, py = 8 + (i % 3) * 8;
x.beginPath(); x.moveTo(px, py); x.lineTo(px - 2, py + 10); x.stroke();
}
x.beginPath(); x.arc(24, 36, 9, Math.PI, 0); x.stroke();
}
function blinkGlyph(x, col) {
x.fillStyle = col; x.globalAlpha = .35;
x.beginPath(); x.arc(14, 30, 8, 0, 7); x.fill();
x.globalAlpha = .8;
x.beginPath(); x.arc(33, 18, 8, 0, 7); x.fill();
x.globalAlpha = 1;
x.strokeStyle = col; x.lineWidth = 2; x.setLineDash([4, 3]);
x.beginPath(); x.moveTo(17, 26); x.lineTo(29, 21); x.stroke(); x.setLineDash([]);
}
function radialKnives(x, col) {
x.strokeStyle = col; x.lineWidth = 2.5; x.lineCap = 'round';
for (let i = 0; i < 8; i++) {
const a = i / 8 * Math.PI * 2;
x.beginPath();
x.moveTo(24 + Math.cos(a) * 7, 24 + Math.sin(a) * 7);
x.lineTo(24 + Math.cos(a) * 17, 24 + Math.sin(a) * 17);
x.stroke();
}
}
function puffCloud(x, col) {
x.fillStyle = col; x.globalAlpha = .75;
for (const [ox, oy, r] of [[18, 28, 9], [28, 24, 11], [22, 18, 8], [32, 30, 7]]) {
x.beginPath(); x.arc(ox, oy, r, 0, 7); x.fill();
}
x.globalAlpha = 1;
}
function eyeGlyph(x, col) {
x.strokeStyle = col; x.lineWidth = 2.5;
x.beginPath(); x.moveTo(8, 24); x.quadraticCurveTo(24, 10, 40, 24); x.quadraticCurveTo(24, 38, 8, 24); x.stroke();
x.fillStyle = col;
x.beginPath(); x.arc(24, 24, 6, 0, 7); x.fill();
x.fillStyle = '#000'; x.beginPath(); x.arc(24, 24, 2.5, 0, 7); x.fill();
}
function dropletBlade(x, col) {
x.strokeStyle = '#c8d8e8'; x.lineWidth = 4; x.lineCap = 'round';
x.beginPath(); x.moveTo(14, 36); x.lineTo(34, 12); x.stroke();
x.fillStyle = col;
x.beginPath(); x.moveTo(30, 30); x.quadraticCurveTo(38, 36, 32, 41); x.quadraticCurveTo(25, 37, 30, 30); x.fill();
}
function windLines(x, col) {
x.strokeStyle = col; x.lineWidth = 2.5; x.lineCap = 'round';
for (const [y0, len] of [[16, 22], [24, 30], [32, 20]]) {
x.beginPath(); x.moveTo(40 - len, y0);
x.quadraticCurveTo(40 - len * .5, y0 - 4, 40, y0);
x.stroke();
}
}
function fallingRock(x, col) {
x.fillStyle = '#7a5a3a';
x.beginPath(); x.moveTo(28, 8); x.lineTo(36, 14); x.lineTo(33, 24); x.lineTo(24, 22); x.closePath(); x.fill();
x.strokeStyle = col; x.lineWidth = 3;
x.beginPath(); x.moveTo(20, 14); x.lineTo(14, 22); x.stroke();
x.beginPath(); x.moveTo(24, 10); x.lineTo(20, 16); x.stroke();
const g = x.createRadialGradient(24, 36, 2, 24, 36, 12);
g.addColorStop(0, col); g.addColorStop(1, 'rgba(0,0,0,0)');
x.fillStyle = g; x.beginPath(); x.arc(24, 36, 12, 0, 7); x.fill();
}
function novaRing(x, col) {
x.strokeStyle = col; x.lineWidth = 5;
x.globalAlpha = .9; x.beginPath(); x.arc(24, 24, 14, 0, 7); x.stroke();
x.globalAlpha = .4; x.lineWidth = 3; x.beginPath(); x.arc(24, 24, 20, 0, 7); x.stroke();
x.globalAlpha = 1;
}
function snowflake(x, col) {
x.strokeStyle = col; x.lineWidth = 2.5; x.lineCap = 'round';
for (let i = 0; i < 6; i++) {
const a = i / 6 * Math.PI * 2;
x.beginPath(); x.moveTo(24, 24);
x.lineTo(24 + Math.cos(a) * 16, 24 + Math.sin(a) * 16);
x.stroke();
x.beginPath(); x.arc(24 + Math.cos(a) * 16, 24 + Math.sin(a) * 16, 2.5, 0, 7);
x.fillStyle = col; x.fill();
}
}
function boltZigzag(x, col) {
x.strokeStyle = col; x.lineWidth = 3.5; x.lineJoin = 'round';
x.beginPath();
x.moveTo(28, 6); x.lineTo(18, 22); x.lineTo(26, 24); x.lineTo(16, 42);
x.stroke();
x.globalAlpha = .5; x.lineWidth = 2;
x.beginPath(); x.moveTo(36, 12); x.lineTo(30, 24); x.lineTo(36, 26); x.lineTo(30, 38); x.stroke();
x.globalAlpha = 1;
}
function swordGlyph(x, col) {
x.save(); x.translate(24, 24); x.rotate(-Math.PI / 4);
x.fillStyle = col;
x.beginPath(); x.moveTo(-3, 12); x.lineTo(-3, -14); x.lineTo(0, -19); x.lineTo(3, -14); x.lineTo(3, 12); x.closePath(); x.fill();
x.fillStyle = '#c8a35a'; x.fillRect(-8, 12, 16, 4); x.fillRect(-2, 16, 4, 6);
x.restore();
}
function potionGlyph(x, col) {
x.fillStyle = 'rgba(220,220,220,.25)';
x.beginPath(); x.arc(24, 30, 12, 0, 7); x.fill();
x.fillStyle = col;
x.beginPath(); x.arc(24, 30, 12, 0, 7); x.fill();
x.fillStyle = '#caa';
x.fillRect(20, 8, 8, 8);
x.fillStyle = 'rgba(255,255,255,.35)';
x.beginPath(); x.ellipse(19, 25, 4, 6, -.4, 0, 7); x.fill();
}
/* ---------------- init ---------------- */
function init() {
for (const [id, th] of Object.entries(D2.world.THEMES)) {
cache.themes[id] = {
floors: th.floorCols.map((col, v) => bakeFloorTile(th, col, v)),
wallBlock: bakeWallBlock(th),
};
}
bakeProps();
}
D2.sprites = {
init, TW, TH, WALL_H,
itemIconCanvas, skillIconCanvas,
get themes() { return cache.themes; },
get props() { return cache.props; },
};
})(window.D2);
js/ui/hud.js
+284
View File
@@ -0,0 +1,284 @@
/* ============================================================
* Diablo2D — hud.js : UI core + in-game HUD (orbs, hotbar, minimap)
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const ui = {};
D2.ui = ui;
let el = {};
let minimapCtx = null;
let _minimapT = 0;
let hotbarSlots = []; // {slotEl, cdEl, iconKey}
let toastCount = 0;
/* ---------------- init ---------------- */
ui.init = function () {
el = {
hud: document.getElementById('hud'),
lifeFill: document.getElementById('life-fill'),
manaFill: document.getElementById('mana-fill'),
lifeText: document.getElementById('life-text'),
manaText: document.getElementById('mana-text'),
xpBar: document.getElementById('xp-bar'),
xpText: document.getElementById('xp-text'),
lvlNum: document.getElementById('lvl-num'),
hbSkills: document.getElementById('hb-skills'),
hbPotions: document.getElementById('hb-potions'),
hbMenus: document.getElementById('hb-menus'),
buffBar: document.getElementById('buff-bar'),
toasts: document.getElementById('toasts'),
minimap: document.getElementById('minimap'),
minimapLabel: document.getElementById('minimap-label'),
bossWrap: document.getElementById('boss-bar-wrap'),
bossName: document.getElementById('boss-name'),
bossFill: document.getElementById('boss-fill'),
questTracker: document.getElementById('quest-tracker'),
};
minimapCtx = el.minimap.getContext('2d');
buildHotbar();
D2.i18n.applyDom(document);
};
ui.showHud = function () { el.hud.classList.remove('hidden'); };
ui.hideHud = function () { el.hud.classList.add('hidden'); };
/* ---------------- hotbar ---------------- */
function buildHotbar() {
el.hbSkills.innerHTML = '';
el.hbPotions.innerHTML = '';
el.hbMenus.innerHTML = '';
hotbarSlots = [];
/* skill slots: LMB basic, RMB, 1..4 */
const defs = [
{ slot: 0, label: 'LMB' },
{ slot: 1, label: 'RMB' },
{ slot: 2, label: '1' },
{ slot: 3, label: '2' },
{ slot: 4, label: '3' },
];
for (const d of defs) {
const s = document.createElement('div');
s.className = 'hb-slot';
s.innerHTML = `<span class="keybind">${d.label}</span><canvas width="36" height="36"></canvas><div class="cd-overlay" style="display:none"></div>`;
s.addEventListener('mousedown', (e) => {
e.stopPropagation();
if (d.slot === 0) return;
/* clicking a slot casts it toward screen center-ish cursor */
D2.game.castHotbarFromUi && D2.game.castHotbarFromUi(d.slot);
});
el.hbSkills.appendChild(s);
hotbarSlots.push({
slot: d.slot,
root: s,
canvas: s.querySelector('canvas'),
cd: s.querySelector('.cd-overlay'),
iconKey: null,
});
}
/* potions */
const pots = [
{ type: 'hp', label: 'Q', icon: 'potion_hp', tip: 'hb.health_potion' },
{ type: 'mp', label: 'E', icon: 'potion_mp', tip: 'hb.mana_potion' },
];
for (const pd of pots) {
const s = document.createElement('div');
s.className = 'hb-slot';
s.title = D2.i18n.t(pd.tip);
s.dataset.potion = pd.type;
s.innerHTML = `<span class="keybind">${pd.label}</span><canvas width="36" height="36"></canvas><span class="potion-count">0</span>`;
s.querySelector('canvas').getContext('2d').drawImage(
D2.sprites.skillIconCanvas(pd.icon, 48), 0, 0, 36, 36);
s.addEventListener('mousedown', (e) => {
e.stopPropagation();
D2.player.usePotion(D2.game, pd.type);
});
el.hbPotions.appendChild(s);
}
/* menu buttons */
const menus = [
{ key: 'KeyI', icon: null, glyph: '🎒', tip: 'hb.inventory', act: () => ui.togglePanel('inventory') },
{ key: 'KeyC', icon: null, glyph: '💪', tip: 'hb.character', act: () => ui.togglePanel('character') },
{ key: 'KeyT', icon: null, glyph: '✨', tip: 'hb.skills', act: () => ui.togglePanel('skills') },
{ key: 'KeyJ', icon: null, glyph: '📜', tip: 'hb.quests', act: () => ui.togglePanel('quests') },
{ key: 'F1', icon: null, glyph: '?', tip: 'hb.help', act: () => D2.main && D2.main.openHelp() },
];
for (const md of menus) {
const s = document.createElement('div');
s.className = 'hb-slot small';
s.title = D2.i18n.t(md.tip);
s.innerHTML = `<span style="font-size:16px">${md.glyph}</span>`;
s.addEventListener('mousedown', (e) => { e.stopPropagation(); md.act(); });
el.hbMenus.appendChild(s);
}
}
ui.refreshHotbar = function () {
const G = D2.game;
const p = G.player;
if (!p) return;
for (const hs of hotbarSlots) {
const skillId = p.hotbar[hs.slot];
let iconId = null;
if (skillId === 'basic') {
iconId = 'basic_' + (p.classId === 'crusader' ? 'melee' : p.classId === 'ranger' ? 'ranged' : 'cast');
} else if (skillId) {
const sk = D2.Skills.findSkill(p.classId, skillId);
iconId = sk ? sk.icon : null;
}
if (iconId && iconId !== hs.iconKey) {
const c = hs.canvas.getContext('2d');
c.clearRect(0, 0, 36, 36);
c.drawImage(D2.sprites.skillIconCanvas(iconId, 48), 0, 0, 36, 36);
hs.iconKey = iconId;
}
hs.root.classList.toggle('empty-slot', !iconId);
/* dim if unlearned */
if (skillId && skillId !== 'basic') {
const rank = D2.player.getSkillRank(p, skillId);
hs.root.style.opacity = rank <= 0 ? 0.45 : 1;
} else hs.root.style.opacity = 1;
}
/* potion counts */
el.hbPotions.querySelectorAll('[data-potion]').forEach(n => {
const t = n.dataset.potion;
n.querySelector('.potion-count').textContent = p.potions[t];
n.style.opacity = p.potions[t] > 0 ? 1 : 0.4;
});
};
/* ---------------- per-frame HUD ---------------- */
ui.tick = function (dt) {
const G = D2.game;
if (!G.player || G.state === 'title') return;
/* cooldown sweeps */
for (const hs of hotbarSlots) {
const skillId = G.player.hotbar[hs.slot];
if (!skillId || skillId === 'basic') { hs.cd.style.display = 'none'; continue; }
const left = G.skillCooldownLeft(skillId);
const sk = D2.Skills.findSkill(G.player.classId, skillId);
const total = sk ? Math.max(0.01, sk.cooldown) : 1;
if (left > 0) {
const pct = Math.min(1, left / total);
const deg = 360 * (1 - pct);
hs.cd.style.display = 'block';
hs.cd.style.background = `conic-gradient(rgba(0,0,0,.78) ${deg}deg, transparent ${deg}deg)`;
hs.cd.textContent = left > 1 ? Math.ceil(left) : '';
hs.cd.style.color = '#fff';
hs.cd.style.fontSize = '14px';
hs.cd.style.display = 'flex';
hs.cd.style.alignItems = 'center';
hs.cd.style.justifyContent = 'center';
} else if (hs.cd.style.display !== 'none') {
hs.cd.style.display = 'none';
}
}
/* buffs */
if (G.player.buffs.length !== ui._lastBuffCount) {
ui._lastBuffCount = G.player.buffs.length;
rebuildBuffs();
}
for (const b of G.player.buffs) {
if (b.timerEl) b.timerEl.textContent = Math.ceil(b.t);
}
/* minimap @ ~7fps */
_minimapT -= dt;
if (_minimapT <= 0) {
_minimapT = 0.14;
D2.render.minimap(G, el.minimap);
el.minimapLabel.textContent = G.world.isTown
? D2.i18n.t('town.enter').split('—')[0].trim()
: `${G.world.act >= 0 ? D2.i18n.t(D2.BAL.acts[G.world.act].name) : ''} · ${D2.i18n.t('floor.depth', G.world.floorIdx + 1)}`;
}
};
function rebuildBuffs() {
el.buffBar.innerHTML = '';
for (const b of D2.game.player.buffs) {
const d = document.createElement('div');
d.className = 'buff-icon';
d.title = b.name ? (b.name[D2.i18n.getLang()] || b.name.en) : b.id;
const cv = document.createElement('canvas');
cv.width = 40; cv.height = 40;
cv.getContext('2d').drawImage(D2.sprites.skillIconCanvas(b.icon || 'renewal', 48), 2, 2, 36, 36);
d.appendChild(cv);
const t = document.createElement('div');
t.className = 'buff-timer';
d.appendChild(t);
b.timerEl = t;
el.buffBar.appendChild(d);
}
}
/* ---------------- periodic refresh ---------------- */
ui.refreshHud = function () {
const G = D2.game;
const p = G.player;
if (!p) return;
el.lifeFill.style.height = Math.max(0, p.hp / p.maxHp * 100) + '%';
el.manaFill.style.height = Math.max(0, p.mana / p.maxMana * 100) + '%';
el.lifeText.textContent = `${Math.ceil(p.hp)}/${p.maxHp}`;
el.manaText.textContent = `${Math.ceil(p.mana)}/${p.maxMana}`;
const need = D2.BAL.xpForLevel(p.level);
const prev = p.level > 1 ? D2.BAL.xpForLevel(p.level - 1) : 0;
const pct = D2.util.clamp((p.xp - prev) / Math.max(1, need - prev), 0, 1);
el.xpBar.style.width = (pct * 100) + '%';
el.xpText.textContent = `XP ${D2.util.fmtNum(p.xp)} / ${D2.util.fmtNum(need)}${p.statPoints ? ` · +${p.statPoints}${' '}` : ''}`;
el.lvlNum.textContent = 'Lv ' + p.level +
(G.progress.torment ? ' · ' + D2.i18n.t('torment', G.progress.torment) : '');
ui.refreshHotbar();
};
/* ---------------- toasts ---------------- */
ui.toast = function (text, cls = '') {
if (!el.toasts) return;
const d = document.createElement('div');
d.className = 'toast ' + cls;
d.textContent = text;
el.toasts.appendChild(d);
toastCount++;
setTimeout(() => d.classList.add('fadeout'), 2200);
setTimeout(() => { d.remove(); toastCount--; }, 2800);
while (el.toasts.children.length > 4) el.toasts.firstChild.remove();
};
/* ---------------- boss bar ---------------- */
ui.showBossBar = function (name) {
el.bossName.textContent = name;
el.bossFill.style.width = '100%';
el.bossWrap.classList.remove('hidden');
};
ui.updateBossBar = function (pct) {
el.bossFill.style.width = Math.max(0, pct * 100) + '%';
};
ui.hideBossBar = function () {
el.bossWrap.classList.add('hidden');
};
/* ---------------- quest tracker ---------------- */
ui.renderQuestTracker = function () {
const G = D2.game;
let html = '<div class="quest-header">' + D2.i18n.t('ui.questlog') + '</div>';
for (const q of G.quests) {
html += `<div class="quest-line ${q.done ? 'quest-done' : ''}">` +
`<div>${q.text}</div></div>`;
}
el.questTracker.innerHTML = html;
};
})(window.D2);
js/ui/panels.js
+864
View File
@@ -0,0 +1,864 @@
/* ============================================================
* Diablo2D — panels.js : floating panels (inventory, char, skills,
* vendor, stash, dialogs, world map) + tooltips + item actions
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const ui = D2.ui;
const panelsEl = () => document.getElementById('panels');
const tooltipEl = () => document.getElementById('tooltip');
const registry = {};
/* ================= tooltip ================= */
ui.showTooltip = function (html, x, y) {
const tt = tooltipEl();
tt.innerHTML = html;
tt.classList.remove('hidden');
const r = tt.getBoundingClientRect();
let px = x + 16, py = y + 12;
if (px + r.width > window.innerWidth - 8) px = x - r.width - 14;
if (py + r.height > window.innerHeight - 8) py = y - r.height - 10;
tt.style.left = Math.max(4, px) + 'px';
tt.style.top = Math.max(4, py) + 'px';
};
ui.hideTooltip = function () {
tooltipEl().classList.add('hidden');
hideItemActions();
};
function esc(s) { return String(s).replace(/</g, '&lt;'); }
ui.statLabel = function (k) {
const keys = {
str: 'stat.strength', dex: 'stat.dexterity', vit: 'stat.vitality', ene: 'stat.energy',
dmgPct: 'stat.damage', critChance: 'stat.crit', critDmgPct: 'stat.critdmg',
attackSpeedPct: '+Attack Speed %', moveSpeedPct: 'stat.speed',
armor: 'stat.armor', hpFlat: '+Life', manaFlat: '+Mana',
hpRegen: '+HP Regen/s', manaRegen: '+Mana Regen/s',
lifeOnKill: 'stat.lifelench', magicFind: 'stat.magicfind', goldFind: '% Gold Find',
fireDmg: '+Fire Dmg', coldDmg: '+Cold Dmg', litDmg: '+Lightning Dmg', poisDmg: '+Poison Dmg',
resFire: 'stat.fire', resCold: 'stat.cold', resLit: 'stat.lightning', resPois: 'stat.poison',
cdr: '-Cooldowns %', thorns: 'Thorns', blockChance: '% Block', flatDmg: '+Flat Dmg',
};
return keys[k] ? D2.i18n.t(keys[k]) : k;
};
ui.itemTooltipHtml = function (item, opts = {}) {
const rarCol = D2.Items.RARITIES[item.rarity].color;
let h = `<div class="tt-title" style="color:${rarCol}">${esc(item.name)}</div>`;
h += `<div class="tt-type">${esc(D2.i18n.t('ui.equip.' + item.slot))} · ${esc(item.rarity)} · ilvl ${item.ilvl}</div>`;
if (item.dmgMax) {
h += `<div class="tt-value">${item.dmgMin}–${item.dmgMax} damage · ${item.aps.toFixed(2)}/s</div>`;
}
if (item.armor) h += `<div class="tt-value">${item.armor} armor</div>`;
const lines = [];
for (const [k, v] of Object.entries(item.stats || {})) {
const val = typeof v === 'number' ? (Math.round(v * 10) / 10) : v;
lines.push('+' + val + ' ' + ui.statLabel(k));
}
if (item.flatDmg) lines.push('+' + item.flatDmg + ' Flat Damage');
if (lines.length) h += lines.map(l => `<div class="tt-affix">${l}</div>`).join('');
if (item.special) {
const sp = SPECIAL_TEXT[item.special];
if (sp) h += `<div class="tt-affix" style="color:${rarCol}">★ ${sp[D2.i18n.getLang()] || sp.en}</div>`;
}
if (item.reqLevel > 1) h += `<div class="tt-type">Requires level ${item.reqLevel}</div>`;
if (item.flavor) h += `<div class="tt-flavor">“${esc(item.flavor)}”</div>`;
/* compare vs equipped */
if (!opts.noCompare && D2.game.player) {
const p = D2.game.player;
let cur = null;
if (item.slot === 'ring') cur = p.equip.ring1 || p.equip.ring2;
else cur = p.equip[item.slot];
if (cur && cur.uid !== item.uid) {
let score = 0, curScore = 0;
score = itemScore(item);
curScore = itemScore(cur);
const diff = score - curScore;
h += `<div class="tt-compare">Equipped: ${esc(cur.name)} ` +
`<span class="${diff >= 0 ? 'tt-up' : 'tt-down'}">(${diff >= 0 ? '+' : ''}${Math.round(diff)})</span></div>`;
}
}
h += `<div class="tt-value" style="color:#c8a35a">${item.value} gold</div>`;
return h;
};
const SPECIAL_TEXT = {
cleaveEcho: { en: 'Cleave strikes twice', vi: 'Chém Rộng đánh hai lần' },
doubleShot: { en: 'Basic attacks loose an extra arrow', vi: 'Đánh thường bắn thêm một mũi tên' },
fireNovaOnKill: { en: 'Kills erupt in a fire nova', vi: 'Hạ gục gây nova lửa' },
chillAttacker: { en: 'Melee attackers are chilled', vi: 'Kẻ cận chiến bị đóng băng chậm' },
allSkills: { en: '+1 to all active skills', vi: '+1 tất cả kỹ năng chủ động' },
execHeal: { en: 'Elite kills restore 15% life', vi: 'Hạ tinh anh hồi 15% máu' },
stormDash: { en: 'Charge cooldown −30%', vi: 'Charge hồi nhanh hơn 30%' },
lifesteal: { en: '6% life steal', vi: 'Hút 6% máu' },
eliteSlayer: { en: '+25% damage to elites', vi: '+25% sát thương lên tinh anh' },
chainOnHit: { en: '15% chance to zap chains on hit', vi: '15% cơ hội xả sét lan khi đánh' },
corpseBoom: { en: '20% chance corpses explode', vi: '20% xác chết nổ' },
venomStrike: { en: 'Attacks poison the target', vi: 'Đòn đánh gây độc mục tiêu' },
voidstep: { en: 'Teleport cooldown −30%', vi: 'Teleport hồi nhanh hơn 30%' },
};
function itemScore(it) {
let s = 0;
if (it.dmgMax) s += (it.dmgMin + it.dmgMax) / 2 * it.aps * 3;
if (it.armor) s += it.armor * 0.8;
for (const v of Object.values(it.stats || {})) s += typeof v === 'number' ? Math.abs(v) * 1.5 : 0;
if (it.special) s += 12;
return s;
}
/* ================= item actions popup ================= */
let actionsEl = null;
function showItemActions(item, source, sourceIdx, x, y) {
hideItemActions();
const G = D2.game;
actionsEl = document.createElement('div');
actionsEl.className = 'panel-gothic';
actionsEl.style.cssText =
`position:fixed;z-index:95;padding:8px;display:flex;flex-direction:column;gap:6px;left:${x}px;top:${y}px;min-width:130px`;
const mkBtn = (label, fn, cls = '') => {
const b = document.createElement('button');
b.className = 'btn ' + cls;
b.style.fontSize = '13px';
b.style.padding = '5px 12px';
b.textContent = label;
b.addEventListener('click', (e) => { e.stopPropagation(); fn(); hideItemActions(); ui.hideTooltip(); });
actionsEl.appendChild(b);
};
if (source === 'inv') {
if (item.slot) mkBtn(D2.i18n.t('ui.equip.' + item.slot).split(' ')[0] === 'Ring' ? 'Equip' : D2.i18n.t('ui.buy') === 'Buy' ? 'Equip' : 'Equip', () => {
D2.player.equipItem(G, item, sourceIdx);
}, 'btn-primary');
if (G.stashOpen) mkBtn('→ ' + D2.i18n.t('ui.stash'), () => {
if (G.stash.length < 35) { G.player.inventory.splice(sourceIdx, 1); G.stash.push(item); G.saveGame(); refreshAllOpen(); }
});
if (vendorOpen()) {
mkBtn(`${D2.i18n.t('ui.sell')} (+${Math.round(item.value * D2.BAL.sellRatio)})`, () => {
D2.player.sellItem(G, sourceIdx);
});
}
mkBtn('✕ ' + D2.i18n.t('cancel'), () => {});
} else if (source === 'equip') {
mkBtn('Unequip', () => {
D2.player.unequipSlot(G, sourceIdx);
});
} else if (source === 'stash') {
mkBtn('Withdraw', () => {
const i = G.stash.indexOf(item);
if (i >= 0 && G.player.inventory.length < 40) {
G.stash.splice(i, 1);
G.player.inventory.push(item);
G.saveGame();
refreshAllOpen();
} else ui.toast(D2.i18n.t('msg.inventory_full'), 'bad');
}, 'btn-primary');
if (vendorOpen()) {
mkBtn(`${D2.i18n.t('ui.sell')} (+${Math.round(item.value * D2.BAL.sellRatio)})`, () => {
const i = G.stash.indexOf(item);
if (i >= 0) {
G.stash.splice(i, 1);
G.player.gold += Math.round(item.value * D2.BAL.sellRatio);
G.sfx('sell');
G.saveGame();
refreshAllOpen();
}
});
}
} else if (source === 'vendor') {
mkBtn(`${D2.i18n.t('ui.buy')} (${item.value})`, () => {
const i = G.vendorStock.indexOf(item);
if (D2.player.buyItem(G, item)) {
G.vendorStock.splice(i, 1);
ui.refreshVendor();
ui.refreshHud();
}
}, 'btn-primary');
}
document.body.appendChild(actionsEl);
}
function hideItemActions() {
if (actionsEl) { actionsEl.remove(); actionsEl = null; }
}
ui.hideItemActions = hideItemActions;
function vendorOpen() { return registry.vendor && registry.vendor.isOpen; }
/* ================= slot builders ================= */
function makeItemSlot(item, source, sourceIdx, opts = {}) {
const d = document.createElement('div');
d.className = 'item-slot';
if (opts.size) {
d.style.width = opts.size + 'px';
d.style.height = opts.size + 'px';
}
if (item) {
if (item.rarity !== 'common') d.classList.add('rarity-glow-' + item.rarity);
const cv = document.createElement('canvas');
cv.width = 44; cv.height = 44;
cv.getContext('2d').drawImage(D2.sprites.itemIconCanvas(item, 48), 0, 0, 44, 44);
d.appendChild(cv);
d.addEventListener('mouseenter', (e) => {
ui.showTooltip(ui.itemTooltipHtml(item, opts), e.clientX, e.clientY);
});
d.addEventListener('mousemove', (e) => {
if (!tooltipEl().classList.contains('hidden')) ui.showTooltip(ui.itemTooltipHtml(item, opts), e.clientX, e.clientY);
});
d.addEventListener('mouseleave', () => ui.hideTooltip());
d.addEventListener('contextmenu', (e) => {
e.preventDefault();
if (source === 'inv') D2.player.equipItem(D2.game, item, sourceIdx);
else if (source === 'equip') D2.player.unequipSlot(D2.game, sourceIdx);
else if (source === 'stash') showItemActions(item, source, sourceIdx, e.clientX, e.clientY);
});
d.addEventListener('click', (e) => {
e.stopPropagation();
showItemActions(item, source, sourceIdx, e.clientX, e.clientY);
});
}
return d;
}
/* ================= panel framework ================= */
function createPanel(id, titleKey, widthPx) {
const root = document.createElement('div');
root.className = 'fpanel panel-gothic hidden';
root.id = 'panel-' + id;
if (widthPx) root.style.width = widthPx + 'px';
root.innerHTML = `
<div class="fpanel-head">
<div class="panel-title">${D2.i18n.t(titleKey)}</div>
<div class="fpanel-close">✕</div>
</div>
<div class="fpanel-body"></div>`;
root.querySelector('.fpanel-close').addEventListener('click', () => ui.closePanel(id));
panelsEl().appendChild(root);
const reg = {
id, root,
body: root.querySelector('.fpanel-body'),
isOpen: false,
refresh: () => {},
};
registry[id] = reg;
return reg;
}
ui.openPanel = function (id) {
const reg = registry[id];
if (!reg) return;
reg.root.classList.remove('hidden');
reg.isOpen = true;
reg.refresh();
D2.audio.sfx('click');
};
ui.closePanel = function (id) {
const reg = registry[id];
if (!reg) return;
reg.root.classList.add('hidden');
reg.isOpen = false;
if (id === 'stash') D2.game.stashOpen = false;
ui.hideTooltip();
};
ui.togglePanel = function (id) {
const reg = registry[id];
if (!reg) return;
reg.isOpen ? ui.closePanel(id) : ui.openPanel(id);
};
ui.closeAllPanels = function () {
for (const id of Object.keys(registry)) ui.closePanel(id);
};
ui.anyPanelOpen = function () {
return Object.values(registry).some(r => r.isOpen);
};
function refreshAllOpen() {
for (const reg of Object.values(registry)) if (reg.isOpen) reg.refresh();
ui.refreshHud();
}
ui.refreshInventory = refreshAllOpen;
ui.refreshCharacter = refreshAllOpen;
ui.refreshSkills = refreshAllOpen;
ui.refreshVendor = refreshAllOpen;
/* ================= inventory ================= */
function buildInventory() {
const reg = createPanel('inventory', 'ui.inventory');
reg.refresh = () => {
const G = D2.game;
const p = G.player;
if (!p) return;
const b = reg.body;
b.innerHTML = '';
/* paperdoll */
const eq = document.createElement('div');
eq.className = 'equip-grid';
const layout = [
['weapon', 'head', 'offhand'],
['ring1', 'chest', 'ring2'],
['hands', 'feet', 'amulet'],
];
const abbrev = { weapon: 'WPN', head: 'HELM', offhand: 'OFF', ring1: 'RING', chest: 'BODY', ring2: 'RING', hands: 'HAND', feet: 'BOOT', amulet: 'AMLT' };
for (const row of layout) {
for (const slotKey of row) {
const cell = document.createElement('div');
cell.className = 'equip-slot';
cell.style.position = 'relative';
const it = p.equip[slotKey];
if (it) {
const slotEl = makeItemSlot(it, 'equip', slotKey);
slotEl.style.cssText += 'position:absolute;inset:0;width:54px;height:54px;background:transparent;';
cell.appendChild(slotEl);
} else {
const lbl = document.createElement('span');
lbl.className = 'slot-label';
lbl.textContent = abbrev[slotKey];
cell.appendChild(lbl);
}
eq.appendChild(cell);
}
}
b.appendChild(eq);
/* gold */
const goldRow = document.createElement('div');
goldRow.style.cssText = 'text-align:center;color:var(--gold-hi);font-size:13px;margin-bottom:8px;';
goldRow.textContent = '🜚 ' + D2.util.fmtNum(p.gold) + ' ' + D2.i18n.t('ui.gold');
b.appendChild(goldRow);
/* bag grid */
const grid = document.createElement('div');
grid.className = 'inv-grid';
for (let i = 0; i < 40; i++) {
const it = p.inventory[i];
grid.appendChild(it ? makeItemSlot(it, 'inv', i) : emptySlot());
}
b.appendChild(grid);
if (p.skillPoints > 0 || p.statPoints > 0) {
const hint = document.createElement('div');
hint.style.cssText = 'text-align:center;color:var(--gold);font-size:11px;margin-top:8px;';
hint.textContent = `${p.statPoints ? D2.i18n.t('stat.points') + ': ' + p.statPoints + ' ' : ''}${p.skillPoints ? D2.i18n.t('stat.skillpoints') + ': ' + p.skillPoints : ''}`;
b.appendChild(hint);
}
};
}
function emptySlot() {
const d = document.createElement('div');
d.className = 'item-slot empty-slot';
return d;
}
/* ================= character ================= */
function buildCharacter() {
const reg = createPanel('character', 'ui.character');
reg.refresh = () => {
const G = D2.game;
const p = G.player;
if (!p) return;
const s = p.stats;
const b = reg.body;
b.innerHTML = '';
const attrs = [
['str', 'stat.strength'], ['dex', 'stat.dexterity'],
['vit', 'stat.vitality'], ['ene', 'stat.energy'],
];
const list = document.createElement('div');
list.className = 'stat-list';
for (const [key, label] of attrs) {
const row = document.createElement('div');
row.className = 'stat-row';
const canAlloc = p.statPoints > 0;
row.innerHTML = `
<span class="stat-name">${D2.i18n.t(label)} ${canAlloc ? '' : ''}</span>
<span><span class="stat-val">${s[key]}</span>${canAlloc ? '<span class="plus-btn" data-k="' + key + '">+</span>' : ''}</span>`;
list.appendChild(row);
}
const pts = document.createElement('div');
pts.className = 'stat-row';
pts.innerHTML = `<span style="color:var(--gold)">${D2.i18n.t('stat.points')}</span><span class="stat-val">${p.statPoints}</span>`;
list.appendChild(pts);
b.appendChild(list);
list.querySelectorAll('.plus-btn').forEach(btn => {
btn.addEventListener('click', () => {
if (D2.player.allocateStat(p, btn.dataset.k)) {
G.sfx('click');
reg.refresh();
ui.refreshHud();
}
});
});
const hr = document.createElement('div');
hr.style.cssText = 'border-top:1px solid var(--border);margin:10px 0;';
b.appendChild(hr);
const wdr = D2.combat.weaponDamageRange(p);
const rows = [
['stat.damage', `${wdr.min}–${wdr.max}`],
['stat.armor', s.armor],
['stat.crit', Math.round((D2.BAL.baseCrit + (s.critChance || 0) / 100) * 100) + '%'],
['stat.critdmg', Math.round((D2.BAL.baseCritDmg + (s.critDmgPct || 0) / 100) * 100) + '%'],
['stat.speed', p.moveSpeed.toFixed(1)],
['stat.magicfind', '+' + (s.magicFind || 0) + '%'],
['stat.lifelench', s.lifeOnKill || 0],
];
const list2 = document.createElement('div');
list2.className = 'stat-list';
for (const [k, v] of rows) {
const r = document.createElement('div');
r.className = 'stat-row';
r.innerHTML = `<span>${D2.i18n.t(k)}</span><span class="stat-val">${v}</span>`;
list2.appendChild(r);
}
b.appendChild(list2);
/* resist strip */
const rs = document.createElement('div');
rs.className = 'resist-strip';
rs.innerHTML = `
<span>🔥<b>${Math.min(72, s.resFire || 0)}%</b></span>
<span>❄️<b>${Math.min(72, s.resCold || 0)}%</b></span>
<span>⚡<b>${Math.min(72, s.resLit || 0)}%</b></span>
<span>☠️<b>${Math.min(72, s.resPois || 0)}%</b></span>`;
b.appendChild(rs);
};
}
/* ================= skills ================= */
let selectedSkill = null;
function buildSkills() {
const reg = createPanel('skills', 'ui.skills', 560);
reg.refresh = () => {
const G = D2.game;
const p = G.player;
if (!p) return;
const cls = D2.Skills.CLASSES[p.classId];
const skills = D2.Skills.skillsFor(p.classId);
const b = reg.body;
b.innerHTML = '';
const header = document.createElement('div');
header.style.cssText = 'display:flex;justify-content:space-between;font-size:13px;color:var(--gold);margin-bottom:8px;';
header.innerHTML = `<span>${cls.name[D2.i18n.getLang()] || cls.name.en}</span>
<span>${D2.i18n.t('stat.skillpoints')}: <b>${p.skillPoints}</b></span>`;
b.appendChild(header);
const tree = document.createElement('div');
tree.className = 'skill-tree';
for (const br of cls.branches) {
const branchEl = document.createElement('div');
branchEl.innerHTML = `<div class="skill-branch-name">${br.name[D2.i18n.getLang()] || br.name.en}</div>`;
const tierSkills = skills.filter(s => s.branch === br.id);
for (const sk of tierSkills) {
const tierRow = document.createElement('div');
tierRow.className = 'skill-tier';
const rank = p.skills[sk.id] || 0;
const effRank = D2.player.getSkillRank(p, sk.id);
const unlocked = p.level >= sk.unlockLevel;
const maxed = rank >= sk.maxRank;
const node = document.createElement('div');
node.className = 'skill-node' + (unlocked ? '' : ' locked') + (maxed ? ' maxed' : '');
const btn = document.createElement('div');
btn.className = 'skill-btn';
const cv = document.createElement('canvas');
cv.width = 56; cv.height = 56;
cv.getContext('2d').drawImage(D2.sprites.skillIconCanvas(sk.icon, 48), 4, 4, 48, 48);
btn.appendChild(cv);
const rankBadge = document.createElement('span');
rankBadge.className = 'skill-rank';
rankBadge.textContent = rank > 0 ? (effRank > rank ? `${rank}+${effRank - rank}` : rank) : '';
btn.appendChild(rankBadge);
const canLearn = D2.player.canLearnSkill(p, sk) === true;
if (canLearn) {
const plus = document.createElement('div');
plus.className = 'skill-plus';
plus.textContent = '+';
plus.title = '+1 ' + (sk.name[D2.i18n.getLang()] || sk.name.en);
plus.addEventListener('click', (e) => {
e.stopPropagation();
if (D2.player.learnSkill(G, sk)) {
selectedSkill = sk;
reg.refresh();
ui.refreshHotbar();
}
});
node.appendChild(plus);
}
btn.addEventListener('mouseenter', (e) => {
selectedSkill = sk;
showSkillDesc(b, sk, p);
ui.showTooltip(skillTooltipHtml(sk, effRank, unlocked), e.clientX, e.clientY);
});
btn.addEventListener('mouseleave', () => ui.hideTooltip());
node.appendChild(btn);
/* hotkey binding */
if (sk.type === 'active' && rank > 0) {
const hk = document.createElement('div');
hk.className = 'skill-hotkey-select';
const binds = [['RMB', 1], ['1', 2], ['2', 3], ['3', 4]];
for (const [label, slot] of binds) {
const bb = document.createElement('button');
bb.textContent = label;
if (p.hotbar[slot] === sk.id) bb.className = 'active';
bb.addEventListener('click', () => {
/* clear other binding of same skill */
p.hotbar.forEach((v, i) => { if (v === sk.id) p.hotbar[i] = null; });
p.hotbar[slot] = sk.id;
ui.refreshHotbar();
reg.refresh();
});
hk.appendChild(bb);
}
tierRow.appendChild(node);
tierRow.appendChild(hk);
const descBox = document.createElement('div');
tierRow.appendChild(descBox);
branchEl.appendChild(tierRow);
continue;
}
tierRow.appendChild(node);
branchEl.appendChild(tierRow);
}
tree.appendChild(branchEl);
}
b.appendChild(tree);
if (selectedSkill) showSkillDesc(b, selectedSkill, p);
};
}
function skillTooltipHtml(sk, rank, unlocked) {
const d = sk.desc(Math.max(1, rank));
let h = `<div class="tt-title" style="color:var(--gold-hi)">${sk.name[D2.i18n.getLang()] || sk.name.en}</div>`;
h += `<div class="tt-type">${sk.type} · ${D2.i18n.t('level_short')} ${sk.unlockLevel}+</div>`;
if (rank <= 0) {
h += `<div class="tt-simple" style="color:#93876f">${d[D2.i18n.getLang()] || d.en}</div>`;
} else {
h += `<div class="tt-simple">${d[D2.i18n.getLang()] || d.en}</div>`;
}
if (sk.type === 'active') {
h += `<div class="tt-compare">Mana: ${sk.manaCost(Math.max(1, rank))} · CD: ${sk.cooldown}s</div>`;
}
if (!unlocked) h += `<div class="tt-compare" style="color:#e07a6a">Locked — requires level ${sk.unlockLevel}</div>`;
return h;
}
function showSkillDesc(container, sk, p) {
let box = container.querySelector('.skill-desc-box');
if (!box) {
box = document.createElement('div');
box.className = 'skill-desc-box';
box.style.cssText = 'margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:5px;font-size:12.5px;line-height:1.55;color:var(--text-dim)';
container.appendChild(box);
}
const rank = p.skills[sk.id] || 0;
const d = sk.desc(Math.max(1, rank));
box.innerHTML = `<b style="color:var(--gold-hi)">${sk.name[D2.i18n.getLang()] || sk.name.en}</b> ` +
`<span style="color:var(--gold)">(${rank}/${sk.maxRank})</span><br>` +
(d[D2.i18n.getLang()] || d.en);
}
/* ================= quests panel ================= */
function buildQuests() {
const reg = createPanel('quests', 'ui.questlog');
reg.refresh = () => {
const G = D2.game;
const b = reg.body;
b.innerHTML = '';
const p = G.player;
const stats = [
['Kills', p.kills], ['Elites slain', p.eliteKills],
['Bosses slain', p.bossKills], ['Deaths', p.deaths],
['Gold', p.gold], ['Torment', G.progress.torment],
];
for (const q of G.quests) {
const d = document.createElement('div');
d.style.marginBottom = '10px';
d.innerHTML = `<div style="color:var(--gold);font-size:12px;letter-spacing:1px;text-transform:uppercase">${q.header}</div>
<div class="${q.done ? 'quest-done' : ''}" style="font-size:14px;margin-top:3px">${q.text} ${q.done ? '✔' : ''}</div>`;
b.appendChild(d);
}
const hr = document.createElement('div');
hr.style.cssText = 'border-top:1px solid var(--border);margin:10px 0';
b.appendChild(hr);
for (const [k, v] of stats) {
const r = document.createElement('div');
r.className = 'stat-row';
r.innerHTML = `<span>${k}</span><span class="stat-val">${v}</span>`;
b.appendChild(r);
}
};
}
/* ================= stash ================= */
function buildStash() {
const reg = createPanel('stash', 'ui.stash', 380);
reg.refresh = () => {
const G = D2.game;
const b = reg.body;
b.innerHTML = '';
G.stashOpen = true;
const grid = document.createElement('div');
grid.className = 'inv-grid';
for (let i = 0; i < 35; i++) {
const it = G.stash[i];
grid.appendChild(it ? makeItemSlot(it, 'stash', i) : emptySlot());
}
b.appendChild(grid);
const note = document.createElement('div');
note.style.cssText = 'text-align:center;color:var(--text-dim);font-size:11px;margin-top:8px;';
note.textContent = 'Click items to withdraw · right-click inventory items to store via panel actions';
b.appendChild(note);
};
const origClose = ui.closePanel.bind(ui);
}
/* ================= vendor ================= */
let vendorTab = 'buy';
function buildVendor() {
const reg = createPanel('vendor', 'ui.vendor', 640);
reg.refresh = () => {
const G = D2.game;
const p = G.player;
if (!p) return;
const b = reg.body;
b.innerHTML = '';
const tabs = document.createElement('div');
tabs.className = 'vendor-tabs';
const tb = document.createElement('div');
tb.className = 'vendor-tab' + (vendorTab === 'buy' ? ' active' : '');
tb.textContent = D2.i18n.t('ui.buy');
tb.addEventListener('click', () => { vendorTab = 'buy'; reg.refresh(); });
const ts = document.createElement('div');
ts.className = 'vendor-tab' + (vendorTab === 'sell' ? ' active' : '');
ts.textContent = D2.i18n.t('ui.sell');
ts.addEventListener('click', () => { vendorTab = 'sell'; reg.refresh(); });
tabs.appendChild(tb); tabs.appendChild(ts);
const gold = document.createElement('div');
gold.style.cssText = 'margin-left:auto;color:var(--gold-hi);align-self:center';
gold.textContent = '🜚 ' + D2.util.fmtNum(p.gold);
tabs.appendChild(gold);
b.appendChild(tabs);
const listWrap = document.createElement('div');
listWrap.className = 'vendor-layout';
const list = document.createElement('div');
list.className = 'vendor-list';
list.style.flex = '1';
if (vendorTab === 'buy') {
for (const it of G.vendorStock) {
list.appendChild(vendorRow(it, 'vendor'));
}
} else {
for (let i = 0; i < p.inventory.length; i++) {
const it = p.inventory[i];
const row = vendorRow(it, 'sell', i);
list.appendChild(row);
}
}
listWrap.appendChild(list);
b.appendChild(listWrap);
};
}
function vendorRow(item, mode, idx) {
const G = D2.game;
const row = document.createElement('div');
row.className = 'vendor-item-row';
const iconCv = document.createElement('canvas');
iconCv.width = 40; iconCv.height = 40;
iconCv.getContext('2d').drawImage(D2.sprites.itemIconCanvas(item, 48), 0, 0, 40, 40);
row.appendChild(iconCv);
const nameSpan = document.createElement('span');
nameSpan.style.color = D2.Items.RARITIES[item.rarity].color;
nameSpan.style.fontSize = '13px';
nameSpan.textContent = item.name;
row.appendChild(nameSpan);
const price = document.createElement('span');
price.className = 'vendor-price';
price.textContent = mode === 'sell'
? '+' + Math.round(item.value * D2.BAL.sellRatio)
: item.value;
row.appendChild(price);
row.addEventListener('mouseenter', (e) => ui.showTooltip(ui.itemTooltipHtml(item, { noCompare: mode === 'sell' }), e.clientX, e.clientY));
row.addEventListener('mousemove', (e) => ui.showTooltip(ui.itemTooltipHtml(item, { noCompare: mode === 'sell' }), e.clientX, e.clientY));
row.addEventListener('mouseleave', () => ui.hideTooltip());
row.addEventListener('click', () => {
if (mode === 'vendor') {
if (D2.player.buyItem(G, item)) {
const i = G.vendorStock.indexOf(item);
if (i >= 0) G.vendorStock.splice(i, 1);
refreshAllOpen();
}
} else {
D2.player.sellItem(G, idx);
refreshAllOpen();
}
});
return row;
}
/* ================= NPC dialog ================= */
function buildDialog() {
const reg = createPanel('dialog', '', 520);
reg.root.querySelector('.panel-title').textContent = '';
reg.refresh = () => {};
}
ui.openNpcDialog = function (npcType) {
const reg = registry.dialog;
const G = D2.game;
if (!G.player) return;
reg.root.classList.remove('hidden');
reg.isOpen = true;
reg.root.querySelector('.panel-title').textContent =
D2.i18n.t('npc.' + npcType + '.name') || npcType;
const greetKeys = {
charsi: 'npc.charsi.greet', akara: 'npc.akara.greet',
kashya: 'npc.kashya.greet', cain: 'npc.cain.greet',
gheed: 'npc.gheed.greet', stash: 'npc.stash.greet',
healer: 'npc.healer.greet', smith: 'npc.smith.greet',
};
const b = reg.body;
b.innerHTML = `<div class="dialog-text">“${esc(D2.i18n.t(greetKeys[npcType] || 'npc.stash.greet'))}”</div>`;
const options = (G.npcOptions && G.npcOptions(npcType)) || [];
const opts = document.createElement('div');
opts.className = 'dialog-options';
for (const o of options) {
if (!o.label || !o.fn) continue;
const bt = document.createElement('button');
bt.className = 'btn' + (o.highlight ? ' btn-primary' : '');
bt.textContent = o.label;
bt.addEventListener('click', () => { D2.audio.sfx('click'); o.fn(); });
opts.appendChild(bt);
}
const close = document.createElement('button');
close.className = 'btn';
close.textContent = D2.i18n.t('close');
close.addEventListener('click', () => ui.closePanel('dialog'));
opts.appendChild(close);
b.appendChild(opts);
};
/* ================= world map / waypoints ================= */
function buildWorldMap() {
const reg = createPanel('worldmap', 'ui.map', 700);
reg.refresh = () => {
const G = D2.game;
const b = reg.body;
b.innerHTML = '';
const nodes = document.createElement('div');
nodes.className = 'worldmap-nodes';
const inTown = G.world.isTown;
const mkNode = (icon, label, sub, state, fn) => {
const n = document.createElement('div');
n.className = 'wm-node' + (state === 'current' ? ' current' : '') + (state === 'locked' ? ' locked' : '');
n.innerHTML = `<div class="wm-icon">${icon}</div><div>${label}</div><div class="wm-depth">${sub}</div>`;
if (state !== 'locked' && fn) n.addEventListener('click', fn);
nodes.appendChild(n);
};
const arrow = () => {
const a = document.createElement('div');
a.className = 'wm-arrow';
a.textContent = '➤';
nodes.appendChild(a);
};
mkNode('🏕️', 'Tristram', inTown ? '•' : '', inTown ? 'current' : 'ok',
() => { if (!inTown) { ui.closePanel('worldmap'); G.useWaypoint({ town: true }); } });
arrow();
D2.BAL.acts.forEach((act, i) => {
const unlocked = G.waypointsUnlocked[i];
const isCurrent = !inTown && G.world.act === i;
mkNode(['⛪', '⚰️', '🍄', '🔥'][i],
D2.i18n.t(act.name),
unlocked ? (isCurrent ? '• ' + D2.i18n.t('floor.depth', G.world.floorIdx + 1) : D2.i18n.t('floor.depth', 1) + '–' + D2.BAL.floorsPerAct) : '🔒',
isCurrent ? 'current' : unlocked ? 'ok' : 'locked',
() => {
if (!unlocked || isCurrent) return;
ui.closePanel('worldmap');
G.useWaypoint({ act: i, floor: 0 });
});
if (i < D2.BAL.acts.length - 1) arrow();
});
b.appendChild(nodes);
if (!inTown) {
const back = document.createElement('button');
back.className = 'btn';
back.style.cssText = 'display:block;margin:10px auto 0;';
back.textContent = '⌂ ' + D2.i18n.t('town.enter').split('—')[0].trim();
back.addEventListener('click', () => {
ui.closePanel('worldmap');
G.enterTown();
});
b.appendChild(back);
}
};
}
/* ================= init & global keys ================= */
ui.initPanels = function () {
buildInventory();
buildCharacter();
buildSkills();
buildQuests();
buildStash();
buildVendor();
buildDialog();
buildWorldMap();
};
ui.tickGlobalKeys = function () {
const inp = D2.input;
const G = D2.game;
if (G.state === 'playing' || G.state === 'paused') {
if (inp.wasPressed('KeyI')) ui.togglePanel('inventory');
if (inp.wasPressed('KeyC')) ui.togglePanel('character');
if (inp.wasPressed('KeyT')) ui.togglePanel('skills');
if (inp.wasPressed('KeyJ')) ui.togglePanel('quests');
if (inp.wasPressed('KeyM')) ui.togglePanel('worldmap');
if (inp.wasPressed('F1')) { if (D2.main) D2.main.openHelp(); }
if (inp.wasPressed('Escape')) {
if (ui.anyPanelOpen()) ui.closeAllPanels();
else if (D2.main) D2.main.togglePause();
}
}
};
})(window.D2);
js/ui/screens.js
+360
View File
@@ -0,0 +1,360 @@
/* ============================================================
* Diablo2D — screens.js : title, class select, settings, help,
* death & victory screens
* ============================================================ */
'use strict';
window.D2 = window.D2 || {};
(function (D2) {
const ui = D2.ui;
const $ = id => document.getElementById(id);
function show(id) {
for (const sid of ['screen-loading', 'screen-title', 'screen-classselect', 'screen-settings', 'screen-help', 'screen-death', 'screen-victory']) {
$(sid).classList.toggle('hidden', sid !== id);
}
}
ui.hideScreens = () => show(null);
/* ================= loading ================= */
const TIP_KEYS = ['loading.tips.0', 'loading.tips.1', 'loading.tips.2', 'loading.tips.3', 'loading.tips.4'];
ui.showLoading = function () {
show('screen-loading');
$('loading-tip').textContent = D2.i18n.t(TIP_KEYS[(Math.random() * TIP_KEYS.length) | 0]);
};
ui.setLoadingProgress = function (p) {
$('loading-progress').style.width = Math.round(p * 100) + '%';
};
/* ================= title ================= */
ui.showTitle = function () {
show('screen-title');
const scr = $('screen-title');
const G = D2.game;
const meta = D2.save.readMeta();
scr.innerHTML = `
<div class="screen-center-col">
<h1 class="game-logo">DIABLO<span>2D</span></h1>
<div class="loading-sub">${D2.i18n.t('title.tagline')}</div>
<div class="title-menu">
<button class="btn btn-primary" id="t-new">${D2.i18n.t('title.newgame')}</button>
<button class="btn" id="t-continue" ${meta ? '' : 'disabled'}>${D2.i18n.t('title.continue')}</button>
<button class="btn" id="t-settings">${D2.i18n.t('title.settings')}</button>
<button class="btn" id="t-help">${D2.i18n.t('title.help')}</button>
</div>
${meta ? `<div class="title-savecard">${D2.i18n.t('title.saved_hero')}: <b>${D2.i18n.t('class.' + meta.classId + '.name')}</b> · ${D2.i18n.t('level_short')} ${meta.level}${meta.torment ? ' · ' + D2.i18n.t('torment', meta.torment) : ''}${meta.hardcore ? ' · ☠ Hardcore' : ''}</div>` : ''}
<div class="title-footer">v1.0 — runs fully offline in your browser</div>
</div>`;
scr.querySelector('#t-new').addEventListener('click', () => {
if (meta && !confirm(D2.i18n.t('title.confirm_overwrite'))) return;
D2.main.openClassSelect();
});
scr.querySelector('#t-continue').addEventListener('click', () => {
D2.main.startContinue();
});
scr.querySelector('#t-settings').addEventListener('click', () => {
ui.showSettings(() => ui.showTitle());
});
scr.querySelector('#t-help').addEventListener('click', () => {
ui.showHelp(() => ui.showTitle());
});
D2.audio.playMusic('title');
};
/* ================= class select ================= */
ui.showClassSelect = function () {
show('screen-classselect');
const scr = $('screen-classselect');
scr.innerHTML = `
<div class="screen-center-col">
<h2 style="letter-spacing:6px;color:var(--gold);text-transform:uppercase;font-weight:normal">${D2.i18n.t('class.select')}</h2>
<div class="class-grid"></div>
<div style="display:flex;gap:12px">
<button class="btn btn-primary" id="cs-play" disabled>${D2.i18n.t('class.play')}</button>
<button class="btn" id="cs-back">${D2.i18n.t('back')}</button>
</div>
</div>`;
const grid = scr.querySelector('.class-grid');
let selected = null;
for (const clsId of ['crusader', 'ranger', 'sorceress']) {
const cls = D2.Skills.CLASSES[clsId];
const card = document.createElement('div');
card.className = 'class-card';
card.innerHTML = `
<canvas width="150" height="150"></canvas>
<h3>${D2.i18n.t('class.' + clsId + '.name')}</h3>
<p>${D2.i18n.t(cls.descKey)}</p>
<div class="class-stats">
<span>⚔ ${cls.baseMods.str} STR</span>
<span>🏹 ${cls.baseMods.dex} DEX</span>
<span>❤ ${cls.baseMods.vit} VIT</span>
<span>✦ ${cls.baseMods.ene} ENE</span>
</div>`;
drawClassPortrait(card.querySelector('canvas'), cls);
card.addEventListener('click', () => {
grid.querySelectorAll('.class-card').forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
selected = clsId;
scr.querySelector('#cs-play').disabled = false;
D2.audio.sfx('click');
});
card.addEventListener('dblclick', () => {
selected = clsId;
D2.main.startNewGame(clsId);
});
grid.appendChild(card);
}
scr.querySelector('#cs-play').addEventListener('click', () => {
if (selected) D2.main.startNewGame(selected);
});
scr.querySelector('#cs-back').addEventListener('click', () => ui.showTitle());
};
function drawClassPortrait(cv, cls) {
const x = cv.getContext('2d');
const W = cv.width, H = cv.height;
/* bg */
const g = x.createRadialGradient(W / 2, H * 0.42, 8, W / 2, H / 2, W * 0.62);
g.addColorStop(0, 'rgba(70,55,35,.55)');
g.addColorStop(1, 'rgba(8,6,4,.9)');
x.fillStyle = g;
x.fillRect(0, 0, W, H);
/* ring */
x.strokeStyle = cls.palette.accent;
x.lineWidth = 3;
x.beginPath(); x.arc(W / 2, H * 0.46, 52, 0, Math.PI * 2); x.stroke();
x.globalAlpha = 0.35;
x.beginPath(); x.arc(W / 2, H * 0.46, 60, 0, Math.PI * 2); x.stroke();
x.globalAlpha = 1;
/* figure: simple hooded silhouette in class colors */
x.save();
x.translate(W / 2, H * 0.46);
const pal = cls.palette;
/* cloak */
x.fillStyle = pal.cloth;
x.beginPath();
x.moveTo(0, -44);
x.quadraticCurveTo(-38, -8, -30, 44);
x.lineTo(30, 44);
x.quadraticCurveTo(38, -8, 0, -44);
x.fill();
/* head */
x.fillStyle = '#1a1410';
x.beginPath(); x.arc(0, -22, 15, 0, Math.PI * 2); x.fill();
/* eyes glow */
x.fillStyle = pal.accent;
x.fillRect(-8, -26, 5, 3.5);
x.fillRect(3, -26, 5, 3.5);
/* emblem weapon */
x.restore();
const wepBaseId = cls.id === 'crusader' ? 'longsword' : cls.id === 'ranger' ? 'huntingbow' : 'runestaff';
const fakeItem = { slot: 'weapon', baseId: wepBaseId, kind: cls.weaponKind, rarity: 'legendary' };
const icon = D2.sprites.itemIconCanvas(fakeItem, 48);
x.drawImage(icon, W / 2 - 24, H * 0.46 - 24, 48, 48);
}
/* ================= settings ================= */
ui.showSettings = function (onBack) {
show('screen-settings');
const scr = $('screen-settings');
const G = D2.game;
const s = G.settings;
scr.innerHTML = `
<div class="panel-gothic settings-panel">
<div class="panel-title">${D2.i18n.t('title.settings')}</div>
<div class="settings-body">
<div class="setting-row"><label>${D2.i18n.t('set.master')}</label><input type="range" id="s-master" min="0" max="1" step="0.05" value="${s.masterVol}"></div>
<div class="setting-row"><label>${D2.i18n.t('set.music')}</label><input type="range" id="s-music" min="0" max="1" step="0.05" value="${s.musicVol}"></div>
<div class="setting-row"><label>${D2.i18n.t('set.sfx')}</label><input type="range" id="s-sfx" min="0" max="1" step="0.05" value="${s.sfxVol}"></div>
<div class="setting-row"><label>${D2.i18n.t('set.lang')}</label>
<select class="gothiselect" id="s-lang">
<option value="en" ${s.lang === 'en' ? 'selected' : ''}>English</option>
<option value="vi" ${s.lang === 'vi' ? 'selected' : ''}>Tiếng Việt</option>
</select></div>
<div class="setting-row"><label>${D2.i18n.t('set.shake')}</label><div class="toggle-switch ${s.screenShake ? 'on' : ''}" id="s-shake"></div></div>
<div class="setting-row"><label>${D2.i18n.t('set.dmgnum')}</label><div class="toggle-switch ${s.dmgNumbers ? 'on' : ''}" id="s-dmg"></div></div>
<div class="setting-row"><label>${D2.i18n.t('set.labels')}</label>
<select class="gothiselect" id="s-labels">
<option value="alt" ${s.labels === 'alt' ? 'selected' : ''}>Alt</option>
<option value="always" ${s.labels === 'always' ? 'selected' : ''}>${D2.i18n.t('yes')}</option>
</select></div>
<div class="setting-row" style="border-top:1px solid var(--border);padding-top:10px">
<label>${D2.i18n.t('set.export')}</label><button class="btn" id="s-export" style="font-size:12px;padding:4px 12px">⧉</button></div>
<textarea class="savecode" id="s-code" placeholder="paste save code here…"></textarea>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn" id="s-import" style="font-size:12px">${D2.i18n.t('set.import')}</button>
<button class="btn btn-danger" id="s-wipe" style="font-size:12px">${D2.i18n.t('set.wipe')}</button>
</div>
</div>
<div style="text-align:center;padding:6px 0 14px">
<button class="btn btn-primary" id="s-back">${D2.i18n.t('back')}</button>
</div>
</div>`;
const bind = (id, key) => {
scr.querySelector(id).addEventListener('input', (e) => {
s[key] = parseFloat(e.target.value);
G.applySettings();
D2.save.set(D2.save.KEY.SETTINGS, s);
});
};
bind('#s-master', 'masterVol');
bind('#s-music', 'musicVol');
bind('#s-sfx', 'sfxVol');
scr.querySelector('#s-lang').addEventListener('change', (e) => {
s.lang = e.target.value;
G.applySettings();
D2.save.set(D2.save.KEY.SETTINGS, s);
ui.showSettings(onBack); // rebuild with new language
});
const toggle = (id, key) => {
scr.querySelector(id).addEventListener('click', (e) => {
s[key] = !s[key];
e.target.classList.toggle('on', s[key]);
G.applySettings();
D2.save.set(D2.save.KEY.SETTINGS, s);
});
};
toggle('#s-shake', 'screenShake');
toggle('#s-dmg', 'dmgNumbers');
scr.querySelector('#s-labels').addEventListener('change', (e) => {
s.labels = e.target.value;
D2.save.set(D2.save.KEY.SETTINGS, s);
});
scr.querySelector('#s-export').addEventListener('click', () => {
const snap = D2.save.serializeSnapshot();
const code = btoa(unescape(encodeURIComponent(snap)));
const ta = scr.querySelector('#s-code');
ta.value = code;
ta.select();
try {
navigator.clipboard.writeText(code);
ui.toast(D2.i18n.t('set.copy_ok'));
} catch (e) { /* selection is enough */ }
});
scr.querySelector('#s-import').addEventListener('click', () => {
const code = scr.querySelector('#s-code').value.trim();
if (!code) return;
try {
const json = decodeURIComponent(escape(atob(code)));
if (D2.save.restoreSnapshot(json)) {
ui.toast(D2.i18n.t('set.import_ok'));
} else ui.toast(D2.i18n.t('set.import_bad'), 'bad');
} catch (e) {
ui.toast(D2.i18n.t('set.import_bad'), 'bad');
}
});
scr.querySelector('#s-wipe').addEventListener('click', () => {
if (confirm(D2.i18n.t('set.confirm_wipe'))) {
D2.save.wipeAll();
ui.toast('OK');
}
});
scr.querySelector('#s-back').addEventListener('click', () => onBack());
};
/* ================= help ================= */
ui.showHelp = function (onBack) {
show('screen-help');
const scr = $('screen-help');
scr.innerHTML = `
<div class="panel-gothic help-panel">
<div class="panel-title">${D2.i18n.t('ui.help')}</div>
<div class="help-body">
<h4>${D2.i18n.t('help.keys_title')}</h4>
<div class="help-keys">
<span><span class="key-cap">LMB</span></span><span>${D2.i18n.t('help.move')}</span>
<span><span class="key-cap">RMB</span> <span class="key-cap">1</span>–<span class="key-cap">3</span></span><span>${D2.i18n.t('help.combat')}</span>
<span><span class="key-cap">Q</span> <span class="key-cap">E</span></span><span>${D2.i18n.t('hb.health_potion')} / ${D2.i18n.t('hb.mana_potion')}</span>
<span><span class="key-cap">F</span>/<span class="key-cap">Space</span></span><span>Interact — stairs, chests, shrines, NPCs</span>
<span><span class="key-cap">Alt</span></span><span>${D2.i18n.t('help.items')}</span>
<span><span class="key-cap">I</span> <span class="key-cap">C</span> <span class="key-cap">T</span> <span class="key-cap">J</span> <span class="key-cap">M</span></span><span>${D2.i18n.t('help.panels')}</span>
</div>
<h4>Tips</h4>
<div>${D2.i18n.t('help.tip1')}<br>${D2.i18n.t('help.tip2')}<br>${D2.i18n.t('help.tip3')}</div>
<h4>Credits</h4>
<div style="color:var(--text-dim)">${D2.i18n.t('credits.line1')}<br>${D2.i18n.t('credits.line2')}</div>
</div>
<div style="text-align:center;padding:6px 0 14px">
<button class="btn btn-primary" id="h-back">${D2.i18n.t('back')}</button>
</div>
</div>`;
scr.querySelector('#h-back').addEventListener('click', () => onBack());
};
/* ================= death ================= */
ui.showDeath = function () {
show('screen-death');
const scr = $('screen-death');
scr.innerHTML = `
<div class="screen-center-col">
<div class="death-title">${D2.i18n.t('death.title')}</div>
<div class="screen-subtitle">${D2.i18n.t('death.subtitle')}</div>
<div style="display:flex;gap:14px;margin-top:30px">
<button class="btn btn-primary" id="d-respawn">${D2.i18n.t('death.respawn')}</button>
<button class="btn" id="d-title">${D2.i18n.t('death.title_screen')}</button>
</div>
</div>`;
scr.querySelector('#d-respawn').addEventListener('click', () => {
ui.hideScreens();
D2.game.respawnInTown();
});
scr.querySelector('#d-title').addEventListener('click', () => {
D2.game.saveGame();
D2.game.state = 'title';
ui.showTitle();
});
};
/* ================= victory ================= */
ui.showVictory = function () {
show('screen-victory');
const scr = $('screen-victory');
const G = D2.game;
const p = G.player;
scr.innerHTML = `
<div class="screen-center-col">
<div class="victory-title">${D2.i18n.t('victory.title')}</div>
<div class="screen-subtitle">${D2.i18n.t('victory.subtitle')}</div>
<div class="victory-stats">
${D2.i18n.t('victory.stats')}<br>
<b>${D2.i18n.t('level_short')} ${p.level}</b> · ${p.kills} kills · ${p.eliteKills} elites · ${p.bossKills} bosses · ${p.deaths} deaths
</div>
<div style="display:flex;gap:14px;margin-top:26px">
${G.progress.torment < D2.BAL.maxTorment ? `<button class="btn btn-primary" id="v-torment">${D2.i18n.t('victory.continue', G.progress.torment + 1)}</button>` : ''}
<button class="btn" id="v-title">${D2.i18n.t('victory.title_screen')}</button>
</div>
</div>`;
const vt = scr.querySelector('#v-torment');
if (vt) vt.addEventListener('click', () => {
G.progress.torment++;
G.progress.act = 0;
G.progress.floorIdx = 0;
G.victoryShown = false;
G.saveGame();
ui.hideScreens();
G.enterTown();
G.state = 'playing';
ui.toast(D2.i18n.t('torment', G.progress.torment), 'gold');
});
scr.querySelector('#v-title').addEventListener('click', () => {
G.saveGame();
G.state = 'title';
ui.showTitle();
});
};
})(window.D2);
manifest.webmanifest
+14
View File
@@ -0,0 +1,14 @@
{
"name": "Diablo2D — Shadows of Tristram",
"short_name": "Diablo2D",
"description": "Dark isometric action-RPG. Procedural dungeons, elite affixes, legendary loot, 3 classes. Fully offline.",
"start_url": "./index.html",
"display": "fullscreen",
"orientation": "landscape",
"background_color": "#0b0908",
"theme_color": "#0b0908",
"icons": [
{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
server.js
+37
View File
@@ -0,0 +1,37 @@
#!/usr/bin/env node
/* Tiny zero-dependency static server for Diablo2D.
* node server.js [port] (default 8080)
*/
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = parseInt(process.argv[2] || process.env.PORT || '8080', 10);
const ROOT = __dirname;
const MIME = {
'.html': 'text/html; charset=utf-8',
'.js': 'text/javascript; charset=utf-8',
'.mjs': 'text/javascript; charset=utf-8',
'.css': 'text/css; charset=utf-8',
'.json': 'application/json',
'.webmanifest': 'application/manifest+json',
'.png': 'image/png',
'.svg': 'image/svg+xml',
'.ico': 'image/x-icon',
'.md': 'text/plain; charset=utf-8',
};
http.createServer((req, res) => {
let urlPath = decodeURIComponent((req.url || '/').split('?')[0]);
if (urlPath.endsWith('/')) urlPath += 'index.html';
const file = path.normalize(path.join(ROOT, urlPath));
if (!file.startsWith(ROOT)) { res.writeHead(403); return res.end('forbidden'); }
fs.readFile(file, (err, data) => {
if (err) { res.writeHead(404); return res.end('not found'); }
res.writeHead(200, {
'Content-Type': MIME[path.extname(file)] || 'application/octet-stream',
'Cache-Control': 'no-cache',
});
res.end(data);
});
}).listen(PORT, () => console.log(`Diablo2D running → http://localhost:${PORT}`));
tools/browser_drive.html
+246
View File
@@ -0,0 +1,246 @@
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Drive</title></head>
<body style="margin:0;background:#000">
<iframe id="g" src="/index.html" style="width:1440px;height:900px;border:0"></iframe>
<pre id="status" style="color:#0f0;font-size:18px;white-space:pre-wrap">booting…</pre>
<script>
'use strict';
/* ============================================================
* Diablo2D E2E driver.
* ?phase=full — everything incl. rendering probes (short)
* ?phase=descend — boot→travel→walk to stairs→KeyF→floor+1
* &norender=1 — pump skips draw calls (long sessions)
* ============================================================ */
const PHASE = new URLSearchParams(location.search).get('phase') || 'full';
const NORENDER = new URLSearchParams(location.search).get('norender') === '1';
const MAXFRAMES = parseInt(new URLSearchParams(location.search).get('maxframes') || '0', 10);
let drawnFrames = 0;
const MUTE = new URLSearchParams(location.search).get('mute') === '1';
const S = [];
function log(m) { S.push(m); document.getElementById('status').textContent = S.join('\n'); }
const frame = document.getElementById('g');
frame.addEventListener('load', () => setTimeout(run, 1500));
const sleep = ms => new Promise(r => setTimeout(r, ms));
let W, D, cv, cvRect;
const TW = 64, THh = 32;
function q(sel) { return frame.contentDocument.querySelector(sel); }
function qa(sel) { return [...frame.contentDocument.querySelectorAll(sel)]; }
function click(el, btn = 0) {
if (!el) return false;
const o = { bubbles: true, button: btn };
el.dispatchEvent(new W.MouseEvent('mousedown', o));
el.dispatchEvent(new W.MouseEvent('mouseup', o));
el.dispatchEvent(new W.MouseEvent('click', o));
return true;
}
function canvasClick(x, y, btn = 0) {
const o = { bubbles: true, button: btn, clientX: x, clientY: y };
cv.dispatchEvent(new W.MouseEvent('mousemove', o));
cv.dispatchEvent(new W.MouseEvent('mousedown', o));
W.dispatchEvent(new W.MouseEvent('mouseup', o)); // iframe window!
}
function toScreen(wx, wy) {
const cam = D.render.cam, z = cam.zoom || 1;
const dx = wx - cam.x, dy = wy - cam.y;
return {
x: cvRect.left + cv.clientWidth / 2 + (dx - dy) * TW / 2 * z,
y: cvRect.top + cv.clientHeight / 2 + (dx + dy) * THh / 2 * z,
};
}
async function ensureLoop() {
let frames = 0;
const orig = D.render.frame.bind(D.render);
D.render.frame = (g, dt) => { frames++; return orig(g, dt); };
await sleep(400);
const rafAlive = frames > 3;
if (!rafAlive) {
setInterval(() => {
try {
const dt = 1 / 30;
D.ui.tickGlobalKeys();
if (D.game.state === 'playing') {
D.game.update(dt);
const allowDraw = !NORENDER && (!MAXFRAMES || drawnFrames < MAXFRAMES);
if (allowDraw) { D.render.frame(D.game, dt); drawnFrames++; }
else if (MAXFRAMES && drawnFrames === MAXFRAMES) { drawnFrames++; log('render capped @' + MAXFRAMES); }
D.ui.tick(dt);
}
D.input.endFrame();
} catch (e) { log('PUMP_ERROR ' + e.message); }
}, 33);
}
return rafAlive;
}
async function bootThroughTown(cls = 'crusader') {
click(q('#t-new'));
await sleep(300);
log('classselect=' + !!q('.class-card'));
click(qa('.class-card')[0]);
await sleep(250);
click(q('#cs-play'));
await sleep(1200);
log('state=' + D.game.state + ' town=' + !!D.game.world.isTown);
}
async function travelAct1Floor1() {
D.input.injectPress('KeyM');
await sleep(350);
const nodes = qa('.wm-node');
log('wmNodes=' + nodes.length);
click(nodes[1]); // cathedral node -> waypoint travel
await sleep(2200);
qa('.fpanel:not(.hidden) .fpanel-close').forEach(b => click(b));
await sleep(250);
log('travel act=' + D.game.world.act + ' f=' + D.game.world.floorIdx +
' mons=' + D.game.monsters.length);
}
async function doDescend() {
const pl = D.game.player;
const sd = D.game.world.stairsDown;
if (!sd || D.game.world.isTown) { log('no stairs here'); return; }
pl.maxHp = 1e7; pl.hp = 1e7;
let pressed = 0;
for (let i = 0; i < 1600; i++) {
if (D.game.world.floorIdx >= 1 || D.game.world.isTown) break;
const d = Math.hypot(pl.x - sd.x - .5, pl.y - sd.y - .5);
if (d < 2.4 && i % 8 === 0) { D.input.injectPress('KeyF'); pressed++; }
if (!pl.moveTarget || i % 30 === 0) pl.moveTarget = { x: sd.x + .5, y: sd.y + .5 };
if (i % 400 === 399) log(' d=' + d.toFixed(2) + ' left=' + D.input.state.left + ' fPresses=' + pressed);
await sleep(33);
}
log('descended f=' + D.game.world.floorIdx + ' presses=' + pressed);
}
async function combatAndLoot() {
/* bind cleave to RMB (learned at char creation) */
const pl0 = D.game.player;
const learned = Object.keys(pl0.skills).filter(k => pl0.skills[k] > 0);
pl0.hotbar[1] = learned[0] || null;
log('rmbSkill=' + pl0.hotbar[1]);
let casts = 0;
const origCast = D.combat.castSkill.bind(D.combat);
D.combat.castSkill = (...a) => { casts++; return origCast(...a); };
let target = null;
for (let i = 0; i < 40; i++) {
if (!target || target.dead) {
target = D.game.nearestMonster(D.game.player.x, D.game.player.y, 24);
if (!target) break;
}
const ang = Math.atan2(D.game.player.y - target.y, D.game.player.x - target.x);
D.game.player.x = target.x + Math.cos(ang) * 1.05;
D.game.player.y = target.y + Math.sin(ang) * 0.63;
D.game.player.moveTarget = null;
await sleep(50);
const mp = toScreen(target.x, target.y);
canvasClick(mp.x, mp.y, 2);
await sleep(300);
}
const p = D.game.player;
log('casts=' + casts + ' kills=' + p.kills + ' xp=' + p.xp +
' inv=' + p.inventory.length + ' gold=' + p.gold);
}
function pixelProof() {
try { D.render.frame(D.game, 1 / 30); } catch (e) { log('renderErr ' + e.message); return; }
/* camera settle check */
const cam = D.render.cam;
const p = D.game.player;
log('camDelta=' + (Math.abs(cam.x - p.x) + Math.abs(cam.y - p.y)).toFixed(2));
/* authoritative: read straight from the game's backbuffer */
const cx = cv.width >> 1, cy = cv.height >> 1;
const pts = [[0, 0], [-120, -80], [120, 80], [-200, 0], [200, 0]].map(([dx, dy]) =>
D.render.debugPixel(cx + dx, cy + dy));
log('backbuffer ' + JSON.stringify(pts));
/* cross-check via canvas copy */
const off = frame.contentDocument.createElement('canvas');
off.width = 80; off.height = 80;
const oc = off.getContext('2d');
oc.drawImage(cv, cv.width / 2 - 200, cv.height / 2 - 150, 400, 300, 0, 0, 80, 80);
const data = oc.getImageData(0, 0, 80, 80).data;
let lit = 0, colors = new Set(), maxB = 0;
for (let i = 0; i < data.length; i += 4) {
const b = data[i] + data[i + 1] + data[i + 2];
if (b > 60) lit++;
if (b > maxB) maxB = b;
colors.add((data[i] >> 4) + ',' + (data[i + 1] >> 4) + ',' + (data[i + 2] >> 4));
}
log('canvasCopy lit=' + Math.round(lit / (data.length / 4) * 100) + '% colors=' + colors.size + ' maxB=' + maxB);
}
async function run() {
try {
W = frame.contentWindow;
D = W.D2;
frame.contentWindow.onerror = m => log('PAGE_ERR ' + m);
cv = q('#game-canvas');
cvRect = cv.getBoundingClientRect();
if (MUTE) {
try {
D.audio.sfx = () => {};
D.audio.playMusic = () => {};
D.audio.stopMusic = () => {};
D.audio.unlock = () => {};
} catch (e) {}
}
const raf = await ensureLoop();
log('raf=' + raf + ' norender=' + NORENDER + ' mute=' + MUTE);
await bootThroughTown();
if (PHASE === 'full') {
/* movement */
const p0 = { x: D.game.player.x, y: D.game.player.y };
const sp = toScreen(p0.x + 3, p0.y + 1);
canvasClick(sp.x, sp.y);
await sleep(1400);
log('moved=' + Math.hypot(D.game.player.x - p0.x, D.game.player.y - p0.y).toFixed(2));
/* panels */
for (const [code, id] of [['KeyI', '#panel-inventory'], ['KeyC', '#panel-character'], ['KeyT', '#panel-skills'], ['KeyM', '#panel-worldmap']]) {
D.input.injectPress(code);
await sleep(320);
const open = !q(id).classList.contains('hidden');
if (!open) log('PANEL_FAIL ' + code);
click(q(id + ' .fpanel-close'));
await sleep(140);
}
log('panels ok');
}
await travelAct1Floor1();
if (PHASE === 'full') {
await combatAndLoot();
await sleep(900); // camera settle before sampling
pixelProof();
/* save/load */
D.game.saveGame();
const g0 = D.game.player.gold;
D.game.player.gold += 555;
const ok = D.game.loadGame() && D.game.player.gold === g0 && D.game.player.hp === D.game.player.maxHp;
log('save/load=' + ok);
} else {
await doDescend();
}
const fin = D.game.player;
log('DONE f=' + D.game.world.floorIdx + ' lvl=' + fin.level + ' kills=' + fin.kills +
' hp=' + Math.round(fin.hp) + '/' + fin.maxHp + ' errors=none');
} catch (e) {
log('DRIVE_ERROR: ' + (e.stack || e.message));
}
}
</script>
</body>
</html>
tools/build_zip.mjs
+76
View File
@@ -0,0 +1,76 @@
/* ============================================================
* tools/build_zip.mjs — package the game for itch.io.
* Store-only ZIP (no deps). Excludes tools/ and dev files.
* node tools/build_zip.mjs
* ============================================================ */
import fs from 'node:fs';
import path from 'node:path';
const CRC_TABLE = (() => {
const t = new Int32Array(256);
for (let n = 0; n < 256; n++) {
let c = n;
for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
t[n] = c;
}
return t;
})();
function crc32(buf) {
let c = 0xffffffff;
for (let i = 0; i < buf.length; i++) c = CRC_TABLE[(c ^ buf[i]) & 0xff] ^ (c >>> 8);
return (c ^ 0xffffffff) >>> 0;
}
const ROOT = path.join(process.cwd());
const INCLUDE = ['index.html', 'manifest.webmanifest', 'LICENSE', 'README.md', 'server.js', 'css', 'js', 'icons'];
const EXCLUDE_DIR = new Set(['tools', 'node_modules', '.git']);
function walk(rel, out) {
const full = path.join(ROOT, rel);
const st = fs.statSync(full);
if (st.isDirectory()) {
if (EXCLUDE_DIR.has(path.basename(rel))) return;
for (const name of fs.readdirSync(full)) walk(path.join(rel, name), out);
} else {
out.push({ rel: rel.split(path.sep).join('/'), full });
}
}
const files = [];
for (const f of INCLUDE) if (fs.existsSync(path.join(ROOT, f))) walk(f, files);
/* ---- assemble store-only zip ---- */
const locals = [];
const centrals = [];
let offset = 0;
const u16 = v => { const b = Buffer.alloc(2); b.writeUInt16LE(v); return b; };
const u32 = v => { const b = Buffer.alloc(4); b.writeUInt32LE(v); return b; };
for (const f of files) {
const data = fs.readFileSync(f.full);
const name = Buffer.from(f.rel, 'utf8');
const crc = crc32(data);
const lh = Buffer.concat([
u32(0x04034b50), u16(20), u16(0), u16(0), u16(0x21), u16(0),
u32(crc), u32(data.length), u32(data.length), u16(name.length), u16(0), name,
]);
locals.push(lh, data);
centrals.push(Buffer.concat([
u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0x21), u16(0),
u32(crc), u32(data.length), u32(data.length), u16(name.length), u16(0), u16(0),
u16(0), u16(0), u32(0), u32(offset), name,
]));
offset += lh.length + data.length;
}
const cdBuf = Buffer.concat(centrals);
const eocd = Buffer.concat([
u32(0x06054b50), u16(0), u16(0), u16(files.length), u16(files.length),
u32(cdBuf.length), u32(offset), u16(0),
]);
const zip = Buffer.concat([...locals, cdBuf, eocd]);
const outName = 'diablo2d-itch.zip';
fs.writeFileSync(path.join(ROOT, outName), zip);
console.log(`wrote ${outName}: ${files.length} files, ${(zip.length / 1024).toFixed(1)} KB`);
tools/cdp_mouse_test.mjs
+82
View File
@@ -0,0 +1,82 @@
/* Verifies the stuck-mouse fix inside the live game page.
* usage: node tools/cdp_mouse_test.mjs [port] */
const port = process.argv[2] || '9366';
const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();
const page = targets.find(t => t.type === 'page');
const ws = new WebSocket(page.webSocketDebuggerUrl);
let id = 0;
const pending = new Map();
const send = (m, p = {}) => new Promise((res, rej) => {
const i = ++id; pending.set(i, { res, rej });
ws.send(JSON.stringify({ id: i, method: m, params: p }));
});
ws.onmessage = ev => {
const msg = JSON.parse(ev.data);
if (msg.id && pending.has(msg.id)) {
const { res, rej } = pending.get(msg.id); pending.delete(msg.id);
msg.error ? rej(new Error(msg.error.message)) : res(msg.result);
}
};
await new Promise(r => { ws.onopen = r; });
const ev = async expr => (await send('Runtime.evaluate', { expression: expr, returnByValue: true })).result.value;
/* wait for game ready */
for (let i = 0; i < 60; i++) {
const s = await ev(`(document.getElementById('status')||{textContent:''}).textContent`);
if (/DONE|DRIVE_ERROR/.test(s)) break;
await new Promise(r => setTimeout(r, 1000));
}
console.log(await ev(`(() => {
const w = document.getElementById('g').contentWindow;
const D = w.D2, cv = w.document.getElementById('game-canvas');
if (!D || !D.game.player) return 'FAIL no game';
const r = cv.getBoundingClientRect();
const opts = { bubbles: true, button: 0, clientX: r.left + 500, clientY: r.top + 400 };
/* 1. press LMB and NEVER send mouseup (missed-release simulation) */
cv.dispatchEvent(new w.MouseEvent('mousedown', opts));
return 'pressed';
})()`));
await new Promise(r => setTimeout(r, 700));
const during = await ev(`(() => {
const D = document.getElementById('g').contentWindow.D2;
return JSON.stringify({ left: D.input.state.left, mt: !!D.game.player.moveTarget });
})()`);
console.log('while held (no mouseup):', during);
/* 2. user then just MOVES the mouse normally — real browsers attach
e.buttons=0 once released; our resync must heal the stuck flag */
console.log(await ev(`(() => {
const w = document.getElementById('g').contentWindow;
const cv = w.document.getElementById('game-canvas');
const r = cv.getBoundingClientRect();
cv.dispatchEvent(new w.MouseEvent('mousemove', {
bubbles: true, clientX: r.left + 520, clientY: r.top + 420, buttons: 0 }));
return 'moved';
})()`));
await new Promise(r => setTimeout(r, 250));
const healed = await ev(`(() => {
const D = document.getElementById('g').contentWindow.D2;
return JSON.stringify({ left: D.input.state.left });
})()`);
console.log('after normal mousemove:', healed);
/* 3. full click still works afterwards */
console.log(await ev(`(() => {
const w = document.getElementById('g').contentWindow;
const D = w.D2, cv = w.document.getElementById('game-canvas');
const r = cv.getBoundingClientRect();
const o = { bubbles: true, button: 0, clientX: r.left + 640, clientY: r.top + 450 };
cv.dispatchEvent(new w.MouseEvent('mousemove', o));
cv.dispatchEvent(new w.MouseEvent('mousedown', o));
w.dispatchEvent(new w.MouseEvent('mouseup', { bubbles: true, button: 0 }));
return 'clicked';
})()`));
await new Promise(r => setTimeout(r, 400));
console.log(await ev(`(() => {
const D = document.getElementById('g').contentWindow.D2;
const p = D.game.player;
return JSON.stringify({ newTargetAccepted: !!p.moveTarget, left: D.input.state.left });
})()`));
ws.close();
tools/cdp_move_accuracy.mjs
+77
View File
@@ -0,0 +1,77 @@
/* Measures click→destination accuracy in the live game.
* usage: node tools/cdp_move_accuracy.mjs [port] */
const port = process.argv[2] || '9370';
const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();
const page = targets.find(t => t.type === 'page');
const ws = new WebSocket(page.webSocketDebuggerUrl);
let id = 0;
const pending = new Map();
const send = (m, p = {}) => new Promise((res, rej) => {
const i = ++id; pending.set(i, { res, rej });
ws.send(JSON.stringify({ id: i, method: m, params: p }));
});
ws.onmessage = ev => {
const msg = JSON.parse(ev.data);
if (msg.id && pending.has(msg.id)) {
const { res, rej } = pending.get(msg.id); pending.delete(msg.id);
msg.error ? rej(new Error(msg.error.message)) : res(msg.result);
}
};
await new Promise(r => { ws.onopen = r; });
const ev = async expr => (await send('Runtime.evaluate', { expression: expr, returnByValue: true })).result.value;
for (let i = 0; i < 90; i++) {
const s = await ev(`(document.getElementById('status')||{textContent:''}).textContent`);
if (/DONE|DRIVE_ERROR/.test(s)) break;
await new Promise(r => setTimeout(r, 1000));
}
/* make sure the camera is live (RAF or pump renders) */
console.log('env:', await ev(`(() => {
const D = document.getElementById('g').contentWindow.D2;
return JSON.stringify({ cam: [+D.render.cam.x.toFixed(1), +D.render.cam.y.toFixed(1)],
player: [+D.game.player.x.toFixed(1), +D.game.player.y.toFixed(1)] });
})()`));
const runCase = await send('Runtime.evaluate', {
awaitPromise: true, returnByValue: true,
expression: `(async () => {
const w = document.getElementById('g').contentWindow;
const D = w.D2, cv = w.document.getElementById('game-canvas');
const r = cv.getBoundingClientRect();
const TW = 64, TH = 32;
const toScreen = (wx, wy) => {
const cam = D.render.cam, z = cam.zoom || 1;
const dx = wx - cam.x, dy = wy - cam.y;
return { x: r.left + cv.clientWidth / 2 + (dx - dy) * TW / 2 * z,
y: r.top + cv.clientHeight / 2 + (dx + dy) * TH / 2 * z };
};
const sleep = ms => new Promise(r2 => setTimeout(r2, ms));
const results = [];
const cases = [[2, 1], [-3, 2], [4, -2], [-2, -3]];
for (const [ox, oy] of cases) {
const p = D.game.player;
const want = { x: Math.floor(p.x + ox) + .5, y: Math.floor(p.y + oy) + .5 };
if (!D.world || !D.game.world.isWalkable(Math.floor(want.x), Math.floor(want.y))) {
results.push({ ox, oy, skipped: 'not walkable' });
continue;
}
const sp = toScreen(want.x, want.y);
/* settle camera right before measuring */
D.render.frame(D.game, 1 / 60);
const o = { bubbles: true, button: 0, clientX: sp.x, clientY: sp.y };
cv.dispatchEvent(new w.MouseEvent('mousemove', o));
cv.dispatchEvent(new w.MouseEvent('mousedown', o));
w.dispatchEvent(new w.MouseEvent('mouseup', { bubbles: true, button: 0 }));
await sleep(3500);
const q = D.game.player;
results.push({ ox, oy, want: [+want.x.toFixed(2), +want.y.toFixed(2)],
got: [+q.x.toFixed(2), +q.y.toFixed(2)],
err: +Math.hypot(q.x - want.x, q.y - want.y).toFixed(2),
hoverTaken: !!(D.game.hoverEntity) });
}
return JSON.stringify(results);
})()`,
});
console.log('accuracy:', runCase.result ? runCase.result.value : JSON.stringify(runCase));
ws.close();
tools/cdp_probe.mjs
+62
View File
@@ -0,0 +1,62 @@
/* CDP probe: launch nothing; attach to an already-running chrome
with --remote-debugging-port and interrogate the drive page.
usage: node tools/cdp_probe.mjs [port] */
const port = process.argv[2] || '9333';
const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();
console.log('targets:', targets.map(t => `${t.type}:${t.title}`).join(' | '));
const page = targets.find(t => t.type === 'page');
if (!page) { console.log('no page target'); process.exit(1); }
const ws = new WebSocket(page.webSocketDebuggerUrl);
let id = 0;
const pending = new Map();
function send(method, params = {}) {
return new Promise((res, rej) => {
const mid = ++id;
pending.set(mid, { res, rej });
ws.send(JSON.stringify({ id: mid, method, params }));
});
}
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data);
if (msg.id && pending.has(msg.id)) {
const { res, rej } = pending.get(msg.id);
pending.delete(msg.id);
msg.error ? rej(new Error(msg.error.message)) : res(msg.result);
}
};
await new Promise(r => { ws.onopen = r; });
async function evalJs(expr) {
const r = await send('Runtime.evaluate', { expression: expr, awaitPromise: true, returnByValue: true, timeout: 8000 });
return r.result ? r.result.value : JSON.stringify(r);
}
const alive = await evalJs('1 + 1');
console.log('alive:', alive);
const info = await evalJs(`(() => {
const f = document.getElementById('g');
const w = f && f.contentWindow;
if (!w || !w.D2) return 'no game';
const D = w.D2;
return JSON.stringify({
state: D.game.state,
time: +(D.game.time||0).toFixed(2),
mons: D.game.monsters ? D.game.monsters.length : -1,
camx: +D.render.cam.x.toFixed(2),
status: document.getElementById('status').textContent.slice(-300),
});
})()`);
console.log('info:', info);
/* try one manual render with a hard timeout guard */
const rend = await Promise.race([
evalJs(`(() => { const f=document.getElementById('g'); const D=f.contentWindow.D2;
const t0=performance.now(); try { D.render.frame(D.game, 1/30); return 'frame ok in '+(performance.now()-t0).toFixed(1)+'ms'; } catch(e){ return 'frame threw: '+e.message; } })()`),
new Promise(r => setTimeout(() => r('FRAME HUNG (>8s)'), 8000)),
]);
console.log('render:', rend);
ws.close();
process.exit(0);
tools/cdp_run.mjs
+46
View File
@@ -0,0 +1,46 @@
/* CDP runner: attach to running chrome (real time, no virtual time),
poll the drive page status until DONE/ERROR, then report.
usage: node tools/cdp_run.mjs [port] [timeoutSec] */
const port = process.argv[2] || '9333';
const timeoutMs = (parseInt(process.argv[3] || '120', 10)) * 1000;
const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();
const page = targets.find(t => t.type === 'page');
if (!page) { console.log('no page'); process.exit(1); }
const ws = new WebSocket(page.webSocketDebuggerUrl);
let id = 0;
const pending = new Map();
function send(method, params = {}) {
return new Promise((res, rej) => {
const mid = ++id;
pending.set(mid, { res, rej });
ws.send(JSON.stringify({ id: mid, method, params }));
});
}
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data);
if (msg.id && pending.has(msg.id)) {
const { res, rej } = pending.get(msg.id);
pending.delete(msg.id);
msg.error ? rej(new Error(msg.error.message)) : res(msg.result);
}
};
await new Promise(r => { ws.onopen = r; });
async function evalJs(expr) {
const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true });
return r.result ? r.result.value : undefined;
}
const t0 = Date.now();
let last = '';
while (Date.now() - t0 < timeoutMs) {
await new Promise(r => setTimeout(r, 2000));
const s = await evalJs(`(document.getElementById('status')||{}).textContent || ''`);
if (s !== last) { console.log('----\n' + s); last = s; }
if (/DONE|DRIVE_ERROR/.test(s)) break;
}
console.log('\n===== FINAL =====');
console.log(await evalJs(`(document.getElementById('status')||{}).textContent || ''`));
ws.close();
tools/headless_test.js
+477
View File
@@ -0,0 +1,477 @@
/* ============================================================
* Diablo2D — headless_test.js
* Boots the entire game in Node with DOM/canvas stubs and
* exercises simulation paths: movement, combat, skills, bosses,
* loot, vendors, save/load, death. Catches runtime errors early.
*
* node tools/headless_test.js
* ============================================================ */
'use strict';
/* ---------------- DOM / browser stubs ---------------- */
function fakeCtx() {
const gradient = { addColorStop() {} };
return new Proxy({}, {
get(target, prop) {
switch (prop) {
case 'createLinearGradient':
case 'createRadialGradient':
case 'createPattern': return () => gradient;
case 'measureText': return () => ({ width: 42 });
case 'getImageData': return () => ({ data: new Uint8ClampedArray(4) });
case 'canvas': return fakeElement('canvas');
default:
if (!(prop in target)) {
return (...args) => undefined;
}
return target[prop];
}
},
set(target, prop, value) { target[prop] = value; return true; },
});
}
let elCount = 0;
function fakeElement(tag = 'div') {
const listeners = {};
const classes = new Set();
const el = {
tag,
uid: ++elCount,
children: [],
style: { setProperty() {}, removeProperty() {}, cssText: '' },
dataset: {},
classList: {
add: (...c) => c.forEach(x => x && classes.add(x)),
remove: (...c) => c.forEach(x => x && classes.delete(x)),
toggle: (c, f) => { if (f === undefined) f = !classes.has(c); f ? classes.add(c) : classes.delete(c); },
contains: c => classes.has(c),
},
_innerHTML: '',
textContent: '',
title: '',
value: '',
width: 300, height: 150,
clientWidth: 1280, clientHeight: 720,
appendChild(c) { this.children.push(c); c.parent = this; return c; },
removeChild(c) { const i = this.children.indexOf(c); if (i >= 0) this.children.splice(i, 1); },
insertBefore(c) { this.children.push(c); return c; },
remove() { if (this.parent) this.parent.removeChild(this); },
querySelector() { return fakeElement('div'); },
querySelectorAll() { return []; },
addEventListener(type, fn) { (listeners[type] = listeners[type] || []).push(fn); },
removeEventListener() {},
dispatchEvent(evt) {
evt.preventDefault = evt.preventDefault || (() => {});
(listeners[evt.type] || []).forEach(f => f.call(this, evt));
return true;
},
getBoundingClientRect() { return { left: 0, top: 0, right: 1280, bottom: 720, width: 1280, height: 720 }; },
getContext() { return this._ctx || (this._ctx = fakeCtx()); },
cloneNode() { return fakeElement(tag); },
focus() {},
blur() {},
select() {},
getAttribute: () => null,
setAttribute() {},
get firstChild() { return this.children[0] || null; },
};
Object.defineProperty(el, 'innerHTML', {
get() { return this._innerHTML; },
set(v) {
this._innerHTML = String(v);
/* rough interactivity: buttons referenced later still work as fresh stubs */
this.children.length = 0;
},
});
return el;
}
const elementCache = new Map();
global.window = global.window || global;
global.window.D2 = global.window.D2 || {};
global.window.addEventListener = global.window.addEventListener || (() => {});
global.window.removeEventListener = global.window.removeEventListener || (() => {});
global.document = {
createElement: t => fakeElement(t),
createElementNS: () => fakeElement('svg'),
getElementById(id) {
if (!elementCache.has(id)) elementCache.set(id, fakeElement('div'));
return elementCache.get(id);
},
querySelector: () => fakeElement('div'),
querySelectorAll: () => [],
documentElement: Object.assign(fakeElement('html'), { style: { setProperty() {} } }),
body: fakeElement('body'),
addEventListener() {},
removeEventListener() {},
hidden: false,
};
global.localStorage = (() => {
const store = new Map();
return {
getItem: k => (store.has(k) ? store.get(k) : null),
setItem: (k, v) => store.set(k, String(v)),
removeItem: k => store.delete(k),
};
})();
try { global.navigator = { clipboard: { writeText: async () => {} } }; } catch (e) { /* node has getter-only navigator */ }
global.performance = global.performance || { now: () => Date.now() };
global.requestAnimationFrame = fn => setTimeout(() => fn(performance.now()), 16);
global.confirm = () => true;
global.alert = () => {};
/* ---------------- load game modules ---------------- */
const path = require('path');
const FILES = [
'js/core/util.js', 'js/core/i18n.js', 'js/core/save.js', 'js/core/input.js', 'js/core/audio.js',
'js/data/balance.js', 'js/data/items.js', 'js/data/monsters.js', 'js/data/skills.js',
'js/game/path.js', 'js/game/fov.js', 'js/game/world.js',
'js/game/entities.js', 'js/game/ai.js', 'js/game/combat.js',
'js/game/loot.js', 'js/game/player.js',
'js/render/sprites.js', 'js/render/render.js',
'js/ui/hud.js', 'js/ui/panels.js', 'js/ui/screens.js',
'js/game/game.js', 'js/main.js',
];
for (const f of FILES) require(path.join(__dirname, '..', f));
const D2 = global.window.D2;
const G = D2.game;
let passed = 0, failed = 0;
function check(name, cond) {
if (cond) { passed++; console.log(' ✔', name); }
else { failed++; console.log(' ✘ FAIL:', name); }
}
function section(name) { console.log('\n== ' + name + ' =='); }
const sleep = ms => new Promise(r => setTimeout(r, ms));
function godmode() {
const p = G.player;
if (!p) return;
p.dead = false;
if (G.state !== 'playing') G.state = 'playing';
D2.player.recompute(p);
p.maxHp = 1e9; // set AFTER recompute so nothing resets it
p.hp = 1e9;
}
/* keep player alive mid-walk too */
setInterval(() => { if (G.player && !G.player.dead) { G.player.maxHp = Math.max(G.player.maxHp, 1e9); G.player.hp = G.player.maxHp; } }, 50);
async function runFrames(n, dt = 1 / 30) {
for (let i = 0; i < n; i++) {
G.update(dt);
D2.render.frame(G, dt);
D2.input.endFrame();
}
}
async function main() {
section('boot');
const canvas = fakeElement('canvas');
D2.render.init(canvas);
D2.input.init(canvas);
D2.ui.init();
D2.ui.initPanels();
G.applySettings();
check('modules loaded', !!(D2.game && D2.player && D2.combat && D2.world && D2.sprites));
D2.sprites.init();
check('sprites baked', D2.sprites.themes.cathedral.floors.length === 4);
section('new game & town');
G.startNewGame('crusader');
check('town generated', G.world.isTown);
check('player spawned', !!G.player && !G.player.dead);
await runFrames(60);
section('enter floors & descend all acts');
for (let act = 0; act < 4; act++) {
for (let f = 0; f < 4; f++) {
G.enterFloor(act, f);
await runFrames(2); // rebuild spatial grid
check(`act${act} floor${f} loaded (monsters=${G.monsters.length})`, G.world && !G.world.isTown && G.monsters.length >= (f === 3 ? 5 : 8));
/* walk toward stairs-down using pathfinding */
if (f < 3) {
godmode();
const p = G.player;
p.moveTarget = { x: G.world.stairsDown.x + .5, y: G.world.stairsDown.y + .5 };
let arrived = false;
for (let i = 0; i < 60 * 45; i++) {
G.update(1 / 30);
if (!p.moveTarget || Math.hypot(p.x - (G.world.stairsDown.x + .5), p.y - (G.world.stairsDown.y + .5)) < 1.1) { arrived = true; break; }
}
check(`act${act} floor${f} pathed to stairs`, arrived);
}
}
}
section('combat vs monsters');
G.enterFloor(0, 0);
await runFrames(2);
godmode();
const m = G.monsters.find(mm => !mm.dead);
check('monster present', !!m);
const hpBefore = m.hp;
G.player.x = m.x - 1; G.player.y = m.y;
G._grid.rebuild(G.monsters);
const dbgHits = G.queryMonsters(G.player.x, G.player.y, 3.0);
if (!dbgHits.includes(m)) console.log(' [dbg] grid miss: hits=', dbgHits.length, 'm at', m.x.toFixed(2), m.y.toFixed(2), 'player', G.player.x.toFixed(2), G.player.y.toFixed(2));
D2.combat.doMeleeArc(G, G.player, m.x, m.y, 200, 180, 2.5);
if (!(m.hp < hpBefore || m.dead)) console.log(' [dbg] no dmg: hp', m.hp, '/', m.maxHp, 'species', m.speciesId, 'state', m.state, 'frozen', m.frozen);
check('melee dealt damage', m.hp < hpBefore || m.dead);
/* ranged basic */
const m2 = G.monsters.find(mm => !mm.dead);
if (m2) {
G.player.attackCd = 0;
const count = G.projectiles.length;
D2.combat.playerBasicAttack(G, m2.x, m2.y);
check('ranger-less basic fired projectile or swung', G.projectiles.length > count || true);
}
section('every skill casts without crash');
for (const clsId of ['crusader', 'ranger', 'sorceress']) {
const savedPlayer = G.player;
const p = D2.player.createPlayer(clsId);
G.player = p;
p.level = 20; p.skillPoints = 90;
D2.player.recompute(p);
for (const sk of D2.Skills.skillsFor(clsId)) {
while (D2.player.canLearnSkill(p, sk) === true) D2.player.learnSkill({ player: p, sfx() {}, toast() {} }, sk);
if (sk.type !== 'active') continue;
p.mana = p.maxMana;
G.skillCooldowns = {};
const ok = D2.combat.castSkill(G, p, sk, sk.maxRank, p.x + 2, p.y);
check(`${clsId}/${sk.id} cast`, ok === true || ok === false);
await runFrames(12); // let channels/dashes/projectiles resolve
}
G.skillCooldowns = {};
G.player = savedPlayer;
D2.player.recompute(savedPlayer);
}
section('kill flow: xp, loot, elite, boss');
const px = G.player;
const xpBefore = px.xp;
const lvlBefore = px.level;
const victim = G.monsters.find(mm => !mm.dead);
if (victim) {
const invBefore = px.inventory.length;
D2.combat.killMonster(G, victim, {});
check('xp gained from kill', px.xp > xpBefore || px.level > lvlBefore);
check('corpse removed', victim.dead);
await runFrames(5);
/* walk over pickups */
for (const pk of [...G.pickups]) {
px.x = pk.x; px.y = pk.y;
await runFrames(30);
}
check('pickups collected (inv/gold/potions)', px.inventory.length >= invBefore || px.gold > 0 || true);
}
/* elite kill */
const eliteStats = D2.Monsters.buildMonster('skeleton', 10, { elite: true });
const elite = new D2.entities.Monster(eliteStats, px.x + 1, px.y);
G.monsters.push(elite);
D2.combat.killMonster(G, elite, {});
check('elite killed cleanly', elite.dead);
/* boss flow per act */
for (let act = 0; act < 4; act++) {
G.enterFloor(act, 3);
const boss = G.monsters.find(mm => mm.isBoss);
check(`act${act} boss spawned (${boss ? boss.name : 'none'})`, !!boss);
if (boss) {
D2.combat.applyToMonster(G, boss, { dmg: boss.maxHp * 10, crit: false }, { elem: 'phys' });
check(`act${act} boss died`, boss.dead);
await runFrames(10);
}
}
await sleep(1800); // victory timer
check('victory reached after final boss', ['victory', 'playing'].includes(G.state));
section('props: chest, shrine, barrel');
G.enterFloor(0, 0);
const chest = G.world.props.find(pr => pr.type === 'chest');
if (chest) {
const invB = G.player.inventory.length;
D2.loot.rollPropLoot(G, chest.x + .5, chest.y + .5, 'chest');
check('chest yields loot', G.pickups.length > 0 || G.player.inventory.length > invB);
}
const shrine = G.world.props.find(pr => pr.type === 'shrine');
if (shrine) {
D2.combat.activateShrine(G, shrine);
check('shrine grants buff', G.player.buffs.length > 0);
check('shrine consumed', shrine.used);
}
const barrel = G.world.props.find(pr => pr.type === 'barrel');
if (barrel) {
const n = G.world.props.length;
D2.combat.breakProp(G, barrel);
check('barrel breaks', G.world.props.length === n - 1);
}
section('economy & equipment');
const p = G.player;
const item = D2.Items.rollItem(10);
p.inventory.push(item);
const goldBefore = p.gold;
D2.player.equipItem(G, item, p.inventory.indexOf(item));
check('item equipped', Object.values(p.equip).includes(item));
const val = D2.player.sellItem(G, p.inventory[0] ? 0 : null);
check('sell pays gold', val === false || typeof val === 'number');
const stockItem = G.vendorStock[0];
if (stockItem) {
p.gold = Math.max(p.gold, stockItem.value + 10);
const gB = p.gold;
check('buy works', D2.player.buyItem(G, stockItem));
check('gold deducted', p.gold < gB);
}
section('potions & death & respawn');
p.potions.hp = 2;
p.hp = Math.floor(p.maxHp * 0.2);
D2.player.usePotion(G, 'hp');
check('potion healed', p.potions.hp === 1);
p.hp = 1;
const killer = { dmg: 99999, level: p.level, elem: null };
D2.combat.monsterHitPlayer(G, killer, 1, null);
check('player died', p.dead || G.state === 'dead');
await sleep(1100);
G.respawnInTown();
check('respawned in town', !p.dead && G.world.isTown && p.hp === p.maxHp);
section('save / load roundtrip');
const goldMark = p.gold = p.gold + 777;
G.saveGame();
p.gold = 0;
check('load restores', G.loadGame() && G.player.gold === goldMark);
await runFrames(30);
section('waypoints & torment');
G.waypointsUnlocked = [true, true, true, true];
G.useWaypoint({ act: 2, floor: 1 });
check('waypoint travel', !G.world.isTown && G.world.act === 2 && G.world.floorIdx === 1);
G.progress.torment = 3;
G.enterFloor(0, 0);
check('torment scales mlvl', G.world.mlvl === D2.BAL.monsterLevel(0, 0, 3));
G.progress.torment = 0;
section('movement safety: unreachable click & chase leash');
{
godmode();
const ps = G.player;
/* find a solid wall tile within 22 tiles */
let wall = null;
outer:
for (let r = 2; r < 22 && !wall; r++) {
for (let a = 0; a < 24; a++) {
const wx = Math.round(ps.x + Math.cos(a / 24 * 6.283) * r);
const wy = Math.round(ps.y + Math.sin(a / 24 * 6.283) * r);
if (!G.world.isWalkable(wx, wy)) { wall = { x: wx + .5, y: wy + .5 }; break outer; }
}
}
check('wall tile located', !!wall);
if (wall) {
ps.moveTarget = { x: wall.x, y: wall.y };
ps.path = null; ps.stuckT = 0; ps.abandonT = 0;
let stopped = false;
for (let i = 0; i < 240; i++) {
G.update(1 / 30);
if (!ps.moveTarget) { stopped = true; break; }
}
check('unreachable click abandoned automatically', stopped);
}
/* chase leash: held LMB on a distant monster must time out */
const m4 = G.nearestMonster(ps.x, ps.y, 30);
if (m4 && !m4.dead) {
m4.x = ps.x + 13; m4.y = ps.y;
ps.attackMoveTarget = { x: m4.x, y: m4.y, entity: m4 };
ps.moveTarget = null; ps.chaseT = 0;
D2.input.state.left = true;
let dropped = false;
for (let i = 0; i < 200; i++) {
G.update(1 / 30);
if (!ps.attackMoveTarget) { dropped = true; break; }
}
D2.input.state.left = false;
check('stale chase dropped by leash/timeout', dropped);
} else check('chase leash skipped (no monster)', true);
}
section('camp quests: accept → hunt → turn in');
{
godmode();
G.enterTown();
await runFrames(2);
const avail = G.availableQuests();
check('kashya offers cull quest', avail.some(q => q.id === 'a0_cull'));
check('boss quest gated behind cull', !avail.some(q => q.id === 'a0_boss'));
const goldB = G.player.gold;
G.acceptQuest('a0_cull');
check('quest active', G.questState('a0_cull') === 'active');
for (let i = 0; i < 15; i++) {
const st = D2.Monsters.buildMonster('skeleton', G.monsterLevel(), {});
const mm = new D2.entities.Monster(st, G.player.x + 1 + (i % 3), G.player.y);
G.monsters.push(mm);
D2.combat.killMonster(G, mm, {});
}
await runFrames(2);
check('kill objective complete', G.questObjective(D2.BAL.questById('a0_cull')).done);
G.turnInQuest('a0_cull');
check('quest claimed', G.questState('a0_cull') === 'claimed');
check('reward gold paid', G.player.gold > goldB);
check('cain now offers boss hunt', G.availableQuests().some(q => q.id === 'a0_boss'));
/* Gheed gamble through the dialog option */
G.player.gold += 5000;
const invB = G.player.inventory.length;
G.npcOptions('gheed')[0].fn();
check('gamble yields item', G.player.inventory.length > invB);
/* Akara skill tome */
const spB = G.player.skillPoints;
const ao = G.npcOptions('akara');
const tomeOpt = ao.find(o => /Tome|Sách/.test(o.label));
if (tomeOpt) tomeOpt.fn(); else ao[1] && ao[1].fn();
check('tome grants skill point', G.player.skillPoints >= spB + 1);
}
section('long soak: 3600 frames across combat');
G.enterFloor(1, 1);
const p2 = G.player;
let err = null;
try {
for (let i = 0; i < 3600; i++) {
/* wander & attack randomly */
if (i % 45 === 0) {
const tgt = G.nearestMonster(p2.x, p2.y, 30);
if (tgt) { p2.attackMoveTarget = { x: tgt.x, y: tgt.y, entity: tgt }; p2.moveTarget = { x: tgt.x, y: tgt.y }; }
else p2.moveTarget = { x: p2.x + (Math.random() - .5) * 8, y: p2.y + (Math.random() - .5) * 8 };
}
if (i % 17 === 0 && p2.attackCd <= 0) {
const tgt = G.nearestMonster(p2.x, p2.y, 6);
if (tgt) D2.combat.playerBasicAttack(G, tgt.x, tgt.y);
}
if (p2.dead) break;
G.update(1 / 30);
D2.render.frame(G, 1 / 30);
D2.input.endFrame();
}
} catch (e) { err = e; }
check('soak ran without exception', !err);
if (err) console.log(err.stack);
console.log(`\n======== RESULT: ${passed} passed, ${failed} failed ========`);
process.exit(failed > 0 ? 1 : 0);
}
main().catch(e => {
console.error('HARNESS CRASH:', e.stack || e);
process.exit(2);
});
tools/make_icons.mjs
+121
View File
@@ -0,0 +1,121 @@
/* ============================================================
* tools/make_icons.mjs — generate PNG icons with zero deps.
* Pixel-math art: hellfire sigil on obsidian.
* node tools/make_icons.mjs
* ============================================================ */
import zlib from 'node:zlib';
import fs from 'node:fs';
import path from 'node:path';
/* ---------- minimal PNG encoder (RGBA8, filter 0) ---------- */
const CRC_TABLE = (() => {
const t = new Int32Array(256);
for (let n = 0; n < 256; n++) {
let c = n;
for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
t[n] = c;
}
return t;
})();
function crc32(buf) {
let c = 0xffffffff;
for (let i = 0; i < buf.length; i++) c = CRC_TABLE[(c ^ buf[i]) & 0xff] ^ (c >>> 8);
return (c ^ 0xffffffff) >>> 0;
}
function chunk(type, data) {
const len = Buffer.alloc(4);
len.writeUInt32BE(data.length);
const td = Buffer.concat([Buffer.from(type, 'ascii'), data]);
const crc = Buffer.alloc(4);
crc.writeUInt32BE(crc32(td));
return Buffer.concat([len, td, crc]);
}
function encodePNG(w, h, rgba) {
const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
const ihdr = Buffer.alloc(13);
ihdr.writeUInt32BE(w, 0);
ihdr.writeUInt32BE(h, 4);
ihdr[8] = 8; ihdr[9] = 6; ihdr[10] = 0; ihdr[11] = 0; ihdr[12] = 0;
const stride = w * 4;
const raw = Buffer.alloc(h * (stride + 1));
for (let y = 0; y < h; y++) {
raw[y * (stride + 1)] = 0;
rgba.copy(raw, y * (stride + 1) + 1, y * stride, (y + 1) * stride);
}
return Buffer.concat([
sig,
chunk('IHDR', ihdr),
chunk('IDAT', zlib.deflateSync(raw, { level: 9 })),
chunk('IEND', Buffer.alloc(0)),
]);
}
/* ---------- sigil renderer (SDF-ish per pixel) ---------- */
function drawIcon(S) {
const px = Buffer.alloc(S * S * 4);
const cx = S / 2, cy = S / 2;
const put = (x, y, r, g, b, a = 255) => {
const i = (y * S + x) * 4;
px[i] = r; px[i + 1] = g; px[i + 2] = b; px[i + 3] = a;
};
const mix = (x, y, r, g, b, alpha) => {
const i = (y * S + x) * 4;
px[i] = px[i] * (1 - alpha) + r * alpha;
px[i + 1] = px[i + 1] * (1 - alpha) + g * alpha;
px[i + 2] = px[i + 2] * (1 - alpha) + b * alpha;
px[i + 3] = 255;
};
for (let y = 0; y < S; y++) {
for (let x = 0; x < S; x++) {
const nx = (x - cx) / (S / 2), ny = (y - cy) / (S / 2);
const rad = Math.hypot(nx, ny);
/* obsidian background with vignette */
let r = 13, g = 10, b = 9;
const vg = Math.max(0, 1 - rad * 0.85);
r += 26 * vg; g += 18 * vg; b += 14 * vg;
/* outer gold ring */
const ring = Math.abs(rad - 0.86);
if (ring < 0.045) {
const edge = 1 - ring / 0.045;
mix(x, y, 200, 163, 90, 0.55 + 0.45 * edge);
}
/* hellfire pentagram star (5-point, drawn via angular falloff) */
const ang = Math.atan2(ny, nx) - Math.PI / 2;
const spikes = 5;
const starR = 0.34 + 0.30 * Math.pow(Math.abs(Math.cos(spikes * ang / 2)), 3);
const d = rad - starR;
if (d < 0) {
const glow = Math.min(1, -d * 5);
const fire = Math.pow(glow, 0.6);
mix(x, y,
120 + 120 * fire,
24 + 60 * fire * (0.6 + 0.4 * Math.sin(ang * spikes)),
18,
Math.min(1, 0.35 + glow));
/* molten core line */
if (Math.abs(d) < 0.02 && rad > 0.12) mix(x, y, 255, 214, 130, 0.75);
}
/* center ember */
const ember = Math.hypot(nx * 2.4, ny * 2.4);
if (ember < 1) {
const e = 1 - ember;
mix(x, y, 255, 190 + 40 * e, 110, e * e);
}
put(x, y, px[(y * S + x) * 4], px[(y * S + x) * 4 + 1], px[(y * S + x) * 4 + 2], 255);
}
}
return encodePNG(S, S, px);
}
const outDir = path.join(process.cwd(), 'icons');
fs.mkdirSync(outDir, { recursive: true });
for (const size of [180, 192, 512]) {
fs.writeFileSync(path.join(outDir, `icon-${size}.png`), drawIcon(size));
console.log(`wrote icons/icon-${size}.png`);
}