Web Reversi

未分類

Why I Built a Browser-Playable Othello

I prioritized “open and play instantly” by building a browser-based Othello (Reversi) that needs no install and no login. It runs smoothly on both phones and desktops, fits into a single lightweight file, and includes a CPU that feels reasonably strong without being sluggish. The goal is a mini-game you can enjoy in spare moments—and that’s easy to embed as site content.

Development Policy & Tech Stack

The approach is simple:

  1. Lightweight: no external libraries (Vanilla JS + CSS).
  2. Clarity: minimal UI; always show turn, piece counts, and status/result.
  3. Robustness: single HTML file, minimal dependencies.
  4. Embeddable: designed to drop into WordPress via iframe.

The stack is plain HTML/CSS/JavaScript. The 8×8 board is rendered as a DOM grid. On click/tap, the app handles placement → flipping → turn switch → legality check.

Board Rendering & Rule Checking

From the standard initial layout (two black, two white), each tentative move checks eight directions. If any direction ends at your own piece with at least one opponent piece in between, it’s a legal move. Flips are collected into a temporary array and then applied in one batch—this avoids double-flips or misses during evaluation. If a player has no legal move, they pass; if neither can move, the game ends. At the end, the app counts black/white and shows the result in a modal.

CPU Behavior (3 Levels)

Three difficulty levels are designed for fast responses and distinct feel:

  • Lv1 (Easy): random among legal moves—great for learning rules.
  • Lv2 (Normal): max-flip heuristic—prefers moves that flip the most pieces. Strong enough to feel challenging in the mid-game.
  • Lv3 (Hard): positional scoring: corner +100, edges +20, risky X-squares −50. Combined with flip count for a final score. It doesn’t run deep search, but it plays “corner-aware” moves that feel right.

Going all-in on α-β search or complex stability/ mobility metrics would slow things down, so I optimized for responsiveness and small size.

UI/UX & Accessibility

The board keeps a square aspect ratio (CSS aspect-ratio) so it scales cleanly. Discs have subtle shadows; turn, counts, and status sit up top. A modal shows title/score/message on game end, and “Play again” restarts instantly. The board has aria-label, and cells are buttons to assist keyboard navigation. The dark color scheme blends well with common WordPress themes.

Publishing on WordPress (Structure & SEO)

To balance SEO and maintenance, I separate the explanatory page from the game file:

  • Explanatory page (primary, indexed): /games/othello-reversi/
    Contains features, how-to, FAQ, and internal links. This page is the SEO target. Add VideoGame schema and FAQ schema if needed.
  • Game file (noindex): /play/othello.html
    A standalone file that actually runs the game. Add this to the <head>: <meta name="robots" content="noindex,follow"> Then embed it into the explanatory page via iframe. This avoids duplicate content and keeps all ranking signals on the explanatory page. If the iframe is blocked, a “Open full screen” link acts as a backup.

Performance & Maintenance

With zero dependencies, initial load is fast. For updates, I:

  1. test locally →
  2. upload as othello.html.new →
  3. rename to othello.html on the server (atomic switch) →
  4. keep othello.prev.html for quick rollback →
  5. clear WordPress/cache plugin if used.

For /play/, I add this to .htaccess to prevent file listings:

Options -Indexes

Adjusting Board Size & Embeds

If the board looks too large, set a width on .board (height follows automatically thanks to the square ratio). For example:

.board{
  width: clamp(280px, 70vw, 480px);
  margin: 0 auto;
  padding: 8px;
  gap: 4px;
}

When embedding, set the iframe height to ~620–760px depending on your layout.

Planned Improvements

  • Move hints (highlight legal moves)
  • Undo/redo (step back a move)
  • Smarter AI (shallow minimax + stability/mobility)
  • Local stats (browser storage)
  • Online play (larger scope; to be evaluated)

Each will be added carefully to preserve quick load and simple UX.

Summary

This Othello focuses on being lightweight, instant, and easy to embed, tuned for real-world use on a WordPress site. The two-lane setup—content-rich page under /games/ (indexed) and the runnable file under /play/ (noindex)—keeps SEO signals concentrated while making updates as simple as replacing a single HTML file. The game is already fun and functional, and the roadmap balances smarter play with speed and simplicity. Feedback is welcome—both on gameplay and on-site integration.

コメント