日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML 5開發(fā)RPG游戲之三（卷軸和對話）

前兩篇，RPG的開發(fā)已經(jīng)實現(xiàn)了添加地圖和添加游戲人物，本篇來實現(xiàn)地圖的卷軸滾動和人物對話的實現(xiàn)，效果如下

創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元嘉善做網(wǎng)站,已為上家服務(wù),為嘉善各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

本次開發(fā)，更新了一下庫件至1.3，請點擊下面的鏈接，下載庫件1.3版以上版本

http://code.google.com/p/legendforhtml5programming/downloads/list

地圖的滾動

關(guān)于地圖的滾動原理，可以參照下圖

按照上圖說明，實現(xiàn)地圖滾動，只需要先把即將出現(xiàn)的地圖（圖中黃色部分）畫上，然后滾動地圖，待地圖滾動完畢之后，將屏幕之外的部分（圖中綠色部分）移除

首先要添加一個變量來控制地圖是否滾動

 
 
 
 
      
  
  
  
  1. //地圖滾動  
    2.   
  
  
  
  2. var mapmove = false; 
    3.

然后，在人物移動的時候，判斷地圖是否需要滾動

 
 
 
 
      
  
  
  
  1. /**  
    2.   
  
  
  
  2.  * 地圖是否滾動  
    3.   
  
  
  
  3.  **/ 
    4.   
  
  
  
  4. Character.prototype.checkMap = function (dir){  
    5.   
  
  
  
  5.     var self = this;  
    6.   
  
  
  
  6.     mapmove = false;  
    7.   
  
  
  
  7.     //如果不是英雄，則地圖不需要滾動  
    8.   
  
  
  
  8.     if(!self.isHero)return;  
    9.   
  
  
  
  9.       
    10.   
  
  
  
  10.     switch (dir){  
    11.   
  
  
  
  11.         case UP:  
    12.   
  
  
  
  12.             if(self.y + charaLayer.y> STEP)break;  
    13.   
  
  
  
  13.             if(mapLayer.y >= 0)break;  
    14.   
  
  
  
  14.             addMap(0,-1);  
    15.   
  
  
  
  15.             mapmove = true;  
    16.   
  
  
  
  16.             break;  
    17.   
  
  
  
  17.         case LEFT:  
    18.   
  
  
  
  18.             if(self.x + charaLayer.x > STEP)break;  
    19.   
  
  
  
  19.             if(mapLayer.x >= 0)break;  
    20.   
  
  
  
  20.             addMap(-1,0);  
    21.   
  
  
  
  21.             mapmove = true;  
    22.   
  
  
  
  22.             break;  
    23.   
  
  
  
  23.         case RIGHT:  
    24.   
  
  
  
  24.             if(self.x < 480 - 2*STEP)break;  
    25.   
  
  
  
  25.             if(480 - mapLayer.x >= map[0].length*STEP)break;  
    26.   
  
  
  
  26.             addMap(1,0);  
    27.   
  
  
  
  27.             mapmove = true;  
    28.   
  
  
  
  28.             break;  
    29.   
  
  
  
  29.         case DOWN:  
    30.   
  
  
  
  30.             if(self.y < 288 - 2*STEP)break;  
    31.   
  
  
  
  31.             if(288 - mapLayer.y >= map.length*STEP)break;  
    32.   
  
  
  
  32.             addMap(0,1);  
    33.   
  
  
  
  33.             mapmove = true;  
    34.   
  
  
  
  34.             break;  
    35.   
  
  
  
  35.     }  
    36.   
  
  
  
  36. }; 
    37.

在移動過程中，判斷地圖是否處于滾動狀態(tài)，如果地圖處于滾動，則滾動地圖，否則移動人物

 
 
 
 
      
  
  
  
  1. /**  
    2.   
  
  
  
  2.  * 開始移動   
    3.   
  
  
  
  3.  **/ 
    4.   
  
  
  
  4. Character.prototype.onmove = function (){  
    5.   
  
  
  
  5.     var self = this;  
    6.   
  
  
  
  6.     //設(shè)定一個移動步長中的移動次數(shù)  
    7.   
  
  
  
  7.     var ml_cnt = 4;  
    8.   
  
  
  
  8.     //計算一次移動的長度  
    9.   
  
  
  
  9.     var ml = STEP/ml_cnt;  
    10.   
  
  
  
  10.     //根據(jù)移動方向，開始移動  
    11.   
  
  
  
  11.     switch (self.direction){  
    12.   
  
  
  
  12.         case UP:  
    13.   
  
  
  
  13.             if(mapmove){  
    14.   
  
  
  
  14.                 mapLayer.y += ml;  
    15.   
  
  
  
  15.                 charaLayer.y += ml;  
    16.   
  
  
  
  16.             }  
    17.   
  
  
  
  17.             self.y -= ml;  
    18.   
  
  
  
  18.             break;  
    19.   
  
  
  
  19.         case LEFT:  
    20.   
  
  
  
  20.             if(mapmove){  
    21.   
  
  
  
  21.                 mapLayer.x += ml;  
    22.   
  
  
  
  22.                 charaLayer.x += ml;  
    23.   
  
  
  
  23.             }  
    24.   
  
  
  
  24.             self.x -= ml;  
    25.   
  
  
  
  25.             break;  
    26.   
  
  
  
  26.         case RIGHT:  
    27.   
  
  
  
  27.             if(mapmove){  
    28.   
  
  
  
  28.                 mapLayer.x -= ml;  
    29.   
  
  
  
  29.                 charaLayer.x -= ml;  
    30.   
  
  
  
  30.             }  
    31.   
  
  
  
  31.             self.x += ml;  
    32.   
  
  
  
  32.             break;  
    33.   
  
  
  
  33.         case DOWN:  
    34.   
  
  
  
  34.             if(mapmove){  
    35.   
  
  
  
  35.                 mapLayer.y -= ml;  
    36.   
  
  
  
  36.                 charaLayer.y -= ml;  
    37.   
  
  
  
  37.             }  
    38.   
  
  
  
  38.             self.y += ml;  
    39.   
  
  
  
  39.             break;  
    40.   
  
  
  
  40.     }  
    41.   
  
  
  
  41.     self.moveIndex++;  
    42.   
  
  
  
  42.     //當(dāng)移動次數(shù)等于設(shè)定的次數(shù)，開始判斷是否繼續(xù)移動  
    43.   
  
  
  
  43.     if(self.moveIndex >= ml_cnt){  
    44.   
  
  
  
  44.         //一個地圖步長移動完成后，如果地圖處于滾動狀態(tài)，則移除多余地圖塊  
    45.   
  
  
  
  45.         if(mapmove)delMap();  
    46.   
  
  
  
  46.         self.moveIndex = 0;  
    47.   
  
  
  
  47.         //如果已經(jīng)松開移動鍵，或者前方為障礙物，則停止移動，否則繼續(xù)移動  
    48.   
  
  
  
  48.         if(!isKeyDown || !self.checkRoad()){  
    49.   
  
  
  
  49.             self.move = false;  
    50.   
  
  
  
  50.             return;  
    51.   
  
  
  
  51.         }else if(self.direction != self.direction_next){  
    52.   
  
  
  
  52.             self.direction = self.direction_next;  
    53.   
  
  
  
  53.             self.anime.setAction(self.direction);  
    54.   
  
  
  
  54.         }  
    55.   
  
  
  
  55.         //地圖是否滾動  
    56.   
  
  
  
  56.         self.checkMap(self.direction);  
    57.   
  
  
  
  57.     }  
    58.   
  
  
  
  58. }; 
    59.

最后，將地圖的數(shù)組和地形擴大為大于屏幕大小

 
 
 
 
      
  
  
  
  1. //地圖圖片數(shù)組  
    2.   
  
  
  
  2. var map = [  
    3.   
  
  
  
  3. [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],  
    4.   
  
  
  
  4. [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],  
    5.   
  
  
  
  5. [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],  
    6.   
  
  
  
  6. [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],  
    7.   
  
  
  
  7. [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],  
    8.   
  
  
  
  8. [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],  
    9.   
  
  
  
  9. [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],  
    10.   
  
  
  
  10. [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],  
    11.   
  
  
  
  11. [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],  
    12.   
  
  
  
  12. [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],  
    13.   
  
  
  
  13. [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]  
    14.   
  
  
  
  14. ];  
    15.   
  
  
  
  15. //地圖地形數(shù)組  
    16.   
  
  
  
  16. var mapdata = [  
    17.   
  
  
  
  17. [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
    18.   
  
  
  
  18. [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],  
    19.   
  
  
  
  19. [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],  
    20.   
  
  
  
  20. [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],  
    21.   
  
  
  
  21. [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],  
    22.   
  
  
  
  22. [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],  
    23.   
  
  
  
  23. [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],  
    24.   
  
  
  
  24. [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
    25.   
  
  
  
  25. [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],  
    26.   
  
  
  
  26. [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
    27.   
  
  
  
  27. [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]  
    28.   
  
  
  
  28. ]; 
    29.

為了實現(xiàn)地圖滾動，修改添加地圖的方法，根據(jù)參數(shù)來實現(xiàn)添加上面圖片的黃色地圖部分

 
 
 
 
      
  
  
  
  1. //添加地圖  
    2.   
  
  
  
  2. function addMap(cx,cy){  
    3.   
  
  
  
  3.     var i,j,index,indexX,indexY;  
    4.   
  
  
  
  4.     var bitmapdata,bitmap;  
    5.   
  
  
  
  5.     var mapX = mapLayer.x / STEP;  
    6.   
  
  
  
  6.     var mapY = mapLayer.y / STEP;  
    7.   
  
  
  
  7.     var mx = cx<0?-1:0,my = cy<0?-1:0;  
    8.   
  
  
  
  8.     if(imageArray == null){  
    9.   
  
  
  
  9.         //地圖圖片數(shù)據(jù)  
    10.   
  
  
  
  10.         bitmapdata = new LBitmapData(imglist["map"]);  
    11.   
  
  
  
  11.         //將地圖圖片拆分，得到拆分后的各個小圖片的坐標(biāo)數(shù)組  
    12.   
  
  
  
  12.         imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);  
    13.   
  
  
  
  13.     }  
    14.   
  
  
  
  14.     mapLayer.removeAllChild();  
    15.   
  
  
  
  15.     //在地圖層上，畫出15*10的小圖片  
    16.   
  
  
  
  16.     for(i=my;i<9 +Math.abs(cy) && i-mapY < map.length;i++){  
    17.   
  
  
  
  17.         for(j=mx;j<15 +Math.abs(cx)&& j-mapX < map[0].length;j++){  
    18.   
  
  
  
  18.             //從地圖數(shù)組中得到相應(yīng)位置的圖片坐標(biāo)  
    19.   
  
  
  
  19.             index = map[i-mapY][j-mapX];  
    20.   
  
  
  
  20.             //小圖片的豎坐標(biāo)  
    21.   
  
  
  
  21.             indexY = Math.floor(index /10);  
    22.   
  
  
  
  22.             //小圖片的橫坐標(biāo)  
    23.   
  
  
  
  23.             indexX = index - indexY*10;  
    24.   
  
  
  
  24.             //得到小圖片  
    25.   
  
  
  
  25.             bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);  
    26.   
  
  
  
  26.             bitmap = new LBitmap(bitmapdata);  
    27.   
  
  
  
  27.             //設(shè)置小圖片的顯示位置  
    28.   
  
  
  
  28.             bitmap.x = j*STEP - mapLayer.x;  
    29.   
  
  
  
  29.             bitmap.y = i*STEP - mapLayer.y;  
    30.   
  
  
  
  30.             //將小圖片顯示到地圖層  
    31.   
  
  
  
  31.             mapLayer.addChild(bitmap);  
    32.   
  
  
  
  32.         }  
    33.   
  
  
  
  33.     }  
    34.   
  
  
  
  34. }  
    35.   
  
  
  
  35. //移除多余地圖塊  
    36.   
  
  
  
  36. function delMap(){  
    37.   
  
  
  
  37.     var bitmap,i;  
    38.   
  
  
  
  38.     for(i=0;i  
  
  
  
  39.         bitmap = mapLayer.childList[i];  
    40.   
  
  
  
  40.         if(bitmap.x + mapLayer.x < 0 || bitmap.x + mapLayer.x >= 480 ||   
    41.   
  
  
  
  41.                 bitmap.y + mapLayer.y < 0 || bitmap.y + mapLayer.y >= 288){  
    42.   
  
  
  
  42.             mapLayer.removeChild(bitmap);  
    43.   
  
  
  
  43.             i--;  
    44.   
  
  
  
  44.         }  
    45.   
  
  
  
  45.     }  
    46.   
  
  
  
  46. } 
    47.

看一下效果如下

#p#

人物的對話

對話的實現(xiàn)，在點擊控制按鈕的方形按鈕時添加，所以，先在鼠標(biāo)抬起的時候，判斷是否點擊了方形按鈕

 
 
 
 
      
  
  
  
  1. function onup(event){  
    2.   
  
  
  
  2.     isKeyDown = false;  
    3.   
  
  
  
  3.     if(event.offsetX >= ctrlLayer.x + 280 && event.offsetX <= ctrlLayer.x+330){  
    4.   
  
  
  
  4.         if(event.offsetY >= ctrlLayer.y+40 && event.offsetY <= ctrlLayer.y+100){  
    5.   
  
  
  
  5.             //對話  
    6.   
  
  
  
  6.             addTalk();  
    7.   
  
  
  
  7.         }  
    8.   
  
  
  
  8.     }  
    9.   
  
  
  
  9. } 
    10.

在完善addTalk()方法的時候，首先準(zhǔn)備好對話的內(nèi)容

 
 
 
 
      
  
  
  
  1. var talkScriptList = {  
    2.   
  
  
  
  2.     "talk1":new Array(  
    3.   
  
  
  
  3.         {img:"m",name:"鳴人",msg:"我是木葉村的鳴人，你是誰？"},  
    4.   
  
  
  
  4.         {img:"n",name:"黑衣忍者甲",msg:"你就是鳴人？九尾還在你身體里嗎？"}  
    5.   
  
  
  
  5.         ),  
    6.   
  
  
  
  6.     "talk2":new Array(  
    7.   
  
  
  
  7.         {img:"n",name:"黑衣忍者乙",msg:"鳴人，聽說忍者大戰(zhàn)就要開始了。"},  
    8.   
  
  
  
  8.         {img:"m",name:"鳴人",msg:"真的嗎？一定要想想辦法啊。"}  
    9.   
  
  
  
  9.         )  
    10.   
  
  
  
  10. }; 
    11.

talk1，talk2中talk后面的數(shù)字，代表人物的編號，其中每個對話單位的img為人物的頭像，name為人物的名稱,msg為對話的內(nèi)容

添加對話時的做法是，當(dāng)點擊方形按鈕后，判斷小鳴人前方是否有人，如果有人，則將這個人物的編號取出來，再從上面的數(shù)組中獲取相應(yīng)的對話內(nèi)容，然后，將相應(yīng)的內(nèi)容顯示到游戲屏幕上，具體實現(xiàn)代碼如下

 
 
 
 
      
  
  
  
  1. //對話內(nèi)容  
    2.   
  
  
  
  2. var talkScript;  
    3.   
  
  
  
  3. var talkScriptList = {  
    4.   
  
  
  
  4.     "talk1":new Array(  
    5.   
  
  
  
  5.         {img:"m",name:"鳴人",msg:"我是木葉村的鳴人，你是誰？"},  
    6.   
  
  
  
  6.         {img:"n",name:"黑衣忍者甲",msg:"你就是鳴人？九尾還在你身體里嗎？"}  
    7.   
  
  
  
  7.         ),  
    8.   
  
  
  
  8.     "talk2":new Array(  
    9.   
  
  
  
  9.         {img:"n",name:"黑衣忍者乙",msg:"鳴人，聽說忍者大戰(zhàn)就要開始了。"},  
    10.   
  
  
  
  10.         {img:"m",name:"鳴人",msg:"真的嗎？一定要想想辦法啊。"}  
    11.   
  
  
  
  11.         )  
    12.   
  
  
  
  12. };  
    13.   
  
  
  
  13. //對話序號  
    14.   
  
  
  
  14. var talkIndex = 0;  
    15.   
  
  
  
  15. //對話中  
    16.   
  
  
  
  16. var talking = false;  
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. /**  
    19.   
  
  
  
  19.  * 添加對話  
    20.   
  
  
  
  20.  * */ 
    21.   
  
  
  
  21. function addTalk(){  
    22.   
  
  
  
  22.     //如果對話內(nèi)容為空，則開始判斷是否可以對話  
    23.   
  
  
  
  23.     if(talkScript == null){  
    24.   
  
  
  
  24.         var key,tx = player.x,ty = player.y;  
    25.   
  
  
  
  25.         switch (player.direction){  
    26.   
  
  
  
  26.         case UP:  
    27.   
  
  
  
  27.             ty -= STEP;  
    28.   
  
  
  
  28.             break;  
    29.   
  
  
  
  29.         case LEFT:  
    30.   
  
  
  
  30.             tx -= STEP;  
    31.   
  
  
  
  31.             break;  
    32.   
  
  
  
  32.         case RIGHT:  
    33.   
  
  
  
  33.             tx += STEP;  
    34.   
  
  
  
  34.             break;  
    35.   
  
  
  
  35.         case DOWN:  
    36.   
  
  
  
  36.             ty += STEP;  
    37.   
  
  
  
  37.             break;  
    38.   
  
  
  
  38.         }  
    39.   
  
  
  
  39.         for(key in charaLayer.childList){  
    40.   
  
  
  
  40.             //判斷前面又沒有npc，有則開始對話  
    41.   
  
  
  
  41.             if(charaLayer.childList[key].x == tx && charaLayer.childList[key].y == ty){  
    42.   
  
  
  
  42.                 if(talkScriptList["talk"+charaLayer.childList[key].index]){  
    43.   
  
  
  
  43.                     talkScript = talkScriptList["talk"+charaLayer.childList[key].index];  
    44.   
  
  
  
  44.                     talkIndex = 0;  
    45.   
  
  
  
  45.                 }  
    46.   
  
  
  
  46.             }  
    47.   
  
  
  
  47.         }  
    48.   
  
  
  
  48.         //如果前方?jīng)]有npc，則返回  
    49.   
  
  
  
  49.         if(talkScript == null)return;  
    50.   
  
  
  
  50.     }  
    51.   
  
  
  
  51.     //將對話層清空  
    52.   
  
  
  
  52.     talkLayer.removeAllChild();  
    53.   
  
  
  
  53.     //當(dāng)對話開始，且按照順序進行對話  
    54.   
  
  
  
  54.     if(talkIndex < talkScript.length){  
    55.   
  
  
  
  55.         //得到對話內(nèi)容  
    56.   
  
  
  
  56.         var talkObject = talkScript[talkIndex];  
    57.   
  
  
  
  57.         //對話背景  
    58.   
  
  
  
  58.         bitmapdata = new LBitmapData(imglist["talk"]);  
    59.   
  
  
  
  59.         bitmap = new LBitmap(bitmapdata);  
    60.   
  
  
  
  60.         bitmap.width = 330;  
    61.   
  
  
  
  61.         bitmap.height = 70;  
    62.   
  
  
  
  62.         bitmap.x = 100;  
    63.   
  
  
  
  63.         bitmap.y = 20;  
    64.   
  
  
  
  64.         bitmap.alpha = 0.7;  
    65.   
  
  
  
  65.         talkLayer.addChild(bitmap);  
    66.   
  
  
  
  66.         //對話頭像  
    67.   
  
  
  
  67.         bitmapdata = new LBitmapData(imglist[talkObject.img]);  
    68.   
  
  
  
  68.         bitmap = new LBitmap(bitmapdata);  
    69.   
  
  
  
  69.         bitmap.x = 0;  
    70.   
  
  
  
  70.         bitmap.y = 0;  
    71.   
  
  
  
  71.         talkLayer.addChild(bitmap);  
    72.   
  
  
  
  72.         //對話人物名稱  
    73.   
  
  
  
  73.         var name = new LTextField();  
    74.   
  
  
  
  74.         name.x = 110;  
    75.   
  
  
  
  75.         name.y = 30;  
    76.   
  
  
  
  76.         name.size = "14";  
    77.   
  
  
  
  77.         name.color = "#FFFFFF";  
    78.   
  
  
  
  78.         name.text = "[" + talkObject.name + "]";  
    79.   
  
  
  
  79.         talkLayer.addChild(name);  
    80.   
  
  
  
  80.         //對話內(nèi)容  
    81.   
  
  
  
  81.         var msg = new LTextField();  
    82.   
  
  
  
  82.         msg.x = 110;  
    83.   
  
  
  
  83.         msg.y = 55;  
    84.   
  
  
  
  84.         msg.color = "#FFFFFF";  
    85.   
  
  
  
  85.         msg.text = talkObject.msg;  
    86.   
  
  
  
  86.         talkLayer.addChild(msg);  
    87.   
  
  
  
  87.         //對話內(nèi)容逐字顯示  
    88.   
  
  
  
  88.         msg.wind();  
    89.   
  
  
  
  89.         talkLayer.x = 20;  
    90.   
  
  
  
  90.         talkLayer.y = 50;  
    91.   
  
  
  
  91.         talkIndex++;  
    92.   
  
  
  
  92.     }else{  
    93.   
  
  
  
  93.         //對話結(jié)束  
    94.   
  
  
  
  94.         talkScript = null;  
    95.   
  
  
  
  95.     }  
    96.   
  
  
  
  96. } 
    97.

效果看下圖

游戲演示地址:http://fsanguo.comoj.com/html5/rpg3/index.html

之前其他地方也稍微做了修改，具體修改請看源代碼，此次更新源代碼，下載地址如下:http://fsanguo.comoj.com/html5/rpg5/rpg5.rar


標(biāo)題名稱：HTML 5開發(fā)RPG游戲之三（卷軸和對話）
文章出自：http://www.dlmjj.cn/article/djopesh.html