[RummiKub/JS] 타일 클릭 시 후광 효과

결과물

CSS

타일 클릭 시 추가할 class의 스타일을 미리 추가합니다.

.tile-click{
    border-radius: 10px;
    background-color: rgb(255, 181, 43);
    box-shadow: 0px 0px 5px 5px rgb(255, 188, 43);
}

JS

1. 선택한 타일의 정보 찾기

타일의 정보를 찾기 위해서는 이전의 코드를 조금 수정해야합니다!

타일을 띄우는 과정에서 타일 고유의 id를 부여하고 그 id를 가진 이미지 태그를 찾는 방식으로 정보를 찾을 예정입니다.

수정 코드 설명

태그에 id 추가 i번째 타일의 id 값으로 추가

onclick onclick 시 함수에 id값을 넘겨줌

show_player_tile() 수정

function show_player_tile(){
    for (let i = 0; i < playerTile.length; i++) {
        let id = playerTile[i].id;
        let path = playerTile[i].path;
        // onclick 추가, id 추가
        playerBoard.innerHTML += '<img onclick="player_tile_click(' + id + ')" id="' + id + '" src="image/' + path + '.svg" class="tile no-drag">';
    }
}

그리고 이미지 클릭 시 해당 아이디를 alert창으로 띄어볼게요

player_tile_click()

function plyaer_tile_click(id) {
    alert(id); 
}

빨간색 중 첫번째 묶음의 6이라2, 빨간색이라 1, 타일의 숫자 6, 216이 잘 찍힌걸 확인할 수 있습니다.

이제 id 값을 잘 가져왔으니 해당하는 img 태그를 가져와서 class를 추가하겠습니다.

2. 타일 선택 시 class 추가하기

// 타일 선택 시 clickTile 배열에 추가
const clickTile = [];

// 타일 선택 시 섀도우 추가되는 클래스 추가 (중복되는 부분이라 함수로 선언)
function tile_click_shadow(id) {
	// getElementById 이용하여 id에 해당하는 img 태그 가져오기 
    const tile = document.getElementById(id);
    // 타일 선택 시 후광 효과, 타일 다시 선택 시 후광 효과 꺼짐을 자유자재로 할 수 있도록 토글!!!
    tile.classList.toggle('tile-click');
}

function player_tile_click(id) {
    //alert(id); 
    
    // playerTile에서 id에 해당하는 인덱스 찾기 (findIndex 사용)
    const tilInfo = playerTile.findIndex((e) => {
        return e.id == id;
    });
    
    //id로 img 태그 찾기
    const tile = document.getElementById(id);
    
    // 만약 tile(img태그)에 tile-click이라는 클래스가 없다면 clickTile 배열에 tileInfo에 해당하는 playerTile 추가
    if (!tile.classList.contains('tile-click')) {
        clickTile.push(playerTile[tilInfo]);
    } 
    // 클래스가 있다면 clickTile에서 id에 해당하는 인덱스를 찾고 clickTile에서 해당 인덱스 삭제
    else {
        const popTile = clickTile.findIndex((e) => {
            return e.id == id;
        })
        clickTile.splice(popTile, 1);
    }
    
    // 있던 없던 토글을 사용했으니 class 추가 및 삭제할 함수로 id 넘김
    tile_click_shadow(id);
    
    console.log("tile", tile);
    console.log("clickTile", clickTile);
    console.log(playerTile[tilInfo]);
}