酷炫贪吃蛇——由“前端“实现___效果 + 全部代码

Posted 2022-02-06 追光者♂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了酷炫贪吃蛇——由“前端“实现___效果 + 全部代码相关的知识，希望对你有一定的参考价值。

一、游戏效果展示（运行）

这是带有调整速度的游戏运行展示：

这是带有"重新游戏"的展示：这速度我还不能驾驭哈哈~

测试一下你最好得多少分数？

注意：
背景图片、游戏格子、提示语言等都可以根据需要进行更改哦~

二、全部代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>贪吃蛇——CSDN追光者♂</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/index.js"></script>
	</head>
	<body>
		<div class="base">
			<div id="context">
				<div id="title">
					<div class="left">
						<div>说明：</div>
						<div>1、上、下、左、右键控制蛇运动的方向</div>
						<div>2、空格键控制游戏暂停与运行</div>
						<div>3、"+"、"-"控制运行速度</div>
					</div>
					<div class="center">
						<div>加油！奥利给！</div>
						<img src="img/gong.jpg" width="75px" />
					</div>
					<div class="right">
						分数：<label id="score"></label>
					</div>
				</div>
				<canvas id="canvas" height="500px" width="700px"></canvas>
			</div>
		</div>		
		<div class="model" id="model1">
			<div class="context">
				<div class="saoma">就这？</div>
				<img src="img/gong.jpg" width="160px" />
				<div class="jixu">游戏已暂停，按空格键继续</div>
			</div>
		</div>	
		<div class="model" id="model2">
			<div class="context">
				<div class="saoma">这就认输了？！</div>
				<img src="img/gong.jpg" width="160px" />
				<button onclick="reLoad()">再来一局</button>
			</div>
		</div>
	</body>
</html>

index.css

*
	margin: 0;
	padding: 0;

.base
	position: fixed;
	width: 100%;
	height: 100%;
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;

buttonwidth: 50px; 
atext-decoration:none;
#context 
	width: 700px;
	height: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -350px;
	margin-top: -300px;
	background-color: white;
	opacity: 0.7;

#title
	width: 100%;
	height: 100px;
	float: left;

#canvas
	float: left;
	

#title .left
	width: 49%;
	height: 100%;
	float: left;	

#title .left div
	margin-left: 10px;
	margin-top: 4px;
	font-size: 14px;

#title .right,
#title .center
	width: 25%;
	height: 100%;
	float: left;
	border-left: solid gray 1px;

#title .right
	line-height: 50px;
	text-align: center;
	font-size: 20px;	

#title .center div
	float: left;
	width: 100%;
	text-align: center;
	font-size: 16px;

#title .center img
	float: left;
	position: relative;
	left: 50%;
	margin-left: -37.5px;

.model
	width: 100%;
	height: 100%;
	background-color: black;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 0.65;
	display: none;

.model .context
	width: 200px;
	height: 220px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -110px;
	margin-left: -100px;
	color: white;

.model .context img
	margin-left:20px;

.model .context div
	text-align: center;
	margin-bottom: 5px;

.model .context button
	width: 120px;
	height: 30px;
	background-color: white;
	color: black;
	border-radius: 3px;
	border: none;
	margin-left: 40px;
	margin-top: 20px;

index.js

/*
 *   1、初始化 方法 init()
 * 
 * */

//定义全局变量
var ROWS; //行数
var COLS; //列数
var CONTEXT; //画布上下文对象
var BLOCK_SIZE; //格子大小
var snakes = []; //保存蛇坐标
var snakeCount; //蛇身数量
var foodX, foodY; //食物的坐标
var interval; //计时
var moveTo; //蛇移动的方向
var isStop;  //是否暂停
var score;  //分数
var speed;   //蛇运行速度
window.onload = function() 
	//游戏初始化
	init();
	start();

//重新加载
function reLoad()
	window.location.reload()

//开始游戏
function start() 
	interval = setInterval(move, speed);
	document.onkeydown = function(event) 
		var event = event || window.event;
		keydown(event.keyCode);
	

//交互响应函数
function keydown(keyCode) 
	switch(keyCode) 
		case 37: //左边
			if(moveTo != 0 && moveTo != 2) moveTo = 0;
			break;
		case 38: //上边
			if(moveTo != 1 && moveTo != 3) moveTo = 1;
			break;
		case 39: //右边
			if(moveTo != 2 && moveTo != 0) moveTo = 2;
			break;
		case 40: //下的
			if(moveTo != 3 && moveTo != 1) moveTo = 3;
			break;
		case 32: //开始/暂停
			if(isStop) 
				interval = setInterval(move, speed);
				isStop = false;
				document.getElementById("model1").style.display='none';
			 else 
				clearInterval(interval);
				isStop = true;
				document.getElementById("model1").style.display='block';
			
			break;
		case 107:
		
		    if(speed>50)
		    	speed-=50;
		    	clearInterval(interval);
		    	interval = setInterval(move, speed);
		    
		    console.log(speed)
		    break;
		    
		  case 109:
		    if(speed<500)
		    	speed+=50;
		    	clearInterval(interval);
		    	interval = setInterval(move, speed);
		    
		    console.log(speed)
		    break;
	

//制造食物
function addFood() 
	foodX = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
	foodY = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
	drawFood();

//死亡判断
function isDie() 
	if(snakes[snakeCount - 1].x == -20 || snakes[snakeCount - 1].x == BLOCK_SIZE * ROWS ||
		snakes[snakeCount - 1].y == -20 || snakes[snakeCount - 1].y == BLOCK_SIZE * COLS) 
		clearInterval(interval);
		document.getElementById("model2").style.display='block';
	
	for(var i = 0; i < snakeCount - 1; i++) 
		if(snakes[snakeCount - 1].x == snakes[i].x && snakes[snakeCount - 1].y == snakes[i].y) 
			clearInterval(interval);
			document.getElementById("model2").style.display='block';
		
	

//吃到食物判断
function isEat() 
	if(snakes[snakeCount - 1].x == foodX && snakes[snakeCount - 1].y == foodY) 
		document.getElementById("score").innerHTML=++score;
		addFood();
		addSnake();
	

//添加蛇身
function addSnake() 
	snakeCount++;
	snakes.unshift(
		x: BLOCK_SIZE * ROWS,
		y: BLOCK_SIZE * COLS
	);

//移动函数
function move() 
	switch(moveTo) 
		case 0: //左边
			snakes.push(
				x: snakes[snakeCount - 1].x - BLOCK_SIZE,
				y: snakes[snakeCount - 1].y
			);
			break;
		case 1: //上边
			snakes.push(
				x: snakes[snakeCount - 1].x,
				y: snakes[snakeCount - 1].y - BLOCK_SIZE
			);
			break;
		case 2: //右边
			snakes.push(
				x: snakes[snakeCount - 1].x + BLOCK_SIZE,
				y: snakes[snakeCount - 1].y
			);
			break;
		case 3: //下边
			snakes.push(
				x: snakes[snakeCount - 1].x,
				y: snakes[snakeCount - 1].y + BLOCK_SIZE
			);
			break;
		default:			;
	
	snakes.shift();
	drawMap();
	drawFood();
	drawSnake();
	isEat();
	isDie();

//游戏初始化
function init() 
	ROWS = 35; //初始化行数
	COLS = 25; //初始化列数
	BLOCK_SIZE = 20;
	snakeCount = 3;
	moveTo = 2;
	score=0;
	document.getElementById("score").innerHTML=score;
	CONTEXT = document.getElementById('canvas').getContext('2d'); //初始化画布上下文对象的引用
	for(var i = 0; i < snakeCount; i++) 
		snakes[i] = 
			x: i * BLOCK_SIZE,
			y: 0
		;
	
	isStop=false;
	speed=500;
	addFood();
	drawMap(); //初始化场地
	drawSnake(); //初始化蛇
	drawFood(); //初始化食物

//画出蛇运动的场地
function drawMap() 
	CONTEXT.clearRect(0, 0, BLOCK_SIZE * ROWS, BLOCK_SIZE * COLS);
	//画横线
	for(var i = 0; i < COLS; i++) 
		CONTEXT.beginPath();
		CONTEXT.moveTo(0, i * 以上是关于酷炫 贪吃蛇——由“前端“实现___效果 + 全部代码的主要内容，如果未能解决你的问题，请参考以下文章 
 SIKI_Unity_2_初级案例_贪吃蛇
 实验二：贪吃蛇的实现
 命令贪吃蛇2_0
 #夏日挑战赛# OpenHarmony基于JS实现的贪吃蛇
 从turtlesim到贪吃蛇……
 5_23_贪吃蛇（成功）

酷炫 贪吃蛇——由“前端“实现___效果 + 全部代码

目录

一、游戏效果展示（运行）

二、全部代码

酷炫贪吃蛇——由“前端“实现___效果 + 全部代码