Maison > Article > interface Web > Apprenez en jouant avec les caractères de treillis de carte HTML5 (8) -Brick
Apprenez en jouant avec les caractères de treillis de carte HTML5 (8) -Brick
- 黄舟original
- 2017-03-29 15:12:592045parcourir
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 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='';
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+'龍';
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<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='BATTLECITY'.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!
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur