DEV Community

Cover image for React game under 2h
Peter Vivo
Peter Vivo

Posted on • Edited on

1 1

React game under 2h

Yesterday I was waiting for my wife in car, and my Mac charged around: 80%. So I started discovering react-beautiful-dnd.
My first plan is converting that tutorial to hooks.

When I reached point to fill item list, suddenly click emoji on touch bar, and write this:



const [items, editItems] = useState([
  {id: 0, content: '👧🏼 Girl' },
  {id: 1, content: '🥶 Cold' },
  {id: 2, content: '🧚🏼‍♀️ Faerie' },
  {id: 3, content: '🐨 Coala' },
]);


Enter fullscreen mode Exit fullscreen mode

Which seems wrong in react-beautiful-dnd because id need to be: string.

After figure out this problem, and drag and drop list is worked, my next idea - give score to item - lead to this experimental coding turn to game development.

the basic interaction between items seems:



  const onDragEnd = result => {
    // dropped outside the list
    if (!result.destination) return;
    const dragged = result.source.index;
    const target = result.destination.index;
    editItems(list => {
      const dif = list[dragged].score - list[target].score;      
      list[dragged].score += 10 * (dragged - target) + dif;
      list[target].score += 10 * (target - dragged) - dif;
      const [removed] = list.splice(dragged, 1);
      list.splice(target, 0, removed);
      return list;
  }


Enter fullscreen mode Exit fullscreen mode

After this step, I realised, loser score asap going below zero, so if someone score going down turn to zombie.



 {id, content: '🧟 zombie', score: 0}


Enter fullscreen mode Exit fullscreen mode

Couple of testing show interesting result, the zombie can achieve score. So I think that is good goal for game: zombie earn name by earn score:



  {id:'🐼', content: '🧟 of 🐼', score: 42}


Enter fullscreen mode Exit fullscreen mode

if every one reach this state (ex-exsistence) then game is over and get the score depend on rounds!

I wrote this post to show how turn react library discovering into game prototype development. Final script is: 137 line long.

You can try by clone the repo:
ex-exsistence repo

Or play with the game:
final result on vercel :: ex-exsistence

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay