php图片点阵,HTML5边玩边学(八)-砖块贴图点阵字
原来以为象坦克大战、超级玛丽之类的小游戏,开始画面里面的砖块字是静态图片,现在才知道原来都是动态贴图贴出来的,下面用 HTML5 的绘图功能,咱也太做一个坦克大决战的开始画面,顺便研究一下点阵字。
一、点阵字
贴图实际上和点阵字没有多大区别,唯一的区别就是把点用小图片代替了而已,下面是一个点阵字的小程序,你可以输入汉字或者英文字母,然后程序就会分析并生成文字的点阵,然后把它显示出来。至于怎么分析并生成点阵,思路如下:
1、将文字用 ctx.fillText 方法画到一块内存画布上,前景色为黑,背景色为白
2、读取画布的每一个像素,并用相应的符号代替,组成字符串
这里有一个问题,内存画布应该多大?我的解决办法是,尽可能大,保证无论什么字体都不会出界。
在分析完像素的过程中,同时可以记录下文字的宽度和高度,等分析完成以后,再一次生成一块新的画布,这一次可以和文字大小更好相等。
还有一个问题就是文字太小的时候,字体就有点失真,这应该就是一个分辨率的问题,小字体人的肉眼看不清的,程序一样也分析不清楚。
所以小尺寸的字体需要经过专门的设计,像坦克大战上的字体那样。
二、砖块字
知道了点阵子的原理,实现砖块字就很简单了,这里是一副资源图片,砖块就是从里面截取的:
砖块很小,在图片的中间靠右下方,我们玩的坦克大战游戏里面每一关的地图就是由这么简单一个图片生成的,真是没想到啊。
下面是砖块字的点阵数据,这里只有一部分,刚好组成游戏开机画面里面的:BATTLE CITY 和游戏结束画面里面的
三、代码因为时间比较紧张,代码写的比较丑,代码里面用到了一个 jsgame.js,这是我自己对 HTML5 2D 功能进行了一个简单的包装,模仿了 pygame 的部分接口样式。
经过封装以后,可以看出来,绘图相关的代码就非常简单了,其他主要都是运算逻辑代码。代码
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->
你的浏览器不支持 Canvas 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
文本:
字号:
字体:
宋体
楷体_GB2312
隶书
Kristen ITC
Harrington
黑体
斜体
你的浏览器不支持 Canvas 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
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='';
for(var y=0;y
for(var x=0;x
if((sur.get_pixel(x,y)[0]<255))
str=str+'龍';
else
str=str+' ';
}
str=str+'\n';
}
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
if(count
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="https://img-blog.csdnimg.cn/2022010616135416506.gif";//省略四个字节
var bricks=[];
img.οnlοad=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='BATTLECITY'.toLowerCase();
//将每个字符的点阵数据截成 7 段,即每个字符都是 7*7 的点阵,方便绘制
var alph_bits=[];
for(var i=0;i
for(var index=0;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()
}
}
})
}
php图片点阵,HTML5边玩边学(八)-砖块贴图点阵字相关推荐
- HTML5边玩边学(4):变幻的色彩
在上一节HTML5边玩边学(3):像素和颜色中我们讲了颜色和像素是怎么回事,其实大多数情况下,我们用不到像素级别的操作,我们只需要对颜色进行整体设置就行了. 一.基本颜色 在HTML5边玩边学(2): ...
- html锯齿边框,css3制作邮票(锯齿边框)-css3制作邮票(锯齿边框)-HTML5+CSS3-编玩编学- 注重积累的过程 快速锁定问题解决问题 写博客,在积累源码,持续更新技术博客,加分项...
css3制作邮票(锯齿边框) html: css: body,h1,h2,h3,h4,ul,li,div,a,p{ margin: 0; padding: 0; font-family: arial; ...
- HTML5边玩边学(9):俄罗斯方块就是这么简单 之 数据模型篇
特别提示: 本文中的运行效果需要 Chrome 浏览器或者 Firefox 浏览器. 一.从数据出发还是从界面出发 要写一个俄罗斯方块小游戏,我们先来一块考虑一下下面几个问题: 1.用什么表示方块 2 ...
- 边玩游戏边学php,HTML5边玩边学(1)画布实现方法
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器 提示:您可以先修改部分代码再运行
- 微信的常用设备 只能看到android,安卓手机撤回的微信图片可以查看啦,赶紧学起来...
原标题:安卓手机撤回的微信图片可以查看啦,赶紧学起来 想必每个人的手机上都安装了微信软件吧,微信上的功能在不断的完善,使用微信的用户群体也在不断壮大.想必大家都经历过在使用微信时经常会有好友撤回消息的 ...
- 朋友圈集赞,简洁壁纸,玩游戏学git
骚操作来了 2.优品ppt http://www.ypppt.com/ 一个有情怀的免费PPT模板下载网站! PPT素材库,精美PPT素材大全,包括3D小人.商务人物图片.目录模板.箭头素材等各类PP ...
- python边玩边学_边听边学数据科学
python边玩边学 Podcasts are a fun way to learn new stuff about the topics you like. Podcast hosts have t ...
- 乐高小颗粒履带机器人_乐高搭建+乐高编程…快带小朋友来漳州这家培训中心,边玩边学...
厦门科技馆 培训中心 漳州校区 厦门科技馆培训中心漳州校区 如果你还以为乐高只是玩具 那就大错特错啦 乐高启蒙.搭建.编程 边玩边学边成长 亲手创建属于你的乐高小王国! 88元=3节乐高课程 前方一大 ...
- 推荐28个网站,让你边玩边学
今天我给大家推荐28个辅助你学习巩固知识的网站,让你边玩边学边记! 本文大致的目录结构如下: CSS相关的学习网站 1 xxxx 2 xxxx n xxxx JavaScript相关的学习网站 1 x ...
最新文章
- 徐艳 中国科学院成都计算机,互动、碰撞!精彩纷呈!成都市中职计算机专业菜单培训在双流建校举行!...
- 求矩形中心点坐标编程c语言,c语言编程序求矩形面积 我是新手,很多不懂,初学...
- 单点登录之实战CAS5.1.x(六)——REST协议
- 关于$'\r': command not found错误的一点体会
- 三角形最佳路径问题(信息学奥赛一本通-T1288)
- 数学不好的人可以学python吗_数学不好的人,适合学习深度学习,机器学习,人工智能吗?...
- Serverless 全能选手,再添一“金”
- 为了和互联网公司抢程序员,这家世界 500 强也是蛮拼的
- Error pulling origin: error: The following untracked working tree files would be overwritten by...
- Nagios安装配置教程(二)环境搭建
- 如何查看自己的JDK版本
- 高通RAM dump解析简介
- 触动精灵 获取getColor颜色失败
- Creo9.0 绘制中心线
- 多因子策略-APT模型
- 上岸重庆邮电大学软件工程学院学硕总结
- ---------------------------SQL之机选大乐透,双色球算法-----------------------------
- 一键搜索出Android Studio内所有中文
- 如何通过cdm连接mysql_CDM云数据迁移服务入门教程
- YDOOK: Python3 IPC 进程间通信方法分类总结
热门文章
- Blender里的三种绑定 (三)骨骼
- javax.persistence.OneToMany.orphanRemoval()Z
- 404未找到是什么意思_常见的web错误404你知道是什么意思吗?
- Statsmodels库----统计建模和计量经济学
- htc系统Android 7.1,HTC太强大,被誉为刷机之王,一路升到安卓7
- 单点登录系统(SSO)的开发思路
- SSO单点登录系统设计,数据库设计文档
- Redis I/O 多路复用
- 锦鱼课堂:2021做什么副业好?零门槛赚钱小副业
- ‘xxx‘ is assigned a value but never used.