js实现一个贪吃蛇游戏代码-html代码-BFW代码库

js实现一个贪吃蛇游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现一个贪吃蛇游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
        margin: 0px;
        padding: 0px;
        color: #424242;
        font-family: arial;
    }
    
    html,
    body {
        width: 100%;
        height: 100%;
    }
    
    .body {
        width: 100%;
        height: 100%;
        background: linear-gradient(rgb(42, 150, 219), rgb(153, 50, 231));
        box-sizing: border-box;
    }
    
    .body>div {
        margin: 0px auto;
        width: 700px;
        height: 440px;
        position: relative;
        top: 15%;
    }
    
    .body div span {
        z-index: 9;
        height: 40px;
        width: 140px;
        border-radius: 50px;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border: 2px solid #FFF;
        cursor: pointer;
        display: inline-block;
        background-color: rgba(255, 255, 0, 0.7);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .body div span:hover {
        background-color: rgba(255, 255, 0, 0.8);
        color: #FF3300;
    }
    table{
        border: 1px solid transparent;
    }
    td{
        width: 20px;
        height: 17px;
        background-color: rgba(0, 0, 0, 0.2);
        position: relative;
    }
    tr,td:hover{
        cursor: default;
        
    }
    p{
        color:rgba(255,255,255,0.5);
        font-size: 13px;
        position: absolute;
        left: 32%;
        bottom: -80px;
    }
    .food{
        width: 100%;
        height: 100%;
        background-color: rgb(119,255,51);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 2px;
    }
    #score{
        height:150px;
        width: 200px;
        z-index: 5;
        background-color: rgba(255,255,255,0.6);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 10px;
        color:#FFF;
        font-size: 22px;
        text-align: center;
        padding-top: 10px;
    }
    #score>span{
        margin-top: 45px;
    }
  .........完整代码请登录后点击上方下载按钮下载查看