页面的head部分，需简单设置页面元素的样式，代码如下：

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body {
        text-align: center;
    }
    #map {
        width: 800px;
        height: 600px;
        background-color: #ccc;
        position: relative;
        margin: 20px auto;
    }
    #map img{
        position: absolute;
        height: 600px;
        left:-209px;
        top: 0;
        z-index: 99;
    }
    #goal {
        margin: 30px;
        float: left;
    }
    .btn {
        padding: 0 5px;
        margin: 10px 10px 10px 0;
        height: 38px;
        border: 1px solid #0094ff;
        font-size: 22px;
        text-align: center;
        line-height: 38px;
        color: #0094ff;
        cursor: pointer;
        transition: all 0.3s;
    }
    .btn:hover {
        background-color: #0094ff;
        color: #fff;
    }
</style>

页面的body部分，需设置好页面元素的容器，代码如下：

<p id="goal">得分：0</p>
<input type="button" value="老年人手速" class="btn"/>
<input type="button" value="单身手速" class="btn"/>
<div id="map"><img src="./img/snake.jpg" alt=""/></div>

页面的底部，需引入必要的JS文件，并启用对应的插件，代码如下：

<script type="text/javascript" src="js/food.js"></script>
<script type="text/javascript" src="js/snake.js"></script>
<script type="text/javascript" src="js/game.js" charset="utf-8"></script>
<script type="text/javascript">
    var game = new Game();
    game.food = new Food();
    game.snake = new Snake();
    game.chooseDifficulty();
</script>