javascript HTML5 캔버스는 벽돌 깨기 game_javascript 기술을 구현합니다.

이 글에서 예로 작성된 작은 게임은 HTML5의 캔버스를 기반으로 합니다. 이 게임은 주로 작은 공이 튀고 작은 사각형에 부딪히는 것에 관한 것입니다. 코드는 주로 작은 사각형 생성, 키보드 키 이벤트 모니터링, 작은 공의 움직임과 벽에 부딪힌 후 리바운드, 작은 사각형 제거 방법을 구현합니다. 코드는 js 스크립트 라이브러리를 사용합니다

게임 개발 과정:

1. 캔버스 만들기:

캔버스의 중심 위치를 조절할 수 있도록 캔버스를 div 태그 안에 넣은 다음 div 태그에 border, border-radius 등의 스타일을 추가하여 휴대폰처럼 보이도록 하고, 보기가 더 쉽습니다.

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

2. 움직이는 나무 블록 만들기:

이동 가능한 작은 사각형을 정의합니다. 움직이는 사각형에는 좌표 위치, 작은 사각형의 길이와 너비, 작은 사각형의 각 이동 거리와 같은 속성이 포함됩니다.

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

3. 타격용 작은 공 만들기:

작은 공을 움직이고 치는 작은 공을 정의합니다. 작은 공에는 작은 공의 좌표 위치, 반경, x축과 y축의 속도 등의 속성이 포함됩니다. x축과 y축의 속도는 공의 이동 방향과 이동 후의 좌표값을 계산하기 위한 것입니다.

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

4. 일련의 작은 사각형 생성:

작은 공에 맞기 위한 일련의 작은 사각형을 생성합니다. 작은 공의 생성은 주로 캔버스의 크기, 작은 사각형의 좌표, 길이 및 너비, x축 및 y-를 기반으로 합니다. 각 작은 정사각형의 축 ​​간격.

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. 작은 사각형을 이동하는 방법을 작성하세요.

작은 사각형 이동을 구현하려면 먼저 키보드를 얻는 이벤트를 수신한 다음 얻은 키보드 이벤트에 따라 별도로 처리하여 해당 방향으로 이동하도록 해야 합니다. 여기서는 순서대로 4가지 방향을 정의했습니다. 좌우 방향으로만 이동하면 작은 블록이 완전히 파괴되지 않을 수 있습니다.
이동 과정에서 움직이는 작은 블록의 위치를 ​​판단하여 범위를 벗어나지 않도록 해야 합니다. 여기에서는 각 방향의 움직임을 처리하는 네 가지 방법을 정의했습니다.

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

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. 공을 움직이는 방법과 움직이는 작은 사각형을 벽에 부딪치거나 접촉하는 방법을 작성하세요.

리바운드: 작은 블록의 리바운드는 주로 x축과 y축 방향으로 속도를 변경합니다. 등속 운동을 정의하므로 속도 방향만 변경하면 됩니다.
이동: 공의 속도와 지정된 이동 크기를 기반으로 새 공 좌표를 계산한 다음 새 공을 그립니다.
리바운드 사진 예시: (벽에 닿았을 때 리바운드와 유사하므로 자세히 설명하지 않겠습니다.)

공 이동 코드:

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. 공이 닿았을 때 작은 사각형이 사라지게 하는 방법:

타격: 공이 작은 상자에 부딪히는 현상으로 주로 공과 작은 상자의 좌표 위치를 결정합니다. 여기서는 공이 닿는 작은 사각형을 특정 영역으로 제한하기 위해 y축과 x축을 별도로 판단합니다.
시간: 현재 작은 사각형을 친 후 길이와 너비를 변경한 다음 작은 사각형을 다시 그립니다. 현재 작은 사각형의 길이와 너비가 모두 0이므로, 즉 그린 후 작은 사각형이 없습니다.
히트의 좌표 변화 그림:

8. 게임의 실패와 성공을 판단하는 방법:

실패: 공이 가장 낮은 지점으로 떨어지면, 즉 공의 Y 좌표가 캔버스의 Y 좌표보다 크면 실패를 의미합니다.
성공: 파괴된 작은 블록의 개수가 지정된 작은 블록의 개수와 동일한지 확인하는 카운트입니다.

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.