Lernen Sie beim Spielen mit HTML5 (8)-Brick-Map-Gitterzeichen-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

Lernen Sie beim Spielen mit HTML5 (8)-Brick-Map-Gitterzeichen

黄舟

Mar 29, 2017 pm 03:12 PM

Ich dachte ursprünglich, dass in kleinen Spielen wie Tank Battle und Super Mario die Brick-Charaktere im Startbildschirm statische Bilder sind. Jetzt weiß ich, dass sie alle mit dynamischen Texturen gepostet werden Erstellen Sie einen Startbildschirm für eine Panzerschlacht und studieren Sie nebenbei die Punktmatrix-Zeichen.

1. Bitmap-Zeichen

Texturen unterscheiden sich eigentlich nicht wesentlich von Bitmap-Zeichen. Der einzige Unterschied besteht darin, dass die Punkte durch kleine Bilder ersetzt werden Das ist alles, hier ist ein kleines Programm für Punktmatrixzeichen. Sie können chinesische Zeichen oder englische Buchstaben eingeben, und dann analysiert und generiert das Programm die Punktmatrix des Textes und zeigt ihn dann an. Die Idee zum Analysieren und Generieren einer Punktmatrix lautet wie folgt:

1. Verwenden Sie die Methode ctx.fillText, um den Text auf eine Speicherleinwand zu zeichnen weiß.

2. Lesen Sie jedes Pixel der Leinwand und ersetzen Sie es durch das entsprechende Symbol, um eine Zeichenfolge zu bilden

Hier stellt sich die Frage, wie groß der Speicher sein sollte Leinwand sein? Meine Lösung besteht darin, es so groß wie möglich zu machen, um sicherzustellen, dass es unabhängig von der Schriftart nicht außerhalb der Grenzen liegt.

Während der Pixelanalyse können gleichzeitig Breite und Höhe des Textes erfasst werden. Nach Abschluss der Analyse wird erneut eine neue Leinwand erstellt, die diesmal besser gleich sein kann auf die Größe des Textes.

Ein weiteres Problem besteht darin, dass die Schrift etwas verzerrt ist. Das menschliche Auge kann die kleine Schrift nicht klar erkennen und das Programm kann sie auch nicht klar analysieren .

Kleine Schriftarten müssen daher speziell entworfen werden, wie die Schriftarten für Panzerschlachten.

2. Brick-Zeichen

Sobald Sie das Prinzip der Punkte kennen, ist es sehr einfach, Brick-Zeichen zu implementieren Auf dem Bild sind die Steine von innen aufgenommen:

Sie befinden sich in der Mitte des Bildes und auf der unteren rechten Seite des Panzerkampfspiels, das wir gespielt haben, Die Karte wird aus einem so einfachen Bild generiert, dass ich wirklich nicht damit gerechnet habe.

Das Folgende sind die Punktmatrixdaten der Brick-Charaktere. Es gibt hier nur einen Teil, der nur den Startbildschirm des Spiels darstellt: BATTLE CITY und den Endbildschirm des Spiels

3. Code
Weil die Zeit knapp ist, ist der Code hässlich. Der Code verwendet ein jsgame.js. Dies ist meine eigene einfache Implementierung der HTML5-2D-Funktion. Verpackung, die einen Teil des Schnittstellenstils von Pygame nachahmt.
Nach der Kapselung ist ersichtlich, dass der zeichnungsbezogene Code sehr einfach ist und der Rest hauptsächlich aus Betriebslogikcodes besteht.

代码



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" language="javascript" src="jsgame.js"></script>

    </head>

    <body>

    <canvas id="html5_08_1" width="180" height="180" style=" background-color: black">

        你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

    </canvas>

    文本：<input type="text" id="text" value="博客园" />

    字号：<input type="text" id="size" value="16"  size="2" />

    字体：<select id="fontName">

        <option>宋体</option>

        <option>楷体_GB2312</option>

        <option>隶书</option>

        <option>Kristen ITC</option>

        <option>Harrington</option>

    </select>

    <input type="checkbox" id="ckBold" />黑体

    <input type="checkbox" id="ckitalic" />斜体

    <input type="button" id="btnStart" disabled value="处理" onclick="draw_pixel_text()" />

    <br/><textarea wrap="off" rows="20" cols="120" id="txtResult" ></textarea>





    <p/>



    <img src="/static/imghwm/default1.png"  data-src="http://images.cnblogs.com/cnblogs_com/myqiao/sprites.gif"  class="lazy"  alt="坦克大战的资源图片" /><br/>

    <canvas id="html5_08_2" width="480" height="200" style=" background-color: black">

        你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

    </canvas><br/>

    <input type="button" id="btn_draw"  value="绘制砖块字" onclick="draw_brick_text()" />





    <script type="text/javascript">

        draw_pixel_text();

        function draw_pixel_text(){

            var display= Display.attach(document.getElementById("html5_08_1"));

            document.getElementById("btnStart").setAttribute("disabled","true");



            document.getElementById("txtResult").value="";

            display.clear();



            var text=document.getElementById("text").value

            var size=document.getElementById("size").value



            var font=new Font();

            font.bold=document.getElementById("ckBold").checked;

            font.italic=document.getElementById("ckitalic").checked;

            font.name=document.getElementById("fontName").value;



            var sur=font.render(text,size);

            display.draw(sur,10,10);



            var str=&#39;&#39;;

            for(var y=0;y<sur.height;y++){

                for(var x=0;x<sur.width;x++){

                    if((sur.get_pixel(x,y)[0]<255))

                        str=str+&#39;龍&#39;;

                    else

                        str=str+&#39;　&#39;;

                }

                str=str+&#39;\n&#39;;

            }

            document.getElementById("txtResult").value=str;

            document.getElementById("btnStart").removeAttribute("disabled");

        }



        ///======================================================================

        ///下面的代码是绘制砖块字



        //截断字符，每 7 个一组

        function chunk(str,len){

            var count=0;

            var list=[];

            var temp=[];

            var times=0;

            for(var i=0;i<str.length;i++){

                if(count<len){

                    temp.push(str[i])

                    count++;

                }else{

                    count=0;

                    list[times]=temp;

                    temp=[];

                    temp.push(str[i])

                    count++;

                    times++;

                }

            }

            list[times]=temp;

            return list;

        }



        //字母和对应的点阵数据

        var keys="abcegilmortvy";

        var values=["0011100011011011000111100011111111111000111100011",

            "1111110110001111000111111110110001111000111111110",

            "0011110011001111000001100000110000001100110011110",

            "1111110110000011000001111100110000011000001111110",

            "0011111011000011000001100111110001101100110011111",

            "1111110001100000110000011000001100000110001111110",

            "1100000110000011000001100000110000011000001111110",

            "1100011111011111111111111111110101111000111100011",

            "0111110110001111000111100011110001111000110111110",

            "1111110110001111000111100111111110011011101100111",

            "1111110001100000110000011000001100000110000011000",

            "1100011110001111000111110111011111000111000001000",

            "1100110110011011001100111100001100000110000011000"];





        var game2=new JsGame();



        //载入图片

        var img=new Image();

        img.src="data:image/gif;base64,......";//省略四个字节

        var bricks=[];

        img.onload=function(){

            //图片载入后，将砖块的部分从中间截取出来，并分为四小部分

            var temp= new Surface(img).subsurface(56,64,8,8)

            bricks[0]=temp.subsurface(0,0,4,4)

            bricks[1]=temp.subsurface(4,0,4,4)

            bricks[2]=temp.subsurface(0,4,4,4)

            bricks[3]=temp.subsurface(4,4,4,4)

        }



        //检测资源是否装载完毕

        game2.is_ready(function(){

            return img.complete

        });



        //开始绘制

        function draw_brick_text(){

            //如果正在绘制，则停止

            game2.stop()

            //绑定画布

            var display= new Display.attach(document.getElementById("html5_08_2"));

            //清空画布

            display.clear();



            //要绘制的字符串

            var text=&#39;BATTLECITY&#39;.toLowerCase();



            //将每个字符的点阵数据截成 7 段，即每个字符都是 7*7 的点阵，方便绘制

            var alph_bits=[];

            for(var i=0;i<text.length;i++)

                for(var index=0;index<keys.length;index++)

                    if(keys[index]==text[i])

                        alph_bits.push(chunk(values[index],7));



            var which=0;

            var p_row=0;

            var p_col=0;

            var surface= new Surface(28,28);

            

            game2.loop(function(){

                if(alph_bits[which][p_row][p_col]==1){

                    var temp=null;

                    if((p_row%2)==0){

                        if((p_col%2)==0)

                            temp=bricks[0];

                        else

                            temp=bricks[1];

                    }

                    else{

                        if((p_col%2)==0)

                            temp=bricks[2];

                        else

                            temp=bricks[3];

                    }

                    surface.draw(temp,p_col*4,p_row*4)

                    display.save()

                    display.scale(2,2)

                    if(which<6)

                        display.draw(temp,which*32+p_col*4+20,p_row*4+20);

                    else

                        display.draw(temp,(which-5)*32+p_col*4+20,p_row*4+56);

                    display.restore()

                }

                p_col++

                if((p_col%7)==0){

                    p_col=0

                    p_row++

                    if((p_row%7)==0){

                        p_row=0;

                        p_col=0;

                        which++;

                        if(which==text.length) game2.stop()

                    }

                }

            })

        }

    </script>

</body>

</html>

Das obige ist der detaillierte Inhalt vonLernen Sie beim Spielen mit HTML5 (8)-Brick-Map-Gitterzeichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

H5: Neue Funktionen und Funktionen für die WebentwicklungApr 29, 2025 am 12:07 AM

H5 bringt eine Reihe neuer Funktionen und Fähigkeiten mit sich und verbessert die Interaktivität und Entwicklungseffizienz von Webseiten erheblich. 1. Semantische Tags wie Verbesserung der SEO. 2. Multimedia Support vereinfacht Audio- und Video -Wiedergabe durch und Tags. 3. Canvas Drawing bietet dynamische Grafikzeichnungswerkzeuge. 4. Lokaler Speicher vereinfacht die Datenspeicherung durch LocalStorage und SessionStorage. 5. Die Geolocation-API erleichtert die Entwicklung standortbasierter Dienste.

H5: Schlüsselverbesserungen bei HTML5Apr 28, 2025 am 12:26 AM

HTML5 bringt fünf wichtige Verbesserungen mit sich: 1. Semantische Tags verbessern die Code -Klarheit und SEO -Effekte; 2. Multimedia Support vereinfacht Video- und Audio -Einbettung; 3. Form -Verbesserung vereinfacht die Überprüfung; 4. Offline und lokaler Speicher verbessert die Benutzererfahrung. 5. Leinwand- und Grafikfunktionen verbessern die Visualisierung von Webseiten.

HTML5: Der Standard und seine Auswirkungen auf die WebentwicklungApr 27, 2025 am 12:12 AM

Die Kernmerkmale von HTML5 sind semantische Tags, Multimedia -Support, Offline -Speicher und lokaler Speicher sowie Form. 1. Semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Vereinfachen Sie die Multimedia -Einbettung mit Etiketten. 3. Offline-Speicher und lokaler Speicher wie ApplicationCache und LocalStorage unterstützen den netzwerkfreien Betrieb und die Datenspeicherung. 4. Formularverbesserung führt neue Eingangstypen und Überprüfungseigenschaften ein, um die Verarbeitung und Überprüfung zu vereinfachen.

Beispiele für H5 -Code: Praktische Anwendungen und TutorialsApr 25, 2025 am 12:10 AM

H5 bietet eine Vielzahl neuer Funktionen und Funktionen und verbessert die Fähigkeiten der Front-End-Entwicklung erheblich. 1. Multimedia-Unterstützung: Einbetten von Medien und Elementen, keine Plug-Ins sind erforderlich. 2. Leinwand: Verwenden Sie Elemente, um 2D -Grafiken und -Animationen dynamisch zu rendern. 3. Lokaler Speicher: Implementieren Sie die persistente Datenspeicherung über LocalStorage und SessionStorage, um die Benutzererfahrung zu verbessern.

Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AM

H5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.

Die Bausteine des H5 -Codes: Schlüsselelemente und deren ZweckApr 23, 2025 am 12:09 AM

Zu den wichtigsten Elementen von HTML5 gehören ,,,,,, usw., mit denen moderne Webseiten erstellt werden. 1. Definieren Sie den Kopfinhalt, 2. Zum Navigieren durch den Link, 3. darstellen den Inhalt unabhängiger Artikel, 4. organisieren Sie den Seiteninhalt, 5. Zeigen Sie den Seitenleisteninhalt an, 6. Definieren Sie die Fußzeile. Diese Elemente verbessern die Struktur und Funktionalität der Webseite.

HTML5 und H5: Verständnis der gemeinsamen VerwendungApr 22, 2025 am 12:01 AM

Es gibt keinen Unterschied zwischen HTML5 und H5, der Abkürzung von HTML5. 1.HTML5 ist die fünfte Version von HTML, die die Multimedia- und interaktiven Funktionen von Webseiten verbessert. 2.H5 wird häufig verwendet, um auf HTML5-basierte mobile Webseiten oder -anwendungen zu verweisen, und eignet sich für verschiedene mobile Geräte.

HTML5: Die Bausteine des modernen Webs (H5)Apr 21, 2025 am 12:05 AM

HTML5 ist die neueste Version der Hypertext -Markup -Sprache, die von W3C standardisiert wurde. HTML5 führt neue semantische Tags, Multimedia -Support- und Form -Verbesserungen ein, verbessert die Webstruktur, die Benutzererfahrung und die SEO -Effekte. HTML5 führt neue semantische Tags vor, wie z. HTML5 unterstützt Multimedia-Elemente und es sind keine Plug-Ins von Drittanbietern erforderlich, wodurch die Benutzererfahrung und die Ladegeschwindigkeit verbessert werden. HTML5 verbessert die Formfunktionen und führt neue Eingangstypen wie usw. ein, die die Effizienz der Benutzererfahrung und der Form von Formularverifizierung verbessert.

See all articles