国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

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

瀏覽:80日期:2024-03-24 10:46:23

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

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

速度隨機(jī)的 因?yàn)樵O(shè)涉及橫向和縱向速度,所以顯示的小球速度值是他們的和速度(立方和開(kāi)根號(hào))。按回車或者在滑塊上單機(jī)左鍵開(kāi)始游戲。鼠標(biāo)滑動(dòng)或者鍵盤A(左)或者D(右)控制滑塊方向接小球。這個(gè)小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’)// 動(dòng)態(tài)創(chuàng)建磚塊// 定義磚塊大小var brickWidth = 50;var brickHeight = 15;// 計(jì)算磚塊數(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)}// 點(diǎn)擊滑塊讓小球開(kāi)始運(yùn)動(dòng)// 定義橫向移動(dòng)的值和縱向移動(dòng)的值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;//點(diǎn)擊移動(dòng)slider.onclick = move;//回車鍵開(kāi)始彈 function move(){ var count=0; clearInterval(timer) timer = setInterval(function(){// 開(kāi)始移動(dòng)// 獲取小球的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}// 檢測(cè)所有磚塊和小球是否相撞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(’您最終分?jǐn)?shù)’+count)}}left += speedXtop += speedY// 設(shè)置給小球的left和topball.style.left = left + 'px'ball.style.top = top + 'px' },20)}// 讓滑塊跟著鼠標(biāo)移動(dòng)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' }}//讓滑塊跟著左右鍵盤移動(dòng)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) } }// 封裝檢測(cè)相撞的函數(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; }}// 封裝獲取隨機(jī)顏色的函數(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] }}// 封裝獲取隨機(jī)數(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>

效果圖如圖所示

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

沒(méi)用插件 略微樣式丑了點(diǎn)。然后還存在的BUG是左右方向鍵沒(méi)設(shè)置終止值。偶爾會(huì)出現(xiàn)位置精度丟失導(dǎo)致小球在滑塊上抽搐。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 国产日韩精品视频 | 99久久香蕉国产综合影院 | 亚洲一区天堂 | 亚洲美女视频网站 | 日韩精品亚洲专区在线观看 | 日韩欧美视频一区二区三区 | 成年网在线观看免费观看网址 | 午夜亚洲 | 俄罗斯毛片免费大全 | 午夜影院欧美 | 男女性高爱潮免费的国产 | 欧美激情性色生活片在线观看 | 豆国产97在线 | 亚洲 | 中文字幕欧美亚洲 | 性xxxx奶大欧美高清 | 亚洲aⅴ男人的天堂在线观看 | 国产成人精品高清在线 | 亚洲欧美国产高清va在线播放 | 影院成人区精品一区二区婷婷丽春院影视 | 在线观看日韩www视频免费 | 国产成人免费影片在线观看 | 精品国产91久久久久久久 | 久久久久日韩精品无 | 欧美成人三级 | 亚洲国产日韩欧美高清片a 亚洲国产日韩欧美在线 | 我想看三级特黄 | 日韩一级片 | 69日本xxxxxxxxx13 69视频成人 | 亚欧国产 | 91香蕉成人| 玖玖在线国产精品 | 日本久久久久久久久久 | 亚洲国产爱久久全部精品 | 手机看成人免费大片 | 免费一级做a爰片性色毛片 免费一极毛片 | 国产一级网站 | 欧美精品色精品一区二区三区 | 国产欧美在线观看不卡一 | 美女视频黄.免费网址 | 国产精品区牛牛影院 | 欧美一级视频在线观看欧美 |