本文实例为大家分享了JS实现打砖块小游戏的具体代码，供大家参考，具体内容如下
通过面向对象,通过修改对JS的调用次数可直接设置打砖块游戏的个数
小球的反弹速度以及反弹方向都设置了随机值,
当小球与砖块发生碰撞时,会使砖块display属性设置为none,从而达到消失的效果.
HTML代码:
Document
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;ithis.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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。