电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

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

瀏覽:116日期:2024-04-29 15:00:52

本文實例為大家分享了js實現(xiàn)帶積分的彈球小游戲的具體代碼,供大家參考,具體內容如下

注:如果小球與底部方塊的角碰撞,積分可能有些許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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 洗石机-移动滚筒式,振动,螺旋,洗矿机-青州冠诚重工机械有限公司 | 上海物流公司,上海货运公司,上海物流专线-优骐物流公司 | 利浦顿蒸汽发生器厂家-电蒸汽发生器/燃气蒸汽发生器_湖北利浦顿热能科技有限公司官网 | 北京乾茂兴业科技发展有限公司| 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 岩棉板|岩棉复合板|聚氨酯夹芯板|岩棉夹芯板|彩钢夹芯板-江苏恒海钢结构 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 四探针电阻率测试仪-振实密度仪-粉末流动性测定仪-宁波瑞柯微智能 | 同学聚会纪念册制作_毕业相册制作-成都顺时针宣传画册设计公司 | HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 国际金融网_每日财经新资讯网| 成都珞石机械 - 模温机、油温机、油加热器生产厂家 | 高扬程排污泵_隔膜泵_磁力泵_节能自吸离心水泵厂家-【上海博洋】 | 实验室装修_实验室设计_实验室规划设计- 上海广建净化工程公司 | 排烟防火阀-消防排烟风机-正压送风口-厂家-价格-哪家好-德州鑫港旺通风设备有限公司 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | 5L旋转蒸发器-20L-50L旋转蒸发器-上海越众仪器设备有限公司 | 冷却塔减速机器_冷却塔皮带箱维修厂家_凉水塔风机电机更换-广东康明冷却塔厂家 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 海鲜池-专注海鲜鱼缸、移动海鲜缸、饭店鱼缸设计定做-日晟水族厂家 | 制样机-密封锤式破碎机-粉碎机-智能马弗炉-南昌科鑫制样 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 | 切铝机-数控切割机-型材切割机-铝型材切割机-【昆山邓氏精密机械有限公司】 | 集装箱标准养护室-集装箱移动式养护室-广州璟业试验仪器有限公司 | 成都顶呱呱信息技术有限公司-贷款_个人贷款_银行贷款在线申请 - 成都贷款公司 | 阴离子聚丙烯酰胺价格_PAM_高分子聚丙烯酰胺厂家-河南泰航净水材料有限公司 | 天津试验仪器-电液伺服万能材料试验机,恒温恒湿标准养护箱,水泥恒应力压力试验机-天津鑫高伟业科技有限公司 | 江门流水线|江门工作台|江门市伟涛行工业设备有限公司 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 天津暖气片厂家_钢制散热器_天津铜铝复合暖气片_维尼罗散热器 | 成都软件开发_OA|ERP|CRM|管理系统定制开发_成都码邻蜀科技 | 净化车间_洁净厂房_净化公司_净化厂房_无尘室工程_洁净工程装修|改造|施工-深圳净化公司 | 气动隔膜阀_气动隔膜阀厂家_卫生级隔膜阀价格_浙江浙控阀门有限公司 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂 | 小型UV打印机-UV平板打印机-大型uv打印机-UV打印机源头厂家 |松普集团 | 宿舍管理系统_智慧园区系统_房屋/房产管理系统_公寓管理系统 | 防水套管-柔性防水套管-刚性防水套管-上海执品管件有限公司 | 冷却塔降噪隔音_冷却塔噪声治理_冷却塔噪音处理厂家-广东康明冷却塔降噪厂家 | 成都珞石机械 - 模温机、油温机、油加热器生产厂家 | 臭氧灭菌箱-油桶加热箱-原料桶加热融化烘箱-南京腾阳干燥设备厂 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 |