对于一个学校项目,我正在使用没有Javascript的CSS Pong游戏(松散地改编自:http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/)。我试图将球限制在法院区域的内部,同时让它响应。
我使用的是媒体查询和元标记,但是当浏览器较大时,球会限制在球场区域内的较小框内。
我拍了一张它看起来像的屏幕录像:
如何在法庭区域内做出回应?
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;
}
}