Apprenez en jouant avec les caractères de treillis de carte HTML5 (8) -Brick-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

Apprenez en jouant avec les caractères de treillis de carte HTML5 (8) -Brick

黄舟

Mar 29, 2017 pm 03:12 PM

Au départ, je pensais que dans les petits jeux tels que Tank Battle et Super Mario, les personnages en brique dans l'écran initial étaient des images statiques. Maintenant, je sais qu'ils sont tous affichés avec des textures dynamiques. J'utiliserai la fonction de dessin de HTML5 ci-dessous. . Créez un écran de départ pour une bataille de chars et étudiez d'ailleurs les personnages matriciels.

1. Caractères bitmap

Les textures ne sont en fait pas très différentes des caractères bitmap. La seule différence est que les points sont remplacés par de petites images. . Voilà, voici un petit programme pour les caractères matriciels. Vous pouvez saisir des caractères chinois ou des lettres anglaises, puis le programme analysera et générera la matrice de points du texte, puis l'affichera. Quant à la façon d'analyser et de générer une matrice de points, l'idée est la suivante :

1 Utilisez la méthode ctx.fillText pour dessiner le texte sur un canevas mémoire. La couleur de premier plan est noire et la couleur d'arrière-plan est. blanc.

2. Lisez chaque pixel de la toile et remplacez-le par le symbole correspondant pour former une chaîne

Il y a une question ici, quelle doit être la taille de la mémoire. toile être? Ma solution est de le rendre aussi grand que possible pour garantir que quelle que soit la police, elle ne sortira pas des limites.

Pendant le processus d'analyse des pixels, la largeur et la hauteur du texte peuvent être enregistrées en même temps. Une fois l'analyse terminée, une nouvelle toile sera à nouveau générée, cette fois elle peut être mieux égale. à la taille du texte.

Un autre problème est que lorsque le texte est trop petit, la police est un peu déformée. Cela devrait être un problème de résolution. L'œil humain ne peut pas voir clairement la petite police, et le programme ne peut pas non plus l'analyser clairement. .

Les polices de petite taille doivent donc être spécialement conçues, comme celles des batailles de chars.

2. Personnages en brique

Une fois que l'on connaît le principe des points, il est très simple d'implémenter des personnages en brique. Voici une ressource In. sur la photo, les briques sont prises de l'intérieur :

Les briques sont toutes petites, au milieu de la photo en bas à droite, et à chaque niveau du jeu de combat de chars auquel nous avons jouéLa carte est générée à partir d'une image si simple, ce qui est vraiment inattendu.

Ce qui suit sont les données matricielles des personnages en brique. Il n'y a qu'une partie ici, qui constitue juste l'écran de démarrage du jeu : BATTLE CITY et l'écran de fin du jeu

3. Code
Parce que le temps presse, le code est moche. Le code utilise un jsgame.js. Il s'agit de ma propre implémentation simple de la fonction HTML5 2D. Emballage, imitant une partie du style interface de pygame.
Après encapsulation, on peut voir que le code lié au dessin est très simple, et le reste sont principalement des codes logiques opérationnels.

代码



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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semainesByDDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semainesByDDD

Afficher plus

Outils chauds

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.