Question

对于一个学校项目，我正在使用没有Javascript的CSS Pong游戏（松散地改编自：http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/）。我试图将球限制在法院区域的内部，同时让它响应。

我使用的是媒体查询和元标记，但是当浏览器较大时，球会限制在球场区域内的较小框内。

我拍了一张它看起来像的屏幕录像：

https://youtu.be/vF9b-2pi2nE

如何在法庭区域内做出回应？

HTML：

<!doctype html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pong (1972)</title>

<link href="styles/csspong.css" rel="stylesheet">
<!--custom google fonts-->
<link href="https://fonts.googleapis.com/css?family=Orbitron:500" rel="stylesheet" type="text/css">

<h1>PONG GAME</h1>
<div id="court">
    <div id="horizontal">
    <span id="ball"></span>
            <span id="player1"></span>
            <span id="player2"></span>
    </div>
</div>

<footer>Computer vs Computer</footer>

CSS：

/*********************
        MAIN
********************/

h1{
    color:#3f3;
    text-shadow:0 0 10px #33FF33;
    text-align:center;
    font-family: 'Orbitron', sans-serif;
}

body{
    background-color:black;
}

footer{
    color:#3f3;
    text-shadow:0 0 10px #33FF33;
    text-align:center;
    font-family: 'Orbitron', sans-serif;
}

body:before {
/* background lines effect */
  content: "";
  position: absolute;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(transparent 50%, rgba(0, 40, 40, 0.25) 50%);
  background-size: 100% 4px;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
  top: 0;
  left: 0; }

/*********************
      PLATFORM
********************/

#court{
/*game platform*/
    margin: 30px auto;
    width: 600px;
    height: 300px;
    position: relative;
    border: 4px dotted #3f3;
}

#court:before{
/*middle dash separator of the platform*/
    left: 50%;
    content:'';
    width: 10px;
    height: 300px;
    position: absolute;
    border-left: 4px dashed #3f3;
    }


/*********************
        BALL
********************/

#ball{
    top:142px;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    background :#3f3;
    border-radius: 50%;
    transform: translate3d(10px,0,0)
}

/*********************
     ANIMATIONS
********************/

@keyframes twitchy {

100% {
    transform: translate3d(0,0px,0);
}
20% {
    transform: translate3d(0,-45px,0);
}
44% {
    transform: translate3d(0,25px,0);
}
46% {
    transform: translate3d(0,-15px,0);
}
48% {
    transform: translate3d(0,15px,0);
}
50% {
    transform: translate3d(0px,50px,0);
}
70% {
    transform: translate3d(0,60px,0);
}
85% {
    transform: translate3d(0,-30px,0);
}
95% {
    transform: translate3d(0,30px,0);
}
}

@keyframes updown {
/*keyframes for the horizontal id*/

0%,50%,100% {
     transform: translate3d(0,0,0);
}
25% {
    transform: translate3d(0,118px,0);
}
75% {
    transform: translate3d(0,-108px,0);
}
}

#horizontal{
    animation: updown 2.3s infinite linear; 
    /*having the animation seconds set to 2.3 changes the timing cycle to a more disorganized (random-looking, though it will repeat eventually) look*/
 }

@keyframes leftright {
/*keyframes for the ball id*/

0%,100% {
    transform: translate3d(10px,0,0);
}
50% {
    transform: translate3d(570px,0,0);
}
}

 #ball{
 animation: leftright 2.9s infinite linear
 }

 @keyframes query {
 0%,100% {
    transform: translate3d(10px,0,0);
}
50% {
    transform: translate3d(350px,0,0);
}
 }

 /*********************
        PLAYERS
********************/

#player1{
    top:125px;
    background:#3f3;
    position:absolute;
    width:7px;
    height:44px;
    left:4px;
    margin-top:-12px;
    animation: twitchy 2.9s infinite linear; 
}

#player2{
    top:125px;
    background:#3f3;
    position:absolute;
    width:7px;
    height:44px;
    right:4px;
    margin-top:-12px;
    animation: twitchy 3.2s infinite linear; 
}


 /*********************
    MEDIA QUERIES
********************/

@media (max-width: 600px) {
  #court {
    display:table-cell;
  }
  #ball{
      display:table-cell;
      center:550px;
      animation: leftright 2.9s infinite linear

  }
  footer{
      margin:30px;
  }
}

@media (min-width: 100px) {
      #ball{
        display:table-cell;
        animation: query 4.2s infinite linear; 
      }
}

如何让盒子内的移动球响应？

0 个答案: