마작 점수계산기 만들기 - 4

일단 저번에 가장 중요한 부분들은 구현을 얼추 했으니

이제부터는 좀 부가적인 기능을 만들기로 했다.

내 목표는 아무것도 없이 마작 패만 있을 때도

웹사이트만 켜면 다른 모든 것을 할 수 있는 것이었기 때문에

가장 먼저 떠오른 주사위를 굴리는 기능을 만들기로 했다.

처음에는 이미지를 가져와서 쓸까 하다가

그냥 그리드 그리는 법을 연습하는 셈 치고

손수 도트를 찍어서 주사위 모양을 만들었다.

굴리기 버튼을 눌렀을 때 바로 주사위가 나오니 너무 밋밋해서

setInterval함수를 사용해 주사위가 여러 번 나오는 모션을 만들었다.

---

▲ 주사위 버튼을 누르면 값이 출력된다.

 

---

주사위를 만들고 나니까 점수가 바뀔 때에도 모션이

있으면 좋겠다는 생각을 해서 만들기 시작했다.

여기에서도 똑같이 setInterval함수를 사용해서

점수가 변할 때 한 번에 바뀌지 않고 부드럽게 변하도록 바꾸었다.

---

▲ 점수가 바뀔때 변하는 모션이 나온다.

---

▶▶▶ 구경하러가기 ◀◀◀