Brick Breaker-1

6039 단어 htmljshtml

기초부터 차근차근 정리하고 싶었는데 지식이 일천하여 정리가 잘 안되어서 그냥 실전으로 익히는 게 나을것 같아서 무작정 따라해보았다..

https://developer.mozilla.org/ko/docs/Games/Tutorials/%EC%88%9C%EC%88%98%ED%95%9C_%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC_%EC%9D%B4%EC%9A%A9%ED%95%9C_2D_%EB%B2%BD%EB%8F%8C%EA%B9%A8%EA%B8%B0_%EA%B2%8C%EC%9E%84

일단 이걸 보면서 코드를 따라 치고 시작해보자.

이 과정은 벽돌깨기 게임을 만드는것인데 별도의 게임 엔진을 사용하지 않고 순수 자바스크립트로 만드는것이기 때문에 canvas를 활용했다.

일단 새로운 폴더를 만들고 그 안에 index.html, style.css, bb.js 파일을 만들고 html 파일에 아래와 같은 코드를 쓴다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brick Breaker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<canvas id="bb" width="480" height="320"></canvas>

<script defer src="bb.js"></script>

</body>
</html>

새로운 것들
1. canvas
canvas는 html에서 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해서 그래픽과 애니메이션을 그릴수 있는 엘리먼트라고 한다. html에서 블럭깨기 게임을 만들기 위해서 필수적으로 사용해야 할 엘리먼트이다.
2. script
script 엘리먼트는 데이터와 실행 가능한 코드를 문서에 포함할때 사용하며 우리는 자바스크립트 코드로 블럭깨기를 구현할 것이기 때문에 사용해야 할 엘리먼트이다.

springmvc+mybatis+mysql 중국어 디코딩 문제 해결
210708 시멘틱태그

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage