카테고리 없음
TeamProject_PokéGotchi - 3일차
juni_shin
2024. 7. 10. 02:30
수박 게임 준비 중
물리엔진 Matter.js 사용법
TS로 개발한 github
https://github.com/MycroftKang/Suika
JS로 개발한 수박게임 velog
TS 수박게임 github 관련 레포
https://github.com/search?q=typescript+Suika&type=repositories
DB 세팅
users 테이블 : 유저 정보 + 게임 점수 + 보유 코인
user_pokemons 테이블 : 어떤 유저가 어떤 포켓몬을 가지고 있는지 확인 하는 테이블
purchase_history 테이블 : 어떤 유저가 어떤 포켓몬을 구입하였는지 기록하는 테이블
+ pokemon 테이블 : 포켓몬 리스트를 관리하는 테이블 고려 중
위 구조를 통하여 유저마다 보유한 포켓몬 확인 및 관리 / 상점에서 포켓몬 중복 구매 방지가 될 것으로 예상됨
메인페이지
{pokemonData.slice(0, 5).map((pokemon, idx) => (
<div
key={idx}
id={`pokemon-${idx}`}
className="z-1 absolute cursor-pointer transition-transform duration-1000"
style={{ transform: `translate(${pokemon.x}px, ${pokemon.y}px)` }}
onClick={() => handlePokemonClick(idx)}
>
<Image
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/animated/${pokemon.id}.gif`}
alt="포켓몬 이미지"
width={100}
height={100}
/>
</div>
))}
{selectedPokemon && (
<div
id="selected-pokemon"
className="z-1 absolute transition-transform duration-1000"
style={{ transform: `translate(${selectedPokemonPos.x}px, ${selectedPokemonPos.y}px)` }}
>
<Image
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/animated/${selectedPokemon.id}.gif`}
alt="선택된 포켓몬 이미지"
width={200}
height={200}
/>
</div>
)}
</div>
선택된 포켓몬과 나열된 포켓몬 의 id값 참조 위치가 다르다보니 교체가 원활하게 되지 않는 문제가 있음
기존코드
const handlePokemonClick = (index: number) => {
if (!selectedPokemon) return;
const newPokemonData = [...pokemonData];
const clickedPokemon = newPokemonData[index];
const tempSprite = clickedPokemon.sprites.front_default;
newPokemonData[index].sprites.front_default = selectedPokemon.sprites.front_default;
setSelectedPokemon({ ...selectedPokemon, sprites: { ...selectedPokemon.sprites, front_default: tempSprite } });
setPokemonData(newPokemonData);
};
변경코드
const handlePokemonClick = (index: number) => {
if (!selectedPokemon) return;
const newPokemonData = [...pokemonData];
const clickedPokemon = newPokemonData[index];
const tempId = clickedPokemon.id;
newPokemonData[index].id = selectedPokemon.id;
setSelectedPokemon({ ...selectedPokemon, id: tempId });
setPokemonData(newPokemonData);
};
Image태그가 아닌 함수 자체에서 id값을 참조하도록 변경 하여 클릭한 포켓몬을 메인 포켓몬으로 상호작용 가능하도록 해결