WEB기초/HTML9 [HTML] HTML5 이용하기 05 - 간단한 슈팅게임 만들기 HTML5 이용하기 05 - 간단한 슈팅게임 만들기 ※ 해당 코드 및 파일는 현재 소장하고 있지 않아 제공이 어렵습니다. 도움을 드리지 못해 죄송합니다. 간단한 슈팅게임 만들기 - 드래곤 움직이기, 배경화면 무한 움직이기, 2종류의 몬스터 랜덤으로 나타나기 까지의 코드 # random함수 이용해 몬스터 출력 : Math.floor() - 소숫점이하 내림하기 : Math.random() - 랜덤 수 뽑아내기 ** 출력 결과 ** - 2차 > 적기와 미사일의 접촉, 드래곤의 충돌검사, 효과음 넣기, # 충돌검사시 좌표이용하여 검사한다. ** 출력 결과 ** 2017. 4. 19. [HTML] HTML5 이용하기 04 - Canvas이용한 시계 만들기 HTML5 이용하기 04 - Canvas이용한 시계 만들기 시계 만들기 1- 날짜 객체를 생성한다- .getHours(), .getMinutes(), .getSeconds()를 이용해 시간을 가져온다. ** 출력 결과 ** 시계 만들기 2- 초침, 분침, 시침을 넣는다.- 회전 각도는 rad이므로 따로 계산해주어야 한다. ** 출력 결과 ** 2017. 4. 18. [HTML] HTML5 이용하기 03 - Canvas 이용하기 (170417) HTML5 이용하기 - Canvas 이용하기 Canvas 이용하기- 이용방법 캔버스의 참조값 얻어오기 var canvas = document.querySelector("#myCanvas");렌더링 할 context 객체의 참조값 얻어오기 var context = canvas.getContext("2d"); 외곽선 색상 context.strokeStyle선의 굵기 context.lineWidth, context.lineCap, context.lineJoin경로 시작 context.beginPath();시작점으로 이동 context.moveTo(100,200);이을점 지정 context.lineTo(500,0);그리기 context.stroke();경로 마무리 context.closePath();채우는 색 .. 2017. 4. 17. [HTML] HTML5 이용하기 02 - 정규식 이용하기 (170417) HTML5 이용하기02 - 정규식 이용하기 정규식을 이용한 유효성 검사 form- form에 submit 이벤트가 일어났을 때 정규식을 통과하지 못하면 실행되지 않도록 한다.- form을 입력할 때 keyup이벤트 발생- keyup 이벤트 발생시 정규식의 매칭 여부를 초록과 빨강으로 나타낸다. cf > - this를 잘 활용하자 ** 출력 결과 **bootstrap을 이용한 유효성 검사 form- 아이디와 비밀번호의 유효성을 검사한다.- keyup이 되면 유효성 검사를 통해 우측에 아이콘(bootstrap)이 뜨도록 한다.- keyup결과에 따라 글의 색상이 red와 green이 되도록 한다. - Id나 Email의 유효성이 false라면 form전송을 막는다. (disabled이용)- keyup에 따라.. 2017. 4. 17. 이전 1 2 3 다음
