本文实例为大家分享了JS实现打砖块小游戏的具体代码，供大家参考，具体内容如下通过面向对象,通过修改对JS的调用次数可直接设置打砖块游戏的个数小球的反弹速度以及反弹方向都设置了随机值,当小球与砖块发生碰...
本文实例为大家分享了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){php
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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
