欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  使用html+css+js实现弹球游戏
 
  17969075ca2705a31a16ae54b880bb9.png
 
  代码如下,复制即可使用:
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <!doctypehtml>
 
  <head>
 
  <styletype="text/css">
 
  .panel{
 
  position:relative;
 
  z-index:0;
 
  top:0px;
 
  left:400px;
 
  width:300px;
 
  height:500px;
 
  }
 
  .console{
 
  position:absolute;
 
  z-index:1;
 
  top:0;
 
  left:0;
 
  width:100%;
 
  height:40px;
 
  background-color:#bbb;
 
  }
 
  .message{
 
  position:absolute;
 
  z-index:1;
 
  top:40px;
 
  left:0;
 
  width:100%;
 
  height:460px;
 
  color:white;
 
  font-size:50px;
 
  text-align:center;
 
  line-height:460px;
 
  background-color:#999;
 
  }
 
  .start,.score,.pause{
 
  position:absolute;
 
  z-index:2;
 
  top:0;
 
  width:100px;
 
  height:100%;
 
  font-size:large;
 
  color:white;
 
  text-align:center;
 
  line-height:40px;
 
  background:-webkit-linear-gradient(top,#4ca8ff,yellow);
 
  }
 
  .start{
 
  left:0px;
 
  }
 
  .score{
 
  left:100px;
 
  background-color:red;
 
  }
 
  .pause{
 
  left:200px;
 
  }
 
  .start:after,.pause:before{
 
  content:"";
 
  position:absolute;
 
  z-index:2;
 
  top:0;
 
  width:3px;
 
  height:100%;
 
  background:-webkit-linear-gradient(top,#666,#999);
 
  }
 
  .start:after{
 
  left:97px;
 
  }
 
  .pause:before{
 
  left:0px;
 
  }
 
  .start:hover,.pause:hover{
 
  cursor:pointer;
 
  background:-webkit-linear-gradient(top,#4ca8ff,red);
 
  }
 
  .panelspan{
 
  position:absolute;
 
  z-index:0;
 
  top:50%;
 
  left:50%;
 
  font-size:50px;
 
  color:blue;
 
  }
 
  .ball,.secondBall{
 
  position:absolute;
 
  z-index:2;
 
  border-radius:50%;
 
  width:20px;
 
  height:20px;
 
  }
 
  .ball{
 
  top:460px;
 
  left:140px;
 
  background-color:red;
 
  }
 
  .secondBall{
 
  top:40px;
 
  left:140px;
 
  background-color:red;
 
  }
 
  .plate{
 
  position:absolute;
 
  top:480px;
 
  left:100px;
 
  z-index:2;
 
  width:100px;
 
  height:20px;
 
  background-color:#e5e5e5;
 
  }
 
  .promte{
 
  margin-top:20px;
 
  text-align:center;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divid="panel"class="panel">
 
  <divclass="console">
 
  <divid="start"class="start">开始</div>
 
  <divid="score"class="score">0</div>
 
  <divid="pause"class="pause">暂停</div>
 
  </div>
 
  <divid="message"class="message"></div>
 
  <divid="ball"class="ball"></div>
 
  <divid="plate"class="plate"></div>
 
  </div>
 
  <divclass="promte">提示:键盘左右箭头控制滑板</div>
 
  <scripttype="text/javascript">
 
  (function(){
 
  document.onkeydown=function(e){
 
  vare=e||window.event;
 
  if(e.keyCode==37){
 
  //键盘向左键
 
  plateMove("left");
 
  }elseif(e.keyCode==39){
 
  //键盘向右键
 
  plateMove("right");
 
  }
 
  }
 
  })();
 
  varpanel=document.getElementById("panel"),
 
  message=document.getElementById("message"),
 
  plate=document.getElementById("plate"),
 
  ball=document.getElementById("ball"),
 
  start=document.getElementById("start"),
 
  score=document.getElementById("score"),
 
  pause=document.getElementById("pause"),
 
  secondBall;
 
  varstartGame,x=x2=-1,y=y2=-1,speed=1,positionArr=[],pauseActive=false,
 
  //一个标志:表示难度是否还能增加
 
  flag=true,
 
  //球的起始位置
 
  ballX,ballY,secondBallX,secondBallY,
 
  //边界
 
  minX=0,
 
  maxX=panel.offsetWidth-ball.offsetWidth,
 
  minY=40;
 
  maxY=panel.offsetHeight-ball.offsetHeight-plate.offsetHeight;
 
  window.onload=function(){
 
  if(window.addEventListener){
 
  start.addEventListener("click",startClick,false);
 
  pause.addEventListener("click",pauseClick,false);
 
  }elseif(window.attachEvent){
 
  start.attachEvent("onclik",startClick);
 
  pause.attachEvent("onclik",pauseClick);
 
  }else{
 
  start.onclik=startClick;
 
  pause.onclik=pauseClick;
 
  }
 
  }
 
  functionplateMove(direction){
 
  if(direction=="left"){
 
  if(plate.offsetLeft>0){
 
  plate.style.left=(plate.offsetLeft-30<0?0:plate.offsetLeft-30)+"px";
 
  }
 
  }
 
  if(direction=="right"){
 
  if(plate.offsetLeft<200){
 
  plate.style.left=(plate.offsetLeft+30>200?200:plate.offsetLeft+30)+"px";
 
  }
 
  }
 
  }
 
  functionstartClick(){
 
  if(!pauseActive){
 
  resetGame();
 
  }else{
 
  pauseActive=!pauseActive;
 
  }
 
  startGame=setInterval(function(){
 
  //console.log(ballX+"======"+ballY);
 
  positionArr=setPosition(ballX,ballY,true);
 
  if(positionArr=="GAMEOVER"){
 
  return;
 
  }
 
  ballX=positionArr[0];
 
  ballY=positionArr[1];
 
  //设置球的位置
 
  ball.style.left=ballX+"px";
 
  ball.style.top=ballY+"px";
 
  if(!flag){
 
  positionArr=setPosition(secondBallX,secondBallY,false);
 
  secondBallX=positionArr[0];
 
  secondBallY=positionArr[1];
 
  secondBall.style.left=secondBallX+"px";
 
  secondBall.style.top=secondBallY+"px";
 
  }else{
 
  addDifficulty();
 
  }
 
  },30);
 
  }
 
  functionpauseClick(){
 
  pauseActive=true;
 
  clearInterval(startGame);
 
  }
 
  functionresetGame(){
 
  clearInterval(startGame);
 
  message.innerHTML="";
 
  score.innerHTML="0";
 
  ball.style.left="140px";
 
  ball.style.top="460px";
 
  plate.style.left="100px";
 
  plate.style.top="480px";
 
  ballX=ball.offsetLeft;
 
  ballY=ball.offsetTop;
 
  speed=1;
 
  flag=true;
 
  //第二个球设置隐藏
 
  if(secondBall){
 
  secondBall.style.display="none";
 
  secondBall.style.left="140px";
 
  secondBall.style.top="40px";
 
  }
 
  }
 
  functionaddDifficulty(){
 
  if(parseInt(score.innerHTML)>500&&parseInt(score.innerHTML)<2000){
 
  speed=1.2;
 
  }elseif(parseInt(score.innerHTML)>2000&&parseInt(score.innerHTML)<5000){
 
  speed=1.5;
 
  }elseif(parseInt(score.innerHTML)>5000){
 
  if(typeofsecondBall!="undefined"){
 
  secondBall.style.display="";
 
  }else{
 
  secondBall=document.createElement('div');
 
  }
 
  secondBall.className='secondBall';
 
  panel.appendChild(secondBall);
 
  secondBallX=secondBall.offsetLeft;
 
  secondBallY=secondBall.offsetTop;
 
  flag=false;
 
  }
 
  }
 
  functionsetPosition(_x,_y,firstball){
 
  if(_x==minX||_x==maxX){
 
  //x*=-1;
 
  firstball?x*=-1:x2*=-1;
 
  }
 
  if(_y==minY||_y==maxY){
 
  //y*=-1;
 
  firstball?y*=-1:y2*=-1;
 
  }
 
  if(_y==maxY){
 
  //判断挡板的位置是不是在球的范围内
 
  if(plate.offsetLeft>_x||(plate.offsetLeft+plate.offsetWidth)<_x){
 
  clearInterval(startGame);
 
  message.innerHTML="GAMEOVER";
 
  return"GAMEOVER";
 
  }
 
  }
 
  if(firstball){
 
  _x+=4*x*speed;
 
  _y+=5*y*speed;
 
  }else{
 
  _x+=4*x2*speed;
 
  _y+=5*y2*speed;
 
  }
 
  //边界处理
 
  _x=_x<minX?minX:_x;
 
  _x=_x>maxX?maxX:_x;
 
  _y=_y<minY?minY:_y;
 
  _y=_y>maxY?maxY:_y;
 
  //设置分数
 
  score.innerHTML=parseInt(score.innerHTML)+10*speed;
 
  return[_x,_y];
 
  }
 
  </script>
 
  </body>
 
  </html>
 
  如果您有更好的方法或更多的功能,可以和我们大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!!

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/w3c/w56056.shtml