ramonvictor / Tic Tac Toe Js
#⃣ Tic-tac-toe.js: redux pattern implemented in vanilla javascript
Stars: ✭ 279
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tic Tac Toe Js
Rust Psp
Rust on PSP. Panic and allocation support. Access PSP system libraries.
Stars: ✭ 265 (-5.02%)
Mutual labels: game
Noahgameframe
A fast, scalable, distributed game server engine/framework for C++, include the actor library, network library, can be used as a real time multiplayer game engine ( MMO RPG/MOBA ), which support C#/Lua script/ Unity3d, Cocos2dx and plan to support Unreal.
Stars: ✭ 3,258 (+1067.74%)
Mutual labels: game
Rusted Ruins
Extensible open world rogue like game with pixel art. Players can explore the wilderness and ruins.
Stars: ✭ 262 (-6.09%)
Mutual labels: game
Linuxgsm
The command-line tool for quick, simple deployment and management of Linux dedicated game servers.
Stars: ✭ 3,063 (+997.85%)
Mutual labels: game
Quiz Game
Multiple choice questions answer game for android (Quiz game).
Stars: ✭ 277 (-0.72%)
Mutual labels: game
Game Datasets
🎮 A curated list of awesome game datasets, and tools to artificial intelligence in games
Stars: ✭ 261 (-6.45%)
Mutual labels: game
Rewtro
Papercraft videogame cartridges you can print and pirate with a copy machine.
Stars: ✭ 267 (-4.3%)
Mutual labels: game
Base
Base environment for Red Eclipse and associated source files.
Stars: ✭ 273 (-2.15%)
Mutual labels: game
Quadtree Js
A lightweight quadtree implementation for javascript
Stars: ✭ 265 (-5.02%)
Mutual labels: game
Docker Mtgo
Docker image with ready-to-play MTGO (Magic Online) for Linux and macOS
Stars: ✭ 275 (-1.43%)
Mutual labels: game
Kam remake
"KaM Remake" is an RTS game remake written in Delphi from scratch.
Stars: ✭ 277 (-0.72%)
Mutual labels: game
Triplea
TripleA is a turn based strategy game and board game engine, similar to Axis & Allies or Risk.
Stars: ✭ 268 (-3.94%)
Mutual labels: game
Tic-Tac-Toe.js
Tic-Tac-Toe game written in vanilla javascript using redux-like approach.
Medium article / Github.io page / Play the game
How the game applies Redux pattern?
It uses the unidirectional data flow:
The key principles
1. Single source of truth
One single store.js:
function Store() {
this.state = {};
this.state = this.update(this.state, {});
// `this.update()` will return the initial state:
// ----------------------------------------------
// {
// grid: ['', '', '', '', '', '', '', '', ''],
// turn: 'x',
// score: { x: 0, o: 0 },
// winnerSequence: [],
// turnCounter: 0,
// player: ''
// }
}
2. State is read-only
Game.js dispatches actions whenever needed:
this.$table.addEventListener('click', function(event) {
var state = store.getState();
// [Prevent dispatch under certain conditions]
// Otherwise, trigger `SET_X` or `SET_O`
store.dispatch({
type: state.turn === 'x' ? 'SET_X' : 'SET_O',
index: parseInt(index, 10)
});
});
3. Changes are made with pure functions
Store.js: reducers receive actions and return new state.
// Reducer (pure function)
function updatePlayer(player, action) {
switch (action.type) {
case 'PICK_SIDE':
return action.side;
default:
return player || '';
}
}
// Call reducer on Store.update()
Store.prototype.update = function(state, action) {
return {
player: updatePlayer(state.player, action)
// [...other cool stuff here]
};
};
4. After update, UI can render latest state
Game.js handles UI changes:
var store = require('./store');
var gridView = require('./grid-view');
TicTacToe.prototype.eventListeners = function() {
store.subscribe(this.render.bind(this));
};
TicTacToe.prototype.render = function(prevState, state) {
// You can even check whether new state is different
if (prevState.grid !== state.grid) {
this.gridView.render('grid', state.grid);
}
};
Further details about implementation you can find on this page.
Browser support
The game has been tested in the following platforms:
Latest | Latest | 10+ | Latest |
---|---|---|---|
Development stack
- Server: NodeJS / Express / Socket.io
- Client: VanillaJS / Redux
- Tools: Gulp / Webpack / Sass / Heroku
Did you find a bug?
Please report on the issues tab.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].