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

Article connexe

H5: Améliorations clés de HTML5Apr 28, 2025 am 12:26 AM

HTML5 apporte cinq améliorations clés: 1. Les balises sémantiques améliorent la clarté du code et les effets SEO; 2. Prise en charge multimédia simplifie la vidéo et la formation audio; 3. L'amélioration du formulaire simplifie la vérification; 4. Le stockage hors ligne et local améliore l'expérience utilisateur; 5. Canvas et fonctions graphiques améliorent la visualisation des pages Web.

HTML5: la norme et son impact sur le développement WebApr 27, 2025 am 12:12 AM

Les caractéristiques principales de HTML5 incluent des balises sémantiques, une prise en charge multimédia, un stockage hors ligne et un stockage local et une amélioration de la forme. 1. Tags sémantiques tels que, etc. pour améliorer la lisibilité du code et l'effet SEO. 2. Simplifiez l'intégration multimédia avec des étiquettes. 3. Stockage hors ligne et stockage local tels que ApplicationCache et LocalStorage Prise en charge l'opération sans réseau et le stockage de données. 4. L'amélioration du formulaire introduit de nouveaux types d'entrée et des propriétés de vérification pour simplifier le traitement et la vérification.

Exemples de code H5: applications pratiques et tutorielsApr 25, 2025 am 12:10 AM

H5 offre une variété de nouvelles fonctionnalités et fonctions, améliorant considérablement les capacités du développement frontal. 1. Prise en charge multimédia: intégration des médias et éléments, aucun plug-ins n'est requis. 2. Canvas: utilisez des éléments pour rendre dynamiquement les graphiques et les animations 2D. 3. Stockage local: implémentez le stockage de données persistant via LocalStorage et SessionStorage pour améliorer l'expérience utilisateur.

Le lien entre H5 et HTML5: similitudes et différencesApr 24, 2025 am 12:01 AM

H5 et HTML5 sont des concepts différents: HTML5 est une version de HTML, contenant de nouveaux éléments et API; H5 est un cadre de développement d'applications mobiles basé sur HTML5. HTML5 analyse et rend le code via le navigateur, tandis que les applications H5 doivent exécuter des conteneurs et interagir avec le code natif via JavaScript.

Les éléments constitutifs du code H5: éléments clés et leur objectifApr 23, 2025 am 12:09 AM

Les éléments clés de HTML5 comprennent ,,,,,,, etc., qui sont utilisés pour créer des pages Web modernes. 1. Définissez le contenu de la tête, 2. Utilisé pour naviguer dans le lien, 3. Représenter le contenu d'articles indépendants, 4. Organisez le contenu de la page, 5. Afficher le contenu de la barre latérale, 6. Définir le pied de page, ces éléments améliorent la structure et la fonctionnalité de la page Web.

HTML5 et H5: comprendre l'usage communApr 22, 2025 am 12:01 AM

Il n'y a pas de différence entre HTML5 et H5, qui est l'abréviation de HTML5. 1.HTML5 est la cinquième version de HTML, qui améliore les fonctions multimédias et interactives des pages Web. 2.H5 est souvent utilisé pour faire référence à des pages Web ou des applications mobiles basées sur HTML5, et convient à divers appareils mobiles.

HTML5: Les éléments constitutifs du Web moderne (H5)Apr 21, 2025 am 12:05 AM

HTML5 est la dernière version du langage de balisage hypertexte, standardisé par W3C. HTML5 introduit de nouvelles balises sémantiques, la prise en charge multimédia et les améliorations de formulaire, l'amélioration de la structure Web, de l'expérience utilisateur et des effets de référencement. HTML5 présente de nouvelles balises sémantiques, telles que,, etc., pour rendre la structure de la page Web plus claire et l'effet SEO mieux. HTML5 prend en charge les éléments multimédias et aucun plug-ins tiers n'est requis, améliorant l'expérience utilisateur et la vitesse de chargement. HTML5 améliore les fonctions de formulaire et introduit de nouveaux types d'entrée tels que, etc., ce qui améliore l'expérience utilisateur et l'efficacité de vérification du formulaire.

Code H5: Écriture HTML 5 propre et efficaceApr 20, 2025 am 12:06 AM

Comment rédiger un code HTML5 propre et efficace? La réponse est d'éviter les erreurs courantes en sémantisant les balises, le code structuré, l'optimisation des performances et en évitant les erreurs courantes. 1. Utilisez des balises sémantiques telles que, etc. pour améliorer la lisibilité du code et l'effet SEO. 2. Gardez le code structuré et lisible, en utilisant une indentation et des commentaires appropriés. 3. Optimiser les performances en réduisant les balises inutiles, en utilisant CDN et en compressant le code. 4. Évitez les erreurs courantes, telles que l'étiquette non fermée et assurez la validité du code.

See all articles