自己做的弹珠小游戏(JS实现简单打砖块弹球小游戏)
类别:编程学习 浏览量:2059
时间:2022-01-26 01:26:01 自己做的弹珠小游戏
JS实现简单打砖块弹球小游戏本文实例为大家分享了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> <li class="container"> <li class="brickBox"></li> <li class="ball"></li> <li class="slider"></li> </li> <li style="margin-left: 40%;font-size: 25px;">当前速度: <span id="speed"></span> </li> <li style="margin-left: 40% ;font-size: 25px;">当前打掉的方块数: <span id="count"></span> </li> </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 li = document.createElement('li') setStyle(li,{ width:brickWidth + "px", height:brickHeight + "px", backgroundColor:getColor(true), position:'absolute', top:parseInt(i/brickColNum)*brickHeight + 'px', left:(i%brickColNum)*brickWidth + 'px' }) brickBox.appendChild(li) } // 点击滑块让小球开始运动 // 定义横向移动的值和纵向移动的值 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和top let 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 = -speedY brickBox.removeChild(brickBox.children[i]); count++; } } console.log(count) document.querySelector("#count").innerHTML=count // GAME OVER if(top>=container.clientHeight-ball.offsetHeight){ clearInterval(timer) if(confirm("GAME OVER,是否重玩")){ location.reload(); }else{alert('您最终分数'+count)} } left += speedX top += speedY // 设置给小球的left和top ball.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/2 if(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是左右方向键没设置终止值。偶尔会出现位置精度丢失导致小球在滑块上抽搐。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- python的decode函数在哪个模块(python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决)
- 带农历的js日期控件
- js搜索功能的实现(前端JavaScript实现本地模糊搜索功能的方法实例)
- mysql存储json的方式(MySQL中查询json格式的字段实例详解)
- MVC中JSON字符长度超出限制
- 原生js实现轮播图代码(js实现轮播图制作方法)
- nodejs如何识别接口(Node实现搜索框进行模糊查询)
- python获取json结果保存文本(Python JSON格式数据的提取和保存的实现)
- videojs播放流媒体(video.js支持m3u8格式直播的实现示例)
- extjs中apply和applyIf的用法
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- nodejs怎么查看对象的全部属性(浅谈nodejs中创建cluster)
- js数组的sort排序
- js截取字符串
- SQLServer中JSON文档型数据的查询问题解决(SQLServer中JSON文档型数据的查询问题解决)
- lazyload延迟加载有什么影响(利用原生JS实现懒加载lazyLoad的三种方法总结)
- 辱华品牌新百伦官宣新代言人IU,个别粉丝希望get爱豆同款(辱华品牌新百伦官宣新代言人IU)
- 巅峰时期被爆床照,曾被选国民最讨厌女星,IU不为人知的黑历史(巅峰时期被爆床照)
- 每天1万吨牛奶倒进下水道,美国大萧条一幕重现(每天1万吨牛奶倒进下水道)
- 如何看待美国数十万加仑牛奶倒下水道 历史又重演了(如何看待美国数十万加仑牛奶倒下水道)
- 历史惊人的相似,美国80万加仑牛奶倒入下水道,意味着什么(历史惊人的相似)
- 美国数十万加仑牛奶倒进下水道,世界会重演1929年的大萧条吗(美国数十万加仑牛奶倒进下水道)
热门推荐
- serv-u服务器安装(Serv-U搭建FTP服务器教程之建立登录用户和密码)
- vscode快速生成html框架(VSCode 自定义html5模板的实现)
- docker如何加volume(Dockerfile 中 VOLUME 与 docker -v 的区别说明)
- dedecms标签怎么调用(dedecms织梦系统内容页英文字母不换行的解决方法)
- python3列表的使用教程(对Python3 pyc 文件的使用详解)
- mvc编译时,让View中的错误提示
- djangorestfulframework教程(Django restframework 源码分析之认证详解)
- apache的安装步骤(windows安装apache系统中无apache2服务解决方案)
- apache安全配置使用教程(正确配置与维护Apache安全性设置方法)
- sqlserver自增长id重置(SQL server 自增ID--序号自动增加的字段操作)