Pokemon React Game

Last update: Aug 1, 2022

Pokemon React Game

I got this ideia from Chris in video listed below and implemented for react with hooks!

Project Management Helper

Designer Patterns for future!

To run and test

Clone the repo, npm install and npm start Have Fun! (Not Yet)

Want develop from scrtach ? Watch this video!

in order to help you to run or fork this project that steps i followed in dev stages.

Github Project

Map Creation (Tiled Map Editor)

Download And Setup

  • Download Tiled
  • Import to project

Tile Editor

  • Tile Layering for Ocean and Landmasses
  • Layering and placment of Trees
  • LandScape Details
  • Colision and Map bondaries
  • Foreground Layers
  • Export Layer for Project Import

Player And Map Dev

Check all PRS HERE

Battle Sequence

  • Battle Activation
  • Transiction from map to battle sequences
  • DrawBattle Background
  • Add Battle Sprites

Tools

Map Editor

Tiled are an TileMap creator. Avaliable for all OS. Use Tiled to create, generate and export map assets.

GitHub

https://github.com/openfordevs/pokemon-javascript-react-game
You might also like...

An example implementation of a top-down 2d game made with React and react-three-fiber

An example implementation of a top-down 2d game made with React and react-three-fiber

react-three-fiber Game Demo This repo shows an example implementation of a top-down 2d game made with React and react-three-fiber. I used the core fun

Aug 1, 2022

A modified clone of the puzzle game 2048, built in react/typescript!

A modified clone of the puzzle game 2048, built in react/typescript!

Twenty48 This is a modified clone of the game 2048, which can be seen here: 2048! This project is built using React, Typescript, and Sass. This also g

Nov 22, 2021

A minimal game of Candy Crush in React

Candy Crush in React This project is in support of the tutorial found here To Start This Project npm i Install all the packages you need by running th

Jul 13, 2022

This is a simple Candy Crush Game by React.

Candy Crush by React (Initial Version) This is a simple Candy Crush Game by React. Getting Started with Create React App This project was bootstrapped

Oct 27, 2021

Mobile Jeopardy Game Using Ionic, React, and Express

Jeopardy App Jeopardy is a mobile-friendly app that emulates a Jeopardy game. It is fully customizable including the categories, questions, and points

Nov 9, 2021

A simple tic-tac-toe game using React

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 5, 2021

A simple tic-tac-toe game written in React ⚛️

A simple tic-tac-toe game written in React ⚛️

This app is a simple Tic tac toe game made with React. It's main purpose was to train me to TDD.

Nov 10, 2021

A Game Power by react and matter.js

A Game Power by react and matter.js

Neko Jump A Game Power by React and Matter.js Dev ### `yarn start` Runs the app in the development mode. Open [http://localhost:3000](http://localhos

Jan 23, 2022

Tic Tac Toe game made with React

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 3, 2021
Comments
  • 1. [Game-Dev-Fix] Import and Render Map

    Error on render Img inside

    const canvas = React.useRef();
      React.useEffect(() => {
    

    Ways i have tried to get img from render

    const ctx = canvas.current.getContext('2d');
    const ctx = this.refs.canvas.getContext('2d');
    
    Reviewed by Underewarrr at 2022-06-11 01:55
  • 2. [Game-Dev-Fix] Cannot read property ´getContext´ of Null in JS.

    Cannot read property ´getContext´ of Null in JS.

    The "Cannot read property 'getContext' of null" error occurs for 2 reasons:

    Calling the getContext method on a non-existent canvas element. Inserting the JS script tag above the HTML, where the canvas element is declared.

    cannot read property getcontext of null image

    Here is an example of how the error occurs.

    index.js

    const canvas = document.getElementById('does-not-exist');
    console.log(canvas); // 👉️ null
    
    ⛔️ Cannot read properties of null (reading 'getContext')
    const ctx = canvas.getContext('2d');
    

    To solve the "Cannot read property 'getContext' of null" error, make sure you're providing the correct id when trying to get the canvas element. The error often occurs when providing an invalid id to the getElementById method.

    index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        <!-- ✅ id should match your JS code -->
        <canvas id="canvas" width="500" height="500"></canvas>
    
        <script src="index.js"></script>
      </body>
    </html>
    

    To solve the "Cannot read property 'getContext' of null" error, place the JS script tag at the bottom of the body, after the canvas element has been declared.

    index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        <!-- ❌ BAD - script is ran before canvas is created ❌ -->
        <script src="index.js"></script>
    
        <canvas id="canvas" width="500" height="500"></canvas>
      </body>
    </html>
    

    The index.js script is ran before the canvas element is created, therefore you can't access the element inside the index.js file.

    index.js

    const canvas = document.getElementById('canvas');
    console.log(canvas); // 👉️ null
    
    
    ⛔️ Cannot read properties of null (reading 'getContext')
    const ctx = canvas.getContext('2d');
    You should place the JS script tag at the bottom of the body, after the DOM elements have been declared.
    

    index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        <canvas id="canvas" width="500" height="500"></canvas>
    
        <!-- ✅ GOOD - canvas is already created ✅ -->
        <script src="index.js"></script>
      </body>
    </html>
    

    Now you can access the canvas element inside of the index.js file.

    index.js

    const canvas = document.getElementById('canvas');
    console.log(canvas); // 👉️ canvas#canvas
    
    // ✅ works
    const ctx = canvas.getContext('2d');
    
    console.log(ctx); // 👉️ CanvasRenderingContext2D
    

    Conclusion

    The "Cannot read property getContext of null error occurs when calling the getContext method on a null value. To solve the error, make sure the JS script tag is loaded after the HTML is declared and the id of the element exists in the DOM.

    Reviewed by Underewarrr at 2022-06-10 11:42
  • 3. [Game-Dev] Enchancements

    Map Editing

    For better game-dev stages a Map brush layer need be implemented in game engine.

    What should do!

    • [ ] Pick a sprite
    • [ ] Put sprite in world / GameScene
    Reviewed by Underewarrr at 2022-06-11 13:03
  • 4. [Game-Dev] CheckList

    Download And Setup

    • [x] 1 - Download Tiled
    • [x] 2 - Import to project Tile Editor
    • [x] Tile Layering for Ocean and Landmasses
    • [x] Layering and placment of Trees
    • [x] LandScape Details
    • [x] Colision and Map bondaries
    • [x] Foreground Layers
    • [x] Export Layer for Project Import :sparkles: Player And Map Dev :sparkles:
    • [x] #2
    • [x] #7
    • [x] #9
    • [x] #18
    • [ ] Player-to-map-bondaries (Colision)
    • [ ] Foreground Objects
    • [ ] Player Movement animation :sparkles: Battle Sequence :sparkles:
    • [ ] Battle Activation
    • [ ] Transiction from map to battle sequences
    • [ ] DrawBattle Background
    • [ ] Add Battle Sprites
    Reviewed by Underewarrr at 2022-06-10 09:03
A pokemon-like project game where you level up by hacking your neighbor.

CTF BourgPalette A pokemon-like project game where you level up by hacking your neighbor. You play as a new hacker. You are not trying to capture all

Jul 25, 2022
A demo of LaunchDarkly, React, and Vite, using the Pokémon API!
A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

Jan 5, 2022
PI-Pokemon - Build an App using React, Redux, Node and Sequelize
PI-Pokemon - Build an App using React, Redux, Node and Sequelize

Individual Project - Henry Pokémon Objetivos del Proyecto Construir una App util

Mar 28, 2022
A Pokémon Themed Note Taking App Made with ReactJs.
A Pokémon Themed Note Taking App Made with ReactJs.

Poket Book Who doesn't need a good note taking app, especially if it is Pokémon Themed! This cute little Poket Book allows you to add/delete/edit/view

Jul 26, 2022
Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.
Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.

Sudoku Sudoku is a logic-based, combinatorial number-placement puzzle. Try it here Screenshots 1 2 3 4 Demo Demo Video Contributors Ayan Dhara Grawish

Aug 2, 2022
Word-guessing-game - A word guessing game made using React, Typescript, and Tailwind

Word Guessing Game This is a clone project of a popular word guessing game made

Aug 5, 2022
Star-Wars-Memory-Game - Star Wars Memory Game Using React.js
Star-Wars-Memory-Game - Star Wars Memory Game Using React.js

Star-Wars-Memory-Game Um jogo da memória com tematica do Star Wars. O objetivo e

Feb 25, 2022
Memory-test-game - Memory Testing Game Built With React

Memmory Testing Game This game is currently live and hosted on verce , play it h

Feb 22, 2022
React-memory - A simple single-player memory card game programmed in JavaScript and React
React-memory - A simple single-player memory card game programmed in JavaScript and React

react-memory-simple yarn install yarn start Click the cards to flip to i

Apr 14, 2022
The dots game build width React Framer Motion Styled Components React Lottie Firebase

The dots game build width React Framer Motion Styled Components React Lottie Firebase

Jun 23, 2022