<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0px; padding:0px;} #container{width:1000px;height:500px;border:orange solid 1px;margin:40px 0 0 200px;position:relative} #box{box-shadow: 4px 4px 4px 0 #ccc;width:680px;font-size:55px;text-align:center;line-height:400px;height:400px;position:relative;border:orangered solid 1px;margin:20px 60px;} button{background-color:#666;color:#fff;margin-left:300px;width:100px;height:30px;} button:hover{ background-color: #000;} #bubble{width:15px;height:15px; background-color: red; border-radius:50%; position:absolute; bottom: 12px; left:180px; box-shadow: 4px 4px 2px 0 #ccc; } #board{width:150px;height:10px; background-color: orange; border-radius:5px; position:absolute; bottom:2px; box-shadow:3px 3px 2px 0 #ccc; left:160px; } ul{list-style:none;} ul>li{width:66px;height:15px; background-color: #069; border:solid 1px #ccc;position:absolute; } #show{ position:absolute; right:30px; top:20px; width:200px; height:400px; border:dotted 1px #888; background-color: #333; } #show span{display:block; color:#0f0; font-family: "微软雅黑"; height:30px; line-height:30px; padding:5px; } span#info{display:block;font-size:22px;line-height:50px;height:50px;border-bottom:solid 1px #0f0} #time, #res, #times, #score{border-bottom:dashed 1px #0f0} </style> </head> <body> <!-- 游戏面板 --> <div id="container"> <!--提示信息 --> <div id="show"> <span id="info">游戏重要信息</span> <span>当前时间：</span> <span id="time">加载中...</span> <span>游戏状态</span> <span id="res">加载中...</span> <span>挡板打球次数</span> <span id="times">加载中...</span> <span>游戏得分</span> <span id="score">加载中...</span> </div> <!-- 游戏区域 --> <div id="box"> <!-- 挡板、小球、砖块 --> <ul id="u"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div id="bubble"></div> <div id="board"></div> </div> <button id="start">开始游戏</button> </div> </body> </html> <script src="common.js"></script> <script> /* 功能 ：摆砖块 点击开始按钮启动游戏 ： 小球运动 挡板运动 */ window.onload = function(){ var startBtn = $id("start"),//开始按钮 box = $id("box"),//容器 ball = $id("bubble"),//小球 board = $id("board"),//挡板 timer = null, speedX = 2,//横向速度 speedY = -1,//纵向速度 list = $id("u").children,//砖块 w = list[0].offsetWidth, h = list[0].offsetHeight, leftInit = 0, //砖块的初始left值 topInit = 0;//砖块初始top值 init(); function init(){ //砖块的摆放 for( var i = 0 ; i <list.length ; i++ ){ list[i].style.backgroundColor = getColor() ; list[i].style.left = leftInit * w + "px"; list[i].style.top = topInit + "px"; leftInit++; if( i%10 == 9 ){ //每10个砖块换行 leftInit = 0; topInit += h; } } } startBtn.onclick = function(){ //挡板运动 fnBoardMove(); //小球运动 fnMove(); } //封装挡板运动函数 function fnBoardMove(){ document.onkeydown = function(e){ var e = e || event; var code = e.keyCode || e.which; switch( code ){ case 37 : { board.style.left = board.offsetLeft - 5 + "px"; if( board.offsetLeft < 0 ){ board.style.left = 0; } break; } case 39 : { board.style.left = board.offsetLeft + 5 + "px"; var maxL = box.offsetWidth - board.offsetWidth; if( board.offsetLeft > maxL ){ board.style.left = maxL + "px"; } break; } } } } //封装小球运动函数 function fnMove(){ timer = setInterval( function(){ ball.style.left = ball.offsetLeft + speedX + "px"; ball.style.top = ball.offsetTop + speedY + "px"; var maxL = box.offsetWidth - ball.offsetWidth; var maxT = box.offsetHeight - ball.offsetHeight; //小球和容器的左侧、右侧、上侧碰撞后 正常反弹 if( ball.offsetLeft < 0 ){ speedX *= -1; }else if( ball.offsetLeft > maxL ){ speedX *= -1; } if( ball.offsetTop < 0 ){ speedY *= -1; } //小球落地 游戏结束 if( ball.offsetTop > maxT ){ box.appendChild( document.createTextNode("Game Over") ); clearInterval( timer ); } //小球和挡板碰撞后 反弹 if( pz( ball,board ) ){ speedY *= -1; } //小球和砖块的碰撞 砖块消失 小球反弹 //遍历所有的砖块 判断小球和哪个砖块有碰撞 碰撞后 砖块消失 for( var i = 0 ; i < list.length ; i++ ){ if( pz( ball , list[i] ) ){ list[i].remove(); speedY *= -1; } } },10 ) } } </script>
引入的common.js文件
//定义一个函数 功能是根据id查找页面元素 function $id( id ){ return document.getElementById( id ); } //创建元素 function create(ele){ return document.createElement(ele); } //获取任意区间的整数值 function rand( min , max ){ return Math.round( Math.random()*(max-min) + min ); } //随机获取六位十六进制颜色值 function getColor(){ var str = "0123456789abcdef"; var color = "#"; for( var i = 1 ; i <= 6 ; i++ ){ color += str.charAt( rand(0,15) ); } return color; } //自定义日期时间格式 function dateToString(now,sign){ //默认日期的间隔符为 - 如果用户传递的是/ 就使用/ . 如果用户不传递任何参数 默认是- sign = sign || "-"; var y = now.getFullYear(); var m = toTwo( now.getMonth()+ 1 ) ; var d = toTwo( now.getDate() ); var h = toTwo( now.getHours() ); var _m = toTwo( now.getMinutes() ); var s = toTwo( now.getSeconds() ) ; var str = y + sign + m + sign + d + " " + h + ":" + _m + ":" + s; return str; } //判断得到的结果是否小于10 如果小于10，前面拼接0 function toTwo(val){ return val < 10 ? "0"+val : val; } //验证码 ： 字母和数字组成 function yzm(){ //小写字母 大写字母 数字 //48--122 随机获取一个code值 判断编码值如果在 58--64 91--96 两个区间，就重新抽取 //如果不在上面的两个区间内，就将code转成字符， 拼接到字符串中 var str = "";//拼接6位的验证码 for( var i = 1 ; i <= 6 ; i++ ){ var code = rand( 48 , 122 ); if( code >= 58&&code <= 64 || code >= 91 && code <= 96 ){ //就重新抽一次 i--; }else{ var ch = String.fromCharCode( code ); str += ch; } } return str; } //碰撞函数 function pz(d1,d2){ R1 = d1.offsetWidth+d1.offsetLeft; L1 = d1.offsetLeft; T1 = d1.offsetTop; B1 = d1.offsetHeight + d1.offsetTop; R2 = d2.offsetWidth+d2.offsetLeft; L2 = d2.offsetLeft; T2 = d2.offsetTop; B2 = d2.offsetHeight + d2.offsetTop; //如果碰不上 返回false if( R1 < L2 || B1 < T2 || T1 > B2 || L1 > R2 ){ return false; }else{ return true; } }