<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:url('images/bg.jpg') top/cover;
}
#game{
position:relative;
margin:40px auto;
width:1600px;
height:700px;
border:1px solid white;
box-shadow:0px 0px 25px white;
border-radius:20px;
}
#wrap{
position:absolute;
width:inherit;
height:500px;
margin-top:20px;
/*border:1px solid red;*/
}
#wrap div{
position:absolute;
width:45px;
height:15px;
top:0;
left:0;
background:#ff0033;
box-shadow:0 0 9px 1px #ff0033;
}
#ward{
position:absolute;
width:120px;
height:30px;
left:730px;
top:670px;
background:#368;
border-radius:10px;
}
#ball{
position:absolute;
top:660px;
left:780px;
width:15px;
height:15px;
background-color:#00ff00;
border-radius:50%;
box-shadow:0 0 9px 9px #9f0;
}
#grade{
width:250px;
height:50px;
margin:20px auto;
color:white;
font-size:30px;
}
</style>
</head>
<body>
<!--计分-->
<div id="grade">
分数:<span id="gradeBlank"></span>
</div>
<!--游戏区域-->
<div id="game">
<div id="wrap"></div><!--砖块区域-->
<div id="ward"></div><!--挡板-->
<div id="ball"></div><!--小球-->
</div>
</body>
<script type="text/javascript">
var oBall=document.querySelector('#ball');
var oWard=document.querySelector('#ward'); //挡板
var oWrap=document.querySelector('#wrap');//砖块区域
var oGradeBlank=document.querySelector('#gradeBlank');
var oDocu=document.querySelector('#game'); //游戏区域
function Breakout(ward,wrap,ball,docu){
this.x=0;
this.y=0;
this.speed=1;
this.xSpeed=this.speed;//10
this.ySpeed=-this.speed;//-10
this.ward=ward;
this.wrap=wrap;
this.docu=docu;
this.ball=ball;
this.grade=0;
this.flag=0;
this.grade=0;
}
Breakout.prototype={
init:function(){
this.createBrick();
this.wardMove();
this.ballStart();
this.checkGrades();
},
createBrick:function(){
var w=45*2;
var h=15*2;
var x=this.docu.offsetWidth/2-45/2;//628.5
for(var i=1;i<=8;i++){
for(var j=0;j<(2*i-1);j++){
var brickDiv=document.createElement('div');
this.wrap.appendChild(brickDiv);
brickDiv.style.top=(i-1)*h+'px';
brickDiv.style.left=x+((j+1)-i)*w+'px';
}
}
},
wardMove:function(){
this.addevent(this.docu,'mousemove',this.mouseMove.bind(this));
},
mouseMove:function(e){
var e=window.event||e;
var _left=e.pageX-this.ward.offsetWidth/2-150;
this.ward.style.left=_left+'px';
},
ballStart:function(){
//点击小球游戏开始,小球开始运动
this.addevent(this.ball,'click',this.ballMove.bind(this));
},
ballMove:function(){
this.ballCrash(); //检测是否有碰撞
setTimeout(this.ballMove.bind(this),1);
},
ballCrash:function(){
this.x=parseInt(this.ball.offsetLeft);
this.y=parseInt(this.ball.offsetTop);
var x=parseInt(this.ball.offsetLeft);
var h=parseInt(this.ball.offsetTop);
/*-----------------判断小球和挡板是否碰撞--------------------*/
if(Math.abs(this.x-this.ward.offsetLeft)<120 && Math.abs(this.y-this.ward.offsetTop)<30){
this.ySpeed=-this.ySpeed;
this.y=this.ward.offsetTop-40;//重置小球位置
this.ward.style.background=this.ranColor();
}
/*------------------------------------------------判断小球和挡板是否碰撞完毕-----------------------------------------*/
/*-----------------------判断小球和砖块是否碰撞---------------------*/
for(var i=0;i<this.wrap.children.length;i++){//64
var brick=this.wrap.children[i];
if((this.x-parseInt(brick.offsetLeft))<(120-50)&&(this.x-parseInt(brick.offsetLeft))>0&&(this.y-parseInt(brick.offsetTop))<=(30-20)&&(this.y-parseInt(brick.offsetTop))>=(0+10)){
this.ySpeed=-this.ySpeed;
this.grade++;
this.wrap.removeChild(brick);
}
}
oGradeBlank.innerHTML=this.grade;
/*-----------------------------------------------判断小球和砖块是否碰撞完毕---------------------------------------*/
/*------------------------判断小球是否和墙壁碰撞-----------------------*/
if(x>=1600){
//右边
this.xSpeed=-this.speed;
}
if(x<=0){
//左边
this.xSpeed=this.speed;
}
if(h>=680){
//下边
this.ySpeed=-this.speed;
//检测是否重新开始游戏
this.checkStart();
}
if(h<=0){
//上边
this.ySpeed=this.speed;
}
//没有超出界限
this.x+=this.xSpeed;
this.y+=this.ySpeed;
this.ball.style.left=this.x+'px';
this.ball.style.top=this.y+'px';
/*-----------------------------------------------------判断小球和墙壁碰撞完毕---------------------------*/
},
checkStart:function(){
if(confirm('我掉啦,游戏结束~,是否重新开始?')){
window.location="myhtml.html";
}
else{
//游戏结束
document.getElementById("game").style.display="none";
}
},
ranColor:function(){
var color="#";
for(var i=0;i<6;i++){
color+='0123456789abcdef'[Math.floor(Math.random()*16)];
}
return color;
},
addevent:function(element,type,handler){
return element.addEventListener?element.addEventListener(type,handler,false):element.attachEvent('on'+type,handler);
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type]=null;
}
},
}
var breakout=new Breakout(oWard,oWrap,oBall,oDocu);
breakout.init();
</script>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:url('images/bg.jpg') top/cover;
}
#game{
position:relative;
margin:40px auto;
width:1600px;
height:700px;
border:1px solid white;
box-shadow:0px 0px 25px white;
border-radius:20px;
}
#wrap{
position:absolute;
width:inherit;
height:500px;
margin-top:20px;
/*border:1px solid red;*/
}
#wrap div{
position:absolute;
width:45px;
height:15px;
top:0;
left:0;
background:#ff0033;
box-shadow:0 0 9px 1px #ff0033;
}
#ward{
position:absolute;
width:120px;
height:30px;
left:730px;
top:670px;
background:#368;
border-radius:10px;
}
#ball{
position:absolute;
top:660px;
left:780px;
width:15px;
height:15px;
background-color:#00ff00;
border-radius:50%;
box-shadow:0 0 9px 9px #9f0;
}
#grade{
width:250px;
height:50px;
margin:20px auto;
color:white;
font-size:30px;
}
</style>
</head>
<body>
<!--计分-->
<div id="grade">
分数:<span id="gradeBlank"></span>
</div>
<!--游戏区域-->
<div id="game">
<div id="wrap"></div><!--砖块区域-->
<div id="ward"></div><!--挡板-->
<div id="ball"></div><!--小球-->
</div>
</body>
<script type="text/javascript">
var oBall=document.querySelector('#ball');
var oWard=document.querySelector('#ward'); //挡板
var oWrap=document.querySelector('#wrap');//砖块区域
var oGradeBlank=document.querySelector('#gradeBlank');
var oDocu=document.querySelector('#game'); //游戏区域
function Breakout(ward,wrap,ball,docu){
this.x=0;
this.y=0;
this.speed=1;
this.xSpeed=this.speed;//10
this.ySpeed=-this.speed;//-10
this.ward=ward;
this.wrap=wrap;
this.docu=docu;
this.ball=ball;
this.grade=0;
this.flag=0;
this.grade=0;
}
Breakout.prototype={
init:function(){
this.createBrick();
this.wardMove();
this.ballStart();
this.checkGrades();
},
createBrick:function(){
var w=45*2;
var h=15*2;
var x=this.docu.offsetWidth/2-45/2;//628.5
for(var i=1;i<=8;i++){
for(var j=0;j<(2*i-1);j++){
var brickDiv=document.createElement('div');
this.wrap.appendChild(brickDiv);
brickDiv.style.top=(i-1)*h+'px';
brickDiv.style.left=x+((j+1)-i)*w+'px';
}
}
},
wardMove:function(){
this.addevent(this.docu,'mousemove',this.mouseMove.bind(this));
},
mouseMove:function(e){
var e=window.event||e;
var _left=e.pageX-this.ward.offsetWidth/2-150;
this.ward.style.left=_left+'px';
},
ballStart:function(){
//点击小球游戏开始,小球开始运动
this.addevent(this.ball,'click',this.ballMove.bind(this));
},
ballMove:function(){
this.ballCrash(); //检测是否有碰撞
setTimeout(this.ballMove.bind(this),1);
},
ballCrash:function(){
this.x=parseInt(this.ball.offsetLeft);
this.y=parseInt(this.ball.offsetTop);
var x=parseInt(this.ball.offsetLeft);
var h=parseInt(this.ball.offsetTop);
/*-----------------判断小球和挡板是否碰撞--------------------*/
if(Math.abs(this.x-this.ward.offsetLeft)<120 && Math.abs(this.y-this.ward.offsetTop)<30){
this.ySpeed=-this.ySpeed;
this.y=this.ward.offsetTop-40;//重置小球位置
this.ward.style.background=this.ranColor();
}
/*------------------------------------------------判断小球和挡板是否碰撞完毕-----------------------------------------*/
/*-----------------------判断小球和砖块是否碰撞---------------------*/
for(var i=0;i<this.wrap.children.length;i++){//64
var brick=this.wrap.children[i];
if((this.x-parseInt(brick.offsetLeft))<(120-50)&&(this.x-parseInt(brick.offsetLeft))>0&&(this.y-parseInt(brick.offsetTop))<=(30-20)&&(this.y-parseInt(brick.offsetTop))>=(0+10)){
this.ySpeed=-this.ySpeed;
this.grade++;
this.wrap.removeChild(brick);
}
}
oGradeBlank.innerHTML=this.grade;
/*-----------------------------------------------判断小球和砖块是否碰撞完毕---------------------------------------*/
/*------------------------判断小球是否和墙壁碰撞-----------------------*/
if(x>=1600){
//右边
this.xSpeed=-this.speed;
}
if(x<=0){
//左边
this.xSpeed=this.speed;
}
if(h>=680){
//下边
this.ySpeed=-this.speed;
//检测是否重新开始游戏
this.checkStart();
}
if(h<=0){
//上边
this.ySpeed=this.speed;
}
//没有超出界限
this.x+=this.xSpeed;
this.y+=this.ySpeed;
this.ball.style.left=this.x+'px';
this.ball.style.top=this.y+'px';
/*-----------------------------------------------------判断小球和墙壁碰撞完毕---------------------------*/
},
checkStart:function(){
if(confirm('我掉啦,游戏结束~,是否重新开始?')){
window.location="myhtml.html";
}
else{
//游戏结束
document.getElementById("game").style.display="none";
}
},
ranColor:function(){
var color="#";
for(var i=0;i<6;i++){
color+='0123456789abcdef'[Math.floor(Math.random()*16)];
}
return color;
},
addevent:function(element,type,handler){
return element.addEventListener?element.addEventListener(type,handler,false):element.attachEvent('on'+type,handler);
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type]=null;
}
},
}
var breakout=new Breakout(oWard,oWrap,oBall,oDocu);
breakout.init();
</script>
</html>