我怎樣才能使CSS或JavaScript

一個彎曲的線狀我目前正在開發一個遊戲，我現在有四個按鈕，我怎樣才能使CSS或JavaScript

我期待將這些4個色的按鈕在彎曲線的形狀像下面

的例子

enter image description here

我已經鏈接了我的CSS，並提出了一個小提琴，所以你們可以看到我有什麼。

的jsfiddle - http://jsfiddle.net/eh7h7pn1/

Github上下載並解壓到看比賽完全https://github.com/Jamiex304/Simon_Says_Game_Demo

我的CSS

body { 
    background-color: #333; 
    color: #fff; 
} 

ul { 
    list-style: none; 
    margin: 0 0 20px 0; 
    padding: 0; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    padding: 3px; 
} 

.wrapper { 
    margin-top:10px; 
    margin-bottom:20px; 
    width: 650px; 
    height: 50px; 
    background-color:black; 
    position: relative; 
    margin: 0 auto; 
    border-style: solid; 
    border-width: 5px; 
} 

.wrapper2 { 
    position: relative; 
    width: 650px; 
    height: 700px; 
    margin: 0 auto; 
    border-style: solid; 
    border-width: 5px; 
} 

.wrapper3{ 
    position: relative; 
    margin-top:20px; 
    width: 650px; 
    height: 170px; 
    margin: 0 auto; 
    background-color:black; 
    border-style: solid; 
    border-width: 5px; 
} 

.Timer{ 
    width:300px; 
    height:200px; 
    margin-top:235px; 
    margin-left:177px; 
    border:5px solid white; 
    border-radius: 50%; 
    background-color:black; 
    text-align:center; 
} 

.pad { 
    z-index: 1; 
    margin: 10px; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
    filter: alpha(opacity=60); 
    opacity: 0.6; 
} 

.shape1 { 
    position: absolute; 
    left: 50%; 
    margin-left: -50px; 
    width: 125px; 
    height: 125px; 
    background-color: green; 
    border-radius: 50%; 
} 

.shape2 { 
    position: absolute; 
    left: 50%; 
    bottom: 2.5px; 
    margin-left: -50px; 
    width: 125px; 
    height: 125px; 
    background-color: red; 
    border-radius: 50%; 
} 

.shape3 { 
    position: absolute; 
    left: 78%; 
    right: 50%; 
    bottom: 50%; 
    margin-bottom: -50px; 
    margin-right: -50px; 
    width: 125px; 
    height: 125px; 
    background-color: purple; 
    border-radius: 50%; 
} 

.shape4 { 
    position: absolute; 
    left: 0; 
    bottom: 50%; 
    margin-bottom: -50px; 
    width: 125px; 
    height: 125px; 
    background-color: blue; 
    border-radius: 50%; 
} 

.level, .score { 
    width: 50%; 
    float: left; 
    text-align: center; 
} 

.sButton { 
    width: 30%; 
    margin: 0 auto; 
    color: black; 
    border: 3pt ridge Black; 
    font-weight: bold; 
} 

.start { 
    width: 100%; 
    height: 30px; 
    text-align: center; 
}

來源

2014-10-19 Jamiex304

唉，我選擇了「瘋狂」，準備好了，擊中「開始」，......並沒有發生任何事情。 – Rudie 2014-10-19 01:39:19

如果你想用HTML製作遊戲，你應該看看畫布。即使使用高級CSS，您也不會過多使用dHTML。你想做的事情在畫布上是微不足道的，但是在CSS中很痛苦，並且可能無法在所有瀏覽器上完美地工作 – 2014-10-19 01:40:06

CSS在製作這些形狀方面並不擅長。 CANVAS是。或SVG。看看[拉斐爾]（http://raphaeljs.com/graffle.html） – Rudie 2014-10-19 01:40:08

CSS不會做的形狀一樣，非常好。 CSS做對稱，圓形，直線等，但不是曲線和有機的。

CANVAS可以做你喜歡的任何事情。在2D環境中有一堆輔助功能，to make bezier curves等。

或嘗試使用SVG。非常酷的東西可能與一點點的JS。 Check out Raphael.那裏有很多math，但根據你的需要，你會需要一些。遊戲通常有一個負載。

來源

2014-10-19 01:43:14 Rudie

我怎樣才能使CSS或JavaScript

回答

相關問題