JavaScript Canvas Tetris-Spiel

JavaScript Canvas Tetris-Spiel

Tetris ist ein sehr klassisches kleines Spiel, und ich habe auch versucht, es zu schreiben. Aber ich möchte es mit Code implementieren, der so prägnant und logisch wie möglich ist. Es ist nicht zu viel Code erforderlich, um das Modell der fallenden Blöcke oder die X- und Y-Position jedes fallenden Blocks aufzuzeichnen. Ich habe über die folgenden Ideen nachgedacht und dann festgestellt, dass es sehr prägnant ist, so zu schreiben.

Es gibt 7 Grundmodelle von Tetris:

Es gibt viele Möglichkeiten, diese Modelle aufzuzeichnen, z. B. das Aufzeichnen ihrer relativen Positionen, das Aufzeichnen der x- und y-Koordinaten jedes Blocks usw. Ich hatte die Idee, diese 7 Modelle aufzuzeichnen. Sie ist sehr prägnant und einfach zu verwenden, wenn man Linksverschiebungs-, Rechtsverschiebungs- und Rotationsfunktionen schreibt. Das folgende Array zeichnet diese Modelle auf.

var cubeArr=[[6,7,12,13],[7,8,11,12],[6,7,11,12],[7,12,17,8],[7,12,16,17],[7,12,17,22],[7,11,12,13]];

Ideen:

Eine 5*5-Tabelle, beginnend bei 0 nummeriert. Der Punkt mit der Nummer 12 ist der Mittelpunkt. Jedes Modell wird mit seiner Bezeichnung aufgezeichnet, das erste Modell ist beispielsweise [6,7,12,13].

Wenn man die obere linke Ecke der Tabelle als Referenzpunkt nimmt, gibt es folgende Regel: Angenommen, die Zahl in der Tabelle ist ein Wert, dann ist der Rest des Werts geteilt durch 5 der X-Versatz des Punkts relativ zum Referenzpunkt und der ganzzahlige Teil des Werts geteilt durch 5 ist der Y-Versatz des Punkts relativ zum Referenzpunkt. Es ist auch sehr einfach zu drehen. Durch Drehen um die Mitte 12 können Sie auch einige Muster finden.

var movex=cubeNow[i]%5;
var movey=Math.floor(cubeNow[i]/5);

Zeichnen Sie ein Modell mit einer Schleife

Funktion drawEle(Farbe)
    {
        ctx.fillStyle=Farbe;
        ctx.strokeStyle='#fff';
        für (var i=0;i<4;i++)
        {
            var movex=downInfor.cubeNow[i]%5;
            var movey=Math.floor(downInfor.cubeNow[i]/5);
            ctx.fillRect(WürfelW*(downInfor.point[0]+movex),WürfelW*(downInfor.point[1]+movey),WürfelW,WürfelW);
            ctx.strokeRect(WürfelW*(downInfor.point[0]+movex),WürfelW*(downInfor.point[1]+movey),WürfelW,WürfelW)
        }
}

Drehen Sie das Modell:

Die Beziehung zwischen der aktuellen Position und der nächsten Rotationsposition kann durch dieses Array einfach realisiert werden, um das Modell zu drehen. Wenn die Position beispielsweise die Nummer 0 hat und wir im Uhrzeigersinn rotieren, ist die nächste Position 4. Die Position ist mit 6 nummeriert, die nächste Position ist 8. Das folgende Array kann von der vorherigen Position aus die nächste Position finden.

var rotateArr=[4,9,14,19,24,3,8,13,18,23,2,7,12,17,22,1,6,11,16,21,0,5,10,15,20];

Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel>Tetris</Titel>
</Kopf>
<Text>
<div>
    <div Stil="Anzeige:Inline-Block">
     <canvas id="kann" height="480" width="300" style="border:3px solid black;"></canvas>
    </div>
    <div id="info" style="display:inline-block;height:600px;vertical-align: top;font-family: tmb; font-size:14pt; color:green;">
    <span>Punktzahl:</span><span id="score">0</span>
     </div>
</div>
<Skripttyp="text/javascript">
    var WürfelW=20;
    var cubeArr=[[6,7,12,13],[7,8,11,12],[6,7,11,12],[7,12,17,8],[7,12,16,17],[7,12,17,22],[7,11,12,13]];
    var colorArr=['#ffc0cb','#dda0dd','#9370db','#6495ed','#fa8072','#ff8c00','#008000'];
    var rotateArr=[4,9,14,19,24,3,8,13,18,23,2,7,12,17,22,1,6,11,16,21,0,5,10,15,20];
    var canvas = document.getElementById('kann');
    var ctx = canvas.getContext('2d');
    var Punktzahl = document.getElementById('Punktzahl');
    var canWidth=Leinwand.Breite;
    var canHeight=Leinwand.Höhe;
    var downInfor={}, staticCube=[];
    var meininter;
    window.initialize = function() //initialisieren {
        Linie zeichnen();
        für (var i = 0; i < (canWidth / cubeW); i++)
        {
            statischer Würfel[i]=[];
            für (var j = 0; j < (canHeight / cubeW); j++)
            {
                statischer Würfel[i][j]=0;
            }
        }
        : InitCube();
        myinter=setInterval('movedown()',200); //Der erste Parameter sollte in Anführungszeichen stehen}
    Funktion drawline()
    {
        ctx.Linienbreite=1;
        ctx.strokeStyle='#ddd';
        für (var i = 0; i < (canWidth / cubeW); i++)
        {
          ctx.moveTo(WürfelW*i,0);
          ctx.lineTo(WürfelW*i,kannHöhe);
        }
        ctx.stroke();
        für (var j = 0; j < (canHeight / cubeW); j++)
        {
            ctx.moveTo(0,WürfelW*j);
            ctx.lineTo(kannHöhe,WürfelB*j);
        }
        ctx.stroke();
    }
    Funktion initCube()
    {
           var index=Math.floor(Math.random()*cubeArr.length);//zufällig generieren downInfor.cubeNow=cubeArr[index].concat();
            downInfor.index=Index;
            downInfor.prepoint=[5,-1];
            downInfor.punkt=[5,-1];
            zeichneEle(colorArr[downInfor.index]);
    }
    Funktion nach unten verschieben ()
    {
        //Beurteilen, ob die nächste Position sinnvoll istvar length,isempty=true,px,py,movex,movey,max=0;
        für (var i=0;i<4;i++)
        {
            wenn(max<downInfor.cubeNow[i])
                max=downInfor.cubeNow[i];
        }
        Länge=Math.ceil(max/5);
        für (var i=0;i<4;i++)
        {
            px=downInfor.Punkt[0]+downInfor.CubeNow[i]%5;
            py=downInfor.point[1]+1+Math.floor(downInfor.cubeNow[i]/5);
            wenn(statischerWürfel[px][py]==1)
            {
                istleer=falsch;
                brechen;
            }
        }
        wenn ((downInfor.point[1]+length)<(canHeight/cubeW)&&isempty)
        {
            downInfor.prepoint=downInfor.point.concat(); //Beachten Sie den Referenztyp downInfor.point[1]=downInfor.point[1]+1;
            löschenEle();
            zeichneEle(colorArr[downInfor.index]);
        }
        sonst //Wenn die Bewegung nicht möglich ist {
            für (var i=0;i<4;i++)
            {
                px=downInfor.Punkt[0]+downInfor.CubeNow[i]%5;
                py=downInfor.point[1]+Math.floor(downInfor.cubeNow[i]/5);
                statischer Würfel[px][py]=1;
            }
            zeichneEle('#555');
            checkfullLine();
        }
 
    }
    Funktion moveLeft()
    {
        var leftroom=4, ist leer=true, px, py, movex, movey;
        für (var i=0;i<4;i++)
        {
            px=downInfor.Punkt[0]-1+downInfor.CubeNow[i]%5;
            py=downInfor.point[1]+Math.floor(downInfor.cubeNow[i]/5);
            wenn((downInfor.cubeNow[i]%5)<linker Raum)
                linker Raum=untenInfor.cubeNow[i]%5;
            wenn(statischerWürfel[px][py]==1)
            {
                istleer=falsch;
                brechen;
            }
        }
        wenn((downInfor.point[0]+leftroom)>=0&&isempty)
        {
            downInfor.prepoint=downInfor.point.concat();
            downInfor.Punkt[0]=downInfor.Punkt[0]-1;
            löschenEle();
            zeichneEle(colorArr[downInfor.index]);
        }
    }
    Funktion moveRight()
    {
        var rechter Raum = 0, ist leer = wahr, px, py, movex, movey;
        für (var i=0;i<4;i++)
        {
            px=downInfor.Punkt[0]+1+downInfor.CubeNow[i]%5;
            py=downInfor.point[1]+Math.floor(downInfor.cubeNow[i]/5);
            wenn((downInfor.cubeNow[i]%5)>rechtes Zimmer)
                rechter Raum=untenInfor.cubeNow[i]%5;
            wenn(statischerWürfel[px][py]==1)
            {
                istleer=falsch;
                brechen;
            }
        }
        wenn ((downInfor.point[0]+rightroom+1)<(canWidth/cubeW)&&isempty)
        {
            downInfor.prepoint=downInfor.point.concat();
            downInfor.Punkt[0]=downInfor.Punkt[0]+1;
            löschenEle();
            zeichneEle(colorArr[downInfor.index]);
        }
    }
    Funktion moverotate()//Rotation verarbeiten {
        var isempty=true,px,py,movex,movey, tempRotate=[0,0,0,0];
        für (var i=0;i<4;i++)
        {
            tempRotate[i]=rotateArr[downInfor.cubeNow[i]];
        }
        für (var i=0;i<4;i++)
        {
            px=downInfor.point[0]+tempRotate[i]%3;
            py=downInfor.point[1]+Math.floor(tempRotate[i]/3);
            wenn(statischerWürfel[px][py]==1)
            {
                istleer=falsch;
                brechen;
            }
        }
        wenn(leer ist)
        {
            downInfor.prepoint=downInfor.point.concat();
            löschenEle();
            downInfor.cubeNow=tempRotate.concat();
            zeichneEle(colorArr[downInfor.index]);
        }
 
    }
    Funktion drawEle(Farbe)
    {
        ctx.fillStyle=Farbe;
        ctx.strokeStyle='#fff';
        für (var i=0;i<4;i++)
        {
            var movex=downInfor.cubeNow[i]%5;
            var movey=Math.floor(downInfor.cubeNow[i]/5);
            ctx.fillRect(WürfelW*(downInfor.point[0]+movex),WürfelW*(downInfor.point[1]+movey),WürfelW,WürfelW);
            ctx.strokeRect(WürfelW*(downInfor.point[0]+movex),WürfelW*(downInfor.point[1]+movey),WürfelW,WürfelW)
        }
    }
    Funktion clearEle()
    {
        ctx.Linienbreite=1;
        ctx.strokeStyle='#ddd';
        für (var i=0;i<4;i++)
        {
            var movex=downInfor.cubeNow[i]%5;
            var movey=Math.floor(downInfor.cubeNow[i]/5);
            ctx.clearRect(WürfelW*(downInfor.prepoint[0]+movex),WürfelW*(downInfor.prepoint[1]+movey),WürfelW,WürfelW);
            ctx.strokeRect(WürfelW*(downInfor.prepoint[0]+movex),WürfelW*(downInfor.prepoint[1]+movey),WürfelW,WürfelW)
        }
    }
    Funktion checkfullLine()//Überprüfen, ob eine vollständige Zeile vorhanden ist {
        var istFullLine=true,index=0,changeScore=false;
        für (var i = 0; i < canWidth / cubeW; i++)
        {
            wenn(staticCube[i][0]==1)
            {
                Warnung ('Spiel vorbei!');
                ClearInterval(meinIntervall);
                zurückkehren;
            }
        }
        für (var i=canHeight/cubeW-1;i>=0;i--)
        {
            istFullLine=true;
            für (var j = 0; j < (canWidth / cubeW); j++)
            {
                wenn(staticCube[j][i]==0)
                {
                    istFullLine=false;
                }
            }
            if(isFullLine)//Einen Punkt hinzufügen {
                Punktzahl.innerHTML=parseInt(Punktzahl.innerText)+1;
                ändereScore=wahr;
                für(var s=i;s>=0;s--) {
                    für (var j = 0; j < (canWidth / cubeW); j++) {
                        (s- 1) >= 0 ? staticCube[j][s] = staticCube[j][s - 1] : staticCube[j][s] = 0;
                    }
                }
            }
        }
        wenn(Wertung ändern)
        {
            ctx.clearRect(0,0,Dosenbreite,Dosenhöhe);
            Linie zeichnen();
            ctx.fillStyle='555';
            ctx.strokeStyle='#fff';
            für (var i = 0; i < (canWidth / cubeW); i++)
            {
                für (var j = 0; j < (canHeight / cubeW); j++)
                {
                    wenn(statischerWürfel[i][j]==1)
                    {
                        ctx.fillRect(WürfelW*i,WürfelW*j,WürfelW,WürfelW);
                        ctx.strokeRect(WürfelW*i,WürfelW*j,WürfelW,WürfelW);
                    }
                }
            }
        }
        : InitCube();
    }
    window.onkeydown=Funktion (evt)
    {
       Schalter(evt.Schlüsselcode)
       {
           Fall 37: //linksbewegenLinks();
               brechen;
           Fall 38: //moverotate();
               brechen;
           Fall 39: //rechts moveRight();
               brechen;
           Fall 40: //nach unten verschieben();
               brechen;
       }
    }
</Skript>
</body>
</html>

Wirkung:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Ideen und Methoden zur Implementierung des Tetris-Spiels in Javascript
  • JS Tetris, inklusive komplettem Designkonzept
  • JS Tetris perfekt kommentierter Code
  • JAVASCRIPT-Code zum Schreiben der Tetris-Webversion
  • 60 Zeilen JS-Code zur Implementierung von Tetris
  • Verwenden Sie JS-Code, um das Tetris-Spiel zu implementieren
  • JavaScript implementiert ein einfaches vollständiges Tetris-Beispiel
  • Analyse und Quellcode-Sharing des in JavaScript implementierten Tetris-Spiels
  • Ein vollständiges Beispiel eines Tetris-Spiels, implementiert mit JS+Canvas
  • js html5 css Tetris-Spiel erneut auftauchen

<<:  Implementierungsschritte zum Erstellen einer MySQL Master-Slave-Replikationsumgebung basierend auf Docker

>>:  Detaillierte Schritte zum Upgrade von mysql8.0.11 auf mysql8.0.17 unter Win2008

Artikel empfehlen

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Routenplanung vue-router4 behält den Großteil der...

Zwei Möglichkeiten zur Installation des Linux-Subsystems in Windows 10 (mit Bildern und Text)

Windows 10 unterstützt jetzt das Linux-Subsystem....

Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst

Konfigurieren Sie ein Implementierungsbeispiel fü...

Ein magischer MySQL-Deadlock-Troubleshooting-Datensatz

Hintergrund Apropos MySQL-Deadlock: Ich habe bere...

Detailliertes Tutorial zum Ersetzen von mysql8.0.17 in Windows 10

In diesem Artikel werden die spezifischen Schritt...

Gedanken zu copy_{to, from}_user() im Linux-Kernel

Inhaltsverzeichnis 1. Was ist copy_{to,from}_user...

Detaillierte Erklärung der Lösung zur Migration von Antd+React-Projekten nach Vite

Antd+React+Webpack ist häufig die Standardkombina...

Implementierung eines geplanten MySQL-Sicherungsskripts unter Windows

Wenn Sie auf einem Windows-Server regelmäßig Date...

Django-Online-Bereitstellungsmethode von Apache

Umfeld: 1. Windows Server 2016 Datacenter 64-Bit ...

Detaillierte Erläuterung des Implementierungsbeispiels für die Gruppenrangfolge im MySQL-Tutorial

Inhaltsverzeichnis 1. Datenquelle 2. Gesamtrangfo...

JSON (JavaScript Object Notation) in einem Artikel verstehen

Inhaltsverzeichnis JSON wird angezeigt JSON-Struk...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17

In diesem Artikel wird die Installations- und Kon...

URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben

Inhaltsverzeichnis Voraussetzungen Einrichten ein...

Detailliertes Tutorial zur Installation von Mysql5.7.19 auf Centos7 unter Linux

1. MySQL herunterladen URL: https://dev.mysql.com...

Welche Schleife ist in JavaScript die schnellste?

Wenn wir wissen, welche For-Schleife oder welcher...