js實(shí)現(xiàn)帶積分彈球小游戲
更新時(shí)間：2020年07月21日 15:19:27 作者：你你你就你
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶積分彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)帶積分的彈球小游戲的具體代碼，供大家參考，具體內(nèi)容如下
注：如果小球與底部方塊的角碰撞，積分可能有些許bug
<style>
#box {
width: 400px;
height: 400px;
border: 1px solid #000000;
margin: 50px auto;
position: relative;
}
#ball {
height: 60px;
width: 60px;
border-radius: 50%;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
#block {
width: 100px;
height: 20px;
position: absolute;
left: 150px;
bottom: 0;
background-color: black;
}
#count {
color: #ff0000;
font-size: 18px;
position: absolute;
width: 20px;
height: 20px;
left: -20px;
top: 0;
}
</style>
<body>
<div id="box">
<div id="count">0</div>
<div id="ball"></div>
<div id="block"></div>
</div>
</body>
<script>
var oBox = document.querySelector('#box');
var oBall = document.querySelector('#ball');
var oBlock = document.querySelector('#block');
var oCount = document.querySelector('#count');
var speedBlock = 5;
var speedX = 5;
var speedY = 4;
var maxLeft = oBox.clientWidth - oBall.offsetWidth;
var maxTop = oBox.clientHeight - oBall.offsetHeight;
var max = oBox.clientWidth - oBlock.offsetWidth;
setInterval(function () {
var left = oBall.offsetLeft;
var top = oBall.offsetTop;
left += speedX;
top += speedY;
if (left < 0 || left > maxLeft) {
speedX = -speedX;
}
if (top < 0) {
speedY *= -1;
}
var r = oBall.offsetWidth / 2;
if (left >= oBlock.offsetLeft - r && // 左邊線碰撞條件
left <= oBlock.offsetLeft - r + oBlock.offsetWidth && // 右邊線碰撞條件
top >= maxTop - oBlock.offsetHeight // 下邊線碰撞條件
) {
// console.log('撞上了');
speedY = -Math.abs(speedY);
// speedY *= -1;
oCount.innerHTML = oCount.innerHTML * 1 + 1;
}
if (top > maxTop) {
left = 0;
top = 0;
}
oBall.style.left = left + 'px';
oBall.style.top = top + 'px';
}, 50);
document.onkeydown = function (e) {
var ev = event || e;
var keyCode = ev.keyCode || ev.which;
var left = oBlock.offsetLeft;
if (keyCode === 37) {
left -= speedBlock;
}
if (keyCode === 39) {
left += speedBlock;
}
if (left <= 0) {
left = 0
}
if (left >= max) {
left = max;
}
oBlock.style.left = left + 'px';
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序下拉框搜索功能的實(shí)現(xiàn)方法，內(nèi)容比較簡單容易理解 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實(shí)例形式詳細(xì)分析了寄生組合式繼承原理、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-01-01
分享9點(diǎn)個(gè)人認(rèn)為比較重要的javascript 編程技巧
接觸和學(xué)習(xí)javascript也有3~4年了，真正牽扯到前后臺(tái)數(shù)據(jù)的交互，數(shù)據(jù)算法等高級編程知之甚少，甚至很少用，如果你問我你知道js什么知識(shí)呢？我可能只能說知道點(diǎn)jQuery的技巧，說編程都談不上，所以需要把某一些技巧作為編程習(xí)慣固定下來，免于以后有人問我你知道什么？2015-04-04
使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間
本篇文章主要介紹了使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象（1）
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對象，對創(chuàng)建對象進(jìn)行了詳細(xì)描述，感興趣的小伙伴們可以參考一下2015-12-12
canvas實(shí)現(xiàn)簡易的圓環(huán)進(jìn)度條效果
本文主要分享了canvas實(shí)現(xiàn)簡易的圓環(huán)進(jìn)度條效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
微信小程序使用自定義組件導(dǎo)航實(shí)現(xiàn)當(dāng)前頁面高亮
這篇文章主要介紹了微信小程序使用自定義組件導(dǎo)航實(shí)現(xiàn)當(dāng)前頁面高亮，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
JavaScript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型
javascript的數(shù)據(jù)類型可以分為兩種：原始類型和引用類型，在此文給大家提到。本文主要給大家介紹javascript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型，涉及到j(luò)s 基本類型 包裝類相關(guān)知識(shí)，本文介紹的詳細(xì)，具有參考借鑒價(jià)值，對本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要介紹了button選擇顏色簡單實(shí)例，有需要的朋友可以參考一下2013-11-11