Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1-H5 튜토리얼-php.cn

Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1

黄舟

풀어 주다： 2017-01-22 10:55:01

원래의

1483명이 탐색했습니다.

이전 글에서는 Canvas에 대한 기본 지식을 소개하고 Canvas를 활용하여 다양한 그래픽과 그림을 그려보았습니다. 이전 글을 바탕으로 HTML5 기반의 탱크 전투 게임을 만들어 보겠습니다.

1. 캔버스를 사용하여 탱크 그리기

저희가 디자인한 탱크의 구조는 아래 그림과 같습니다. 더 좋은 디자인이 있으면 공유하고 소통하고 싶습니다.

Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1

위 그림과 같이 우리 탱크는 기본적으로 세 개의 직사각형, 원, 선분으로 구성되어 있습니다. 각 구성 요소의 크기는 px 로 표시되어 있습니다. 참고: 탱크를 그릴 때 참조점을 선택해야 합니다. 여기서는 그림과 같이 탱크의 왼쪽 상단을 선택합니다.

아아아아

Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1

2. 탱크를 움직이는 방법은?

탱크를 움직이는 방법을 공부하기 전에 먼저 키보드 조작을 통해 작은 공을 움직이는 방법을 공부해보겠습니다.

먼저

태그에 청취 기능을 추가합니다.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
<body>  
<h1>html5-坦克大战</h1>  
<!--坦克大战的战场-->  
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
<script type="text/javascript">  
    //得到画布  
    var canvas1 = document.getElementById("tankMap");  
      
    //定义一个位置变量  
    var heroX = 80;  
    var heroY = 80;  
      
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
    //设置颜色  
    cxt.fillStyle="#BA9658";  
    //左边的矩形  
    cxt.fillRect(heroX,heroY,5,30);  
    //右边的矩形  
    cxt.fillRect(heroX+17,heroY,5,30);  
    //画中间的矩形  
    cxt.fillRect(heroX+6,heroY+5,10,20);  
    //画出坦克的盖子  
    cxt.fillStyle="#FEF26E";  
    cxt.arc(heroX+11,heroY+15,5,0,360,true);  
    cxt.fill();  
    //画出炮筒  
    cxt.strokeStyle="#FEF26E";  
    cxt.lineWidth=1.5;  
    cxt.beginPath();  
    cxt.moveTo(heroX+11,heroY+15);  
    cxt.lineTo(heroX+11,heroY);  
    cxt.closePath();  
    cxt.stroke();  
      
      
</script>  
</body>  
</html>

로그인 후 복사

청취 기능

<body onkeydown="test()">

로그인 후 복사

x축과 y를 나타내는 두 개의 전역 변수를 외부에서 정의할 수 있습니다. 각각 축의 좌표를 변경한 다음 ballX와 ballY의 값을 변경하여 공의 위치를 변경합니다. 아래와 같이 효과가 매우 이상합니다. :

Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1

그림을 그릴 때 이전 위치의 공을 지우지 않았습니다. 다시 그릴 때마다 아래 코드를 모두 지워야 합니다.

//现在按键盘上ASDW移动小球  
//说明：当我们按下一个键，实际上触发了一个onkeydown事件  
function test(){  
    var code = event.keyCode;  //键盘上字幕的ASCII码  
    switch(code){  
        case 87:  
            ballY--;  
            break;  
        case 68:  
            ballX++;  
            break;  
        case 83:  
            ballY++;  
            break;  
        case 65:  
            ballX--;  
            break;  
    }  
    //重新绘制  
    drawBall();  
}

로그인 후 복사

3. 탱크가 움직인다

탱크가 한 방향으로만 움직인다면 매우 쉽습니다. 위 코드에서 공 그리기를 다음과 같이 변경하면 됩니다. 탱크를 이동하기 전에 먼저 고려해야 할 사항은 탱크를 중심을 중심으로 모든 방향으로 회전시키는 방법입니다. 자, 위 사진을 올려서 분석해 보겠습니다.

Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1

자세한 계산 과정은 자세히 설명하지 않겠습니다. 모두가 수학에 능숙하다고 생각합니다. 위 그림 탱크를 회전시킨 후 그리는 방법은 다음과 같습니다.

rree

자, 이제 탱크가 왼쪽과 오른쪽을 향할 때 포신의 방향만 다르다는 것을 알 수 있습니다. 이때 위아래로 향할 때 총신의 방향이 다릅니다. 이때 4개로 나눌 수 있습니다. 각 방향은 두 가지 상황으로 나누어 각각의 작은 상황을 처리합니다. 동시에 코드는 OO 아이디어를 사용하여 캡슐화됩니다.

  
  
  
  
  
  
<body onkeydown="test()">  
小球上下左右移动

로그인 후 복사

Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1

위는 Xiaoqiang의 HTML5 모바일입니다. 개발경로(7 ) ——탱크배틀 게임1의 내용. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1