狼追男孩游戏

import React, { useState, useEffect } from 'react';

const App = () => {

  const [spritePositions, setSpritePositions] = useState({ boy: 50, wolf: 0 });
  const [gameActive, setGameActive] = useState(false);

  useEffect(() => {

    if(gameActive) {
      const wolfInterval = setInterval(() => {
        setSpritePositions(prev => ({
          ...prev,
          wolf: prev.wolf + 5
        }));
      }, 150);

      return () => clearInterval(wolfInterval);
    }
            
  }, [gameActive]);

  const style = {
    boy: { marginLeft: `${spritePositions.boy}px`, marginTop: '30px', width: '100px' },
    wolf: { marginLeft: `${spritePositions.wolf}px`, marginTop: '30px', width: '100px' }
  };

  return (
    <div className='text-center mt-8'>

      <img src='https://placehold.co/100x100' alt='boy' />
      <button
        onClick={() => setGameActive(true)}
        className='bg-blue-500 text-white px-4 py-2 rounded-full'
      >
        Start Game
      </button>

      <img
        src='https://placehold.co/100x100/green/white?text=Boy'
        alt='boy'
        style={style.boy}
      />

      <img
        src='https://placehold.co/100x100/red/white?text=Wolf'
        alt='wolf'
        style={style.wolf}
      />

    </div>
  );
}

export default App;