Pokémon Browser Game: Introduction

Outcome

In this Guided Build, you will create a small Pokémon-style game that runs in a web browser. You will build the product in stages and connect each stage to the relevant Level 2 material.

The finished product will use HTML, CSS, and JavaScript. It will not require a framework, backend, database, or content management system (CMS).

What you will practice

Combine HTML, CSS, and JavaScript in one interactive browser project.
Connect user actions to application state and visible interface updates.
Create a layout that works at narrow and wide viewport sizes.
Use purposeful animation while preserving an equivalent reduced-motion experience.
Test the finished product and apply relevant quality and technical SEO practices.

What you will create

The final website will contain three connected pages:

A landing page that introduces the game and links to the other pages.
A game page where the player chooses a trainer and starter Pokémon, explores a small map, meets wild Pokémon, and uses a simple battle system.
A Pokédex page that provides a static reference for the Pokémon used in the game.

The game page will keep track of the current player, map position, active encounter, battle status, and caught Pokémon. When the player takes an action, JavaScript will update the application state and render the matching result in the page.

Screenshot placeholder

The finished game at wide and narrow viewport sizes

Show: A side-by-side image of the finished game page at a wide desktop viewport and a narrow mobile viewport. Use the same game state in both views.
Highlight: The map, movement controls, status message, battle area, and caught-Pokémon collection. Use restrained labels or outlines and keep the interface itself readable.
Action supported: Compare how the same game features are arranged at two viewport sizes.
Expected result: All required game information and controls remain available without horizontal page scrolling.
Future caption: The final game keeps the same features while the layout adapts to the available width.
Future alt text: Side-by-side views of the finished Pokémon-style game on a wide screen and a narrow screen, with the map, controls, status, battle area, and caught collection visible in both.

Use a current interface screenshot. Crop to the relevant area and use one restrained outline or numbered marker. Keep the fixed screenshot surface legible in both site themes.

The main play loop will follow this sequence:

Enter a fictional trainer name and choose a starter Pokémon.
Move through the map with visible controls.
Enter tall grass and possibly meet a wild Pokémon.
Attack, try to catch the Pokémon, or leave the encounter.
Return to the map and review the caught-Pokémon collection.

The next placeholder is reserved for a short GIF-style preview. When the asset is added, use a format with pause and replay controls rather than an autoplaying GIF.

Screenshot placeholder

The complete game loop in motion

Show: A short future animation of the finished product. Show trainer setup, one map move, the start of a wild encounter, one battle action, and the return to exploration.
Highlight: Keep the status message and the change between exploration controls and battle controls visible throughout the sequence. Do not add decorative motion or flashing.
Action supported: Follow how one player action changes the game state, available controls, and visible result.
Expected result: The sequence makes the complete play loop understandable without being the only explanation of the game behavior.
Future caption: Each player action updates the game state and renders the controls and information needed for the next action.
Future alt text: Animated sequence of trainer setup, map movement, a wild encounter, one battle action, and a return to the map in the finished Pokémon-style browser game.

Use a current interface screenshot. Crop to the relevant area and use one restrained outline or numbered marker. Keep the fixed screenshot surface legible in both site themes.

Module 2 material used in this build

Web interaction

This is the main technical area of the project. You will use JavaScript, DOM events, and application state to connect player actions to visible results.

You do not need JavaScript for the first landing-page draft. Before the first game-behavior stage, complete Write JavaScript for a web page. Later stages will refer to the DOM events and interface state lessons when those concepts become necessary.

Responsive design and animation

You will adapt the same interface to narrow and wide viewports. You will also add motion that communicates a state change and provide an equivalent result when the user prefers reduced motion.

Use Build responsive components and Create web animations for this part of the build.

Quality, SEO, and analytics

You will use selected parts of this topic to plan quality checks, test interaction paths, and improve the technical SEO of the three pages. The required build will not need a public analytics account or real visitor tracking.

Begin with Plan web quality. Later stages will link directly to the testing and technical SEO sections that support the active checkpoint.

CMS development is a separate route

This Guided Build uses source files and browser JavaScript. It does not include CMS development.

If you want to practice themes and extended CMS functionality, use the CMS development material instead. You can complete that material separately from this browser-game project.

How the guided build will work

The build will be split into smaller articles. Each article will:

Start from the working state produced by the previous article.
Introduce one meaningful change in the product.
Link to the Module 2 material needed for that change.
Guide you through the implementation in small stages.
End with a visible check and a stable stopping point.

You do not need to hold the whole project in mind at once. Work with one active article and one active checkpoint.

Starting point

Before you start

You can create and connect HTML, CSS, and JavaScript files from the Level 1 material.
You have VS Code, a current browser with developer tools, and access to the Level 2 material.
You have reviewed the final-product description and the five-step play loop on this page.

Current state: You know what the final game will do, but you have not created the project files yet.
First action: Continue to the first landing-page draft and use its Level 1 links to refresh the HTML, CSS, responsive-layout, validation, and Git skills you need.
First checkpoint: You can describe the three pages, the five-step play loop, and why the first implementation article uses only Level 1 knowledge.
Help trigger: Ask your teacher for a starting-point check if one of the Level 1 prerequisites is unfamiliar or you cannot find the linked course material.

Ready for the first build stage

You are ready to continue when you can explain what the player will do and which page will contain each part of the product. The next article will create the project structure and the first working version of the website.