快捷導(dǎo)航

JS實現(xiàn)簡單打磚塊彈球小游戲

更新時間：2021年09月12日 10:16:28 作者：我是真的不會前端

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單打磚塊彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)打磚塊彈球小游戲的具體代碼，供大家參考，具體內(nèi)容如下

使用原生JS寫的，還有一點瑕疵。代碼直接復(fù)制到html就能使用

速度隨機的因為設(shè)涉及橫向和縱向速度，所以顯示的小球速度值是他們的和速度（立方和開根號）。
按回車或者在滑塊上單機左鍵開始游戲。鼠標(biāo)滑動或者鍵盤A（左）或者D（右）控制滑塊方向接小球。
這個小demo的意義主要為了鍛煉邏輯能力：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
.container{
    width: 500px;
    height: 500px;
    border:1px solid #000;
    margin:auto;
    position:relative;
}
.brickBox{
    width: 500px;
    height: 300px;
    /* background-color: yellowgreen; */
    position:absolute;
    left: 0;
    top: 0;
}
.ball{
    width: 15px;
    height: 15px;
    background-color:purple;
    border-radius:50%;
    position:absolute;
    bottom:30px;
    left:235px;
    /* margin-left:-15px; */
}
.slider{
    width: 150px;
    height: 30px;
    background-color: #00f;
    position:absolute;
    /* left:50%; */
    left:175px;
    /* margin-left:-75px; */
    bottom:0;
}
</style>
</head>
<body>
<div class="container">
    <div class="brickBox"></div>
    <div class="ball"></div>
    <div class="slider"></div>
</div>
<div style="margin-left: 40%;font-size: 25px;">當(dāng)前速度: <span id="speed"></span> </div>
<div style="margin-left: 40% ;font-size: 25px;">當(dāng)前打掉的方塊數(shù): <span id="count"></span> </div>

</body>
<script>
// 獲取當(dāng)前所有標(biāo)簽
var container = document.querySelector('.container')
var brickBox = container.querySelector('.brickBox')
var ball = container.querySelector('.ball')
var slider = container.querySelector('.slider')
// 動態(tài)創(chuàng)建磚塊
// 定義磚塊大小
var brickWidth = 50;
var brickHeight = 15;
// 計算磚塊數(shù)量
var brickNum = brickBox.clientWidth * brickBox.clientHeight / (brickWidth * brickHeight)
// console.log(brickNum);
var brickColNum = brickBox.clientWidth / brickWidth
// 根據(jù)數(shù)量去創(chuàng)建
for(var i=0;i<brickNum;i++){
    var div = document.createElement('div')
    setStyle(div,{
        width:brickWidth + "px",
        height:brickHeight + "px",
        backgroundColor:getColor(true),
        position:'absolute',
        top:parseInt(i/brickColNum)*brickHeight + 'px',
        left:(i%brickColNum)*brickWidth + 'px'
    })
    brickBox.appendChild(div)
}


// 點擊滑塊讓小球開始運動
// 定義橫向移動的值和縱向移動的值
var speedX = getRandom(1,8);
var speedY = getRandom(1,8);
document.querySelector("#speed").innerHTML= Math.sqrt(Math.pow(speedX,2)+Math.pow(speedY,2))
var timer;
//點擊移動
slider.onclick = move;
//回車鍵開始彈

           
function move(){
    var count=0;
    clearInterval(timer)
    timer = setInterval(function(){
        // 開始移動
        // 獲取小球的left和top
        let left = ball.offsetLeft;
        let top = ball.offsetTop;
       
        // 讓left和top增加速度
        // 小球和滑塊相撞
        if(boom(slider,ball)){
            speedY = -speedY
        }
        // 小球和大盒子相撞
        if(left<=0 || left>=container.clientWidth - ball.offsetWidth){
            speedX = -speedX
        }
        if(top<=0){
            speedY = -speedY
        }
        // 檢測所有磚塊和小球是否相撞
        for(let i=0;i<brickBox.children.length;i++){
            if(boom(brickBox.children[i],ball)){
                
                speedY = -speedY
                brickBox.removeChild(brickBox.children[i]);
                count++;
            }
           
            
        }
        console.log(count)
        document.querySelector("#count").innerHTML=count
        // GAME OVER
        if(top>=container.clientHeight-ball.offsetHeight){
            clearInterval(timer)
            if(confirm("GAME OVER,是否重玩")){
   location.reload();
  }else{alert('您最終分?jǐn)?shù)'+count)}
        }
        left += speedX
        top += speedY
        // 設(shè)置給小球的left和top
        ball.style.left = left + "px"
        ball.style.top = top + "px"
    },20)
}

// 讓滑塊跟著鼠標(biāo)移動
slider.onmouseover = function(){
    document.onmousemove = function(e){
        var e = e || window.event;
        var x = e.pageX;
        var l = x - container.offsetLeft - 1 - slider.offsetWidth/2
        if(l<0){
            l = 0
        }
        if(l > container.clientWidth - slider.offsetWidth){
            l = container.clientWidth - slider.offsetWidth
        }
        slider.style.left = l + "px"
    }
}
//讓滑塊跟著左右鍵盤移動
window.onload= function(){
    document.onkeydown = e=>{
        var e = e || window.event;
        var keycode = e.keyCode || e.which;
        var keyword = String.fromCharCode(keycode).toLowerCase();
        if(keycode==13){
            move();
        }
       if(keyword=='a'){
           console.log("1111")
        slider.style.left= slider.offsetLeft-15+"px"
       }else if(keyword=='d'){
        console.log("222")
           slider.style.left=slider.offsetLeft+15+"px"
       }
       console.log(slider.offsetLeft)
        
        
    }
    
}
// 封裝檢測相撞的函數(shù)
function boom(node1,node2){
    // 不撞在一起的只有4中可能
    if(node1.offsetLeft+node1.offsetWidth<node2.offsetLeft || node1.offsetTop+node1.offsetHeight<node2.offsetTop || node2.offsetLeft+node2.offsetWidth<node1.offsetLeft || node2.offsetTop+node2.offsetHeight<node1.offsetTop){
        return false;
    }else{
        return true;
    }
}
// 封裝獲取隨機顏色的函數(shù)
function getColor(hex=true){
    if(hex){
        var color = '#'
        for(var i=0;i<3;i++){
            var rgb = getRandom(256).toString(16);
            rgb = rgb.length===1?'0'+rgb:rgb;
            color += rgb
        }
        return color;
    }
    return `rgb(${getRandom(256)},${getRandom(256)},${getRandom(256)})`
}
// 封裝設(shè)置樣式的函數(shù)
function setStyle(ele,styleObj){
    for(var attr in styleObj){
            ele.style[attr] = styleObj[attr]
    }
}
// 封裝獲取隨機數(shù)的函數(shù)
function getRandom(a,b=0){
    var max = Math.max(a,b);
    var min = Math.min(a,b)
    return Math.floor(Math.random() * (max-min)) + min
}
</script>
</html>

效果圖如圖所示