3

学校のプロジェクトでは、このチュートリアルに従って Pong ゲームを行っています: http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/

アニメーションの部分で行き詰まっています。ボールは中央に配置されておらず、@keyframes を上下に配置すると、ボールをコート (壁) 内に拘束したいときに、ボールがコート上で上下に跳ね返ります。

ここで写真を見る

ボールをボックス内に留めるにはどうすればよいですか?

ここに私のHTMLがあります:

<!doctype html>
<meta charset="UTF-8">
<title>Pong (1972)</title>
<link href="styles/csspong.css" rel="stylesheet">

<h1>CSS PONG</h1>
<div id="court">
    <div id="horizontal">
    <span id="ball"></span>
    </div>
</div>

CSS:

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

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

#court:before{
    left: 50%;
    content:'';
    width: 10px;
    height: 300px;
    position: absolute;
    border-left: 4px dashed #3f3;
    }

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

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

/*********************
    BALL ANIMATION
********************/

@keyframes leftright {
0%,100% {transform: translate3d(10px,0,0)}
50% {transform: translate3d(570px,0,0)}
}
#ball{
 ...
 animation: leftright 2s infinite linear
 }

 @keyframes updown {
 0%,50%,100% {transform: translate3d(0,0,0)}
 25% {transform: translate3d(0,142px,0)}
 75% {transform: translate3d(0,-136px,0)} }

 #horizontal{
 ...
 animation: updown 2s infinite linear; }
4

1 に答える 1