弹球游戏的编程实现

CSS文件

 

#gamePanel{
    
 width:504px;
 height:504px;
 background:Black;
 position:relative;
    
}
   
#gamePanel .score{
    
 font-size:20px;
 color:White;
 position:absolute;
 left:0;
 top:0;
 z-index:9999;
    
}
   
#gamePanel .bullet{
    
 width:5px;
 height:15px;
 position:absolute;
 background:url(../img/bullet.png);
 overflow:hidden;
    
}
   
#gamePanel .stick{
    
 width:80px;
 height:18px;
 position:absolute;
 background:blue;
    
}
   
#gamePanel .ball{
    
 width:15px;
 height:15px;
 position:absolute;
 background:url(../img/ball.gif);
    
}

#gamePanel .brick {

 width : 28px;
 height : 28px;
 position : relative;
 background : url(../img/brick.gif);
 float : left;

}

#gamePanel .hideBrick {

 width : 28px;
 height : 28px;
 position : relative;
 background : black;
 float : left;

}

#gamePanel .magic {

 width : 27px;
 height : 11px;
 position : absolute;
 background : green;

}

#gamePanel .shortMagic {

 width : 28px;
 height : 12px;
 position : absolute;
 background : yellow;

}
   
#gamePanel .bingo{
    
 width:18px;
 height:18px;
 position:absolute;
 background:url(../img/bingo2.png);
    
}
   
#startBtn{
    
 border-width:20px;
 border-style:solid;
 border-color:Black Black Black Green;
 position:absolute;
 left:240px;
 top:240px;
 cursor:pointer;
 width:0px;
 height:0px;
 overflow:hidden;
    
}

 

JS部分实现

ball.js

// 球类
var Ball = function() {

 // 弹球dom元素
 this.dom = null;
 
 // 是否激活
 this.isFirst = true;
   
 // 弹球移动方向
 this.direction = null;
 
 this.init();

}

Ball.prototype = {

 // 弹球横向移动速度
 movepx : 3,
 
 // 弹球纵向移动速度
 movepy : 2,
 
 // 弹球移动频率
 movesp : 20, 
 
 // 弹球移动频率映射
 movespMap : {
 
  1 : 75,
  2 : 65,
  3 : 50,
  4 : 40
 
 },
 
 // 初始化
 init : function() {
 
  this.dom = document.createElement("div");
  this.dom.className = "ball";
 
 },
 
 // 设置弹球的初始化位置,x与y坐标
 setPosition : function(x, y) {
 
  this.dom.style.left = x + "px";
  this.dom.style.top = y + "px";
   
 },
 
 // 弹球动画,就是移动,传入参数为游戏背景的宽与高
 animation : function(gameWidth, gameHeight, stick) {
 
  var _this = this;
  
  // 实际的横向移动速度,左或者右
  var _movepx = this.dom.offsetLeft > gameWidth/2 ? -1*this.movepx : this.movepx;
  var _movepy = this.dom.offsetTop > gameHeight/2 ? this.movepy : -1*this.movepy;
  
  // 处理移动函数
  var process = function() {
  
   // 弹球的x,y坐标
   var left = _this.dom.offsetLeft;
   var top = _this.dom.offsetTop;
      
   // 是否要调转方向
   if (left <= 0 || left >= gameWidth - _this.dom.clientWidth) {
   
    _movepx *= -1;
   
   }
   
   var isCrashStick = _this.OnCheckCrashStick();
   var isCrashBall = _this.OnCheckCrashBrick();
   
   // 判断是否想上调转方向
   if (top < 0 || isCrashStick || isCrashBall) {
    
    _movepy *= -1;
   
   }
   
   // 向下移动
   top = top + _movepy;
   left = left + _movepx;
   
   // 设置弹球位置
   _this.dom.style.top = top + "px";
   _this.dom.style.left = left + "px";
   
   if(top > gameHeight) {
   
    _this.onend();
    alert("You Lose");
   
   } else {
    
    setTimeout(process, _this.movesp);   
   
   }
   
   // 判断弹球移动方向
   if (_movepx > 0 && _movepy < 0) {
   
    _this.direction = "RightUp";
    
    return;
   
   }
   
   if (_movepx > 0 && _movepy > 0) {
   
    _this.direction = "RightDown";
    
    return;
   
   }
   
   if (_movepx < 0 && _movepy < 0) {
   
    _this.direction = "LeftUp";
    
    return;
   
   }
   
   if (_movepx < 0 && _movepy > 0) {
   
    _this.direction = "LeftDown";
    
    return;
   
   }
        
  };
  
  // 开始移动
  process();
 
 },
  
 // 外部接口,检测是否撞到魔法棒
 OnCheckCrashStick : function() {},
 
 // 外部接口,检测是否撞到砖块
 OnCheckCrashBrick : function() {},
 
 // 弹球结束事件
 onend : function() {},
 
 // 游戏结束
 gameover : function() {}

}

 

brick.js

// 砖类
var Brick = function(gamePanel) {

 // 砖的dom元素
 this.dom = null;
 
 // 砖块所在的画布
 this.gamePanel = gamePanel;
  
 // 是否激活
 this.isLive = true;
 
 // 是否带有魔法棒
 this.magic = null;
 
 this.width = 28;
 this.height = 28;
 
 this.left = 0;
 this.top = 0;
 
 this.init();

}

Brick.prototype = {

 // 初始化
 init : function() {
 
  this.dom = document.createElement("div");
  this.dom.className = "brick";
      
 },
 
 // 为position: relative的Brick初始化位置
 setPosition : function(x, y) {
 
  this.left = x;
  this.top = y;
 
 },
 
 // 为positon : relative的Brick初始化尺寸
 setSize : function(width, height) {
 
  this.width = width;
  this.height = height;
 
 },
 
 // 初始化生成魔法棒
 initMagic : function() {
 
  var _this = this;
  // 随机数
  var random = parseInt(Math.random()*1000 + 1, 10);

  var type = random % 5 == 0 ? "good" : random % 4 == 0 ? "bad" : "none";

  // 新建一个魔法棒对象
  var magic = new Magic(type);
  
  this.magic = magic;
 
  magic.initPosition(this);
  
  // 将魔法棒添加进砖块中
  this.gamePanel.appendChild(magic.dom);
  
  magic.onEnd = function() {
  
   _this.gamePanel.removeChild(magic.dom);
  
  };
  
  magic.animation(this.gamePanel.clientHeight);
  
 },
 
 // 击中后的动作
 onEnd : function() {
 
  this.isLive = false;
  this.dom.className = "hideBrick";
  this.initMagic();
 
 }

}

 

// 扩展数组方法,删除特定的值
Array.prototype.remove = function() {

 for (var i = 0, l = this.length; i < l; i ++) {
 
  if (this[i] == obj) {
  
   this.splice(i, 1);
   
   return this;
  
  }
 
 }
 
 throw "The Array has no this Obj";

}

 

Game.js

// 游戏控制类
var Game = {

 // 游戏背景dom
 gamePanel : null,
 
 // 魔法棒
 stick : null,
 
 // 分数
 score : 0,
 
 // 砖块列表
 brickList : [],
 
 // 游戏是否结束
 isGameOver : false,
 
 // 初始化
 init : function() {
 
  var _this = this;
  
  // 获取游戏背景
  this.gamePanel = document.getElementById("gamePanel");
  
  // 初始化砖块
  this.createBricks();
  
  // 启动魔法棒
  this.startStick();
  
  //  启动弹球
  this.startBall();
  
  // 设置键盘按下与释放事件
  document.body.onkeydown = function(e) {
  
   _this.onkeydown(e);
  
  };
  
  document.body.onkeyup = function(e) {
  
   _this.onkeyup(e);
  
  };
 
 },
 
 // 启动魔法棒
 startStick : function() {
 
  var _this = this;
  
  // 新建飞机对象
  this.stick = new Stick();
  
  // 设置位置
  this.stick.setPosition(this.gamePanel, this.gamePanel.clientWidth, this.gamePanel.clientHeight);
  
  // 重写修改分数
  this.stick.onChangeScore = function() {
  
   _this.changeScore();
  
  };
 
 },
 
 // 启动弹球
 startBall : function() {
 
  // 游戏结束,退出
  if (this.isGameOver) {
  
   return;
  
  }
  
  var _this = this;
  
  // 新建一个敌机对象
  var ball = new Ball();

  // 将弹球添加进游戏背景
  this.gamePanel.appendChild(ball.dom);
  
  var ballX = parseInt(this.stick.dom.offsetLeft + this.stick.dom.clientWidth/2 - ball.dom.clientWidth/2, 10);  
  var ballY = parseInt(this.stick.dom.offsetTop - ball.dom.clientHeight, 10);
  
  // 设置位置
  ball.setPosition(ballX, ballY);
  
  // 重写检测是否击中stick
  ball.OnCheckCrashStick = function() {
   
   // 游戏结束,退出
   if (_this.isGameOver) {
   
    return;
   
   }
   
   // 判断是否击中
   var top = this.dom.offsetTop;
   var left = this.dom.offsetLeft;
   var gameHeight = _this.gamePanel.clientHeight;
   var stick = _this.stick;
            
   if ((top >= gameHeight - this.dom.clientHeight - stick.dom.clientHeight) && (left > stick.dom.offsetLeft) && (left < stick.dom.offsetLeft + stick.dom.clientWidth)) {
    
    return true;
   
   }

   return false;
  
  };
  
  ball.OnCheckCrashBrick = function() {
  
   // 游戏结束,退出
   if (_this.isGameOver) {
   
    return;
   
   }
    
   // 遍历砖块列表,判断是否打中砖块
   for (var i = 0; i < _this.brickList.length; i ++) {
    
    // 砖块被击中过
    if (!_this.brickList[i].isLive || _this.brickList[i].dom.className == "hideBrick") {
    
     continue;
    
    }

    // LeftUp
    if ((this.direction == "LeftUp" || this.direction == "RightUp")
     && this.dom.offsetTop <= _this.brickList[i].top + _this.brickList[i].height
     && this.dom.offsetLeft >= _this.brickList[i].left
     && this.dom.offsetLeft <= _this.brickList[i].left + _this.brickList[i].width) {
     
     _this.brickList[i].onEnd();
     _this.brickList[i].magic.isBeatStick = function() {
     
      if(this.top > _this.stick.dom.offsetTop
       && this.left >= _this.stick.dom.offsetLeft
       && this.left <= _this.stick.dom.offsetLeft + _this.stick.dom.clientWidth) {
       
       if (this.type == "good") {
       
        _this.stick.changeBig();
       
       } else {
       
        _this.stick.changeSmall();
       
       }
       
       
       return true;
      
      }
      
      return false;
     
     };
     _this.changeScore();
     
     return true;     
     
    }
    
    // 想左上移动碰到砖
    if (this.dom.offsetLeft <= _this.brickList[i].left + _this.brickList[i].width
     && this.dom.offsetLeft >= _this.brickList[i].left
     && this.dom.offsetTop >= _this.brickList[i].top
     && this.dom.offsetTop <= _this.brickList[i].top + _this.brickList[i].height) {
     
     _this.brickList[i].onEnd();
     _this.brickList[i].magic.isBeatStick = function() {
     
      if(this.top > _this.stick.dom.offsetTop
       && this.left >= _this.stick.dom.offsetLeft
       && this.left <= _this.stick.dom.offsetLeft + _this.stick.dom.clientWidth) {
      
       if (this.type == "good") {
       
        _this.stick.changeBig();
       
       } else {
       
        _this.stick.changeSmall();
       
       }
       
       return true;
      
      }
      
      return false;
     
     };
     _this.changeScore();

     return false;
     
    }
   
   }
   
   return false;
  
  };
  
  // 重写弹球结束事件
  ball.onend = function() {
  
   _this.gamePanel.removeChild(this.dom);
   document.getElementById("startBtn").style.display = "block";
   _this.gameover();
   
  };
  
  // 游戏结束函数
  ball.gameover = function() {
  
   _this.gameover();
  
  };
  
  // 弹球移动
  ball.animation(this.gamePanel.clientWidth, this.gamePanel.clientHeight, this.stick);
 
  // 启动
  //setTimeout(function() {_this.startBall();}, 500);
  
 },
 
 // 键盘按下事件
 onkeydown : function(e) {
  
  e = e || window.event;
  
  var keyCode = e.keyCode;
  
  // 阻止浏览器默认事件
  if (keyCode == 32 || this.stick.keyCodeAndDirection[keyCode]) {

   if (e.preventDefault) {

    e.preventDefault();
   
   } else {

    e.returnValue = false;
   
   }
  
  } else {
   
   return;
  
  }
  
  
  // 回调飞机键盘按下事件
  this.stick.keydown(e);
   
 },
 
 // 键盘释放事件
 onkeyup : function(e) {
  
  e = e || window.event;
  
  // 回调飞机键盘释放事件
  this.stick.keyup(e);
 
 },
 
 // 初始化砖块
 createBricks : function() {
  
  for (var i = 0; i < 108; i ++) {

   var brick = new Brick(this.gamePanel);
   
   // 将新建砖块添加进砖块列表中
   this.brickList.push(brick);

   // 将砖块添加进游戏背景中
   this.gamePanel.appendChild(brick.dom);
   
   if (Math.random() > 0.7) {

    brick.dom.className = "hideBrick";
   
   } else {
    
    // 为position : relative的砖块初始化位置
    var x = (i % 18) * 28;
    var y = Math.floor(i/18) * 28;
    
    brick.setPosition(x, y);
    brick.setSize(28, 28);
       
   }
  
  }
   
 },
 
 // 销毁砖块
 removeBricks : function() {
 
  for (var i = 0; i < this.brickList.length; i ++) {
  
   this.gamePanel.removeChild(this.brickList[i].dom);
  
  }
  
  this.brickList = [];
 
 },
 
 // 修改分数
 changeScore : function() {
 
  this.score += 100;
  document.getElementById("score").innerHTML = this.score;
 
 },
 
 // 游戏结束
 gameover : function() {
 
  this.isGameOver = true;
  
  document.getElementById("score").innerHTML = "The Game is Over... Your Score : " + this.score;
  
  this.removeBricks();
  this.gamePanel.removeChild(this.stick.dom);
  this.stick = null;
  this.score = 0;
  this.gamePanel = null;
  
  document.body.onkeydown = null;
  document.body.onkeyup = null;
  
  document.getElementById("startBtn").style.display = "block";
 
 }

}

// 游戏开始入口
function Start() {
 
 Game.isGameOver = false;
 Game.init();
 document.getElementById("startBtn").style.display = "none";
 document.getElementById("score").innerHTML = 0;

}

 

magic.js

魔法棒类

// 魔法棒类
var Magic = function(type) {

 // Magic的dom元素
 this.dom = null;
 
 // Magic的dom信息
 this.left = 0;
 this.top = 0;
 this.width = 0;
 this.height = 0;
 
 this.type = type;
 
 this.init();

}

Magic.prototype = {

 // 魔法棒类型
 magicType : {
 
  "good" : "magic",
  "bad" : "shortMagic",
  "none" : ""
 
 },
 
 // 每次移动位移
 movepy : 3,
 
 // 移动速度
 movespeed : 20,

 //  初始化魔法棒
 init : function() {
    
  this.dom = document.createElement("div");
    
  this.dom.className = this.magicType[this.type];
  //this.dom.style.display = "none";
  
  this.width = parseInt(this.dom.style.width, 10);
  this.height = parseInt(this.dom.style.height, 10);
 
 },
 
 // 魔法棒初始化位置
 initPosition : function(brick) {
 
  this.left = brick.left;
  this.top = brick.top;
  
  this.dom.style.left = this.left + "px";
  this.dom.style.top = this.top + "px";
 
 },
 
 // 更新位置
 update : function() {
 
  this.dom.style.left = this.left + "px";
  this.dom.style.top = this.top + "px";
 
 },
 
 // 魔法棒动画,height为游戏背景高度
 animation : function(height) {
 
  if (this.type == "none") {
  
   return;
  
  }
 
  var _this = this;
  
  // 向下移动函数
  var downMove = function() {

   _this.top = _this.top + _this.movepy;
   _this.update();

   // 判断魔法棒下移是否越界,是否击中stick
   if (_this.top < height && !_this.isBeatStick()) {
   
    setTimeout(downMove, _this.movespeed);
   
   } else {
   
    // 动画结束触发事件
    _this.onEnd();
   
   }
  
  };
  
  downMove();
 
 },
 
 // 动画结束触发事件,外部覆盖
 onEnd : function() {},
 
 // 魔法棒是否击中挡板以及击中后处理事件,外部覆盖
 isBeatStick : function() {}

}

 

stick.js

挡板类

// 新建魔法棒类
var Stick = function() {

 // 飞机对应的dom元素
 this.dom = null;
 
 // 是否移动中
 this.isMove = false;
 
 // 移动的ID
 this.moveId = null;
 
 // 是否弹球中
 this.isSend = false;
 
 // 变大标记
 this.bigCount = 0;
 
 // 变小标记
 this.smallCount = 0;
 
 // 接棒的宽度变大变小时做存储
 this.width = 0;
 
 this.init();

}

Stick.prototype = {

 // 游戏背景Dom
 gamePanel : null,
 
 // 游戏背景宽度
 gameWidth : 0,
 
 // 游戏背景高度
 gameHeight : 0,
 
 // 魔法棒移动速度
 movepx : 10,
 
 // 魔法棒移动频率
 movesp : 30,
 
 // 方向键值对应
 keyCodeAndDirection : {
 
  37 : "left",
  39 : "right"
 
 },
 
 // 初始化
 init : function() {
 
  this.dom = document.createElement("div");
  this.dom.className = "stick";
 
 },
 
 // 设置位置
 setPosition : function(gamePanel, width, height) {
  
  // 将魔法棒添加进游戏背景中
  this.gamePanel = gamePanel;
  this.gamePanel.appendChild(this.dom);
  
  // 设置飞机的初始位置
  this.dom.style.left = (width - this.dom.clientWidth)/2 + "px";
  this.dom.style.top = height - this.dom.clientHeight + "px";
  
  // 获取到游戏背景的宽和高
  this.gameWidth = width;
  this.gameHeight = height;
 
 },
 
 // 键盘按下事件
 keydown : function(e) {

  var keyCode = e.keyCode;
  
  if (!this.isMove) {
  
   this.move(keyCode);
  
  }
 
 },
 
 // 键盘释放事件
 keyup : function(e) {
 
  // 判断是否为键盘释放
  if (this.keyCodeAndDirection[e.keyCode]) {
  
   // 停止移动
   this.stopMove();
  
  } else if (e.keyCode == 32) {
  
   // 设置为非发弹中
   this.isSend = false;
  
  }
 
 },
 
 // 移动
 move : function(keyCode) {
 
  // 设置为移动中
  this.isMove = true;
  var _this = this;
  
  // 判断移动方向
  switch(this.keyCodeAndDirection[keyCode]) {
  
   case "left" : {
    
    this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
    break;
   
   }
   
   case "right" : {
    
    this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
    break;
   
   }
   
   default : break;
  
  }
 
 },
 
 // 向左移动
 moveLeft : function() {
 
  var left = this.dom["offsetLeft"];
  left = left - this.movepx >= 0 ? left - this.movepx : 0;
  this.dom.style["left"] = left + "px";
  
  if (left == 0) {
  
   this.stopMove();
  
  }
 
 },
 
 // 向右移动
 moveRight : function() {
 
  var left = this.dom["offsetLeft"];
  var maxDistance = this.gameWidth - this.dom.clientWidth;
  left = left + this.movepx <= maxDistance ? left + this.movepx: maxDistance;
  this.dom.style["left"] = left + "px";
  
  if (left == maxDistance) {
  
   this.stopMove();
  
  }
 
 },
 
 // 变小
 changeSmall : function() {
 
  if (this.smallCount >= 1) {
  
   return;
  
  } else {
  
   this.dom.style.width = 80 + "px";
   this.smallCount ++;
   
   this.bigCount >= 1 ? this.bigCount -- : this.bigCount + 0;
  
  }
  
  this.dom.style.left = parseInt(this.dom.style.left, 10) + 20 + "px";
  this.dom.style.width = 40 + "px";
 
 },
 
 // 变大
 changeBig : function() {
 
  if (this.bigCount >= 1) {
  
   return;
  
  } else {
  
   this.dom.style.width = 80 + "px";
   this.bigCount ++;
   
   this.smallCount >= 1 ? this.smallCount -- : this.smallCount + 0;
  
  }
    
  if (parseInt(this.dom.style.left, 10) <= 75 ) {
      
   this.dom.style.width = parseInt(this.dom.style.width, 10) + 75 + parseInt(this.dom.style.left, 10)+ "px";
   this.dom.style.left = 0 + "px";
   
   return;
  
  } else if (this.dom.style.width + 150 + parseInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {
  
   this.dom.style.left = parseInt(this.dom.style.left, 10) - 150 + "px";
   this.dom.style.width = this.dom.style.width + 150 + "px";
   
   return;
  
  } else {
  
   this.dom.style.left = parseInt(this.dom.style.left, 10) - 75 + "px";
   this.dom.style.width = 150 + "px";
  
  }
  
 },
 
 // 停止移动
 stopMove : function() {
 
  this.isMove = false;
  clearInterval(this.moveId);
 
 },
 
 // 发射弹球,外部接口,
 onSendBall : function() {},
 
 
 // 改分数外部接口
 onChangeScore : function() {}

}

 

HTML部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>弹球游戏</title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>

 </head>
 
 <body>
  <center>
   <div id="gamePanel" tabindex="0">
    <div class="score">分数:
     <span id="score">0</span>
    </div>
    <div id="startBtn" οnclick="Start()"></div>    
   </div>
  </center>
  <script type="text/javascript" src="js/magic.js"></script>
  <script type="text/javascript" src="js/brick.js"></script>
  <script type="text/javascript" src="js/ball.js"></script>
  <script type="text/javascript" src="js/stick.js"></script>
  <script type="text/javascript" src="js/game.js"></script>
 </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 


 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值