나만의 HTML5 Star Trek을 만들기 위한 샘플 코드 공유

학습 3일째 html5의 캔버스 , 그래도 좋은 것 같아요. 재미도 없고, 눈 깜짝할 사이에 잊어버리게 되니까, 시간 날 때 할 수 있는 작은 게임을 만들어 볼까 합니다. 게임은 성능에 주의를 기울여야 하고, 그런 것도 있어요! 사용자 수정 가능성, 즉 사용자 구성도 필요하다고 생각합니다. 간단하지만 흥미로운 여정을 시작하겠습니다.

효과를 먼저 확인하려면 점프 한 번 해보세요

첫 번째! 물론 캔버스가 필요합니다

1 <canvas id="canvas" width="300" height="400">你的浏览器不支持Canvas</canvas>

JavaScript의 전체 구조는 다음과 같습니다.

두 가지 그리기 방법을 먼저 살펴보세요

아아아아

항공기 그림은 onload() 메서드로 그려야 합니다. 움직이지 않는 주황색 벽돌을 캔버스 상단에 그립니다. 그런 다음 두 개의 키보드

이벤트

를 살펴보세요.

var定义一些变量
planeMoveTimer飞机移动监听/计时器
attackEnemyTimer发射炮弹计时器
onkeydown监听
onkeyup监听
drawPlane画飞机
drawEnemy画敌人

변수가 _keyA, _keyD인 이유는 다음과 같습니다. , _keyW, _keyS 는 그리기 이벤트를 직접 발생시키는 것이 아니라 두 개의 이벤트에 설정해야 하는데, 그 이유는 —— 두 개의 키를 동시에 길게 누르면 동시에 먼저 누르는 사람이 이벤트를 발생시킬 수 없기 때문입니다. 나중에 누르는 사람만 해당 키를 누르고 있는 동안 항상 이벤트를 실행할 수 있습니다. 쉽게 말하면 왼쪽 상단으로 이동하려면 A와 W를 동시에 누르세요. A가 W보다 조금 느리다고 가정하면, 비록 그것이 매우 작더라도, 항공기의 이동 경로는 먼저 한 단계 위로 이동한 다음 완전히 왼쪽으로 이동하는 것입니다. 이것은 분명히 제가 원하는 것이 아닙니다. 4개의 변수를 사용하여 키의 상태를 저장합니다. 키를 누르면 상태를 1로 설정합니다. 키를 누르면 상태를 0으로 설정합니다. 그런 다음 타이머를 사용하여 이 키의 상태를 지속적으로 읽습니다.

항공기 상태를 항공기 이동 타이머는 다음과 같습니다.

var _keyA = _keyD = _keyW = _keyS = 0,  // 存储按键状态

    step = 8,                          // 飞机移动速率
    w = 34, h = 44,                  // 飞机实际大小
    planeX = 133, planeY = 356,      // 飞机目前位置
    planeSrc = "feiji.png",          // 飞机素材位置
    imgW = 177, imgH = 220,          // 飞机源图尺寸

    cw = 300, ch = 400,  // 画布大小
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

ctx.clearRect()는 항공기를 삭제하는 데 사용됩니다. 기체의 다음 상태를 그리기 위한 준비로 원래 위치에 있지만 매우 큰 문제는 전체 블록을 직접 클리어한다는 점입니다. 게임에 배경이 있고 겹치는 부분이 있다면 그렇지 않은 것들은 아닐까요? 비행기도 클리어해야 겠죠? 무식한 점 양해부탁드리며 지금은 이 문제를 고려하지 않겠습니다. 버튼 상태를 판단하면 각 동작의 스텝 거리가 미리 설정된 스텝이고 경계는 다음과 같습니다.

그런 다음 공격 타이머:

function drawPlane(x, y) {
    var img = new Image();
    img.src = planeSrc;  // 飞机源图地址
    img.onload = function() {
        ctx.drawImage(img, 0, 0, imgW, imgH, planeX, planeY, w, h);
    }
}
function drawEnemy(){
    for(var a=0;a<cw;a+=10) {
        for(var b=0;b<ch-300;b+=10) {
            ctx.beginPath();
            ctx.fillStyle = "orange";
            ctx.strokeStyle = "black";
            ctx.strokeRect(a, b, 10 ,10);
            ctx.fillRect(a, b, 10, 10);
            ctx.closePath();
        }
    }
}

0.5초마다 하나씩 방출합니다. 포탄의 경우 각 포탄에 별도의 타이머가 설정되어 있어 쉽게 제어할 수 있습니다. 그런 다음 포탄의 움직임에도 단계가 있으므로 소위 포탄의 관통 효과는 배경색과 동일한 색상으로 선을 직접 그리는 것입니다. 포탄 속도와 포탄 크기를 조정하려면 포탄 보폭을 수정해 보세요.

이제 마지막 단계입니다. 이제 더 이상 할 일이 없습니다. 처음부터 적과 비행기를 그려야 합니다!

아아아아

됐어요! 계속해서 최적화하고 플레이성을 높이고 싶은데, 아직은 배울 시간이 없어서 지금은 이 게임이 될 것 같아요! 매우 간단하지 않습니까! 하하, 부끄러워요, 제목이 너무 유혹적이어서 어쩔 수가 없어요!

위 내용은 나만의 HTML5 Star Trek을 만들기 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!