본문 바로가기

JavaScript208

[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.
[JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 실전편 https://stickode.tistory.com/912 저번글은 기본 기능만 있는 오목이었습니다. 이번엔 여러 기능을 더 추가해보겠습니다. 게임 초기화 취소 요청 Player Black Player White 점수: 0 0 취소 요청: 0 0 취소 사용: 0 0 2023. 9. 10.
[JavaScript] SweetAlert2 라이브러리로 팝업창 만들기 안녕하세요. 이번 시간에는 SweetAlert2 라이브러리를 사용해서 웹페이지에서 예쁜 팝업창 띄우는 예제를 진행하겠습니다. 전체 코드를 먼저 보여드리고 시작하겠습니다. SUCCESS WARNING ERROR DELETE 1. 파일 불러오기 먼저 HTML 파일에서 SweetAlert2 CSS파일과 JS 파일을 인터넷에서 불러옵니다. 2. 버튼 만들고 클릭이벤트 만들기 function alertSuccess(){ Swal.fire({ icon: 'success', title: 'Success!!', text: 'Good jop!', footer: 'Your Request Succeed!' }) } function alertWarning(){ Swal.fire({ icon: 'warning', title: .. 2023. 9. 5.
[javascript] setTimeout()사용하여 타이핑 효과 주기 안녕하세요! 오늘은 Javascript와 css를 사용하여 화면에 타이핑 효과를 주어 아래 처럼 보여줄 수 있도록 해보겠습니다. 이전에 작성했던 @keyframe에 대한 개념(https://stickode.tistory.com/814) 과 함께 setTimeout() 메서드를 사용할 예정입니다. 1.setTimeout() setTimeout() : 일정 시간이 지난 후에 함수를 실행하는 전역 호출 스케줄링 메서드. 1.(문법) let timerId = setTimeout ( func | code ,[delay],[arg1],[arg2], ...); 2. (파라미터 설명) func | code : 실행하고자 하는 코드로, 함수 또는 문자열 형태입니다. 대개는 이 자리에 함수가 들어갑니다. 하위 호환성을 위.. 2023. 9. 1.
[JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 기본편 웹브라우저에서 동작하는 오목게임입니다. JS의 기본적인 동작을 파악하기 쉽도록 제작하였습니다. 감사합니다. 게임 초기화 2023. 8. 31.
[JavaScript] 폼 요소 이벤트 정리 및 예제 안녕하세요. 자바스크립트는 마우스 이벤트, 키보드 이벤트, 폼요소 이벤트 등 많은 종류의 이벤트가 있는데요, 오늘은 이벤트 종류 중에서 Form 태그와 함께 사용되는 폼 요소 이벤트를 정리하고, 해당 이벤트들에 대한 예제를 만들어보려고 합니다. 1. 이벤트란? 우선 자바스크립트의 이벤트가 무엇일까요? 모던자바스크립트와 모질라 사이트에서는 이벤트에 대해 아래와 같이 설명하고 있습니다. 이벤트(event)는 무언가 일어났다는 신호입니다. 모든 *DOM *노드는 이런 신호를 만들어 냅니다. 참고로, 이벤트는 *DOM에만 한정되진 않습니다. 출처: https://ko.javascript 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생한 것(occurrence).. 2023. 8. 27.
[JavaScript] Canvas로 클릭 이벤트를 받아 애니메이션 만들기(+루프) 안녕하세요. 지난 시간 canvas를 이용해 원을 이동시켰다면 오늘은 클릭 이벤트를 받아 시작과 정지를 만들고 원이 끝에 도착했을 때 다시 원점으로 돌아가 시작하는 기능을 만들어 보겠습니다. 먼저 지난 시간 예제의 링크입니다. https://stickode.tistory.com/886 html 파일 코드 입니다. DOCTYPE html> Document const canvas = document.getElementById("myCanvas"); //그리기객체 const context = canvas.getContext("2d"); let move_ev = false; // 시작 좌표 let x = 0; let ani; // 애니메이션 function MoveCircle(){ //캔버스 지우기 contex.. 2023. 8. 22.
[Javascript] localStorage를 활용한 메모 애플리케이션 안녕하세요 이번 포스트에서는 JavaScript와 localStorage를 활용하여 간단한 메모 애플리케이션을 만들어보겠습니다. localStorage를 사용하면 웹 브라우저에서 데이터를 영구적으로 저장할 수 있으므로, 페이지를 새로고침해도 메모가 유지됩니다. 사용자는 입력 필드에 메모를 작성하고 추가할 수 있으며, 추가된 메모는 화면에 표시됩니다. 또한, 각 메모 옆에는 삭제 버튼이 있어 메모를 삭제할 수 있습니다. 이를 통해 JavaScript와 localStorage 의 기능을 익히고, 실제로 활용할 수 있는 예제를 만들어보겠습니다. localStorage는 웹 브라우저에서 제공하는 클라이언트 측 데이터 저장소입니다. 이를 사용하면 웹 애플리케이션에서 데이터를 영구적으로 저장하고 유지할 수 있습니다.. 2023. 8. 13.

티스토리툴바