본문 바로가기

JavaScript228

[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.
[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.

티스토리툴바