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;
    }
    #score>span:hover{
    	border-color:  #F00;
    }
    #score>p{
    	height: 50px;
    	width: 50px;
    	display: inline-block;
    	position: absolute;
    	left: 38%;
    	top: 45px;
    	line-height: 50px;
    	font-size: 35px;
    	color: #FFF;
    	font-weight: bold;
    }
    </style>
</head>

<body>
    <div class="body">
        <div class="content">
            <span onclick="start();">Start Game</span>
            <p>说明：方向键控制，空格暂停，再按空格继续</p>
            <div id="score">Score
                <p>0</p>
                <span>Continue</span>

            </div>
        </div>
    </div>
    <script type="text/javascript">
        //获取操作区域
        			this.content = document.getElementsByClassName("content")[0];
        			this.scoreDiv = document.getElementById("score");
        			this.height = content.offsetHeight; //高度
        			this.width = content.offsetWidth; //宽度
        			this.table = document.createElement("table"); //表格
        			this.foodRow = 0; //食物行值
        			this.foodCel = 0; //食物列值
        			this.maxCel; //最大列值
        			this.maxRow; //最大行数
        			this.snake = [[5, 4],[4, 4],[3, 4],[2, 4],[1, 4]]; //蛇
        			this.len = snake.length; //蛇长度
        			this.timeNumber = 0; //运动函数返回值
        			this.direction = "RIGHT"; //方向
        			this.sw; //食物
        			this.X = false;
        			this.Y = true;
        			this.score = 0;
        
        			/**
        			 * 初始化
        			 */
        			function initial() {
        				scoreDiv.style.display = "none";
        				drawTable(); //绘制表格
        				createFood(); //生成食物
        				//预备运动
        				timeNumber = window.setInterval(function() {
        					for(var i = 0; i < len; i++) {
        						snake[i][0] += 1;
        					}
        					createSnake(); //生成蛇
        				}, 100);
        				//重置游戏
        				scoreDiv.lastElementChild.onclick = function(){
        					scoreDiv.style.display = "non.........完整代码请登录后点击上方下载按钮下载查看