作者:俞承豪那个男人- | 来源:互联网 | 2021-11-12 20:10
本文实例为大家分享了Javascript实现打砖块游戏的具体代码,供大家参考,具体内容如下
html+css部分
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 = 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 = 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经典游戏 玩不停》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。