This article shares the specific code of JS to implement brick-making mini-game for your reference. The specific content is as follows
By object-oriented, by modifying the number of calls to JS, you can directly set the number of brick-playing games
The rebound speed and rebound direction of the ball are set random values.
When the ball collides with the brick, the display property of the brick will be set to none, thereby achieving the effect of disappearing.
HTML code:
<!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/";
//Can create multiple brick-playing game modules through loop var brick = new Brick();
("body");
</script>
</body>
</html>JS Code 1:
export default class Component extends EventTarget{
elem;
constructor(){
super();
=();
}
createElem(){
if() return ;
let div=("div");
return div;
}
appendTo(parent){
if(typeof parent==="string")parent=(parent);
();
}
}JS Code 2:
import Component from "./";
export default class Brick extends Component{
box;
ul;
li;
fra;//Splitting container bubble;//ball board;//board start;
lis=[];
boxWidth=680;
liWidth=66;
liHeight=15;
fy=-1;
fx=1;
static NUM=130;
static ZHENG=1;
static FU=-1;
constructor(){
super();
(,{
width:"800px",
height:"500px",
border:"orange solid 1px",
margin:"40px 0 0 200px",
background:"url('./img/')",
// backgroundSize:"contain",
});
();
// ();
();
();
();
();
// ();
("click",e=>(e))
// ("keydown",e=>(e));
}
//Game area box box creatCon(){
=("div");
(,{
width:"680px",
fontSize:"55px",
textAlign:"center",
lineHeight:"400px",
height:"400px",
position:"relative",
border:"orangered solid 1px",
margin:"20px 60px",
// background:"url('./img/') ",
// backgroundSize:"contain",
})
();
();
();
}
creatUl(){
=("ul");
(,{
listStyle:"none",
})
}
//Create all li creatLi(){
=("div");//Splitting container for(var i=0;i<;i++){
=("li");
(,{
width:"66px",
height:"15px",
border:"solid 1px #ccc",
position:"absolute"
})
var r=(()*255);
var g=(()*255);
var b=(()*255);
="rgb("+r+","+g+","+b+")";
();
()
}
();
();
}
//Create skateboards and balls creatBoardAndBubble(){
=("div");
=("div");
(,{
width:"15px",
height:"15px",
backgroundColor: "red",
borderRadius:"50%",
position:"absolute",
bottom: "10px",
left:"180px",
})
(,{
width:"150px",
height:"10px",
backgroundColor: "orange",
borderRadius:"5px",
position:"absolute",
bottom:"0",
left:"160px",
})
();
();
// ("keydown",e=>(e));
}
//Create the game start button creatButton(){
=("button");
(,{
marginLeft:"50px",
width:"100px",
})
="Start the game";
();
}
//Place li sortLi(){
var leftInit = 0;
var topInit = 0;
= parseInt( / (+2));
for(var i = 0 ; i < ; i++){
var x = leftInit * (+2);
var y = topInit;
[i]. = x + "px";
[i]. = y + "px";
leftInit++;
//Win if ((i+1)%==0) {
leftInit = 0;
topInit = topInit + ;
}
}
}
clickHandler(e){
("keydown",e=>(e));
();
}
keyHandler(e){
//Left key if( === 37 ){
= - 15 + "px";
if (<=0) {
= 0;
}
}
//Right click if( === 39 ){
= + 15 + "px";
if(>=){
= +"px";
}
}
}
move(){
var timer = setInterval(()=>{
= + + "px";
= + + "px";
//The upper boundary if(<=0){
= 1;
}
//Left border if(<=0){
= 1;
}
//Right border if(>=){
= -1;
}
//The ball rebounds if( + >= &&>= ){
if(+<=+){
= -1;
}
if( >= ){
(("GAME OVER!"));
clearInterval(timer);
}
//The collision between small balls and bricks. Use small balls as the benchmark to traverse all bricks. for( var i =0; i < ; i++){
if(<=[i].offsetTop+[i].offsetHeight&&>=[i].offsetLeft&&+<=[i].offsetLeft+[i].offsetWidth){
// = 3;
=(()*6-3);//
=(()*5+1);
()
[i]. = "none";
}
}
},8);
}
}The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.