Heim > Artikel > Web-Frontend > Lernen Sie beim Spielen mit HTML5 (8)-Brick-Map-Gitterzeichen

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

黄舟Original: 2017-03-29 15:12:591998Durchsuche

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 alt="坦克大战的资源图片" src="http://images.cnblogs.com/cnblogs_com/myqiao/sprites.gif"/><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

Vorheriger Artikel：Spielend lernen mit HTML5 (7) – Der Beginn der Animation: fliegende ElfenNächster Artikel：Spielend lernen mit HTML5 (7) – Der Beginn der Animation: fliegende Elfen

In Verbindung stehende Artikel

Mehr sehen