JavaScript208 [JavaScript] Leaflet를 활용한 OpenStreetMap 지도 출력하기 안녕하세요, 오늘은 Leaflet를 활용하여 OpenStreetMap 지도 출력해보도록 하겠습니다. OpenStreetMap은 전 세계의 지리 정보를 누구나 자유롭게 편집하고 사용할 수 있는 오픈소스 지도 서비스 입니다. OSM 데이터는 지도 앱, 연구 프로젝트, 게임, 물류 시스템 등 여러 방면에서 사용되며, Leaflet, Mapbox, QGIS 같은 다양한 지리 정보 시스템(GIS)에서 쉽게 불러와 사용할 수 있습니다. Leaflet는 웹 애플리케이션에 지도를 추가하고 상호작용을 가능하게 해주는 오픈소스 JavaScript 라이브러리입니다. Leaflet는 가볍고 빠르며 직관적인 API를 제공하여, 복잡한 설정 없이도 지도를 쉽게 웹 페이지에 구현할 수 있습니다. Leaflet를 활용하여 지도.. 2024. 10. 28. [JavaScript] 스네이크 게임 완성도 올리기 안녕하세요.오늘은 지난 시간에 만들었던 스네이크 게임에 몇가지 요소들을 추가해서 완성도를 높여보겠습니다.이전에 작성한 코드는 아래 링크를 참고해주세요.2024.10.19 - [JavaScript] - [JavaScript] 스네이크 게임 만들기 [JavaScript] 스네이크 게임 만들기안녕하세요!오늘은 자바스크립트를 사용해 클래식한 스네이크 게임을 만드는 방법을 알려드리겠습니다. 1. index.html 작성 canvas 태그를 사용해 스네이크 게임을 그릴 공간을 마련합니다.id를 통stickode.tistory.com1단계: 점수 시스템 추가하기스네이크 게임의 재미 중 하나는 얼마나 높은 점수를 기록할 수 있는지 도전하는 것입니다. 이번에는 점수 시스템을 추가해 게임을 한층 더 흥미롭게 만들어보겠습.. 2024. 10. 25. [JavaScript] 스네이크 게임 만들기 안녕하세요!오늘은 자바스크립트를 사용해 클래식한 스네이크 게임을 만드는 방법을 알려드리겠습니다. 1. index.html 작성 canvas 태그를 사용해 스네이크 게임을 그릴 공간을 마련합니다.id를 통해 JavaScript에서 이 캔버스를 쉽게 접근할 수 있도록 설정했습니다.style 태그로 배경색과 캔버스 테두리를 설정해 간단한 디자인을 적용했습니다.2. 스네이크와 음식의 초기 상태 정의이제 snake.js 파일을 생성하고, 스네이크와 음식의 초기 상태를 정의해보겠습니다.// 캔버스 설정const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');// 게임 설정const gridSize =.. 2024. 10. 19. [JavaScript] 비행기 슈팅 게임 만들기 - (5) 점수, 목숨, 다시 시작 구현 안녕하세요!지난 글에서는 비행기와 적의 충돌을 처리하고 게임 오버 상태를 구현하는 방법을 설명드렸는데요.오늘은 지난 시간에 이어서, 점수 시스템, 목숨 시스템, 게임 오버 후 다시 시작 기능을 구현해서 게임을 더 재미있게 만들어보겠습니다. 이전 코드는 아래 링크를 참고해주세요.2024.09.15 - [JavaScript] - [JavaScript] 비행기 슈팅 게임 만들기 - (4) 충돌 감지와 게임 오버 [JavaScript] 비행기 슈팅 게임 만들기 - (4) 충돌 감지와 게임 오버안녕하세요.오늘은 지난 시간에 이어서, 적과 총알이 충돌하면 적을 제거하고, 적과 비행기가 충돌하면 게임 오버가 되는 기능을 구현하겠습니다. 이전 코드는 다음 링크를 통해 확인할 수stickode.tistory.c.. 2024. 10. 10. [JavaScript] 비행기 슈팅 게임 만들기 - (4) 충돌 감지와 게임 오버 안녕하세요.오늘은 지난 시간에 이어서, 적과 총알이 충돌하면 적을 제거하고, 적과 비행기가 충돌하면 게임 오버가 되는 기능을 구현하겠습니다. 이전 코드는 다음 링크를 통해 확인할 수 있습니다.2024.09.15 - [JavaScript] - [JavaScript] 비행기 슈팅 게임 만들기 - (3) 총알 발사하기 1. 게임 오버 상태 변수 설정isGameOver 변수를 추가하여 게임이 종료되었는지 여부를 추적합니다. 초기값은 false로 설정됩니다.let isGameOver = false; // 게임 오버 상태를 추적할 변수 2. 충돌 감지 함수 작성두 개의 객체가 충돌하는지 확인하는 함수입니다. 이 함수는 총알과 적, 적과 비행기의 충돌을 처리할 수 있습니다.obj1과 obj2는 충돌을 검사할 두.. 2024. 10. 4. [JavaScript] 비행기 슈팅 게임 만들기 - (3) 총알 발사하기 안녕하세요.오늘은 지난 시간에 이어서, 비행기 슈팅게임에서 총알을 발사하는 기능을 구현하겠습니다.총알은 플레이어가 스페이스바 키를 누르면 비행기에서 발사되며, 시간이 지날수록 화면 위쪽으로 이동해야 합니다. 이전 코드는 아래 링크를 통해 확인할 수 있습니다.2024.09.15 - [JavaScript] - [JavaScript] 비행기 슈팅 게임 만들기 - (2) 적 생성하기 1. 총알 배열 설정다수의 총알을 관리하기 위해 bullets 배열을 설정합니다.const bullets = []; // 총알을 담을 배열 2. 총알 발사 함수 작성 비행기 중앙에서 총알을 발사하며, plane.x 위치를 기준으로 총알이 나갑니다.bullets 배열에 총알 객체를 추가합니다.// 총알을 발사하는 함수functi.. 2024. 9. 28. [JavaScript] 비행기 슈팅 게임 만들기 - (2) 적 생성하기 안녕하세요.오늘은 지난 시간에 이어서 비행기 슈팅 게임을 만들기 위해 화면에 적을 생성하는 기능을 구현하겠습니다.적은 화면의 가장 위에서 나타나서, 시간이 지나면 아래로 이동해야 합니다. 이전에 작성했던 코드는 다음 링크를 참고바랍니다.2024.09.15 - [JavaScript] - [JavaScript] 비행기 슈팅 게임 만들기 - (1) 비행기 그리기 [JavaScript] 비행기 슈팅 게임 만들기 - (1) 비행기 그리기안녕하세요.자바스크립트로 간단한 비행기 슈팅 게임을 만들어보겠습니다.오늘은 먼저 다음 영상처럼 화면에 비행기를 그리고 키보드 입력에 따라 좌우로 움직이도록 해보겠습니다. index.htmlstickode.tistory.com 1. 적 배열 설정다수의 적을 관리하기 위해 en.. 2024. 9. 21. [JavaScript] 비행기 슈팅 게임 만들기 - (1) 비행기 그리기 안녕하세요.자바스크립트로 간단한 비행기 슈팅 게임을 만들어보겠습니다.오늘은 먼저 다음 영상처럼 화면에 비행기를 그리고 키보드 입력에 따라 좌우로 움직이도록 해보겠습니다. index.html style.css/* 전체 화면의 기본 설정 */body { margin: 0; /* 여백 제거 */ display: flex; /* 화면을 중앙으로 정렬하기 위한 flexbox 사용 */ justify-content: center; /* 수평 중앙 정렬 */ align-items: center; /* 수직 중앙 정렬 */ height: 100vh; /* 화면 전체 높이 설정 */ background-color: #000; /* 배경색을 검정색으로 설정.. 2024. 9. 15. [JavaScript] 간단한 테트리스 게임 만들기 (3) - 일시정지 안녕하세요 테트리스 마지막 게시글입니다 테트리스 게임 이전편은 아래 링크에서 확인하실 수 있습니다 [JavaScript] 간단한 테트리스 게임 만들기오늘은 자바 스크립트로 간단한 테트리스 게임을 만들어보도록 하겠습니다. 먼저 HTML 코드입니다 (자바 스크립트 전체 코드는 게시글 하단에서 확인하실 수 있습니다) 테트리스 도형이 쌓stickode.tistory.com [JavaScript] 간단한 테트리스 게임 만들기 (2) - 레벨업 하기안녕하세요 오늘은 지난번에 만들었던 테트리스 게임에 레벨업 기능을 추가시켜보도록 하겠습니다. 기존 게임에서는 1초 간격으로 블럭이 하단으로 떨어지도록 구현하였습니다. 전체 코드는stickode.tistory.com 오늘은 일시정지 기능을 추가해보도록 하겠습니다 .. 2024. 9. 14. 이전 1 2 3 4 5 ··· 24 다음