如何用原生JS面向对象技术重构打砖块游戏，实现长尾词功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1667个文字，预计阅读时间需要7分钟。
本文以一个大家庭分享的JS实现打砖块小游戏的整体代码为例，供大家参考。内容如下：
通过面向对象，通过修改JS的调用次数，可直接设置打砖块游戏中的个数、小球反弹速度及方向。
javascriptclass Brick { constructor(x, y, width, height) { this.x=x; this.y=y; this.width=width; this.height=height; this.alive=true; }
draw(context) { if (this.alive) { context.fillRect(this.x, this.y, this.width, this.height); } }
hit(x, y) { return x > this.x && x this.y && y class Paddle { constructor(x, y, width, height) { this.x=x; this.y=y; this.width=width; this.height=height; } draw(context) { context.fillRect(this.x, this.y, this.width, this.height); } move(left, right, ballX) { if (left) { this.x -=7; } if (right) { this.x +=7; } if (this.x canvas.width - this.width) { this.x=canvas.width - this.width; } if (this.x class Ball { constructor(x, y, dx, dy, radius, color) { this.x=x; this.y=y; this.dx=dx; this.dy=dy; this.radius=radius; this.color=color; } draw(context) { context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2); context.fillStyle=this.color; context.fill(); context.closePath(); } move() { if (this.x + this.dx > canvas.width - this.radius || this.x + this.dx if (this.y + this.dy canvas.height - this.radius) { if (this.x > paddle.x && this.x 0) { this.x=canvas.width / 2; this.y=canvas.height - 30; this.dx=5; this.dy=-5; } else { alert(Game Over); document.location.reload(); } } } }} const canvas=document.getElementById('myCanvas');const context=canvas.getContext('2d');const paddle=new Paddle(400, 5, 75, 10);const ball=new Ball(canvas.width / 2, canvas.height - 30, 5, -5, 10, 'white');const bricks=[];let lives=3; for (let i=0; i <9; i++) { bricks[i]=[]; for (let j=0; j < 3; j++) { bricks[i][j]=new Brick(j * 75, i * 20, 75, 20); }} function draw() { context.clearRect(0, 0, canvas.width, canvas.height); paddle.draw(context); ball.draw(context); for (let i=0; i <9; i++) { for (let j=0; j < 3; j++) { bricks[i][j].draw(context); } } ball.move(); for (let i=0; i <9; i++) { for (let j=0; j < 3; j++) { if (bricks[i][j].hit(ball.x, ball.y)) { ball.dy=-ball.dy; bricks[i][j].alive=false; } } } if (ball.y + ball.dy <0) { ball.dy=-ball.dy; } if (ball.y + ball.dy > canvas.height - ball.radius) { lives--; if (lives > 0) { ball.x=canvas.width / 2; ball.y=canvas.height - 30; ball.dx=5; ball.dy=-5; } else { alert(Game Over); document.location.reload(); } } if (lives <0) { alert(Game Over); document.location.reload(); }} let leftPressed=false;let rightPressed=false; document.addEventListener('keydown', keyDownHandler, false);document.addEventListener('keyup', keyUpHandler, false); function keyDownHandler(e) { if (e.keyCode==37) { leftPressed=true; } else if (e.keyCode==39) { rightPressed=true; }} function keyUpHandler(e) { if (e.keyCode==37) { leftPressed=false; } else if (e.keyCode==39) { rightPressed=false; }} function collision检测(x1, y1, w1, h1, x2, y2, w2, h2) { x1=x1 - w1 / 2; y1=y1 - h1 / 2; x2=x2 - w2 / 2; y2=y2 - h2 / 2; return x1 x2 && y1 y2;} function drawBricks() { for (let i=0; i <9; i++) { for (let j=0; j < 3; j++) { if (bricks[i][j].alive) { bricks[i][j].draw(context); } } }} setInterval(draw, 10); 本文实例为大家分享了JS实现打砖块小游戏的具体代码，供大家参考，具体内容如下 通过面向对象,通过修改对JS的调用次数可直接设置打砖块游戏的个数 小球的反弹速度以及反弹方向都设置了随机值, 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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
当小球与砖块发生碰撞时,会使砖块display属性设置为none,从而达到消失的效果.
本文共计1667个文字，预计阅读时间需要7分钟。
本文以一个大家庭分享的JS实现打砖块小游戏的整体代码为例，供大家参考。内容如下：
通过面向对象，通过修改JS的调用次数，可直接设置打砖块游戏中的个数、小球反弹速度及方向。
javascriptclass Brick { constructor(x, y, width, height) { this.x=x; this.y=y; this.width=width; this.height=height; this.alive=true; }
draw(context) { if (this.alive) { context.fillRect(this.x, this.y, this.width, this.height); } }
hit(x, y) { return x > this.x && x this.y && y class Paddle { constructor(x, y, width, height) { this.x=x; this.y=y; this.width=width; this.height=height; } draw(context) { context.fillRect(this.x, this.y, this.width, this.height); } move(left, right, ballX) { if (left) { this.x -=7; } if (right) { this.x +=7; } if (this.x canvas.width - this.width) { this.x=canvas.width - this.width; } if (this.x class Ball { constructor(x, y, dx, dy, radius, color) { this.x=x; this.y=y; this.dx=dx; this.dy=dy; this.radius=radius; this.color=color; } draw(context) { context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2); context.fillStyle=this.color; context.fill(); context.closePath(); } move() { if (this.x + this.dx > canvas.width - this.radius || this.x + this.dx if (this.y + this.dy canvas.height - this.radius) { if (this.x > paddle.x && this.x 0) { this.x=canvas.width / 2; this.y=canvas.height - 30; this.dx=5; this.dy=-5; } else { alert(Game Over); document.location.reload(); } } } }} const canvas=document.getElementById('myCanvas');const context=canvas.getContext('2d');const paddle=new Paddle(400, 5, 75, 10);const ball=new Ball(canvas.width / 2, canvas.height - 30, 5, -5, 10, 'white');const bricks=[];let lives=3; for (let i=0; i <9; i++) { bricks[i]=[]; for (let j=0; j < 3; j++) { bricks[i][j]=new Brick(j * 75, i * 20, 75, 20); }} function draw() { context.clearRect(0, 0, canvas.width, canvas.height); paddle.draw(context); ball.draw(context); for (let i=0; i <9; i++) { for (let j=0; j < 3; j++) { bricks[i][j].draw(context); } } ball.move(); for (let i=0; i <9; i++) { for (let j=0; j < 3; j++) { if (bricks[i][j].hit(ball.x, ball.y)) { ball.dy=-ball.dy; bricks[i][j].alive=false; } } } if (ball.y + ball.dy <0) { ball.dy=-ball.dy; } if (ball.y + ball.dy > canvas.height - ball.radius) { lives--; if (lives > 0) { ball.x=canvas.width / 2; ball.y=canvas.height - 30; ball.dx=5; ball.dy=-5; } else { alert(Game Over); document.location.reload(); } } if (lives <0) { alert(Game Over); document.location.reload(); }} let leftPressed=false;let rightPressed=false; document.addEventListener('keydown', keyDownHandler, false);document.addEventListener('keyup', keyUpHandler, false); function keyDownHandler(e) { if (e.keyCode==37) { leftPressed=true; } else if (e.keyCode==39) { rightPressed=true; }} function keyUpHandler(e) { if (e.keyCode==37) { leftPressed=false; } else if (e.keyCode==39) { rightPressed=false; }} function collision检测(x1, y1, w1, h1, x2, y2, w2, h2) { x1=x1 - w1 / 2; y1=y1 - h1 / 2; x2=x2 - w2 / 2; y2=y2 - h2 / 2; return x1 x2 && y1 y2;} function drawBricks() { for (let i=0; i <9; i++) { for (let j=0; j < 3; j++) { if (bricks[i][j].alive) { bricks[i][j].draw(context); } } }} setInterval(draw, 10); 本文实例为大家分享了JS实现打砖块小游戏的具体代码，供大家参考，具体内容如下 通过面向对象,通过修改对JS的调用次数可直接设置打砖块游戏的个数 小球的反弹速度以及反弹方向都设置了随机值, 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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
当小球与砖块发生碰撞时,会使砖块display属性设置为none,从而达到消失的效果.