本文实例为大家分享了JavaScript实现打砖块游戏的具体代码,供大家参考,具体内容如下
html + css部分
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>打砖块& lt;/title>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/break.css " rel=巴獠縩ofollow”/比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/break.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
* {
填充:0;
保证金:0;
}
.content {
位置:相对;
宽度:800 px;
身高:600 px;
background - color: # 999;
保证金:0汽车;
溢出:隐藏;
}
.game {
位置:相对;
宽度:550 px;
身高:500 px;
背景颜色:粉色;
保证金:20 px汽车0;
}
.brick {
位置:绝对的;
宽度:50 px;
高度:20 px;
background - color: blueviolet;
}
.flap {
位置:绝对的;
宽度:120 px;
高度:30 px;
底部:0;
左:0;
背景颜色:蓝色;
}
.ball {
位置:绝对的;
宽度:30 px;
高度:30 px;
底部:30 px;
左:0;
这个特性:50%;
background - color: greenyellow;
}
.btn {
位置:绝对的;
宽度:550 px;
高度:50 px;
底部:0;
左:125 px;
}
.btn按钮{
宽度:120 px;
高度:40像素;
}
#{得分
位置:绝对的;
宽度:80 px;
高度:30 px;
右:0;
上图:10%;
background - color: # fff;/*边境:1 px固体红色;*/}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=澳谌荨北?
& lt; div类=坝蜗贰北?
& lt; !——& lt; div类=白弊４? lt;/div>——比;
& lt; !——& lt; div类=芭拇颉弊４? lt;/div>
& lt; div类="球"祝辞& lt;/div>——比;
& lt;/div>
& lt; div类=癰tn”比;
& lt;按钮id="开始"祝辞开始& lt;/button>
& lt;按钮id=爸刂谩痹谥刂? lt;/button>
& lt;/div>
& lt; div id=胺质北?
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
js部分
窗口。onload=初始化;
init()函数{
var gameArea=document.getElementsByClassName(“游戏”)[0];
var=5行;
var关口=11;
var b_width=50;
var b_height=20;
var砖=[];
var speedX=5;
var快速=5;
var interId=零;
var低频=0;
var tp=0;
var皮瓣
var球;
var n=0;
var圣=. getelementbyid(“开始”);
var rt=. getelementbyid(“重置”);
var得分=. getelementbyid(“分数”);
得分。innerHTML="得分:“+ n;
renderDom ();
bindDom ();
函数renderDom () {
getBrick ();//得到五彩砖块
函数getBrick () {
(var=0;我& lt;行;我+ +){
var tp=我* b_height;
var砖=零;
(var j=0;j & lt;关口;j + +) {
var低频=j * b_width;
砖=document.createElement (" div ");
砖。className=白?
砖。setAttribute(“风格”,“:”+ tp +“px;左:“+ lf +“px;”);
brick.style。写成backgroundColor=色鬼();
bricks.push(砖);
gameArea.appendChild(砖);
}
}
}//添加挡板
var皮瓣=document.createElement (" div ");
皮瓣。className=芭拇颉?
gameArea.appendChild(瓣);//添加挡板小球
var球=document.createElement (" div ");
球。className=扒颉?
gameArea.appendChild(球);
}
函数bindDom () {
皮瓣=document.getElementsByClassName(“拍打”)[0];
窗口。onkeydown=function (e) {
var ev=e | | window.event;
var低频=零;
如果(e。键码==37){//左键往左走
如果=皮瓣。offsetLeft - 10;
如果(低频& lt;0){
如果=0;
}
flap.style。左=低频+“px”;
}else if (e。键码==39){//右键往右走
如果=皮瓣。offsetLeft + 10;
如果(低频祝辞=gameArea。offsetWidth - flap.offsetWidth) {
如果=gameArea。offsetWidth——flap.offsetWidth
}
flap.style。左=低频+“px”;
}
}
st.onclick=function () {
ballMove ();
st.onclick=零;
}
rt.onclick=function () {
window.location.reload ();
}
}//得到砖块的随即颜色
函数色鬼(){
var r=Math.floor (math . random () * 256);
var g=Math.floor (math . random () * 256);
var b=Math.floor (math . random () * 256);
返回“rgb (“+ r +”、“+ g +”、“+ b +”)”;
}//实现小球上下左右来回运动
函数ballMove () {
球=document.getElementsByClassName(“球”)[0];
interId=setInterval(函数(){
如果=球。offsetLeft + speedX;
tp=球。offsetTop +快速;//实现砖块消失的效果
(var=0;我& lt;bricks.length;我+ +){
var bk=砖(我);
如果((低频+ ball.offsetWidth/2)祝辞=bk.offsetLeft
,,(低频+ ball.offsetWidth/2) & lt;=(bk.offsetLeft + bk.offsetWidth)
,,(bk.offsetTop + bk.offsetHeight)祝辞=ball.offsetTop
){
bk.style。显示=懊挥小?
快速=5;
n + +;
得分。innerHTML="得分:“+ n;
}
}
如果(低频& lt;0){
speedX=-speedX;
}
如果(低频祝辞=(gameArea。offsetWidth - ball.offsetWidth)) {
speedX=-speedX;
}
如果(tp & lt;=0) {
快速=5;
}如果(球。offsetTop + ball.offsetHeight)祝辞=flap.offsetTop
,,(球。offsetLeft + ball.offsetWidth/2)祝辞=flap.offsetLeft
,,(球。offsetLeft + ball.offsetWidth/2) & lt;=(襟翼。offsetLeft + flap.offsetWidth)
) {
快速=5;
}如果(球。offsetTop祝辞=flap.offsetTop) {
游戏结束();
}
ball.style。左=低频+“px”;
ball.style。顶级=tp +“px”;
},20)
}//判断游戏是否结束
函数败阵(){
警报(“游戏结束”+“\ n”+“您的得分是“+ score.innerHTML);
clearInterval (interId);
}
}
