JavaScript228 [JavaScript] OpenStreetMap 지도 출력하여 특정 위치에 마커 찍기 안녕하세요, 오늘은 OpenStreetMap 지도를 출력하여 특정 위치에 마커를 찍고, 마커 클릭 시 마커 위에 팝업을 여는 예제를 만들어보도록 하겠습니다, 마커를 찍고자 하는 위치는 위도, 경도로 설정해야 합니다. 위도, 경도를 활용한 마커 찍는 예제입니다. DOCTYPE html> html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Leaflet OpenStreetMap Marker 예제title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.c.. 2024. 11. 3. [JavaScript] 로컬스토리지 사용해 즐겨찾는 링크 저장하기 안녕하세요!오늘은 로컬 스토리지를 사용해서 즐겨찾는 링크를 저장, 수정, 삭제할 수 있도록 해보겠습니다.1. 로컬 스토리지란?로컬 스토리지는 웹 브라우저에 내장된 저장 공간으로, 사용자가 데이터를 브라우저에 저장하고 이를 이후에도 사용할 수 있도록 하는 기능입니다. 로컬 스토리지는 브라우저와 연동된 웹 애플리케이션에서 데이터를 영구적으로 저장할 수 있도록 도와줍니다.주요 특징영구 저장: 로컬 스토리지에 저장된 데이터는 브라우저를 종료하거나 컴퓨터를 재부팅해도 삭제되지 않고 유지됩니다. 따라서 사용자가 다시 해당 웹 페이지를 방문했을 때, 저장된 데이터를 불러올 수 있어요.도메인 기반 데이터 저장: 로컬 스토리지에 저장된 데이터는 도메인별로 격리됩니다. 즉, 한 웹 사이트에서 저장한 데이터는 다른 웹 사이.. 2024. 10. 31. [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. 이전 1 2 3 4 5 6 7 ··· 26 다음