打砖块游戏分析二

/*

• @Author: yjxcoder
• @Date: 2020-02-26 14:05:04
• @Last Modified by: yjxcoder
• @Last Modified time: 2020-02-26 17:57:44
  */

阳家勋2月26日日报

• 今日课堂内容
  • 一、打砖块游戏逻辑简述
    • 1. 定义并初始化与游戏相关的数据结构。
    • 2. 执行定时器不断检测是否碰撞，并更新画布情况。
  • 二、 打砖块游戏重要代码分析
    • 1. 砖块与砖块的碰撞检测

今日学习内容

一、打砖块游戏逻辑简述

1. 定义并初始化与游戏相关的数据结构。

• 定义画布、画笔、游戏背景、球、挡板对象，并初始化。

//定义画布 及画笔
var canvas,context;
//定义画布的大小
var cW = 1024,cH = 768;
//定义背景 小球 挡板
var bg,ball,board;
//定义挡板的坐标 及 宽高
var boardX = 400,boardY = 700,boardW = 126,boardH = 9;
//定义小球的坐标 及宽高
var ballX = 400,ballY = 630,ballWH = 60;
// 定义小球的左右加速度
var vx = 5, vy = -8;
// 砖块数组
var bricks = [];
window.onload = function(){
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	
	// 加载图片
	bg = getImage("img/bg2.png");
	ball = getImage("img/ball.png");
	board = getImage("img/board.png");

• 创建4行5列的砖块对象，并初始化这20个砖块的位置和背景图片。

// 初始化砖块
function createBuick()
{
	for(var i = 0; i < 4; i++)
	{
		for(var j = 0; j < 5; j++)
		{
			var brick = new Brick();
		}
	}
}

2. 执行定时器不断检测是否碰撞，并更新画布情况。

• 在定时器中不断清除整个画布内容，同时更新小球和砖块的位置，并且检测小球与挡板，小球与砖块是否发生碰撞。

setInterval(function(){
		context.clearRect(0,0,cW,cH);
		context.drawImage(bg,0,0,cW,cH);
		context.drawImage(board,boardX,boardY,boardW,boardH);
		//更新小球
		updateBall();
		//更新砖块
		updateBricks();
		//小球与挡板的碰撞
		ballAndBoard();
	},30)

• 若小球与挡板碰撞，则将小球的纵轴速度反向。若小球与砖块碰撞，则根据小球与砖块的水平方向碰撞还是竖直方向碰撞，若与砖块的水平方向碰撞，则将小球的vx取相反数，若与砖块的竖直方向碰撞，则将小球的vy取相反数。

//与砖块碰撞检测
		for (var i = 0; i < 5; i++) {
			for(var j = 0; j < 4; j++){
				if(list[i][j] > 0)
				{
					//每块砖块的四条边的位置
					var leftX = i * blockWidth + 2*i + 7;
					var rightX = leftX + blockWidth;
					var topY = j * blockHeight + 2*j + 50;
					var bottomY = topY + blockHeight;
					
					//左侧碰撞
					if( nextX + ball.width > leftX 
						&& nextX + ball.width < rightX
						&& midY > topY && midY < bottomY
					){
						ball.vx *= -1
						console.log("左侧碰撞",i,j);
						list[i][j] = 0;
					}
					//右侧碰撞
                    ......
				}
			}
		}

二、 打砖块游戏重要代码分析

1. 砖块与砖块的碰撞检测

• 通过双层for循环遍历，若list数组中i行j列的砖块还未被消除，则计算出此砖块的四条边的位置。若小球的下次运动位置的x坐标与小球的宽度之和大于此砖块左侧边x坐标值且小于右侧边x坐标值，同时小球中心位置大于砖块下侧边y坐标值且小于上栅边y坐标值。( nextX + ball.width > leftX&& nextX + ball.idth < rightX&& midY >topY && midY<bottomY)，则将小球的运动方向由向左改成向右，并将第i行j列的砖块消除。小球与砖块其他方向的碰撞与上述相似。

for (var i = 0; i < 5; i++) {
			for(var j = 0; j < 4; j++){
				if(list[i][j] > 0)
				{
					//每块砖块的四条边的位置
					var leftX = i * blockWidth + 2*i + 7;
					var rightX = leftX + blockWidth;
					var topY = j * blockHeight + 2*j + 50;
					var bottomY = topY + blockHeight;
					
					//左侧碰撞
					if( nextX + ball.width > leftX 
						&& nextX + ball.width < rightX
						&& midY > topY && midY < bottomY
					){
						ball.vx *= -1
						console.log("左侧碰撞",i,j);
						list[i][j] = 0;
					}
					//右侧碰撞
					if ( nextX > leftX && nextX < rightX 
						&& midY > topY && midY < bottomY 
					) {
						// 改变小球运动方向，哪面碰撞则从相反方向运动。
						ball.vx *= -1
						console.log("右侧碰撞",i,j);
						list[i][j] = 0;
					}
					//底部碰撞
					if(nextY > topY && nextY < bottomY 
						&& midX > leftX && midX < rightX)
					{
						ball.vy *= -1;
						list[i][j] = 0;
						console.log("底部碰撞",i,j);
					}
					
					//顶部
					if(nextY + ball.height > topY 
						&& nextY + ball.height < bottomY
						&& midX > leftX && midX < rightX)
					{
						ball.vy *= -1;
						list[i][j] = 0;
						console.log("顶部碰撞",i,j);
					}
				}
			}
		}