原生JS面向对象实现打砖块小游戏
作者：weixin_44447804
这篇文章主要为大家详细介绍了原生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){
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);
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。