본문 바로가기

🖥️ Frontend/Frontend 프로젝트7

<HTML.CSS.JS> 개미 생일 가위바위보 게임 시간 지연 -- setInterval / setTime setTimeout과 setInterval을 이용한 호출 스케줄링 ko.javascript.info object / entey Object.entries() - JavaScript | MDN Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다). developer.mozilla.org JS var imageWhere = 0 var dictionary = { //딕셔너리자료구조 rock : '0', scissor : '-10px', paper :'-20px' }; f.. 2022. 8. 21.
<HTML.CSS.JS>로또 추첨 게임 제로초님의 강의를 보고 만들었습니다. 실행 링크 https://RoTTo.goldchae.repl.co Lottogame ** 당첨 숫자 ** * 보너스 숫자! * 도박문제 전문상담 1336 RoTTo.goldchae.repl.co -array(숫자) 숫자만큼의 공간이 있는 빈 배열 생성 -empty는 반복 불가 -배열 map() 메서드 -Math의 random() 함수는 진짜 랜덤하지 않다. "유사난수" 사용. https://ko.wikipedia.org/wiki/%EC%9C%A0%EC%82%AC%EB%82%9C%EC%88%98 -splice() 함수 splice(a) a(인덱스번호)부터 끝까지 가져옴 splice(a,b) a부터 끝까지 - slice()함수 slice(a,b) a(인덱스번호)부터 b까.. 2022. 8. 4.
<HTML.CSS.JS> 아빠 생일 프로그램 계획했던 것처럼 완벽하게 되진 않았다.. 원래 계획은 람쥐가 아빠의 패턴(출근.점심.퇴근)에 맞춰 움직이고, 그 람쥐를 클릭하면 람쥐가 메세지를 띄우는 거였다. 어떻게 바뀌었는지에 대한 이야기는 변명html에 적혀 있다.. 링크: https://dadbirthday.goldchae.repl.co 아빠 생신 축하드립니다 [Work With me!] 람쥐가 같이 코딩을 합니다! 람쥐는 점심시간 (11시 30분) 에 밥을 먹으러 갑니다! 람쥐는 음료를 사들고 복귀합니다! (12시 30분) 람쥐는 6시에 칼퇴합니다! 일하는 람쥐를 클릭하면 메 dadbirthday.goldchae.repl.co HTML+ CSS - 기본 [Work With me!] 람쥐가 같이 코딩을 합니다! 람쥐는 점심시간 (11시 30분) .. 2022. 7. 28.
<HTML.CSS.JS>람지 키우기 코딩을 처음 시작했을 때 만든 게임! 람쥐를 키우는 게임이다. 디저트 먹기. 운동하기. 놀기. 공부하기 등의 버튼을 누르면 완성된 람쥐가 나온다. 초보라서 JS 없이 만들었다. 링크: https://game1.goldchae.repl.co 람쥐놀이 game1.goldchae.repl.co HTML 1 - 시작 화면 클릭! HTML 2 - 기본 화면 ​ HTML 4 - 결과2 화면 CSS fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em.. 2022. 7. 28.
<HTML.CSS.JS>틱택토 게임-미완 제로초님의 강의를 보고 만듭니다. - e. target 클릭된 요소 - parentnode 클릭된 요소의 부모 노드 input의 값이 value 태그 안 글자는 textContent + 중첩 for문을 줄이는 것이 실력이다~ HTML # - 표 만들 때는 그냥 만들면 안 보임!! border 설정하기! 크기 색깔 등 줄 안에 내용 넣기! 크기도 조정하기 CSS # JS # 2022. 7. 28.
<HTML.CSS.JS> 구구단게임 제로초님의 강의를 보고 만들었습니다. 링크 https://GUGUDAN.goldchae.repl.co replit GUGUDAN.goldchae.repl.co HTML + CSS (코딩이 많지 않아서 합침) 3문제 5문제 JS 3문제버전~5문제버전~ function fucfuc(){ let i = 0 let score = 0 while (i 2022. 7. 26.
<HTML.CSS.JS> 숫자야구게임 HTML css가 섞여 있어 깔끔하지 않다. 하지만 각 항목에 위치 조정을 하고 싶어서 이렇게 하는 게 편했다. 그런데 이렇게 위치 조정하니까 그림 위에 고정되지 않고 사용자 액정 위치에 맞춰 조정된다. 다음에 그림 위에 요소 올리고 싶으면 다른 방법을 찾는 게 좋을 것 같다. GO! 플레이 설명 결과는, GOGO! 귀여운 CSS 그림 위에 글자 올리는 용도 !! 클래스 이름이랑 . 사이' 띄어쓰기' 절대 안 됨 !! 저번에 왜 안되는지 찾느라 힘들었다. .img{ position: relative; background-image: url(./image/base.png); height: 100vh; background-size: cover; } JS 핵심 자바스크립트이다. 제로초님의 강의를 들으며 만들었.. 2022. 7. 26.

티스토리툴바