kanvas HTML5 javascript melaksanakan kemahiran permainan_javascript memecahkan batu bata

Permainan kecil yang ditulis sebagai contoh dalam artikel ini, berdasarkan kanvas dalam HTML5. Permainan ini terutamanya mengenai bola kecil yang melantun dan memukul petak kecil. Kod ini terutamanya melaksanakan penjanaan petak kecil, pemantauan peristiwa kekunci papan kekunci, pergerakan bola kecil dan lantunannya selepas terkena dinding, dan cara menghapuskan petak kecil. Kod menggunakan perpustakaan skrip js

Proses pembangunan permainan:

1. Cipta kanvas:

Letakkan kanvas di dalam teg div, supaya anda boleh mengawal kedudukan tengah kanvas, dan kemudian tambah beberapa gaya pada teg div, seperti sempadan dan jejari sempadan, untuk menjadikannya kelihatan seperti telefon bimbit, yang lebih mudah dilihat.

<div id="main">
 <!--将画布嵌在div块里面,使其可以居中-->
 <canvas id="liuming_canvas" width="300px" height="500px">
 </canvas>
</div>

2. Cipta blok kayu bergerak:

Tentukan petak kecil yang boleh digerakkan Petak bergerak mengandungi atribut berikut, kedudukan koordinat, panjang dan lebar petak kecil dan jarak setiap pergerakan petak kecil.

var diamond = {
 x : 100,  
 y : 485,
 width : 100,
 height : 15,
 move : 10
}

3. Cipta bola kecil untuk memukul:

Tentukan bola kecil untuk menggerakkan dan memukul petak kecil Bola kecil mengandungi atribut berikut, kedudukan koordinat bola kecil, jejari dan kelajuan pada paksi-x dan paksi-y. Kelajuan paksi-x dan paksi-y adalah untuk mengira arah pergerakan bola dan nilai koordinat selepas pergerakan.

var ball_impact = {
 x : 150,
 y : 465,
 r : 10,
 vx : 200,
 vy : 200
}

4. Hasilkan satu siri petak kecil:

Janakan satu siri petak kecil untuk dipukul oleh bola kecil Penjanaan bola kecil terutamanya berdasarkan saiz kanvas, koordinat, panjang dan lebar petak kecil, dan paksi-x dan y-. selang paksi setiap petak kecil.

var diamond_impact = [];//定义存储击打小方块的数组
diamond_impact.length = 0;
var width_span = 25; // 任意两个小方块的横向间隔 
var height_span = 25;  //任意两个小方块的水平间隔 
for(var i =1 ; i <=10 ; i++){//控制每行输出的小方块
 for(var j = 1 ; j < 10 ; j++){//输出每列的小方块 只有x轴和y轴的坐标不一样而已
  var diamond_impact_children = {
   x : width_span,
   y : height_span,
   width : 10,
   height : 10
  };
  width_span += 30;
  diamond_impact.push(diamond_impact_children); //将得到的小方块放在 diamond_impact 中，已被以后使用
 }
 height_span += 25;
 width_span = 25;
}

5. Tulis kaedah untuk menggerakkan petak kecil:

Untuk melaksanakan pergerakan petak kecil, anda perlu mendengar acara mendapatkan papan kekunci, dan kemudian memprosesnya secara berasingan mengikut acara papan kekunci yang diperolehi untuk bergerak ke arah itu, masing-masing. untuk hanya bergerak ke arah kiri dan kanan Pergerakan mungkin tidak memusnahkan blok kecil sepenuhnya,
Semasa proses pergerakan, kedudukan blok kecil yang bergerak mesti dinilai untuk mengelakkannya daripada keluar dari sempadan. Di sini saya telah menentukan empat kaedah untuk mengendalikan pergerakan dalam setiap arah.

//键盘事件，获取当前在那个方向运动

var direction = "";
document.onkeydown = function (e) {
 if (e.keyCode == 37 ) direction = "left" ;
 if (e.keyCode == 39 ) direction = "right";
 if (e.keyCode == 38 ) direction = "up";
 if (e.keyCode == 40 ) direction = "down";
}
 
//定义四个方法来重绘制方块的位置 分别有 左、右、上、下

function move_right_diamond(){
 clear_diamond();//清除以前的方块
 init_canvas_background();//再次初始化画布 下同
 //重新绘制小方块的位置
 if(diamond.x + diamond.width >= canvas.width){ //判断方块是否已经到达最右端
  cxt.fillStyle = "#17F705";
  cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
 }else{
  diamond.x += diamond.move;
  cxt.fillStyle = "#17F705";
  cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
 }
}
//其余方法类似 

6 Tulis kaedah untuk menggerakkan bola dan kaedah untuk melantun petak kecil yang bergerak ke dinding atau bersentuhan dengannya:

Lantunan: Lantunan blok kecil terutamanya mengubah kelajuannya dalam arah paksi-x dan paksi-y Memandangkan kita mentakrifkan gerakan seragam, kita hanya perlu menukar arah kelajuannya.
Pergerakan: Kira koordinat bola baharu berdasarkan kelajuan bola dan saiz pergerakan yang ditentukan, dan kemudian lukis bola baharu.
Contoh gambar lantunan: (Ia serupa dengan lantunan apabila menyentuh dinding, jadi saya tidak akan menerangkan secara terperinci)

Kod untuk pergerakan bola:

cxt.arc(ball_impact.x,ball_impact.y,ball_impact.r,0,Math.PI * 2,true);
cxt.closePath();
cxt.fill();
ball_impact.x += ball_impact.vx * cyc /1000;//改变其坐标的位置
ball_impact.y += ball_impact.vy * cyc /1000;

7. Cara membuat petak kecil hilang apabila bola terkena:

Pukulan: Bola terkena kotak kecil, terutamanya untuk menentukan kedudukan koordinat bola dan kotak kecil. Ambil perhatian bahawa paksi-y dan paksi-x akan dinilai secara berasingan di sini untuk mengehadkan petak kecil di mana bola terkena ke kawasan.
Jam: Selepas memukul petak kecil semasa, tukar panjang dan lebarnya, dan kemudian lukis semula petak kecil Memandangkan panjang dan lebar petak kecil semasa adalah kedua-duanya 0, iaitu, tiada petak kecil selepas lukisan.
Ilustrasi perubahan koordinat pukulan:

8. Cara menilai kegagalan dan kejayaan sesuatu permainan:

Kegagalan: Jika bola jatuh ke titik terendah, iaitu koordinat Y bola lebih besar daripada koordinat Y kanvas, ia bermakna kegagalan
Kejayaan: Kira untuk menentukan sama ada bilangan blok kecil yang dimusnahkan adalah sama dengan bilangan blok kecil yang ditentukan.

if(ball_impact.y + ball_impact.r >= canvas.height){
 cxt.fillStyle = "#FC0000";
 cxt.font = "bold 50px 微软雅黑";
 cxt.fillText("FAILURE！",30,250);
 diamond.move = 0;//不能移动板块
}

//判断是否与所有的小方块数相等
if(count_sum == 90){
 cxt.fillStyle = "#FCF205";
 cxt.font = "bold 50px 微软雅黑";
 cxt.fillText("SUCCESS！",20,250);//在画布上书写SUCCESS 
 diamond.move = 0;//不能移动板块
 ball_impact.vx =0;
 ball_impact.vy =0;
else{
 count_sum = 0;
}

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.