This article shares the specific code of JavaScript to implement brick-making games for your reference. The specific content is as follows
html+css part
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Make bricks</title>
<link rel="stylesheet" type="text/css" href="css/" rel="external nofollow" />
<script type="text/javascript" src="js/"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.content{
position: relative;
width: 800px;
height: 600px;
background-color: #999;
margin: 0 auto;
overflow: hidden;
}
.game{
position: relative;
width: 550px;
height: 500px;
background-color: pink;
margin: 20px auto 0;
}
.brick{
position: absolute;
width: 50px;
height: 20px;
background-color: blueviolet;
}
.flap{
position: absolute;
width: 120px;
height: 30px;
bottom: 0;
left: 0;
background-color: blue;
}
.ball{
position: absolute;
width: 30px;
height: 30px;
bottom: 30px;
left: 0;
border-radius: 50%;
background-color: greenyellow;
}
.btn{
position: absolute;
width: 550px;
height: 50px;
bottom: 0;
left: 125px;
}
.btn button{
width: 120px;
height: 40px;
}
#score{
position: absolute;
width: 80px;
height: 30px;
right: 0;
top: 10%;
background-color: #fff;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="content">
<div class="game">
<!--<div class="brick"></div>-->
<!--<div class="flap"></div>
<div class="ball"></div>-->
</div>
<div class="btn">
<button >start</button>
<button >Reset</button>
</div>
<div >
</div>
</div>
</body>
</html>
js part
= init;
function init(){
var gameArea = ("game")[0];
var rows = 5;
var cols = 11;
var b_width = 50;
var b_height = 20;
var bricks = [];
var speedX = 5;
var speedY = -5;
var interId = null;
var lf = 0;
var tp = 0;
var flap
var ball;
var n = 0;
var st = ("start");
var rt = ("reset");
var score = ("score");
= "Score:" + n;
renderDom();
bindDom();
function renderDom(){
getBrick();
//Get colorful bricks function getBrick(){
for (var i = 0; i < rows; i++) {
var tp = i * b_height;
var brick = null;
for (var j = 0; j < cols; j++) {
var lf = j * b_width;
brick = ("div");
= "brick";
("style","top:" + tp + "px;left:" + lf + "px;");
= getColor();
(brick);
(brick);
}
}
}
//Add bezel var flap = ("div");
= "flap";
(flap);
//Add a baffle ball var ball = ("div");
= "ball";
(ball);
}
function bindDom(){
flap = ("flap")[0];
= function(e){
var ev = e || ;
var lf = null;
if ( == 37) { //Left button to go left lf = - 10;
if (lf < 0) {
lf = 0;
}
= lf + "px";
}else if ( == 39) { //Right click to go right lf = + 10;
if (lf >= - ) {
lf = -
}
= lf + "px";
}
}
= function(){
ballMove();
= null;
}
= function(){
();
}
}
//Get the color of the brick function getColor(){
var r = (()*256);
var g = (()*256);
var b = (()*256);
return "rgb(" + r + "," + g + "," + b +")";
}
//Realize the ball to move up and down, left and right back and forth function ballMove(){
ball = ("ball")[0];
interId = setInterval(function(){
lf = + speedX;
tp = + speedY;
//Achieve the effect of brick disappearance for (var i = 0; i < ; i++) {
var bk = bricks[i];
if ((lf + /2) >=
&& (lf + /2) <= ( + )
&& ( + ) >=
) {
= "none";
speedY = 5;
n++;
= "Score:"+n;
}
}
if (lf < 0) {
speedX = -speedX;
}
if (lf >= ( - )){
speedX = -speedX;
}
if (tp <= 0) {
speedY = 5;
}else if(( + ) >=
&& ( + /2) >=
&& ( + /2) <= ( + )
){
speedY = -5;
}else if( >= ){
gameOver();
}
= lf + 'px';
= tp + "px";
},20)
}
//Judge whether the game ends function gameOver(){
alert("game over" + "\n" + "Your score is" + );
clearInterval(interId);
}
}
For more exciting articles about JS games, please check out the topic:"JavaScript Classic Games"
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.