92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import amogus from "/img/amogus.png";
|
|
import imposter from "/img/imposter.png";
|
|
import style from "./style.module.css";
|
|
|
|
type Amogus = {
|
|
isImposter: boolean;
|
|
posX: number;
|
|
posY: number;
|
|
speedX: number;
|
|
speedY: number;
|
|
};
|
|
|
|
const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
|
|
|
|
const initialCrewmates: Amogus[] = [
|
|
{ key: "a", isImposter: true, posX: 10, posY: 20, speedX: 10, speedY: 30 },
|
|
{
|
|
key: "b",
|
|
isImposter: false,
|
|
posX: 400,
|
|
posY: 200,
|
|
speedX: 10,
|
|
speedY: -20,
|
|
},
|
|
{
|
|
key: "c",
|
|
isImposter: false,
|
|
posX: 900,
|
|
posY: 200,
|
|
speedX: -20,
|
|
speedY: 10,
|
|
},
|
|
];
|
|
|
|
const makeCrewmate = (crewmate: Amogus) => {
|
|
const image = getImage(crewmate);
|
|
return (
|
|
<div
|
|
key={crewmate.key}
|
|
className={style.container}
|
|
style={{ top: crewmate.posY, left: crewmate.posX }}
|
|
>
|
|
<img src={image} alt="Amogus" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const stepCrewmates = (list: Amogus[]) => {
|
|
const { innerWidth: width, innerHeight: height } = window;
|
|
const newCrewmates = list.slice();
|
|
for (const c of newCrewmates) {
|
|
let newX = c.posX + c.speedX;
|
|
let newY = c.posY + c.speedY;
|
|
if (newX > width - 90) {
|
|
newX = width - 90;
|
|
c.speedX *= -1;
|
|
}
|
|
if (newX < 0) {
|
|
newX = 0;
|
|
c.speedX *= -1;
|
|
}
|
|
if (newY > height - 120) {
|
|
newY = height - 120;
|
|
c.speedY *= -1;
|
|
}
|
|
if (newY < 0) {
|
|
newY = 0;
|
|
c.speedY *= -1;
|
|
}
|
|
c.posX = newX;
|
|
c.posY = newY;
|
|
}
|
|
return newCrewmates;
|
|
};
|
|
|
|
export default function Amogus() {
|
|
const [crewmates, setCrewmates] = useState(initialCrewmates);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
const c = crewmates;
|
|
setCrewmates(stepCrewmates(c));
|
|
}, 100);
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, [crewmates]);
|
|
|
|
return <>{crewmates.map((c) => makeCrewmate(c))}</>;
|
|
}
|