html打砖块游戏制作,JavaScript实现打砖块游戏

本文实例为大家分享了JavaScript实现打砖块游戏的具体代码，供大家参考，具体内容如下

html+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;*/

}

开始

重置

js部分

window.onload = init;

function init(){

var gameArea = document.getElementsByClassName("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 = document.getElementById("start");

var rt = document.getElementById("reset");

var score = document.getElementById("score");

score.innerHTML = "得分:" + n;

renderDom();

bindDom();

function renderDom(){

getBrick();

//得到五彩砖块

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 = document.createElement("div");

brick.className = "brick";

brick.setAttribute("style","top:" + tp + "px;left:" + lf + "px;");

brick.style.backgroundColor = getColor();

bricks.push(brick);

gameArea.appendChild(brick);

}

}

}

//添加挡板

var flap = document.createElement("div");

flap.className = "flap";

gameArea.appendChild(flap);

//添加挡板小球

var ball = document.createElement("div");

ball.className = "ball";

gameArea.appendChild(ball);

}

function bindDom(){

flap = document.getElementsByClassName("flap")[0];

window.onkeydown = function(e){

var ev = e || window.event;

var lf = null;

if (e.keyCode == 37) { //左键往左走

lf = flap.offsetLeft - 10;

if (lf < 0) {

lf = 0;

}

flap.style.left = lf + "px";

}else if (e.keyCode == 39) { //右键往右走

lf = flap.offsetLeft + 10;

if (lf >= gameArea.offsetWidth - flap.offsetWidth) {

lf = gameArea.offsetWidth - flap.offsetWidth

}

flap.style.left = lf + "px";

}

}

st.onclick = function(){

ballMove();

st.onclick = null;

}

rt.onclick = function(){

window.location.reload();

}

}

//得到砖块的随即颜色

function getColor(){

var r = Math.floor(Math.random()*256);

var g = Math.floor(Math.random()*256);

var b = Math.floor(Math.random()*256);

return "rgb(" + r + "," + g + "," + b +")";

}

//实现小球上下左右来回运动

function ballMove(){

ball = document.getElementsByClassName("ball")[0];

interId = setInterval(function(){

lf = ball.offsetLeft + speedX;

tp = ball.offsetTop + speedY;

//实现砖块消失的效果

for (var i = 0; i < bricks.length; i++) {

var bk = bricks[i];

if ((lf + ball.offsetWidth/2) >= bk.offsetLeft

&& (lf + ball.offsetWidth/2) <= (bk.offsetLeft + bk.offsetWidth)

&& (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop

) {

bk.style.display = "none";

speedY = 5;

n++;

score.innerHTML = "得分:"+n;

}

}

if (lf < 0) {

speedX = -speedX;

}

if (lf >= (gameArea.offsetWidth - ball.offsetWidth)){

speedX = -speedX;

}

if (tp <= 0) {

speedY = 5;

}else if((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop

&& (ball.offsetLeft + ball.offsetWidth/2) >= flap.offsetLeft

&& (ball.offsetLeft + ball.offsetWidth/2) <= (flap.offsetLeft + flap.offsetWidth)

){

speedY = -5;

}else if(ball.offsetTop >= flap.offsetTop){

gameOver();

}

ball.style.left = lf + 'px';

ball.style.top = tp + "px";

},20)

}

//判断游戏是否结束

function gameOver(){

alert("game over" + "\n" + "您的得分是" + score.innerHTML);

clearInterval(interId);

}

}

更多关于Js游戏的精彩文章，请查看专题： 《JavaScript经典游戏 玩不停》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。