Javascript HTML5 Canvas implementiert bahnbrechende Game_Javascript-Fähigkeiten

Ein kleines Spiel, das in diesem Artikel als Beispiel geschrieben wurde und auf Canvas in HTML5 basiert. Bei dem Spiel geht es hauptsächlich darum, dass kleine Bälle hüpfen und kleine Felder treffen. Der Code implementiert hauptsächlich die Generierung kleiner Quadrate, die Überwachung von Tastaturtastenereignissen, die Bewegung kleiner Bälle und deren Rückprall nach dem Auftreffen auf die Wand sowie die Beseitigung kleiner Quadrate. Der Code verwendet eine js-Skriptbibliothek

Spielentwicklungsprozess:

1. Leinwand erstellen:

Fügen Sie die Leinwand in das div-Tag ein, damit Sie die Mittelposition der Leinwand steuern können, und fügen Sie dann dem div-Tag einige Stile hinzu, z. B. Rahmen und Randradius, damit es wie ein Mobiltelefon aussieht. was einfacher zu sehen ist.

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

2. Erstellen Sie bewegliche Holzklötze:

Definieren Sie ein kleines Quadrat, das verschoben werden kann. Das bewegliche Quadrat enthält die folgenden Attribute: Koordinatenposition, Länge und Breite des kleinen Quadrats sowie die Entfernung jeder Bewegung des kleinen Quadrats.

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

3. Erstellen Sie einen kleinen Ball zum Schlagen:

Definieren Sie einen kleinen Ball zum Bewegen und Schlagen kleiner Quadrate. Der kleine Ball enthält die folgenden Attribute: die Koordinatenposition des kleinen Balls, den Radius und die Geschwindigkeit auf der x-Achse und der y-Achse. Die Geschwindigkeit der x-Achse und der y-Achse dient zur Berechnung der Bewegungsrichtung des Balls und des Koordinatenwerts nach der Bewegung.

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

4. Erzeugen Sie eine Reihe kleiner Quadrate:

Erzeugen Sie eine Reihe kleiner Quadrate, die von kleinen Bällen getroffen werden. Die Erzeugung kleiner Bälle basiert hauptsächlich auf der Größe der Leinwand, den Koordinaten, der Länge und Breite der kleinen Quadrate sowie der x-Achse und der y-Achse. Achsenintervalle jedes kleinen Quadrats.

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. Schreiben Sie eine Methode zum Verschieben kleiner Quadrate:

Um das Verschieben des kleinen Quadrats zu implementieren, müssen Sie zunächst das Ereignis des Erhaltens der Tastatur abhören und es dann entsprechend dem erhaltenen Tastaturereignis separat verarbeiten, um sich in diese Richtung zu bewegen sich nur in die linke und rechte Richtung zu bewegen, darf kleine Blöcke nicht vollständig zerstören,
Während des Bewegungsvorgangs muss die Position des sich bewegenden kleinen Blocks beurteilt werden, um zu verhindern, dass er außerhalb der Grenzen gerät. Hier habe ich vier Methoden definiert, um Bewegungen in jede Richtung zu handhaben.

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

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. Schreiben Sie eine Methode zum Bewegen des Balls und eine Methode zum Abprallen des sich bewegenden kleinen Quadrats gegen eine Wand oder in Kontakt damit:

Rückprall: Der Rückprall des kleinen Blocks ändert hauptsächlich seine Geschwindigkeit in Richtung der x-Achse und der y-Achse. Da wir eine gleichmäßige Bewegung definieren, müssen wir nur die Richtung seiner Geschwindigkeit ändern.
Bewegung: Berechnen Sie die neuen Ballkoordinaten basierend auf der Geschwindigkeit des Balls und der angegebenen Bewegungsgröße und zeichnen Sie dann den neuen Ball.
Beispiel für ein Rückprallbild: (Es ähnelt dem Rückprall beim Berühren der Wand, daher werde ich nicht auf Details eingehen)

Code für Ballbewegung:

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. So lässt man das kleine Quadrat verschwinden, wenn der Ball darauf trifft:

Treffen: Der Ball trifft auf das kleine Kästchen, hauptsächlich um die Koordinatenpositionen des Balls und des kleinen Kästchens zu bestimmen. Beachten Sie, dass die y-Achse und die x-Achse hier getrennt beurteilt werden, um das kleine Quadrat, auf das der Ball trifft, auf einen Bereich zu beschränken.
Stunden: Nachdem Sie das aktuelle kleine Quadrat getroffen haben, ändern Sie dessen Länge und Breite und zeichnen Sie dann das kleine Quadrat neu. Da die Länge und Breite des aktuellen kleinen Quadrats beide 0 sind, gibt es nach dem Zeichnen kein kleines Quadrat.
Darstellung der Koordinatenänderungen des Treffers:

8. So beurteilen Sie Misserfolg und Erfolg eines Spiels:

Fehler: Wenn der Ball auf den tiefsten Punkt fällt, d. h. die Y-Koordinate des Balls größer ist als die Y-Koordinate der Leinwand, bedeutet dies einen Fehler Erfolg: Zählen Sie, um festzustellen, ob die Anzahl der zerstörten kleinen Blöcke mit der angegebenen Anzahl kleiner Blöcke übereinstimmt.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.