原生js打砖块游戏1.1
2017-05-20 19:13
218 查看
已更新1.2~ 新版
本IE FireFox Opera Chrome都可以
正常运行，各位看官移步哈
~~
<!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;
/*border:1px solid red;text-align:center;*/
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">
//需要解决
//待解决
//1.玩家控制小球速度
//2.支持玩家选择关卡
//3.响应式
//4.长摁鼠标加速
//5.增加键盘控制挡板运动
//6.setTimeOut动画效果不流畅 和ie有差异
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;
this.gqNumber=5;//关卡;
this.gradeNumber=64;
}
Breakout.prototype={
init:function(){
this.createBrick(this.gqNumber);
this.wardMove();
this.ballStart();
this.checkEnd(this.gradeNumber);//判断游戏是否结束，当所有砖块均被击落。
},
createBrick:function(n){
// var num=this.gqNumber;
alert('第'+n+'关！');
switch(n){
case 1: {
// num=8; 第一关8行 15
this.gradeNumber=64;
create(8,0);
break;
};
case 2:{
// num=9;第二关9行 9：17
this.gradeNumber=81;
create(9,0);
break;
};
case 3:{
// num=9;第三关10行 第10行17个砖块
this.gradeNumber=98;
create(10,1);
break;
};
case 4:{ // 第四关11行 第10行9个砖块 第11行9个砖块
num=9;
this.gradeNumber=115;
create(11,1);
break;
};
case 5:{ // 第四关12行 第10行9个砖块 第11行9个砖块 第12行9个砖块
num=9;
this.gradeNumber=132;
create(12,1);
break;
}
}
function create(num,n){
var w=45*2;
var h=15*2;
var x=document.querySelector('#game').offsetWidth/2-45/2;//628.5
switch(n){
case 0:{
for(var i=1;i<=num;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';
console.log(x);
}
}
eecf
break;
}
case 1:{
for(var i=1;i<=9;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';
}
}
switch(num){
case 10:{
for(var i=9;i<num;i++){
for(var j=0;j<17;j++){
var brickDiv=document.createElement('div');
this.wrap.appendChild(brickDiv);
brickDiv.style.top=(num-1)*h+'px';
brickDiv.style.left=58.5+w*j+'px';
}
}
break;
}
case 11:{
for(var i=9;i<num;i++){
for(var j=0;j<17;j++){
var brickDiv=document.createElement('div');
this.wrap.appendChild(brickDiv);
brickDiv.style.top=i*h+'px';
brickDiv.style.left=58.5+w*j+'px';
}
}
break;
}
case 12:{
for(var i=9;i<num;i++){
for(var j=0;j<17;j++){
var brickDiv=document.createElement('div');
this.wrap.appendChild(brickDiv);
brickDiv.style.top=i*h+'px';
brickDiv.style.left=58.5+w*j+'px';
}
}
break;
}
}
}
}
}
},
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(this.gradeNumber); //检测是否有碰撞
setTimeout(this.ballMove.bind(this),1);
},
ballCrash:function(m){
this.x=parseInt(this.ball.offsetLeft); //this.ball.style.left 获取不到？？？？
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;
this.checkEnd(m);
/*-----------------------------------------------判断小球和砖块是否碰撞完毕---------------------------------------*/
/*------------------------判断小球是否和墙壁碰撞-----------------------*/
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="myhtml1.0.html.html";
}
else{
//游戏结束
document.getElementById("game").style.display="none";
}
},
checkEnd:function(m){
// alert(m);
console.log(this.grade);
console.log(this.grade==m);
if(this.grade==m){
if(confirm("游戏结束，恭喜你！,是否开始下个关卡？")){
this.grade=0;
this.gqNumber+=this.gqNumber;
this.init();
}
}
},
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生js面向对象开发打砖块游戏，用代码怀念儿时经典
- 原生js写的贪吃蛇网页版游戏特效
- 用canvas和原生JS写的一个flappy bird游戏
- 点灯游戏--原生js
- 原生 js 小工具 v1.1：自动生成博文目录，文内标题平滑跳转：欢迎园友试用！
- 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
- js打砖块游戏
- 用canvas和原生js写的一个贪吃蛇游戏
- 原生JS实战：写了个斗牛游戏，分享给大家一起玩！
- 原生js实现的贪吃蛇网页版游戏完整实例
- 解决cocos2d-js集成到ios原生应用中退出游戏，再加载游戏时会奔溃的问题
- http://www.jsbreakouts.org/---各种html5框架实现打砖块游戏 breakout
- 原生js写的贪吃蛇网页版游戏
- 原生js实现打字动画游戏
- 原生JS写打字游戏
- 点灯游戏--原生js
- 原生js实现的贪吃蛇网页版游戏完整实例
- 原生JS实现《别踩白块》游戏（兼容IE）
- Js版游戏打砖块开发过程详细
- 原生js结合html5制作简易的双色子游戏