본문 바로가기

Front-End/JavaScript

 (2)
[JavaScript]탱크 언어 시뮬레이션 만들기 기본적인 JavaScript를 이용해서 자동차가 전진, 좌회전, 우회전하는 코드를 짰다. 탱크 언어 코드를 이용해서 자동차의 움직임을 표현해보았다. 움직임이 잘 보이게 하기 위해서 뒤에 격자 무늬를 넣었다. 1. 전진, 좌회전, 우회전 로직 만들기(javascript) 2. 탱크 언어 코드 입력 ( code = "11 11 11 01 11 11 01 11 10 11") 3. 격자 무늬 배경 넣기 (css) 4. 실행 1. 전진, 좌회전, 우회전 로직 만들기 2. 탱크 언어 코드 입력 ( code = "11 11 11 01 11 11 01 11 10 11") ; → → → ↑ (좌회전) ↑ ↑ ←(좌회전) ← ↑(우회전) ↑ 3. 격자 무늬 배경 넣기 (css) 실행 4. 실행
[JavaScript]키보드로 움직이는 자동차 만들기 기본적인 HTML, CSS, JavaScript로 자동차를 움직이게 만들고 싶어져 만들어 봤다. 물론, GPT의 도움을 받아서 만들어 보았다. 간단하게 JS로 만들 수 있다.🪄 ※ 일반적으로 웹 페이지의 좌표 시스템에서 Y 축은 아래로 갈수록 증가하는 값이라 위로 가려면 tank.y -= 50;을 해줘야 한다. 결과

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*