tree0505 님의 블로그

_03_총알발사문제점03_캔버스키보드_01_키보드키보드 누를때. 땔때.더블클릭도 직접 만든다. inputKey.htmlDOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> h1>F12 콘솔창을 열고 키보드를 눌러보세요.h1> canvas id="myCanvas" width="800" height="600" style="border: 1px solid bla..

_06_사각형벽충돌rectDir.htmlDOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"> canvas> div class="testText">div> script src="rectDir.js">scri..

_05_버튼이미지이미지들을 보면. 이렇게 있는 이미지가 많다. 이미지 로드가 네트워크를 많이 잡아 먹는다.한장에 하나씩 그림이 있으면 그리기 편한데.한장에 여러개가 있으면. 이 그림을 잘라서 쓴다. 이런 경우가 꽤 많다. 아이콘 이미지들은 따로 있는게 아니라. 하나에 있는 가능성이 높다. 자르는것을 배워야 한다. fpsDrawImage.html한장 그리기 DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>..

_04_포인트인렉트버튼이다. 버튼을 직접 만들어 보는것 html버튼이 내부적으로는 이런 일이 벌어지는것 pointInRect.htmlDOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> h1>네모를 클릭하세요. h1> canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;..

02_캔버스마우스_01_캔버스클릭원그리기캔버스를 왜 쓰는가태그 가지고 애니메이션을 표현하는데 만드는것이 한계가 있다. css가지고는 한계가 있다. 정교하게 할려면 캔버스에다가 해야한다. clickDrawArc.htmlDOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> canvas id="myCanvas" width="800" height="600" style=..

_02_grid그리드 html이 대단한 언어이다.테이블 그냥 그려줌 사실상 html은 내부에 엄청난 코딩이 들어있다. 그리드를 다 그려주는것 안에가 그리드 처럼 되어 있다. grid.htmlDOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> head>body> canvas id="myCanvas" width="650" height="650" style="border:..

E오학기_477E01_캔버스01_캔버스요소_00_canvas캔버스 태그 도화지라는 뜻. 그림판 옵션이 있어야 한다. 옵션 => 가로 세로 를 넣어주는게 좋다. mycanvas.html DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> canvas id="myCanvas" width="480" height="320" style="border: 1px solid..

그리드를 만들어서 . 그림을 그려서 꼼수로 할꺼다. 실제로는 움직이는 않는다.그리드를 만들어서 . 색칠하는거다.스네이크는 검사를 4군대만 하면 된다. 위 아래 왼쪽 오른쪽 테트리스 왼쪽은 3개. 아래는 3개. 오른쪽은 1개를 검사해야해서. 어렵다. 02_테트리스_01_초기화tetris01.htmlDOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Tetris Gametitle> style> #center { margin: 0 auto; text-ali..

04_직접이동02_그리드D11_dom_비동기실습_암기01_스네이크01_기본스네이크는 중요하다.알고리즘이 중요한게 많이 들어갔다. snake1.html▷ Play이 gameStart()" 함수는 뱀의 속도만 빠르게 하는 함수이지. 키 이동은 사용자가 하는것 05 자동이동에 나온다. 사용자가 앞으로 화살표 버튼을 누르기 귀찮으니까 만든것 같다. DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> link rel="stylesheet" href="style.css"> title>Documenttitle>head..

D10_dom_SPA_암기03_클래스버전_전체스태틱_01_memberindex.html 즉 html은 한개가 있고 나머지는 다 js 이다. index.htmlDOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js">script> script sr..