本文实例为大家分享了JS实现打砖块小游戏的具体代码，供大家参考，具体内容如下
通过面向对象,通过修改对JS的调用次数可直接设置打砖块游戏的个数
小球的反弹速度以及反弹方向都设置了随机值,
当小球与砖块发生碰撞时,会使砖块display属性设置为none,从而达到消失的效果.
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <script type="module">
? ? ? ? import Brick from "./js/Brick.js";
? ? ? ? //可以通过循环创建多个打砖块游戏模块
? ? ? ? var brick = new Brick();
? ? ? ? brick.appendTo("body");
? ? </script>
</body>
</html>
JS代码1:
export default class Component extends EventTarget{
? ? elem;
? ? constructor(){
? ? ? ? super();
? ? ? ? this.elem=this.createElem();
? ? }
? ? createElem(){
? ? ? ? if(this.elem) return this.elem;
? ? ? ? let div=document.createElement("div");
? ? ? ? return div;
? ? }
? ? appendTo(parent){
? ? ? ? if(typeof parent==="string")parent=document.querySelector(parent);
? ? ? ? parent.appendChild(this.elem);
? ? }
}
JS代码2:
import Component from "./Component.js";
export default class Brick extends Component{
? ? box;
? ? ul;
? ? li;
? ? fra;//碎片容器
? ? bubble;//球
? ? board;//木板
? ? start;
? ? lis=[];
? ? boxWidth=680;
? ? liWidth=66;
? ? liHeight=15;
? ? fy=-1;
? ? fx=1;
? ? static NUM=130;
? ? static ZHENG=1;
? ? static FU=-1;
? ? constructor(){
? ? ? ? super();
? ? ? ? Object.assign(this.elem.style,{
? ? ? ? ? ? width:"800px",
? ? ? ? ? ? height:"500px",
? ? ? ? ? ? border:"orange solid 1px",
? ? ? ? ? ? margin:"40px 0 0 200px",
? ? ? ? ? ? background:"url('./img/2.jpg')",
? ? ? ? ? ? // backgroundSize:"contain",
? ? ? ? });
? ? ? ? this.creatCon();
? ? ? ? // this.sortLi();
? ? ? ? this.creatButton();
? ? ? ? this.creatBoardAndBubble();
? ? ? ? document.body.appendChild(this.elem);
? ? ? ? this.sortLi();
? ? ? ? // this.move();
? ? ? ? this.start.addEventListener("click",e=>this.clickHandler(e))
? ? ? ? // document.addEventListener("keydown",e=>this.keyHandler(e));
? ? }
? ? //游戏区域box盒子
? ? creatCon(){
? ? ? ? this.box=document.createElement("div");
? ? ? ? Object.assign(this.box.style,{
? ? ? ? ? ? width:"680px",
? ? ? ? ? ? fontSize:"55px",
? ? ? ? ? ? textAlign:"center",
? ? ? ? ? ? lineHeight:"400px",
? ? ? ? ? ? height:"400px",
? ? ? ? ? ? position:"relative",
? ? ? ? ? ? border:"orangered solid 1px",
? ? ? ? ? ? margin:"20px 60px",
? ? ? ? ? ? // background:"url('./img/0.jpg') ",
? ? ? ? ? ? // backgroundSize:"contain",
? ? ? ? })
? ? ? ? this.creatUl();
? ? ? ? this.creatLi();
? ? ? ? this.elem.appendChild(this.box);
? ? }
? ? creatUl(){
? ? ? ? this.ul=document.createElement("ul");
? ? ? ? Object.assign(this.ul.style,{
? ? ? ? ? ? listStyle:"none",
? ? ? ? })
? ? }
? ? //创建所有li
? ? creatLi(){
? ? ? ? this.fra=document.createDocumentFragment("div");//碎片容器
? ? ? ? for(var i=0;i<Brick.NUM;i++){
? ? ? ? ? ? this.li=document.createElement("li");
? ? ? ? ? ? Object.assign(this.li.style,{
? ? ? ? ? ? ? ? width:"66px",
? ? ? ? ? ? ? ? height:"15px",
? ? ? ? ? ? ? ? border:"solid 1px #ccc",
? ? ? ? ? ? ? ? position:"absolute"
? ? ? ? ? ? })
? ? ? ? ? ? var r=Math.floor(Math.random()*255);
? ? ? ? ? ? var g=Math.floor(Math.random()*255);
? ? ? ? ? ? var b=Math.floor(Math.random()*255);
? ? ? ? ? ? this.li.style.backgroundColor="rgb("+r+","+g+","+b+")";
? ? ? ? ? ? this.fra.appendChild(this.li);
? ? ? ? ? ? this.lis.push(this.li)
? ? ? ? }
? ? ? ? this.ul.appendChild(this.fra);
? ? ? ? this.box.appendChild(this.ul);
? ? }
? ? //创建滑板和小球
? ? creatBoardAndBubble(){
? ? ? ? this.bubble=document.createElement("div");
? ? ? ? this.board=document.createElement("div");
? ? ? ? Object.assign(this.bubble.style,{
? ? ? ? ? ? width:"15px",
? ? ? ? ? ? height:"15px",
? ? ? ? ? ? backgroundColor: "red",
? ? ? ? ? ? borderRadius:"50%",
? ? ? ? ? ? position:"absolute",
? ? ? ? ? ? bottom: "10px",
? ? ? ? ? ? left:"180px",
? ? ? ? })
? ? ? ? Object.assign(this.board.style,{
? ? ? ? ? ? width:"150px",
? ? ? ? ? ? height:"10px",
? ? ? ? ? ? backgroundColor: "orange",
? ? ? ? ? ? borderRadius:"5px",
? ? ? ? ? ? position:"absolute",
? ? ? ? ? ? bottom:"0",
? ? ? ? ? ? left:"160px",
? ? ? ? })
? ? ? ? this.box.appendChild(this.bubble);
? ? ? ? this.box.appendChild(this.board);
? ? ? ? // document.addEventListener("keydown",e=>this.keyHandler(e));
? ? }
? ? //创建游戏开始按钮
? ? creatButton(){
? ? ? ? this.start=document.createElement("button");
? ? ? ? Object.assign(this.start.style,{
? ? ? ? ? ? marginLeft:"50px",
? ? ? ? ? ? width:"100px",
? ? ? ? })
? ? ? ? this.start.textContent="开始游戏";
? ? ? ? this.elem.appendChild(this.start);
? ? }
? ? //摆放li
? ? sortLi(){
? ? ? ? var leftInit = 0;?
? ? ? ? var topInit = 0;?
? ? ? ? this.cols = parseInt(this.boxWidth / (this.liWidth+2));
? ? ? ? for(var i = 0 ; i < Brick.NUM ; i++){
? ? ? ? ? ? var x = leftInit * (this.liWidth+2);
? ? ? ? ? ? var y = topInit;
? ? ? ? ? ? this.lis[i].style.left = x + "px";
? ? ? ? ? ? this.lis[i].style.top = y + "px";
? ? ? ? ? ? leftInit++;
? ? ? ? ? ? //换行
? ? ? ? ? ? if ((i+1)%this.cols==0) {
? ? ? ? ? ? ? ? leftInit = 0;
? ? ? ? ? ? ? ? topInit = topInit + this.liHeight;
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? clickHandler(e){
? ? ? ? document.addEventListener("keydown",e=>this.keyHandler(e));
? ? ? ? this.move();
? ? }
? ? keyHandler(e){
? ? ? ? ? ? //左键
? ? ? ? ? ? if( e.keyCode === 37 ){
? ? ? ? ? ? ? ? this.board.style.left = this.board.offsetLeft - 15 + "px";
? ? ? ? ? ? ? ? if (this.board.offsetLeft<=0) {
? ? ? ? ? ? ? ? ? ? this.board.style.left = 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //右键
? ? ? ? ? ? if( e.keyCode === 39 ){
? ? ? ? ? ? ? ? this.board.style.left = this.board.offsetLeft + 15 + "px";
? ? ? ? ? ? ? ? if(this.board.offsetLeft>=this.box.offsetWidth-this.board.offsetWidth){
? ? ? ? ? ? ? ? ? ? this.board.style.left = this.box.offsetWidth-this.board.offsetWidth +"px";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? }
? ? move(){
? ? ? ? var timer = setInterval(()=>{
? ? ? ? ? ? this.bubble.style.left = this.bubble.offsetLeft + this.fx + "px";
? ? ? ? ? ? this.bubble.style.top = this.bubble.offsetTop + this.fy + "px";
? ? ? ? ? ? //上边界
? ? ? ? ? ? if(this.bubble.offsetTop<=0){
? ? ? ? ? ? ? ? this.fy = 1;
? ? ? ? ? ? }
? ? ? ? ? ? //左边界
? ? ? ? ? ? if(this.bubble.offsetLeft<=0){
? ? ? ? ? ? ? ? this.fx = 1;
? ? ? ? ? ? }
? ? ? ? ? ? //右边界
? ? ? ? ? ? if(this.bubble.offsetLeft>=this.box.offsetWidth-this.bubble.offsetWidth){
? ? ? ? ? ? ? ? this.fx = -1;
? ? ? ? ? ? }
? ? ? ? ? ? //小球 反弹
? ? ? ? ? ? if( this.bubble.offsetTop+this.bubble.offsetHeight >= this.board.offsetTop&&this.bubble.offsetLeft>=this.board.offsetLeft ){
? ? ? ? ? ? ? ? if(this.bubble.offsetLeft+this.bubble.offsetWidth<=this.board.offsetLeft+this.board.offsetWidth){
? ? ? ? ? ? ? ? ? ? this.fy = -1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? if(this.bubble.offsetTop >= this.box.offsetHeight-this.bubble.offsetHeight){
? ? ? ? ? ? ? ? this.box.appendChild(document.createTextNode("GAME OVER!"));
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? }
? ? ? ? ? ? //小球和砖块的碰撞 ? 以小球为基准 ?遍历所有砖块
? ? ? ? ? ? for( var i =0; i < Brick.NUM ; i++){
? ? ? ? ? ? ? ? if(this.bubble.offsetTop<=this.lis[i].offsetTop+this.lis[i].offsetHeight&&this.bubble.offsetLeft>=this.lis[i].offsetLeft&&this.bubble.offsetLeft+this.bubble.offsetWidth<=this.lis[i].offsetLeft+this.lis[i].offsetWidth){
? ? ? ? ? ? ? ? ? ? ? ? ? ? // this.fy = 3;
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.fx=Math.floor(Math.random()*6-3);//
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.fy=Math.floor(Math.random()*5+1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(this.fy)
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.lis[i].style.display = "none";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },8);
? ? }
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于原生JS面向对象实现打砖块小游戏的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did121261