/*
- @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. 定义并初始化与游戏相关的数据结构。
- 定义画布、画笔、游戏背景、球、挡板对象,并初始化。
//定义画布 及画笔
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);
}
}
}
}