使用JavaScript实现的网页版贪吃蛇-优快云博客

本文链接：https://blog.youkuaiyun.com/u013276512/article/details/116203275

博主原计划用Java开发C端贪吃蛇，因时间限制转而使用JavaScript快速实现了网页版。游戏内蛇能自动爬行、碰撞边界会转弯、响应键盘控制、能吃食物，并具备游戏结束后的重置功能，但仅支持Chrome浏览器。代码仍有优化空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原计划使用java写一个C端的贪吃蛇，后来发现要从头学java C端的知识，时间紧迫，就使用js写了一个页面版的，代码还有优化的空间，大家努力。
这个蛇，自己会向前爬行，遇到墙壁会自动拐弯儿，会受键盘的方向键控制（这里引入了一个jq的js文件），会吃果实，游戏结束后，点击确定就可以重新开始。
目前只支持谷歌浏览器。
上代码：

<html>
	<head>
		<title></title>
		<meta charSet="utf-8"/>
		<script type="text/javascript" src="https://www.wushangmi.com/js/jquery-1.11.0.min.js"></script>
		<style type="text/css">
			#main{
				width: 280px;
				height: 280px;
			}
			button{
				width: 14px;
				height: 14px;
				border: 1px solid #ccc;
			}
			.green-btn{
				background-color:green;
			}
			.red-btn{
				background-color:red;
			}
		</style>


	</head>
	<body>
		<div id="main"></div>
		<script type="text/javascript">
			var range = 20;
			// 1，生成初始化的蛇身，二维数组：一维度是多少个点，二维度是点的x和y
			var snake;
			var direction;//初始方向
			var fruitPoint;//果实
			init();

			// 2，自动移动，顺当前方向
			var moveInterval;
			function init(){
				snake = [[0,0],[1,0]];
				direction = "right";
				fruitPoint = fruit();
				moveInterval = setInterval(autoMove,500);
				var canvas = initSnake(range);//整理画布，把蛇的位置填充进去
				// print(canvas);
				draw(canvas);
				// autoMove();
			}
			// 移动的实质 是改变数组中的值
			function autoMove(){
				var head = snake[snake.length - 1];//蛇头
				//获取下一个元素的位置 1-自动拐弯，2-判断结束
				
				// 下一个位置 (nextX, nextY)
				var nextX = head[0];
				var nextY = head[1];
				if("right" == direction){
					nextX = nextX + 1;
				} else if ("down" == direction){
					nextY = nextY + 1;
				} else if ("left" == direction){
					nextX = nextX - 1;
				} else if ("up" == direction){
					nextY = nextY - 1;
				}
				if(nextX < 0 || nextX >= range || nextY < 0 || nextY >= range ){
					autoTurn();//自动拐弯
					var nextX = head[0];
					var nextY = head[1];
					if("right" == direction){
						nextX = nextX + 1;
					} else if ("down" == direction){
						nextY = nextY + 1;
					} else if ("left" == direction){
						nextX = nextX - 1;
					} else if ("up" == direction){
						nextY = nextY - 1;
					}
				}
				// console.log("next:(" + nextX + ", " + nextY + ")");
				// console.log(snake);
				// 这里已经有了下一个位置，如果下一个位置是蛇身，或者出了范围（自动拐弯），则游戏结束
				if(isSnake(nextY, nextX)){
					clearInterval(moveInterval);
					if(confirm("游戏结束，是否重新开始")){
						init();
					}
					return ;
				}
				// 这里需要确定 是否要改变蛇长度，移动是不需要改变的，吃果实 需要改变
				// 根据判断下一个位置 是不是果实 来确定是否有 吃的动作发生 
				if(nextY == fruitPoint[0] && nextX == fruitPoint[1]){
					// 增加蛇的长度，把 next 放到最新的位置作为蛇头，且不需要依次移动后续的节点
					snake[snake.length] = [nextX,nextY];
					fruitPoint = fruit();//重置果实的位置
					//积分 TODO
				}else{
					// 赋值，改变蛇的位置，依次移动
					for(var i = 1 ; i < snake.length ; i ++){
						snake[i - 1] = snake[i];
					}
					// 把蛇头的位置 替换成 next 的位置
					snake[snake.length - 1] = [nextX,nextY];
				}
				var canvas = initSnake(range);//整理画布，把蛇的位置填充进去
				// print(canvas);
				draw(canvas);
			}
			function autoTurn(){
				if("right" == direction){
					direction = "down";
				} else if ("down" == direction){
					direction = "left";
				} else if ("left" == direction){
					direction = "up";
				} else if ("up" == direction){
					direction = "right";
				}
			}
			// 3，控制拐弯
			$(document).keydown(function(event){
				if(event.keyCode == 37){
					if("up" == direction || "down" == direction){
						direction = "left";//left
					}
				}else if(event.keyCode == 38){
					if("right" == direction || "left" == direction){
						direction = "up";//up
					}
				}else if(event.keyCode == 39){
					if("up" == direction || "down" == direction){
						direction = "right";//right
					}
				}else if(event.keyCode == 40){
					if("right" == direction || "left" == direction){
						direction = "down";//down
					}
				}
			});
			// 4，生成果实
			function fruit(){
				var x ;
				var y ;
				do{
					x = Math.floor(Math.random() * range);
					y = Math.floor(Math.random() * range);
				}while(isSnake(y, x))
				return [y, x];
			}
			// 5，吃果实 和移动一起判断
			// 6，自动拐弯 和移动一起判断
			// 7，判断结束 和移动一起判断

			function initSnake(range){
				var arr = [];
				for (var i = 0; i < range; i++) {
					var innerArr = [];
					for (var j = 0; j < range; j++) {
						if(isSnake(i, j)){
							innerArr[j] = 1;
						}else{
							innerArr[j] = 0;	
						}
					}
					arr[i] = innerArr;
				}
				return arr;
			}
			function isSnake(x, y){
				for(var i = 0 ; i < snake.length ; i ++){
					var cell = snake[i];
					if(y == cell[0] && x == cell[1]){
						return true;
					}
				}
				return false;
			}
			function print(arr){
				for (var i = 0; i < arr.length; i++) {
					var innerArr = arr[i];
					var text = "";
					for (var j = 0; j < innerArr.length; j++) {
						var value = innerArr[j];
						text += value < 10 ? value + "  " : value + " ";
					}
					console.log(text);
				}
			}
			function draw(arr){
				// 打印一个50x50的button矩阵
				var innerHtml = "";
				for (var i = 0; i < range; i++) {
					for (var j = 0; j < range; j++) {
						if(arr[i][j] == 1){
							innerHtml += "<button class='green-btn'></button>";
						} else if (i == fruitPoint[0] && j == fruitPoint[1]){
							innerHtml += "<button class='red-btn'></button>";
						} else{
							innerHtml += "<button></button>";
						}
					}
				}
				document.getElementById("main").innerHTML = innerHtml;
			}
			// draw();
		</script>
	</body>
</html>

js版本的贪吃蛇