Skip to content

a basic projet based on React - Typescript - HTML Canvas

Notifications You must be signed in to change notification settings

kheysermanu/snake-game

Repository files navigation

snake-game

A basic project based on React - Typescript - HTML Canvas 2d
With integration of webpack for production build and hot loading during modifying scss/ts/tsx files

React 16.8.6 - Typescript 3.4.5 - material-ui 3.x.x - webpack 4.29.6

The purpose of this project is to look about these web technologies and try to manipulate them in application of the best practices

First step - tag v1.0

Init project with React, TSX, material-ui/(core,icons,styles) and wepack.
For now a simple green square is the snake.
The snake move in the canvas pane with black border witch change to red if the square touch the border.
You can move it with the directional keys of the keyboard.

Second step tag v1.1.1

Add basic routes.
Introduce Redux.
Add basics rules of the snake game.

Second step bis - tag v1.1.2

Add a navbar.
Add a basic graphical representation of stats, type Histogram based on Html Canvas.

Second step ter - tag v1.1.3

Add basic interaction with the graphical representation

Third step - tag v1.2.1

Introduce Axios.
Play with an nodejs server or spring-boot server with Jhisper or other.

Third step bis tag v1.2.2

Introduce i18n.

Last step tag v2.0

Migration to a basic Html canvas 3d project.

Run

npm install
npm run watch (dev mode with hot loading)

Config

  • node v10.16.0
  • npm v6.9.0