JS實現(xiàn)簡單打磚塊彈球小游戲
更新時間:2021年09月12日 10:16:28 作者:我是真的不會前端
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單打磚塊彈球小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)打磚塊彈球小游戲的具體代碼,供大家參考,具體內容如下
使用原生JS寫的,還有一點瑕疵。代碼直接復制到html就能使用
速度隨機的 因為設涉及橫向和縱向速度,所以顯示的小球速度值是他們的和速度(立方和開根號)。
按回車或者在滑塊上單機左鍵開始游戲。鼠標滑動或者鍵盤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;">當前速度: <span id="speed"></span> </div> <div style="margin-left: 40% ;font-size: 25px;">當前打掉的方塊數(shù): <span id="count"></span> </div> </body> <script> // 獲取當前所有標簽 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('您最終分數(shù)'+count)} } left += speedX top += speedY // 設置給小球的left和top ball.style.left = left + "px" ball.style.top = top + "px" },20) } // 讓滑塊跟著鼠標移動 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ù) 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>
效果圖如圖所示
沒用插件 略微樣式丑了點。
然后還存在的BUG是左右方向鍵沒設置終止值。偶爾會出現(xiàn)位置精度丟失導致小球在滑塊上抽搐。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS函數(shù)報錯Uncaught ReferenceError: XX is not
這篇文章主要介紹了JS函數(shù)報錯Uncaught ReferenceError: XX is not defined問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10