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;
    }
  .........完整代码请登录后点击上方下载按钮下载查看