Teilen Sie den Beispielcode, um HTML5 Star Trek selbst zu erstellen

Am dritten Tag des Lernens html5s Leinwand Ich finde, es ist immer noch gut. Es macht keinen Spaß und ich vergesse es im Handumdrehen, also werde ich ein kleines Spiel machen, das ich spielen kann, wenn ich Freizeit habe. Das Spiel sollte auf Leistung achten, und das gibt es! Einige Logiken, die berücksichtigt werden müssen, erfordern auch die Möglichkeit, vom Benutzer geändert zu werden, d >springen

und probieren Sie es aus

Erster Schritt, natürlich brauchen Sie eine Leinwand

Die Gesamtstruktur von JavaScript

wie folgt:

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

Definieren Sie zunächst einige Variablen vor

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

Dieses Spiel verwendet nur eine externe Ressource, nämlich das

Bild

Um die Adresse zu erhalten Besuchen Sie den GitHub-Standortlink am Ende dieses Artikels. Schauen wir uns zunächst die beiden Zeichenmethoden an.

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");

Das Bild des Flugzeugs muss gezeichnet werden onload()-Methode. Der aktuelle Feind ist immer noch ein Haufen orangefarbener, unbeweglicher Steine 🎜>

Warum die Variablen _keyA, _keyD, _keyW, _keyS in den beiden Ereignissen festgelegt sind und Das Zeichenereignis wird nicht direkt ausgelöst. Der Grund dafür ist, dass zwei Tasten gleichzeitig lange gedrückt werden , das Ereignis kann nicht gleichzeitig ausgelöst werden. Derjenige, der zuerst drückt, kann das Ereignis nur einmal auslösen. Einfach ausgedrückt: Wenn ich mich bewegen möchte Klicken Sie in die obere linke Ecke und drücken Sie gleichzeitig A und W. Vorausgesetzt, A ist etwas langsamer als W, auch wenn es sehr klein ist, besteht der Bewegungspfad des Flugzeugs darin, sich zuerst einen Schritt nach oben und dann ganz zu bewegen nach links. Das ist offensichtlich nicht das, was ich will. Ja, ich verwende 4 Variablen, um den Status der Tasten zu speichern. Wenn die Taste gedrückt wird, setze ihren Status auf 0 . Dann verwenden wir einen Timer, um den Status dieser Schlüssel kontinuierlich zu

aktualisieren

den Status des Flugzeugs wie folgt:

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();
        }
    }
}

ctx.clearRect() Räumen Sie das Flugzeug an seiner ursprünglichen Position zum Zeichnen auf, aber es gibt ein großes Problem. Wenn das Spiel einen Hintergrund hat und sich überschneidet, bedeutet das nicht, dass alles Dinge, die nicht zum Flugzeug gehören, werden auch gelöscht? Dumm, bedenken Sie dieses Problem vorerst nicht.

Durch die Beurteilung des Tastenstatus ist der Schrittabstand jeder Bewegung der voreingestellte Schritt und die Grenze wird gut gehandhabt:

Dann der Angriffstimer:

window.document.onkeydown = function(evt){
    evt = (evt) ? evt : window.event;
    switch(evt.keyCode) {
        case 65:  // A
            _keyA = 1;
            break;
        case 68:  // D
            _keyD = 1;
            break;
        case 87:  // W
            _keyW = 1;
            break;
        case 83:  // S
            _keyS = 1;
            break;
    }
}
window.document.onkeyup = function(evt){
    evt = (evt) ? evt : window.event;
    switch(evt.keyCode) {
        case 65:  // A
            _keyA = 0;
            break;
        case 68:  // D
            _keyD = 0;
            break;
        case 87:  // W
            _keyW = 0;
            break;
        case 83:  // S
            _keyS = 0;
            break;
    }
}

Alle 0,5 Sekunden wird eine Kanonenkugel abgefeuert, und jede Kanonenkugel ist zur einfachen Steuerung mit einem separaten Timer ausgestattet Methode, zuerst zu wischen und dann für die Bewegung der Kanonenkugel zu malen, da die Bewegung der Kanonenkugel auch einen Schrittabstand hat, sog. Der Granatendurchdringungseffekt besteht lediglich darin, eine gerade Linie mit der gleichen Farbe wie die Hintergrundfarbe zu zeichnen. Versuchen Sie, den Schritt der Kanonenkugel zu ändern, um die Geschwindigkeit der Kanonenkugel sowie die Größe der Kanonenkugel anzupassen.

Dies ist der letzte Schritt. Es gibt nichts mehr zu tun. Wir müssen die Feinde und Flugzeuge von Anfang an zeichnen.

var planeMoveTimer = window.setInterval(function(){
    if(_keyA||_keyD||_keyW||_keyS){
        ctx.clearRect(planeX, planeY, w, h);
        _keyA && (planeX-=step);
        _keyD && (planeX+=step);
        _keyW && (planeY-=step);
        _keyS && (planeY+=step);
        planeX>=0 || (planeX=0);
        planeX<=(cw-w) || (planeX=cw-w);
        planeY>=0 || (planeY=0);
        planeY<=(ch-h) || (planeY=ch-h);
        drawPlane(planeX, planeY);
    }
}, 10);

Fertig! Ich möchte immer noch die Spielbarkeit weiter optimieren und verbessern, aber ich habe wirklich keine Zeit dafür. Es gibt noch viele andere Dinge zu lernen, also wird dieses Spiel vorerst so sein! Ist es nicht ganz einfach! Haha, es ist peinlich, der Titel ist zu verlockend, ich kann nicht anders!

Das obige ist der detaillierte Inhalt vonTeilen Sie den Beispielcode, um HTML5 Star Trek selbst zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!