打砖块
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>打砖块</title><style>* {margin: 0;padding: 0;}.container {position: relative;margin: 0 auto;width: 300px;height: 500px;background-color: black;}.board {position: absolute;border-radius: 5px;background-color: white;}.ball {position: absolute;border-radius: 50%;background-color: red;left: 145px;bottom: 100px;}.brick {position: absolute;background-color: yellow;border: 1px solid green;box-sizing: border-box;}button {display: block;margin: 0 auto;width: 300px;}</style></head><body><button>开始</button><div class="container"></div></body><script>(function () {var paras = {boardWidth: 100,boardHeight: 10,boardBottom: 20,ballRadius: 5,brickWidth: 10,speedX: 1,speedY: -1,}var container = document.getElementsByClassName('container')[0];var board = document.createElement('div');var ball = document.createElement('div');var bricksInfo = { topMin: 4, topMax: 28, leftMin: 4, leftMax: 25, color: 'yellow' };var brickArr = [];var timer;init();function init() {initBricks();initBoard();initBall();var btn = document.getElementsByTagName('button')[0];btn.onclick = function () {if (btn.innerText.indexOf('开始') >= 0) {run();btn.innerText = "暂停";} else {clearInterval(timer);btn.innerText = "开始";}}}// 初始化砖块function initBricks() {for (var i = 0; i <= (bricksInfo.topMax); i++) {brickArr[i] = [];for (var j = 0; j <= bricksInfo.leftMax; j++) {brickArr[i][j] = null;if (i >= bricksInfo.topMin && j >= bricksInfo.leftMin && i <= bricksInfo.topMax && j <= bricksInfo.leftMax) {var brick = document.createElement('div');brick.className = 'brick';brick.style.width = paras.brickWidth + 'px';brick.style.height = paras.brickWidth + 'px';brick.style.left = paras.brickWidth * j + 'px';brick.style.top = paras.brickWidth * i + 'px';container.appendChild(brick);brickArr[i][j] = brick;}}}}function initBoard() {board.className = 'board';board.style.width = paras.boardWidth + 'px';board.style.height = paras.boardHeight + 'px';board.style.bottom = paras.boardBottom + 'px';board.style.left = ((container.offsetWidth - paras.boardWidth) / 2) + 'px';container.appendChild(board);document.onmousedown = function (ev) {var lastX = ev.clientX;document.onmousemove = function (ev) {var left = board.offsetLeft + ev.clientX - lastX;left = left < 0 ? 0 : left;left = left > container.offsetWidth - board.offsetWidth ? container.offsetWidth - board.offsetWidth : left;board.style.left = left + 'px';lastX = ev.clientX;}document.onmouseup = function (ev) {document.onmousemove = null;}}}function initBall() {ball.className = 'ball';ball.style.width = paras.ballRadius * 2 + 'px';ball.style.height = paras.ballRadius * 2 + 'px';container.appendChild(ball);}function run() {timer = setInterval(function () {// 判断小球是否超出左右边框if (ball.offsetLeft <= 0 || ball.offsetLeft >= container.offsetWidth - ball.offsetWidth) {paras.speedX *= -1;}// 判断小球是否超出上边框if (ball.offsetTop <= 0) {paras.speedY *= -1;}// 判断小球是否超出下边框if (ball.offsetTop >= container.offsetHeight - ball.offsetHeight) {// 游戏失败paras.speedY *= -1;}// 判断小球是否落在托板的范围内if (ball.offsetTop >= board.offsetTop - ball.offsetHeight && ball.offsetLeft >= board.offsetLeft && ball.offsetLeft + ball.offsetWidth <= board.offsetLeft + board.offsetWidth && paras.speedY > 0) {paras.speedY *= -1;}ball.style.left = (ball.offsetLeft + paras.speedX) + 'px';ball.style.top = (ball.offsetTop + paras.speedY) + 'px';// 检查是否与砖块碰撞，及碰撞角度checkBump();}, 1)}function checkBump() {// 判断小球的运动方向 0 右上 1 右下 2 左下 3 左上// 以小球最前面的角的坐标为参考点var direction = 0;if (paras.speedX > 0) {if (paras.speedY > 0) {direction = 1;} else {direction = 0;}} else {if (paras.speedY > 0) {direction = 2;} else {direction = 3;}}var brickIndexX,brickIndexY,ballX,ballY ;// 小球圆心作为参考点ballX = ball.offsetTop + ball.offsetWidth /2 ;ballY = ball.offsetLeft + ball.offsetWidth /2 ;// switch (direction) {//case 0:// ballX = ball.offsetTop;// ballY = ball.offsetLeft + ball.offsetWidth;// break;//case 1://ballX = ball.offsetTop + ball.offsetHeight ;//ballY = ball.offsetLeft + ball.offsetWidth ;// break;//case 2://ballX = ball.offsetTop + ball.offsetHeight ;//ballY = ball.offsetLeft ;// break;//case 3://ballX = ball.offsetTop ;//ballY = ball.offsetLeft ;// break;// }// 计算小球所在位置的砖块数组索引值brickIndexX = Math.floor(ballX / 10);brickIndexY = Math.floor(ballY / 10);//判断小球当前位置是否有砖块if (brickIndexX <= bricksInfo.topMax && brickIndexY <= bricksInfo.leftMax) {if (brickArr[brickIndexX][brickIndexY] != null) {// 该位置有砖块则进行反弹，并移除砖块// 判断小球撞击砖块的那条边var x = ballX - brickIndexX * 10 - 5;var y = ballY - brickIndexY * 10 - 5;console.log(x,y);if( x > 0){if(y > 0){// 撞击右下角if(Math.abs(y) > Math.abs(x)){paras.speedY *= -1;}else{paras.speedX *= -1;}}else{// 撞击右上角if(Math.abs(y) > Math.abs(x)){paras.speedY *= -1;}else{paras.speedX *= -1;}}}else{if(y > 0){// 撞击左下角if(Math.abs(y) > Math.abs(x)){paras.speedY *= -1;}else{paras.speedX *= -1;}}else{// 撞击左上角if(Math.abs(y) > Math.abs(x)){paras.speedY *= -1;}else{paras.speedX *= -1;}}}container.removeChild(brickArr[brickIndexX][brickIndexY]);brickArr[brickIndexX][brickIndexY] = null;}}}})();</script></html>
