반응형 뭐라도하자/HTML+JS3 HTML과 JS로 만든 스네이크 게임(SNAKE GAME) canvas 없이 만들기 이번에는 스네이크 게임을 만들어 봤습니다. 오래된 고전 게임이죠. 규칙도 단순해서 만들어 보기로 생각해서 구현해봤습니다. 사과처럼 안 보이지만 빨간 사과를 먹을 때마다 100점씩 올라가게 구현했습니다. 맵은 테이블로 만들었으며, setInterval 함수를 사용하여 뱀의 이동을 구현 및 뱀의 길이에 따라 setInterval의 시간 주기를 짧게 변경하여 속도가 빨라지는 느낌을 받을 수 있도록 하였습니다. 저번 2048때 처럼 로컬 스토리지에 최고점수를 기록하게 하였습니다. https://kangjung.github.io/game/snake/snake.html SNAKE GAME Arrow keys work too START ▲ ◀ ▼ ▶ kangjung.github.io http.. 2021. 12. 16. HTML과 JS로 만든 룰렛 2048을 만들고 뭘 만들어 볼까 하다가 룰렛을 만들어 봤습니다. 룰렛도 게일이라고 할 수 있을지는 모르겠네요. canvas로 만드면 더 이쁘고 자연스러운 룰렛을 만들었겠지만... canvas 없이 만들기가 목적이였으니 아직 부족한 부분도 있지만 어찌어찌 룰렛의 모양은 만드는 데 성공했네요. 옆에 테이블의 수정 버튼과 add 버튼을 통해 룰렛의 내용이나 패널을 추가 할수 있게 하였습니다. 만들고 보니 삭제를 빼먹었네요. 나중에 또 시간나면 추가해야겠습니다. 수정 및 추가 시 이미지처럼 팔레트를 만들어 배경 색, 글자 색, 텍스트를 지정하게 하였습니다. 2048 때와 마찬가지로 하단에 직접 플레이할 수 있게 등록하였습니다. 전체 코드는 github 저장소에 있습니다. 룰렛은 2048 게임 때보다 더 코드보.. 2021. 10. 20. HTML과 JS로 만든 2048 게임 몇 주 전 만들어본 2048... 하게 된 이유는 공부를 해야 한다는 생각이 있지만 막상 알고리즘이던 개발 공부를 하면 재미가 없어서 스트레스를 받아서... 가만있기에는 찝찝... 그렇다면 가볍게 기분 전환할만한 눈에 보이는 걸 만들자... 너무 과한 기능을 가진 개발은 중간에 지쳐서 일하는 것처럼 스트레스받을 것 같아서 간단하게 html로 게임을 만들자!!!라는 생각을 했습니다. canvas로 만들거나 유니티로는 게임을 만든 적이 있지만 캔버스 태그 없이 html + js + css로 만든 적은 없어서 한번 해보자 라는 생각을 했습니다. 그중에 2048은 옆자리 대리분이 그럼 2048 만들어보세요.라는 말을 듣고 처음 만들자고 정해서 만들었네요. HTML 게임영역을 일단 16개의 div 태그에 css로.. 2021. 9. 29. 이전 1 다음 728x90 반응형
