Apache-Note/ExplodingSheep.jsx at main · ewdlop/Apache-Note · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React, { useState, useEffect } from 'react';

const ExplodingSheep = () => {
  const [exploded, setExploded] = useState(false);
  const [sparks, setSparks] = useState([]);

  const createSparks = () => {
    const newSparks = [];
    for (let i = 0; i < 12; i++) {
      const angle = (i * 30) * Math.PI / 180;
      newSparks.push({
        id: i,
        dx: Math.cos(angle) * 5,
        dy: Math.sin(angle) * 5,
        opacity: 1,
        scale: 1,
        x: 200,
        y: 150
      });
    }
    return newSparks;
  };

  const handleClick = () => {
    setExploded(true);
    setSparks(createSparks());
  };

  useEffect(() => {
    if (exploded) {
      const interval = setInterval(() => {
        setSparks(prev => prev.map(spark => ({
          ...spark,
          x: spark.x + spark.dx,
          y: spark.y + spark.dy,
          opacity: spark.opacity - 0.02,
          scale: spark.scale - 0.01
        })));
      }, 20);

      setTimeout(() => {
        clearInterval(interval);
        setExploded(false);
        setSparks([]);
      }, 2000);

      return () => clearInterval(interval);
    }
  }, [exploded]);

  return (
    <div className="w-full h-96 bg-blue-100 relative overflow-hidden" onClick={handleClick}>
      <svg viewBox="0 0 400 300" className="w-full h-full">
        {/* Sky background */}
        <rect width="400" height="300" fill="#87CEEB"/>

        {/* Ground */}
        <rect y="200" width="400" height="100" fill="#90EE90"/>

        {/* Sheep body */}
        {!exploded && (
          <g>
            {/* Body */}
            <ellipse cx="200" cy="150" rx="40" ry="30" fill="white"/>

            {/* Head */}
            <circle cx="170" cy="140" r="20" fill="white"/>

            {/* Eyes */}
            <circle cx="165" cy="135" r="3" fill="black"/>
            <circle cx="175" cy="135" r="3" fill="black"/>

            {/* Legs */}
            <rect x="185" y="170" width="5" height="20" fill="black"/>
            <rect x="210" y="170" width="5" height="20" fill="black"/>
            <rect x="175" y="170" width="5" height="20" fill="black"/>
            <rect x="200" y="170" width="5" height="20" fill="black"/>
          </g>
        )}

        {/* Explosion sparks */}
        {sparks.map(spark => (
          <g key={spark.id}
             transform={`translate(${spark.x},${spark.y}) scale(${spark.scale})`}
             opacity={spark.opacity}>
            <polygon
              points="0,-10 3,-3 10,0 3,3 0,10 -3,3 -10,0 -3,-3"
              fill="yellow"
              stroke="orange"
              strokeWidth="1"
            />
          </g>
        ))}
      </svg>

      {!exploded && (
        <div className="absolute top-4 left-0 right-0 text-center text-lg font-bold text-gray-700">
          Click the sheep to make it explode!
        </div>
      )}
    </div>
  );
};

export default ExplodingSheep;