본문 바로가기

JavaScript224

[JavaScript] Phaser 객체에 애니메이션 적용하기 안녕하세요 이번에는 Phaser 객체에 애니메이션을 적용해보겠습니다. Phaser로 간단한 게임 만들고 싶으시면 아래 링크를 참고해주세요. https://stickode.tistory.com/944 [Javascript] Phaser로 게임 만들기 (2) 안녕하세요 Phaser로 게임 만들기를 진행하겠습니다. 이전 글은 아래 링크를 참고해주세요 https://stickode.tistory.com/943 1. 게임 만들기 이전 글에서 배경, 플랫폼, 캐릭터 바운스, 충돌, 애니메이션까 stickode.tistory.com 1. 캐릭터 애니메이션에 사용할 이미지 가져오기 캐릭터 애니메이션에 사용할 이미지를 가져옵니다. 예제에서는 한 프레임 당 32X64 픽셀의 이미지를 가져왔습니다. 이미지는 다음과 같습니다.. 2023. 10. 24.
[javascript] 분할 슬라이드 만들기 안녕하세요 오늘은 가로나 세로가 아니라 화면이 따로 움직이는 분할 슬라이드를 함께 만들어보겠습니다. 아래는 완성 시 모습입니다. 버튼을 누를 때마다 서로 다른 방향으로 슬라이드가 움직이는 것을 확인할 수 있습니다. 아래는 전체 코드입니다. splitSlider.html 판다 판다 ? 이름도 귀여워 고양이 남의 집 고양이 귀여워 작은 새 작고 소중해 멋진 개 인간의 좋은 친구. splitSlider.css /* 전체 페이지 설정 */ body { height: 100vh; /* 화면 높이를 전체 뷰포트 높이로 설정 */ margin: 0; /* 바깥 여백 제거 */ padding: 0; /* 안쪽 여백 제거 */ } /* 슬라이더 컨테이너 설정 */ .slider-container { position: r.. 2023. 10. 18.
[JavaScript]싱글톤 패턴 구현 안녕하세요 이번시간에는 디자인 패턴 중 하나인 싱글톤 패턴을 자바스크립트에서 구현해보겠습니다. 1. 싱글턴 패턴이란? 싱글턴 패턴은 소프트웨어 디자인 패턴 중 하나로, 클래스의 인스턴스가 하나만 생성되도록 보장하고, 그 인스턴스에 쉽게 접근할 수 있도록 하는 패턴입니다. 2. 자바스크립트에서의 싱글톤 패턴 구현 구현은 DB커넥터를 싱글톤 패턴을 사용하는 2.1 CommonJS // dbConnector.js const mysql = require('mysql'); // MySQL 라이브러리를 가져옵니다. require("dotenv").config(); // 환경 변수를 로드합니다. let instance = null; // 싱글턴 인스턴스를 저장할 변수 class DbConnector { constru.. 2023. 10. 16.
[JavaScript] 네이버 Map API 커스텀 마커 구현하기 안녕하세요. 이번 게시글에서는 네이버 map api에서 커스텀 마커 구현하는 방법에 대해서 알려드리겠습니다. 우선 네이버 지도를 세팅하는 방법은 아래 게시글을 참고해주세요. https://stickode.tistory.com/501 [Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기 오늘은 네이버 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. 먼저 네이버 클라우드 플랫폼의 Maps 서비스 페이지에 들어가서 로그인을 한 뒤, '이용 신청하기' 버튼을 클릭합니다. stickode.tistory.com 우선 기본으로 제공되는 마커를 사용하는 방법도 있고 이미지로 마커를 나타내는 방법도 있지만 이번엔 HTML 콘텐츠를 마커 아이콘으로 사용할 수 있습니다. // 마커 .. 2023. 10. 6.
[JavaScript] 카카오 Map API 키워드로 장소검색하기 안녕하세요 이번 게시글에서는 카카오 Map API를 사용해 키워드로 장소 검색할 수 있는 기능을 구현해보겠습니다. 카카오 지도를 띄우는 방법은 아래의 게시글을 참고해주세요. https://stickode.tistory.com/447 [Javascript] Kakao 지도 Javascript API 를 사용해서 지도 표시 및 마커 찍기 안녕하세요 오늘은 카카오 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. https://apis.map.kakao.com/web/guide/ Kakao 지도 API 페이지에 들어가서 안드로이드, 웹, iOS 중 웹을 선택합니다. Kak stickode.tistory.com 우선 키워드를 검색할 수 있는 from태그를 만들어 줍니다. 키워드 : 검색하기 장소 .. 2023. 9. 27.
[JavaScript] 브라우저에서 동작하는 지뢰찾기 만들기 - 기본편 간단한 지뢰찾기 게임입니다. 아래 코드 복사하시고 IDE가 제공하는 웹서버로 실행해보시면 바로 작동합니다. 유저가 승리하는 경우는 아직 구현 못했으며 깃발 표시기능은 구현하였습니다. 감사합니다. 2023. 9. 22.
[Javascript] Phaser로 게임 만들기 (2) 안녕하세요 Phaser로 게임 만들기를 진행하겠습니다. 이전 글은 아래 링크를 참고해주세요 https://stickode.tistory.com/943 1. 게임 만들기 이전 글에서 배경, 플랫폼, 캐릭터 바운스, 충돌, 애니메이션까지 진행한데 이어서 캐릭터 움직임을 만들어보겠습니다. 먼저 create() 함수 내에 키보드 입력을 읽어올 cursor값을 추가합니다. cursors = this.input.keyboard.createCursorKeys(); 그 다음 update() 함수 내에 키보드 값을 읽어서 캐릭터를 움직이고 애니메이션을 보여주는 코드를 추가합니다. function update () { if (cursors.left.isDown) { player.setVelocityX(-160); play.. 2023. 9. 21.
[Javascript] Phaser로 게임 만들기 (1) 안녕하세요 이번 시간에는 Phaser를 사용하여 간단한 게임을 만들어보겠습니다. 1. Phaser란? Phaser는 JavaScript 또는 TypeScript로 데스크톱 및 모바일용 HTML5 게임을 만드는데 사용되는 2D 게임 프레임워크입니다. 2. Phaser 기본 구조 Phaser의 기본 구조는 다음과 같습니다. 해당 예제는 JavaScript를 사용했습니다. // phaser.js // 게임의 설정을 저장하는 객체를 생성합니다. // 게임의 유형, 화면 너비와 높이, 게임 씬(scene)을 정의하는 속성이 들어갑니다. var config = { type: Phaser.AUTO, // 게임의 유형. Phaser.AUTO는 자동으로 WebGL 또는 Canvas를 선택. width: 800, // 게.. 2023. 9. 17.
[javascript] Array.from으로 유사배열을 배열로 변환하기 안녕하세요! 오늘은 Array.from을 알아보고 예제를 통해 유사배열을 배열로 변환하고 클릭 리스너를 등록해보겠습니다. Array.from을 알아봅시다. 1. Array.from? 1. Array.from() : 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어 반환한다. -출처:https://developer.mozilla.org/- 2. Array.from 문법. Array.from(arrayLike[, mapFn[, thisArg]]) (파라미터 설명) arrayLike: 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체. mapFnOptional (선택) : 배열의 모든 요소에 대해 호출할 맵.. 2023. 9. 13.

티스토리툴바