日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

原生JS实现简单打砖块弹球小游戏

發布時間：2023/12/20 javascript 65 豆豆
生活随笔 收集整理的這篇文章主要介紹了 原生JS实现简单打砖块弹球小游戏 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用原生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;">當前打掉的方塊數: <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') // 動態創建磚塊 // 定義磚塊大小 var brickWidth = 50; var brickHeight = 15; // 計算磚塊數量 var brickNum = brickBox.clientWidth * brickBox.clientHeight / (brickWidth * brickHeight) // console.log(brickNum); var brickColNum = brickBox.clientWidth / brickWidth // 根據數量去創建 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和toplet 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 = -speedYbrickBox.removeChild(brickBox.children[i]);count++;}}console.log(count)document.querySelector("#count").innerHTML=count// GAME OVERif(top>=container.clientHeight-ball.offsetHeight){clearInterval(timer)if(confirm("GAME OVER,是否重玩")){location.reload();}else{alert('您最終分數'+count)}}left += speedXtop += speedY// 設置給小球的left和topball.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/2if(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)}} // 封裝檢測相撞的函數 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;} } // 封裝獲取隨機顏色的函數 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)})` } // 封裝設置樣式的函數 function setStyle(ele,styleObj){for(var attr in styleObj){ele.style[attr] = styleObj[attr]} } // 封裝獲取隨機數的函數 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是左右方向鍵沒設置終止值。偶爾會出現位置精度丟失導致小球在滑塊上抽搐。

總結

以上是生活随笔為你收集整理的原生JS实现简单打砖块弹球小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。