The basics of an HTML5 word game

Read all posts about "" game

It’s not a secret word games are having an huge success lately, thanks to Ruzzle which brought them to a new life. I also made a word game some years ago, it’ called WorDrop and got almost 4 million plays, so I am showing you the basics for the creation of a word game. In this example I am using Scirra’s Construct2 but the main concept can be easily ported in any HTML5 environment.

Getting the words list

You can still follow some of the links I posted four years ago in the post eight word lists to help you creating the perfect word game, but recentyl I found the English Open Word List (EOWL) way better. It starts from the UK Advanced Cryptics Dictionary (UKACD). To make EOWL more usable for computer word games all words longer than 10 letters were removed from the UKACD source list, and all proper nouns and words requiring diacritical symbols, hyphens, and apostrophes were removed.

This makes it much like the standard ENABLE word list, but EOWL is somewhat smaller (by 44,000 words or so) since it contains no words longer than 10 characters.

So I downloaded the EOWL and initially merged all files (it comes in 26 files, one for each initial letter) into a single file you can see here.

Converting the words list

Since a simple word list isn’t of any use in a game, I had to find a way to import it into a format Construct2 would be able to recognize. Ont the official docs I found I can setup an array starting from a JSON file and this is the way I wanted to proceed.

I made this script:

<?php

$file=file_get_contents("words.txt");
$words = explode("\n",$file);
$words_amount = count($words);

for($i=0;$i<$words_amount;$i++){
	$content .= ",[[\"".trim($words[$i])."\"]]";
}

$content=substr($content,1);

echo "{\"c2array\":true,\"size\":[$words_amount,1,1],\"data\":[$content]}";

?>

Which loads the words list and outputs a Construct2 array in JSON format. You can see the output here.

Importing the words list

At this time, we just need to load the JSON with an Ajax request and we’ll finally populate the array:

Then I am just invite the player to type a word, and check for it to exist.

See the result at this link, try to write a word: it will turn green if included in the EOWL list, or red if not included.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers