js實現(xiàn)帶積分彈球小游戲

更新時間：2020年07月21日 15:19:27 作者：你你你就你

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

本文實例為大家分享了js實現(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
彈球

微信小程序下拉框搜索功能的實現(xiàn)方法
這篇文章主要介紹了微信小程序下拉框搜索功能的實現(xiàn)方法，內(nèi)容比較簡單容易理解 ,需要的朋友可以參考下
2019-07-07
JavaScript寄生組合式繼承實例詳解
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實例形式詳細分析了寄生組合式繼承原理、實現(xiàn)方法與相關注意事項,需要的朋友可以參考下
2018-01-01
分享9點個人認為比較重要的javascript 編程技巧
接觸和學習javascript也有3~4年了，真正牽扯到前后臺數(shù)據(jù)的交互，數(shù)據(jù)算法等高級編程知之甚少，甚至很少用，如果你問我你知道js什么知識呢？我可能只能說知道點jQuery的技巧，說編程都談不上，所以需要把某一些技巧作為編程習慣固定下來，免于以后有人問我你知道什么？
2015-04-04
使用javascript實現(xiàn)有效時間的控制,并顯示將要過期的時間
本篇文章主要介紹了使用javascript實現(xiàn)有效時間的控制,并顯示將要過期的時間示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象（1）
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對象，對創(chuàng)建對象進行了詳細描述，感興趣的小伙伴們可以參考一下
2015-12-12
canvas實現(xiàn)簡易的圓環(huán)進度條效果
本文主要分享了canvas實現(xiàn)簡易的圓環(huán)進度條效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
小程序?qū)崿F(xiàn)分頁效果
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
微信小程序使用自定義組件導航實現(xiàn)當前頁面高亮
這篇文章主要介紹了微信小程序使用自定義組件導航實現(xiàn)當前頁面高亮，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
JavaScript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型
javascript的數(shù)據(jù)類型可以分為兩種：原始類型和引用類型，在此文給大家提到。本文主要給大家介紹javascript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型，涉及到js 基本類型包裝類相關知識，本文介紹的詳細，具有參考借鑒價值，對本文感興趣的朋友一起學習吧
2016-01-01
JS小功能（button選擇顏色)簡單實例
這篇文章主要介紹了button選擇顏色簡單實例，有需要的朋友可以參考一下
2013-11-11