Le canevas HTML5 javascript implémente les compétences game_javascript pour briser les briques

Un petit jeu écrit à titre d'exemple dans cet article, basé sur du canevas en HTML5. Le jeu consiste principalement à faire rebondir de petites balles et à frapper de petits carrés. Le code implémente principalement la génération de petits carrés, la surveillance des événements des touches du clavier, le mouvement des petites balles et leur rebond après avoir heurté le mur, et comment éliminer les petits carrés. Le code utilise une bibliothèque de scripts js

Processus de développement du jeu :

1. Créer une toile :

Placez le canevas à l'intérieur de la balise div, afin de pouvoir contrôler la position centrale du canevas, puis ajoutez quelques styles à la balise div, tels que border et border-radius, pour lui donner l'apparence d'un téléphone portable, ce qui est plus facile à visualiser.

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

2. Créez des blocs de bois mobiles :

Définissez un petit carré qui peut être déplacé. Le carré mobile contient les attributs suivants, la position des coordonnées, la longueur et la largeur du petit carré et la distance de chaque mouvement du petit carré.

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

3. Créez une petite balle pour frapper :

Définissez une petite balle pour déplacer et frapper de petits carrés. La petite balle contient les attributs suivants, la position des coordonnées de la petite balle, le rayon et la vitesse sur l'axe des x et l'axe des y. La vitesse de l'axe x et de l'axe y permet de calculer la direction du mouvement de la balle et la valeur des coordonnées après le mouvement.

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

4. Générez une série de petits carrés :

Générez une série de petits carrés pour être frappés par de petites balles. La génération de petites balles est principalement basée sur la taille de la toile, les coordonnées, la longueur et la largeur des petits carrés, ainsi que sur les axes x et y. intervalles d'axe de chaque petit carré.

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. Écrivez une méthode pour déplacer des petits carrés :

Pour implémenter le mouvement du petit carré, vous devez d'abord écouter l'événement d'obtention du clavier, puis le traiter séparément en fonction de l'événement de clavier obtenu pour vous déplacer dans cette direction, respectivement. afin de se déplacer uniquement dans les directions gauche et droite, le mouvement ne peut pas détruire complètement les petits blocs,
. Pendant le processus de déplacement, la position du petit bloc en mouvement doit être jugée pour l'empêcher de sortir des limites. Ici, j'ai défini quatre méthodes pour gérer le mouvement dans chaque direction.

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

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. Écrivez une méthode pour déplacer la balle et une méthode pour faire rebondir le petit carré en mouvement contre un mur ou en contact avec celui-ci :

Rebond : Le rebond du petit bloc modifie principalement sa vitesse dans les directions des axes x et y. Puisque nous définissons un mouvement uniforme, il nous suffit de changer la direction de sa vitesse.
Mouvement : calculez les coordonnées de la nouvelle balle en fonction de la vitesse de la balle et de la taille de mouvement spécifiée, puis dessinez la nouvelle balle.
Exemple d'image en rebond : (C'est similaire au rebond en touchant le mur, donc je n'entrerai pas dans les détails)

Code pour le mouvement du ballon :

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. Comment faire disparaître le petit carré lorsque la balle le frappe :

Frapper : la balle frappe la petite boîte, principalement pour déterminer les positions coordonnées de la balle et de la petite boîte. Notez que les axes y et x seront jugés séparément ici pour limiter le petit carré où la balle frappe à une région.
Heures : après avoir atteint le petit carré actuel, modifiez sa longueur et sa largeur, puis redessinez le petit carré. Puisque la longueur et la largeur du petit carré actuel sont toutes deux égales à 0, c'est-à-dire qu'il n'y a pas de petit carré après le dessin.
Illustration des changements de coordonnées du coup :

8. Comment juger de l'échec et du succès d'un jeu :

Échec : Si la balle tombe au point le plus bas, c'est-à-dire que la coordonnée Y de la balle est supérieure à la coordonnée Y de la toile, cela signifie un échec
; Succès : comptez pour déterminer si le nombre de petits blocs détruits est le même que le nombre spécifié de petits blocs.

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;
}

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.