whatisthis?

javaScript. Painting App 구현 - (4) Change Color javaScript. Painting App 구현 - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://m.. mywebproject.tistory.com 지난 회차 진행사항 - 색상 변경 - event.target.style.background 사용 - Array.from() 메소드 - 배열.forEach() 메소드 이해하고 넘어가기 🔻 더보기 Array.from(colors)...

javaScript. Painting App 구현 - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://mywebproject.tistory.com/297" data-og-url="https.. mywebproject.tistory.com 지난 회차 진행사항 - 2D context 이용 (canvas.getContext('2d')) - 페인팅 구현 ( path와 line 생성) function onMouseMove(event) { const x = event.of..

javaScript. Painting App 구현 - (2) Canvas Event PaintJS Fill Save - canvas 태그 - input type="range" - class는 스타일 적용에 / id는 js에 사용함. - id 구조 : controls > controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.. mywebproject.tistory.com 지난 회차 진행사항 - app.js 이벤트리스너 (mouse event) 작성 const canvas = document.getElementById("jsCanvas"); let painting = false; function stopPainting()..

javaScript. Painting App 구현 - (1) HTML/CSS Painting App 구현 - (1) HTML / CSS 셋업 index.html PaintJS Fill Save - canvas 태그 - input type="range" - class는 스타일 적용에 / id는 js에 사용함. - id 구조 : controls > controls__r.. mywebproject.tistory.com 지난 회차 진행사항 - index.html과 style.css 작성 app.js 태그 HTML 요소는 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다. const canvas = document.getElementById("jsCanvas");..

Painting App 구현 - (1) HTML / CSS 셋업 index.html Fill Save - canvas 태그 - input type="range" - class는 스타일 적용에 / id는 js에 사용함. - id 구조 : controls > controls__range / controls__btns / controls__colors ㄴ jsRange ㄴ jsMode ㄴ controls__color ㄴ jsSave style.css @import "./reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantar..

턴제 게임 - 텍스트 기반 RGP - 진행사항 javaScript. 턴제 게임 - 텍스트 기반 RPG (中) 턴제 게임 - 텍스트 기반 RGP - 지난번 진행사항 javaScript. 턴제 게임 - 텍스트 기반 RPG (上) 턴제 게임 - 텍스트 기반 RGP skill html / css javascript 텍스트 RPG style.css * { margin: 0; box-s.. mywebproject.tistory.com index.html 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 - 스타일 적용 (flex)을 위한 container div를 추가했다. - input 태그에 required속성 / placeholder / maxlength를 추가하였다. style.css *..

턴제 게임 - 텍스트 기반 RGP - 지난번 진행사항 javaScript. 턴제 게임 - 텍스트 기반 RPG (上) 턴제 게임 - 텍스트 기반 RGP skill html / css javascript 텍스트 RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-ser.. mywebproject.tistory.com index.html 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 turn.js let TurnGame = (function() { let instance; let initiate = function..

턴제 게임 - 텍스트 기반 RGP skill html / css javascript javaScript. 자동 텍스트 RPG 게임 자동 텍스트 RPG 게임 index.html 텍스트 RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-s.. mywebproject.tistory.com 지난 실습으로 해봤던 자동 텍스트 RPG 게임을 토대로 제작했음. - 자동텍스트 RPG게임은 게임과 사용자의 interaction이 '이름 입력' 하나밖에 없었다면, 이번에 제작할 게임은 '턴(turn)'의 개념..

javaScript. 자동 텍스트 RPG 게임 자동 텍스트 RPG 게임 index.html 텍스트 RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-s.. mywebproject.tistory.com 지난시간 제작해보았던 자동 텍스트 RPG 게임의 기능을 추가하고, 더 개선된 버전을 제작해보았다. 이전 코드는 아래 [더보기] 를 참고 🔻 더보기 index.html style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Hae..

javaScript. 숫자야구게임 - 웹 ver. https://mywebproject.tistory.com/259?category=875338 javaScript. 숫자야구게임 - (2) javaScript. 숫자야구게임 -(1) Bulls and Cows (숫자야구) - Rule - - 숫자 제시 횟수 : 10회 이내 - 4자리의 숫자를.. mywebproject.tistory.com 지난 포스팅에서 숫자야구 게임을 html요소와 eventListener을 이용하여 플레이할 수 있도록 수정했었다. Guess 버튼을 눌렀을 때를 기준으로 해보았는데, 1 / count가 누적이 안됨 2 / 랜덤 숫자가 연동이 안됨 3 / UI 디자인이 너무 안이쁨 과 같은 문제가 있었다. 큰 틀은 유지하되, 폰트나 기본..