Improve fun factor (added pokemon to game)
This commit is contained in:
Sterling Archer committed
1 parent
e30b4810d5
commit
e03ebffc2f
3 files changed
+1206
-198
No files matched your search
+94
-11
@@ -73,9 +73,8 @@
|
||||
|
||||
<!-- INTRO CUTSCENE -->
|
||||
<div id="screen-intro" class="screen">
|
||||
<div class="overworld-bg">
|
||||
<div class="intro-npc" id="intro-npc"></div>
|
||||
<div class="intro-player"></div>
|
||||
<div class="overworld-bg intro-oak-bg">
|
||||
<div class="intro-npc intro-npc-centered" id="intro-npc"></div>
|
||||
</div>
|
||||
<div class="dialog-box intro-dialog">
|
||||
<div class="dialog-speaker" id="intro-speaker">PROFESSOR OAK</div>
|
||||
@@ -85,6 +84,54 @@
|
||||
<div class="tap-hint blink"><span class="hint-pc">PRESS E TO CONTINUE</span><span class="hint-touch">TAP / PRESS A TO CONTINUE</span></div>
|
||||
</div>
|
||||
|
||||
<!-- STARTER POKEMON SELECTION -->
|
||||
<div id="screen-starter" class="screen">
|
||||
<div class="overworld-bg intro-oak-bg">
|
||||
<div class="intro-npc intro-npc-centered" id="starter-oak"></div>
|
||||
</div>
|
||||
<div class="dialog-box starter-dialog">
|
||||
<div class="dialog-speaker">PROFESSOR OAK</div>
|
||||
<div class="dialog-text" id="starter-text"></div>
|
||||
</div>
|
||||
<div class="starter-choices" id="starter-choices"></div>
|
||||
</div>
|
||||
|
||||
<!-- STARTER CONFIRM -->
|
||||
<div id="screen-starter-confirm" class="screen">
|
||||
<div class="starter-confirm-bg">
|
||||
<div class="starter-chosen-emoji" id="starter-chosen-emoji"></div>
|
||||
<div class="starter-chosen-name" id="starter-chosen-name"></div>
|
||||
<div class="starter-chosen-level" id="starter-chosen-level"></div>
|
||||
<div class="dialog-box starter-confirm-dialog">
|
||||
<div class="dialog-text" id="starter-confirm-text"></div>
|
||||
</div>
|
||||
<div class="starter-flee-text" id="starter-flee-text"></div>
|
||||
<button class="btn-pixel btn-green btn-full" id="btn-starter-continue">LET'S GO! ▶</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CATCH SCREEN -->
|
||||
<div id="screen-catch" class="screen">
|
||||
<div class="catch-scene">
|
||||
<div class="catch-wild-pokemon" id="catch-wild-pokemon"></div>
|
||||
<div class="catch-wild-name" id="catch-wild-name"></div>
|
||||
<div class="catch-wild-level" id="catch-wild-level"></div>
|
||||
</div>
|
||||
<div class="dialog-box catch-dialog">
|
||||
<div class="dialog-text" id="catch-text"></div>
|
||||
</div>
|
||||
<div class="catch-actions" id="catch-actions"></div>
|
||||
</div>
|
||||
|
||||
<!-- CATCH RESULT -->
|
||||
<div id="screen-catch-result" class="screen">
|
||||
<div class="catch-result-bg">
|
||||
<div class="catch-result-emoji" id="catch-result-emoji"></div>
|
||||
<div class="catch-result-msg" id="catch-result-msg"></div>
|
||||
<button class="btn-pixel btn-blue btn-full" id="btn-catch-continue">CONTINUE ▶</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OVERWORLD MAP -->
|
||||
<div id="screen-map" class="screen">
|
||||
<div class="map-header">
|
||||
@@ -97,6 +144,7 @@
|
||||
<span class="prog-text" id="map-prog-text">0/100</span>
|
||||
</div>
|
||||
<div class="map-right">
|
||||
<span class="pokeball-count" id="pokeball-count" title="Pokéballs">⚪ 0</span>
|
||||
<span class="music-toggle" id="music-toggle" title="Mute/Unmute Music">🎵</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,16 +152,17 @@
|
||||
<div class="map-inner" id="map-inner">
|
||||
<div class="map-trees" id="map-trees"></div>
|
||||
</div>
|
||||
<!-- Path stays fixed to the viewport — does not scroll -->
|
||||
<!-- NPC in viewport layer — JS positions it using screen-space coords -->
|
||||
<div class="map-npc-wrap" id="map-npc-wrap">
|
||||
<div class="npc-bubble" id="npc-bubble">!</div>
|
||||
<div class="map-npc" id="map-npc"></div>
|
||||
</div>
|
||||
<!-- Player stays fixed to viewport, only Y moves -->
|
||||
<!-- Wild pokemon spawns -->
|
||||
<div class="map-wild-wrap" id="map-wild-wrap" style="display:none">
|
||||
<div class="wild-bubble">?</div>
|
||||
<div class="map-wild" id="map-wild"></div>
|
||||
</div>
|
||||
<div class="player-bubble" id="player-bubble">...</div>
|
||||
<div class="map-player" id="map-player"></div>
|
||||
<!-- Hints overlay the viewport, not the world -->
|
||||
<div class="map-talk-hint" id="map-talk-hint" style="display:none"><span class="hint-pc">Press E</span><span class="hint-touch">Press A</span></div>
|
||||
<div class="map-dir-arrow" id="map-dir-arrow" style="display:none">▶</div>
|
||||
</div>
|
||||
@@ -121,7 +170,7 @@
|
||||
<div class="hud-cell"><div class="hud-lbl">TRAINER</div><div class="hud-val" id="hud-name">ASH</div></div>
|
||||
<div class="hud-cell"><div class="hud-lbl">SCORE</div><div class="hud-val" id="hud-score">0</div></div>
|
||||
<div class="hud-cell"><div class="hud-lbl">STREAK</div><div class="hud-val" id="hud-streak">0</div></div>
|
||||
<div class="hud-cell"><div class="hud-lbl">CORRECT</div><div class="hud-val" id="hud-correct">0/0</div></div>
|
||||
<div class="hud-cell"><div class="hud-lbl">PARTY</div><div class="hud-val" id="hud-party">0</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -129,11 +178,21 @@
|
||||
<div id="screen-battle" class="screen">
|
||||
<div class="battle-scene">
|
||||
<div class="battle-npc-side">
|
||||
<div class="battle-sprite" id="battle-npc-sprite">👴</div>
|
||||
<div class="battle-npc-pokemon-name" id="battle-npc-pokemon-name"></div>
|
||||
<div class="battle-npc-pokemon-level" id="battle-npc-pokemon-level"></div>
|
||||
<div class="battle-npc-row">
|
||||
<div class="battle-sprite" id="battle-npc-pokemon">🐉</div>
|
||||
<div class="battle-npc-trainer" id="battle-npc-trainer"></div>
|
||||
</div>
|
||||
<div class="battle-name-tag" id="battle-npc-name">OAK</div>
|
||||
</div>
|
||||
<div class="battle-player-side">
|
||||
<div class="battle-player-sprite"></div>
|
||||
<div class="battle-player-pokemon-name" id="battle-player-pokemon-name"></div>
|
||||
<div class="battle-player-pokemon-level" id="battle-player-pokemon-level"></div>
|
||||
<div class="battle-player-row">
|
||||
<div class="battle-player-trainer" id="battle-player-trainer"></div>
|
||||
<div class="battle-sprite" id="battle-player-pokemon">🔥</div>
|
||||
</div>
|
||||
<div class="battle-name-tag" id="battle-player-name">ASH</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,6 +209,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BATTLE RESULT ANIMATION -->
|
||||
<div id="screen-battle-anim" class="screen">
|
||||
<div class="battle-anim-scene">
|
||||
<div class="battle-anim-npc">
|
||||
<div class="battle-anim-npc-name" id="anim-npc-pokemon-name"></div>
|
||||
<div class="battle-anim-npc-sprite" id="anim-npc-pokemon"></div>
|
||||
<div class="battle-anim-hp-bar">
|
||||
<div class="battle-anim-hp-fill" id="anim-npc-hp"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="battle-anim-vs">⚔️</div>
|
||||
<div class="battle-anim-player">
|
||||
<div class="battle-anim-player-name" id="anim-player-pokemon-name"></div>
|
||||
<div class="battle-anim-player-sprite" id="anim-player-pokemon"></div>
|
||||
<div class="battle-anim-hp-bar">
|
||||
<div class="battle-anim-hp-fill" id="anim-player-hp"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="battle-anim-msg" id="battle-anim-msg"></div>
|
||||
</div>
|
||||
|
||||
<!-- RESULT -->
|
||||
<div id="screen-result" class="screen">
|
||||
<div class="result-box">
|
||||
@@ -158,6 +239,7 @@
|
||||
<div class="result-correct-ans" id="result-correct-ans"></div>
|
||||
<div class="result-explanation" id="result-explanation"></div>
|
||||
<div class="result-pts" id="result-pts">+100 PTS</div>
|
||||
<div class="result-pokeballs" id="result-pokeballs" style="display:none"></div>
|
||||
<button class="btn-pixel btn-blue btn-full" id="btn-result-cont">CONTINUE ▶</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,6 +268,7 @@
|
||||
<div class="complete-name" id="complete-name">ASH</div>
|
||||
<p class="complete-msg">You've conquered SQL Town and mastered Microsoft T-SQL! Your SQL journey is just beginning — more towns and exams await!</p>
|
||||
<div class="complete-stats" id="complete-stats"></div>
|
||||
<div class="complete-pokemon" id="complete-pokemon"></div>
|
||||
<div class="complete-badges">
|
||||
<div class="badge-row">🥉 SQL EXPLORER — Q25</div>
|
||||
<div class="badge-row">🥈 SQL APPRENTICE — Q50</div>
|
||||
@@ -219,7 +302,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /#app -->
|
||||
</div>
|
||||
|
||||
<div id="toast" class="toast hidden"></div>
|
||||
<script src="game.js"></script>
|
||||
|
||||
Reference in new issue
Block a user