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

代码语言：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 = "none";
        					score = 0;
        					direction = "RIGHT";
        					table.rows[foodRow].cells[foodCel].removeChild(sw);
        					createFood(); //重新生成食物
        					run(); //运行
        				};
        			}
        			/**
        			 * 创建食物
        			 */
        			function createFood() {
        				var ii = true;
        				//验证食物的位置不能在蛇的位置上
        				while(ii) {
        					foodRow = Math.floor(Math.random() * (height / 20));
        					foodCel = Math.floor(Math.random() * (height / 20));
        					for(var i = 0; i < snake.length; i++) {
        						if(snake[i][0] == foodCel && snake[i][1] == foodRow) {
        							ii = true;
        							break;
        						}else{
        							ii = false;
        						}
        					}
        				}
        				var food = table.rows[foodRow].cells[foodCel]; //获取生成的td
        				sw = document.createElement("div");
        				sw.className = "food";
        				food.appendChild(sw); //把div添加至td中
        				var flag = false;
        				window.setInterval(function() { //闪烁效果
        					if(flag) {
        						sw.style.height = 17 + "px";
        						sw.style.width = 18 + "px";
        						flag = false;
        					} else {
        						sw.style.height = 15 + "px";
        						sw.style.width = 16 + "px";
        						flag = true;
        					}
        				},200);
        			}
        
        			/**
        			 * 创建蛇
        			 */
        			function createSnake() {
        				var tail = table.rows[snake[len - 1][1]].cells[snake[len - 1][0] - 1];
        				for(var i = 0; i < len; i++) { //循环设置蛇背景色
        					var head = table.rows[snake[i][1]].cells[snake[i][0]];
        					if(head) {
        						head.style.backgroundColor = "rgba(255,255,0," + ((1 / len) * (len - i) + 0.2) + ")";
        					}
        					if(snake[i][0] == table.rows.item(0).cells.length) { //判断是否出边界
        						snake[i][0] = -1;
        					}
        				}
        				if(tail) { //恢复蛇尾后一格的背景色
        					tail.style.backgroundColor = "rgba(0, 0, 0,.........完整代码请登录后点击上方下载按钮下载查看