오늘 면접 과제로 html canvas를 이용해 테트리스 게임을 구현해보라고 했다.
기간은 1주일.
자바스크립트 jquery도 검색해가면서 겨우겨우 하는 수준이라 잘 만들지 모르겠다.
(아마 이동안은 다른글을 쓰기 어려울지도 모르겠다)
1. html5 canvas
www.w3schools.com/html/html5_canvas.asp
HTML Canvas
HTML Canvas Graphics Your browser does not support the element. The HTML element is used to draw graphics on a web page. The graphic to the left is created with . It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a
www.w3schools.com
따3 스쿨의 힘!!!
developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage
캔버스(Canvas) 기본 사용법
canvas는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 img 요소처럼 보입니다. 실제로 canvas 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여
developer.mozilla.org
파폭의 mozilla 형님 도와주세요!
모르겠다. 이클립스로 페이지를 한개 열어서 캔버스를 만들어보자.
새 프로젝트를 생성하고.
jsp페이지를 만든다음에
테트리스 테스트 페이지 오픈! (아무것도 없다!)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테트리스 테스트 페이지.</title>
</head>
<body>
<canvas id="tatris" width="400" height="700" style="border:1px solid #000000;"></canvas>
</body>
</html>캔버스를 하나 넣어보자. 구분은 위해 줄을 긋고, 색을 검은색으로!
테트리스의 블럭들이 여기에서 내려가게끔 지지고 볶고 하면 된다. 근데 어떻게 하지...?
현재까지는 자바스크립트를 이용해서 지지고 볶는것까지 찾아내었다. 내일 계속...
ui.toast.com/weekly-pick/ko_20191216/
모던 자바스크립트로 테트리스 만들기
오늘은 고전 게임인 테트리스로 게임 개발 여행을 해보려고 한다. 그래픽, 게임 루프 및 충돌 감지 등을 다루고, 마지막에는 점수와 난이도가 완벽하게 작동하는 게임을 갖게 될 것이다.
ui.toast.com
내일은 이 페이지를 참고해서 진행해볼 예정이다.
'일상' 카테고리의 다른 글
| 근황 및 오늘 배운내용 정리 (0) | 2020.09.15 |
|---|---|
| html 테트리스 만들기 -마지막- (0) | 2020.09.07 |
| html5 canvas 테트리스 만들기 <4일차> (0) | 2020.08.30 |
| html5 canvas 테트리스 만들기 <3일차> (0) | 2020.08.29 |
| html5를 이용해 테트리스 만들기<2일차> (0) | 2020.08.28 |