DEV Community

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

Posted on • Updated on

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

Top comments (0)