משחק תפוס ת'אדום בריאקט

[שואפת למושלמות!]

התחלתי לכתוב את התרגיל ונתקעתי
מצרפת https://codesandbox.io/s/blissful-feynman-3y2rx?file=/src/App.js
אשמח לעזרה,ובכל מקרה לקוד המלא!
תודה רבה רבה!!!
המשחק הוא:
נתונה רביעיית מלבנים בצבעים שונים, אחד אדום ושלושה כחולים. לחיצה על הריבוע האדום מזכה אתכם ב-5 נקודות ולחיצה על אחד הריבועים הכחולים גורמת להפסד של 5 נקודות. לאחר כל לחיצה יש לערבב את מיקומי הריבועים.

 

[yitzhak123]

התחלתי לכתוב את התרגיל ונתקעתי
מצרפת https://codesandbox.io/s/blissful-feynman-3y2rx?file=/src/App.js
אשמח לעזרה,ובכל מקרה לקוד המלא!

אפשר עוד לשפר...
אבל זה עובד.

import React, { useState } from "react";

const Square = ({randomIndex}) => {

  const style = {
    background: '#d2d2d2',
    width: "150px",
    height: "150px",
    display: "inline-block"
  };

  const redStyle = {
    background: 'red',
    width: "150px",
    height: "150px",
    display: "inline-block"
  }

  return (
    <div>
      <table>
        <td>
          <tr>
            <button style={randomIndex === 1 ? redStyle : style}></button>
          </tr>
          <tr>
            <button style={randomIndex === 2 ? redStyle : style}></button>
          </tr>
          <tr>
            <button style={randomIndex === 3 ? redStyle : style}></button>
          </tr>
        </td>

        <td>
          <tr>
            <button style={randomIndex === 4 ? redStyle : style}></button>
          </tr>
          <tr>
            <button style={randomIndex === 5 ? redStyle : style}></button>
          </tr>
          <tr>
            <button style={randomIndex === 6 ? redStyle : style}></button>
          </tr>
        </td>
        <td>
          <tr>
            <button style={randomIndex === 7 ? redStyle : style}></button>
          </tr>
          <tr>
            <button style={randomIndex === 8 ? redStyle : style}></button>
          </tr>
          <tr>
            <button style={randomIndex === 9 ? redStyle : style} />
          </tr>
        </td>
      </table>
    </div>
  );
};

const App = () => {
  const random = () => Math.floor(Math.random() * 10) + 1;

  const [randomIndex, setRandomIndex] = useState(random());
  const [score, setScore] = useState(0);

  const newGame = () => {
    //איך אני אומרת לו שהרבוע האקראי יצבע באדום?
    setRandomIndex(random())
    setScore(0);
  };

  return (
    <div>
      <div>score:{score} </div>
      <Square randomIndex={randomIndex} />

      <button text="new game" onClick={newGame} >
        new Game
      </button>
    </div>
  );
};

export default App;

 

[שואפת למושלמות!]

יפה מאד!
עכשיו איך אני מקפיצה את האדום כל פעם כשהוא זז מקום?(כשלוחצים עליו)
ומה לגבי הנקודות?
אבל עזרת לי תודה!

 

[yitzhak123]

עכשיו איך אני מקפיצה את האדום כל פעם כשהוא זז מקום?(כשלוחצים עליו)

לבנות פונקציית handelClick המופעלת בכל לחיצה, ומפעילה כל פעם את setRandomIndex(random()).
ובודקת איזה איזה ריבוע נלחץ, אדום מעלה נקודות אפור מורידה נקודות, בעזרת setScore.

 

[שואפת למושלמות!]

תודה!
אם לא יקשה עליך,אשמח גם לקוד הזה!

  const changeRed = (Square) => {
    setRandomIndex(random());
    if (randomIndex === random)
    setScore((v) => v + 5);
  };

ניסיתי משהו לא עובד לי

 

[yitzhak123]

תודה!
אם לא יקשה עליך,אשמח גם לקוד הזה!

  const changeRed = (Square) => {
    setRandomIndex(random());
    if (randomIndex === random)
    setScore((v) => v + 5);
  };

ניסיתי משהו לא עובד לי

import React, { useState, } from "react";

const Square = ({randomIndex, handelClick}) => {

  const style = {
    background: '#d2d2d2',
    width: "150px",
    height: "150px",
    display: "inline-block"
  };

  const redStyle = {
    background: 'red',
    width: "150px",
    height: "150px",
    display: "inline-block"
  }

  return (
    <div>
      <table>
        <td>
          <tr>
            <button onClick={() => handelClick(1)} style={randomIndex === 1 ? redStyle : style}></button>
          </tr>
          <tr>
            <button onClick={() => handelClick(2)} style={randomIndex === 2 ? redStyle : style}></button>
          </tr>
          <tr>
            <button onClick={() => handelClick(3)} style={randomIndex === 3 ? redStyle : style}></button>
          </tr>
        </td>

        <td>
          <tr>
            <button onClick={() => handelClick(4)} style={randomIndex === 4 ? redStyle : style}></button>
          </tr>
          <tr>
            <button onClick={() => handelClick(5)} style={randomIndex === 5 ? redStyle : style}></button>
          </tr>
          <tr>
            <button onClick={() => handelClick(6)} style={randomIndex === 6 ? redStyle : style}></button>
          </tr>
        </td>
        <td>
          <tr>
            <button onClick={() => handelClick(7)} style={randomIndex === 7 ? redStyle : style}></button>
          </tr>
          <tr>
            <button onClick={() => handelClick(8)} style={randomIndex === 8 ? redStyle : style}></button>
          </tr>
          <tr>
            <button onClick={() => handelClick(9)} style={randomIndex === 9 ? redStyle : style} />
          </tr>
        </td>
      </table>
    </div>
  );
};

const App = () => {
  const random = () => Math.floor(Math.random() * 10) + 1;

  const [randomIndex, setRandomIndex] = useState(random());
  const [score, setScore] = useState(0);

  const newGame = () => {
    //איך אני אומרת לו שהרבוע האקראי יצבע באדום?
    setRandomIndex(random())
    setScore(0);
  };

  const handelClick = (num) => {
    setRandomIndex(random())
    num === randomIndex ? setScore(score => score+5) : setScore(score => score-5)
  }

  return (
    <div>
      <div>score:{score} </div>
      <Square randomIndex={randomIndex} handelClick={handelClick} />

      <button text="new game" onClick={newGame} >
        new Game
      </button>
    </div>
  );
};

export default App;

 

[שואפת למושלמות!]

תודה ענקית!!!!!
לא היה לי כח לחשוב על זה!