贪吃蛇网页

贪吃蛇相信大部分网友应该都有玩过，这个游戏哪里有呢？它可以是一个APP，可以是一个微信小程序或者是QQ小程序，许多人用来消耗无聊的时间，是一个很好的业余小游戏，这里为大家分享一个网页贪吃蛇，有很多地方没有完善，所以仅供参考借鉴

css代码

body {
     margin: 0;
     padding: 0;
 }
 .main {
     width: 800px;
     height: 400px;
     margin:  auto;
     background-image: url(preview.jpg);
     
 }
 .btn {
     width: 100px;
     height: 40px;
     border-radius: 20px;
     color: crimson;
     font-weight: bolder;
 }
 .map {
     position: relative;
     width: 800px;
     height: 400px;
      background-color: white;;
 }
 .bg{
      width: 100%;
      height: 920px;
     background-image: url(1.png);
     background-repeat: no-repeat;
     background-size:1900px 900px;
     margin-top: 0;
 }


 .jz{
    height: 600px;
    width: 800px;
    margin: auto;
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:white;
    text-align: center;
 }

div模块

  <div class="bg">
       <div class="jz">
        <div class="main">
            <button class="btn" id="begin" >开始游戏</button>
            <button class="btn" id="replay">重新开始</button>
            <button class="btn" id="end">结束游戏</button>
            
    
            <form >
                <input type="radio" name="nandu" value="easy" class="1">简单
                <input type="radio" name="nandu" value="yiban" class="1">一般
                <input type="radio" name="nandu" value="diff" class="1">困难
            </form>
          
            <div class="map" id="map"></div>
       </div>

    </div>

<script src="贪吃蛇.js"></script>

</div>

js模块

 var map = document.getElementById('map');
        // 使用构造方法创建蛇，
        function Snake()
        {
            // 设置蛇的宽、高、默认走的方向
            this.width = 10;
            this.height = 10;
            this.direction = 'right';

            // 记住蛇的状态，当吃完食物的时候，就要加一个，初始