試圖在HTML中設計檯球遊戲，以製作jQuery遊戲 - 我的第一個項目

我在第一個項目中做了一個旋風。我正在學習。我正在試圖用jQuery構建一個檯球遊戲。我剛剛開始。我需要先排隊。任何人都可以給我一些想法。到目前爲止，這是我的位置。我需要發起像5,4,3,2,1這樣的球，並且在桌子的中心。試圖在HTML中設計檯球遊戲，以製作jQuery遊戲 - 我的第一個項目

<body> 

    <div id="container" class="table-layout"> 

     <div class="left-top"> 
      <div class="pocket"></div> 
     </div> 
     <div class="right-top"> 
      <div class="pocket"></div> 
     </div> 
     <div class="left-center"> 
      <div class="pocket"></div> 
     </div> 
     <div class="right-center"> 
      <div class="pocket"></div> 
     </div> 
     <div class="left-bottom"> 
      <div class="pocket"></div> 
     </div> 
     <div class="right-bottom"> 
      <div class="pocket"></div> 
     </div> 

     <div class="ball-holder"> 
      <div class="holder-row"> 
       <div class="ball"> 
        <h1>(1)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(2)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(3)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(4)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(5)</h1> 
       </div> 
      </div> 

      <div class="holder-row"> 
       <div class="ball"> 
        <h1>(6)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(7)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(8)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(9)</h1> 
       </div> 
      </div> 

      <div class="holder-row"> 
       <div class="ball"> 
        <h1>(10)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(11)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(12)</h1> 
       </div> 
      </div> 

      <div class="holder-row">  
       <div class="ball"> 
        <h1>(13)</h1> 
       </div> 
       <div class="ball"> 
        <h1>(14)</h1> 
       </div> 
      </div> 

      <div class="holder-row"> 
       <div class="ball"> 
        <h1>(15)</h1> 
       </div> 
      </div> 
     </div> 

     <div class="qball"></div> 

    </div> 


</body>

這裏是我的CSS：

body { 
background:green; 
margin: 0 auto; 
} 

#container { 

} 

.table-layout { 
margin-left: auto; 
margin-right: auto; 
width: 450px; 
height: 600px; 
border: 2px solid gold 
} 

.ball-holder { 
width: 300px; 
margin: -100px auto; 
} 

.holder-row { 
display: block; 
width: 300px; 
text-align: center; 
} 

.ball { 
width:30px; 
height:30px; 
border-radius:100%; 
background-color:red; 
display: inline-block; 
} 

.qball { 
width:30px; 
height:30px; 
border-radius:100%; 
background-color:white; 
display: block; 
margin-left: auto; 
margin-right: auto; 
margin-top: 220px; 
} 

h1 { 
text-align:center; 
font-size:10px; 
font-family:arial; 
color:white; 
} 

.pocket { 
width:40px; 
height:40px; 
border-radius:100%; 
border:2px solid black; 
background-color:black; 
display: inline-block; 
} 

.left-top { 

} 

.right-top { 
margin-left: 405px; 
margin-top: -48px; 
} 

.left-center { 

} 

.right-center { 
margin-left: 405px; 

} 

.left-bottom { 

} 

.right-bottom { 
margin-left: 405px; 
}

來源

2013-07-13 Doug

首先，也是最imrotant：在'div's不裹球列。以後你將無法輕易將它們分開。改用'position：absolute;'代替。 –

看看這個二維物理引擎：http：//code.google.com/p/box2dweb/ – jantimon

如果你想與你目前有繼續學習的工作，你將不得不想想你打檯球時需要的對象。我會說你可以使用的其中一個缺失部分是一個持有人 - 不知道它在池中叫什麼 - 球會進入。你可以看到，我已經添加了您的評論，看看它是否有助於你的代碼：

http://codepen.io/pertrai1/pen/mkKna

來源

2013-07-13 23:41:40 pertrai1

只要有人想知道，那個工具就叫做架子或三角形。 – maxton

所以我把它固定了一下，仍然有問題按照我想要的方式放在口袋裏。任何人都可以檢查我的代碼並提出建議嗎？ – Doug

@Doug - 現在你已經設置了它的方式，我會考慮添加一個容器，用於具有相對定位的池表，然後您可以根據池表的容器來定位口袋 – pertrai1

試圖在HTML中設計檯球遊戲，以製作jQuery遊戲 - 我的第一個項目

回答

相關問題