打砖块
<!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>
1467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
