HTML5边玩边学（八）-砖块贴图点阵字-H5教程-PHP中文网

首页

web前端

H5教程

HTML5边玩边学（八）-砖块贴图点阵字

黄舟

Mar 29, 2017 pm 03:12 PM

原来以为象坦克大战、超级玛丽之类的小游戏，开始画面里面的砖块字是静态图片，现在才知道原来都是动态贴图贴出来的，下面用 HTML5 的绘图功能，咱也太做一个坦克大决战的开始画面，顺便研究一下点阵字。

一、点阵字

贴图实际上和点阵字没有多大区别，唯一的区别就是把点用小图片代替了而已，下面是一个点阵字的小程序，你可以输入汉字或者英文字母，然后程序就会分析并生成文字的点阵，然后把它显示出来。至于怎么分析并生成点阵，思路如下：

1、将文字用 ctx.fillText 方法画到一块内存画布上，前景色为黑，背景色为白

2、读取画布的每一个像素，并用相应的符号代替，组成字符串

这里有一个问题，内存画布应该多大？我的解决办法是，尽可能大，保证无论什么字体都不会出界。

在分析完像素的过程中，同时可以记录下文字的宽度和高度，等分析完成以后，再一次生成一块新的画布，这一次可以和文字大小更好相等。

还有一个问题就是文字太小的时候，字体就有点失真，这应该就是一个分辨率的问题，小字体人的肉眼看不清的，程序一样也分析不清楚。

所以小尺寸的字体需要经过专门的设计，像坦克大战上的字体那样。

二、砖块字

知道了点阵子的原理，实现砖块字就很简单了，这里是一副资源图片，砖块就是从里面截取的：

砖块很小，在图片的中间靠右下方，我们玩的坦克大战游戏里面每一关的地图就是由这么简单一个图片生成的，真是没想到啊。

下面是砖块字的点阵数据，这里只有一部分，刚好组成游戏开机画面里面的：BATTLE CITY 和游戏结束画面里面的

三、代码
因为时间比较紧张，代码写的比较丑，代码里面用到了一个 jsgame.js，这是我自己对 HTML5 2D 功能进行了一个简单的包装，模仿了 pygame 的部分接口样式。
经过封装以后，可以看出来，绘图相关的代码就非常简单了，其他主要都是运算逻辑代码。

代码



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>

以上是HTML5边玩边学（八）-砖块贴图点阵字的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。