/* 学艺不精，三栏布局和双飞翼布局还要好好研究一下 */

/*动画中使用requestAnimationFrame，防止丢帧页面优化*/

#container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
}

#mainStage {
    height: 666px;
    width: 100%;
    float: left;
    border: 2px solid black;
    background-color: #000000;
}

#myCanvas {
    margin: auto;
    position: absolute;
    z-index: 0;
}

#myRole {
    position: absolute;
    z-index: 1;
}

#myEnemy {
    position: absolute;
    z-index: 2;
}

#myBall {
    position: absolute;
    z-index: 3;
}

#mySpecial {
    position: absolute;
    z-index: 4;
}

#blue {
    position: relative;
    width: 100px;
    height: 670px;
    float: left;
    background-color: rgb(51, 51, 68);
    margin-left: -100%;
    right: 104px;
}

#life {
    float: left;
    width: 85px;
    margin-left: 15px;
}

#life img {
    width: 40px;
}

#life h2 {
    position: relative;
    top: -60px;
    left: 40px;
}

#timer {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

#red {
    width: 100px;
    height: 670px;
    margin-right: -100%;
    float: left;
    background-color: rgb(51, 51, 68);
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}