HTML5 lufylegend melaksanakan skrol dalam permainan _html5 kemahiran tutorial

lufylegend ialah enjin sumber terbuka HTML5 yang melaksanakan pembangunan HTML5 menggunakan sintaks seperti ActionScript 3.0 Ia termasuk LSprite, LBitmapData, LBitmap, LLoader, LURLLoader, LTextField, LEvent dan banyak lagi kelas yang biasa digunakan oleh pembangun AS. Opera, IE9, IOS, Android dan persekitaran popular yang lain. Anda boleh menggunakan lufylegend untuk menggunakan pengaturcaraan berorientasikan objek dengan mudah, dan boleh bekerjasama dengan Box2dWeb untuk mencipta permainan fizik Selain itu, ia juga mempunyai kelas pelonggaran LTweenLite terbina dalam dan fungsi lain yang sangat praktikal, ia akan membolehkan anda memasuki dunia HTML5 dengan lebih pantas!
Apakah itu tatal?
Pelajar yang pernah bermain RPG atau pertarungan tatal sisi harus tahu bahawa selepas watak berjalan ke tengah skrin, peta akan bergerak disebabkan saiz peta yang besar, manakala watak akan kekal agak pegun. Ini adalah skrol legenda. Contohnya, gambar di bawah ialah skrol dalam permainan saya "Three Kingdoms Front":

Dengan pengenalan di atas, semua orang harus memahami apa itu skrol. Secara terang-terangan, ia adalah kesan kamera mengikuti protagonis. Seterusnya, kami akan menggunakan enjin permainan lufylegend.js untuk mencapai kesan ini.
Pengenalan prinsip
Malah, kunci untuk mencapai kesan ini terletak pada cara untuk menjadikan watak itu diam, bila hendak mengalihkan peta dan cara mengalihkan peta. Sebelum meneroka dua isu ini, kami mula-mula mencipta lapisan peringkat yang tersusun dengan baik (dan objek LSprite) untuk operasi kemudian. Struktur pentas adalah seperti berikut:
- Lapisan pentas
| - Lapisan Peta
| - Lapisan watak
Dapat dilihat bahawa lapisan pentas ialah elemen induk bagi. lapisan peta dan lapisan aksara, dan lapisan aksara berada di Di atas lapisan peta, lagipun, watak itu berdiri di atas peta. Kita tahu bahawa koordinat objek anak adalah relatif kepada objek induk, jadi jika objek induk dialihkan, objek anak akan bergerak dengan sewajarnya. Ini perlu difahami terlebih dahulu.
Bagaimana untuk membuat watak pegun? Bilakah anda memindahkan peta? Bagaimana untuk mengalihkan peta? Mungkin anda ingin terlebih dahulu menggunakan if(xxx){...} untuk menentukan sama ada koordinat aksara telah sampai ke tengah skrin Jika ya, gerakkan objek peta. Ia akan menyusahkan jika anda melakukan ini. Sebenarnya, terdapat kaedah yang lebih mudah:
Apabila menatal/tidak menatal, watak kita bergerak, tetapi jika watak itu mencapai bahagian tengah skrin dan mula menatal, lapisan pentas kita akan bergerak ke arah dan saiz yang bertentangan dengan kelajuan watak Dengan pergerakan yang sama, anjakan watak berbanding kanvas akan diimbangi, dan ia akan kelihatan pegun, manakala peta akan mengikut kelas induk dan bergerak ke arah yang bertentangan. Ini sama seperti penggambaran filem kostum, di mana dua orang menunggang kuda dan bercakap pada masa yang sama. Jika seorang lelaki dan seekor kuda bergerak ke hadapan dan kamera mengikuti mereka pada kelajuan yang sama, gambar yang terhasil ialah watak-watak itu tidak bergerak, tetapi pemandangan di belakang watak-watak itu bergerak.
Mari kita lihat kod pelaksanaan seterusnya.
Kod pelaksanaan
Berikut ialah kod dengan ulasan terperinci:

Kod XML/HTML

Salin kandungan ke papan keratan

1. LInit(30, 'mydemo', 700, 480, utama); //Arah bergerak, batal bermakna tiada pergerakan
2. var
3. arah = null; // Burung, lapisan pentas, objek latar belakang
4. burung var, stageLayer, bg; //Panjang setiap pergerakan
5. var
6. langkah =
7. 5; fungsi utama () { // Senarai Sumber
8. var loadList
9. = [ 
10. {nama : 'burung', laluan : './bird.png'}, {nama : 'bg', laluan : './bg.jpg'}
11. ];
12. // Muatkan sumber
13. LLoadManage.load(loadList, null, demoInit); }
14. fungsi demoInit (hasil) {
15. //Memulakan lapisan peringkat
17. Lapisan peringkat =
18. baharu LSprite(
19. addChild(stageLayer); //Tambah latar belakang bg
20. = baharu
21. LBitmap(LBitmapData baharu(hasil['bg']));
22. bg.y = -100 stageLayer.addChild(bg); // Sertai Burung
23. burung =
baharu
24. LBitmap(LBitmapData baharu(hasil['burung']));
25. burung.x
26. = 100 burung.y
27. = 150; stageLayer.addChild(bird); //Tambah acara tekan tetikus
28. stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown); //Tambah acara lantunan tetikus stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp
29. //Tambah acara garis masa
30. stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame );
31. }
32. fungsi onDown (e) {
33. /**Tetapkan arah pergerakan berdasarkan kedudukan klik*/ 
34. jika (e.offsetX >
35. LGlobal.width / 2) {
36. arah
37. = 'betul'
38. ; } lain {
39. arah =
40. 'kiri'; } }    
41. function onUp () {    
42. // 設定方向為無方向，代表不移動    
43. direction = null;    
44. }    
45. function onFrame () {    
46. var _step, minX, maxX;    
47. /** 移動小鳥 */    
48. if (direction == 'right') {    
49. _step = step;    
50. } else if (direction == 'left') {    
51. _step = -step;    
52. } else {    
53. return;    
54. }    
55. bird.x  = _step;    
56. /** 控制小鳥移動範圍 */    
57. minX = 0,    0
,    
58. ,    ,    ,    
,    
59. ,    ,    
60. maxX = bg.getWidth()o.getWidth()). if (bird.x 
 minX) {   
61. bird.x = minX;    
}else if (bird.x 
62. >
 maxX) {    
64. bird.x = maxX;    maxX;    
65. ;    
66. ;    ;    ;    ;    
67. ;     }     /** 移動舞台 */    
68. stageLayer.x = LGlobal/** 控制舞台移動範圍 */    
69. minX = LGlobal。
70. maxX = 0
71. ;     if (stageLayer.x  minX
72. )
73. stageLayer.x = 

minX

;

}else if (stageLayer.x 

>
 maxX) {     stageLayer.x = maxX; }     }     運行結果： 大家可以到這裡查看線上示範。點選畫面左半邊控制小鳥向左移動，點選右半邊螢幕，控制小鳥向右移動。小鳥到達螢幕中央後，開始捲軸。