纯新手HTML5运用canvas制作贪吃蛇小游戏

L_zimu

于 2021-08-13 13:48:55 发布

阅读量372

点赞数 1

分类专栏： HTML 文章标签：游戏 canvas javascript

本文链接：https://blog.csdn.net/L_zimu/article/details/119541801

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

纯新手HTML5运用canvas制作贪吃蛇小游戏

以下运用notpad++示例：

一、创建一个html文件

桌面新建文件夹；
运行notpad++新建文件，并保存在该文件夹中，命名index.html文件；

开始在index.html中编写我们的代码，如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>

<body>
//内容..

</body>
</heml>

1.我们要了解什么是canvas，该如何用canvas来进行画图

<canvas> 标签在Html5中只是图形容器，必须通过脚本来绘制图形 (通常是JavaScript)。

2.了解之后接着开始编写我们的代码

1、在<body> </body>中间添加一下代码,创建一个宽480px和高320px大小的canvas,id属性为canvas

//创建canvas
<canvas id="canvas" width="480" height="320" style="border:solid; position:absolute; left:200px; top:50px;">
	canvas画图！！
</canvas>;

3.canvas创建好之后要通过脚本来进行绘制-----创建绘制脚本文件

新建文件并保存，命名为snakeJS.js 创建之后 我们在html中引用

//引用JavaScript
<script language="javascript" src="snakeJS.js"></script>

以上index.html中的代码已完成，接下来开始编写JS 文件中的代码

二、绘制canvas并编写游戏逻辑

1、在JS文件中绘制canvas,如下：
创建

// JavaScript Document
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

2、创建活动范围（范围自定),游戏蛇以及食物
1-->墙壁  0-->活动范围

//墙壁 10行15列
var map = [
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,],
];

//游戏蛇
function gameObject()
{
	this.iRow = -1;     // 当前坐标
	this.iCol = -1;
	this.iRowBk = 1;   // 备份坐标（前一步）
	this.iColBk = 1;
	this.iDir = 1; // 0 左边  1 右边  2 上边  3 下边
};

//蛇头
var snake = [];
snake[0] = new gameObject();
snake[0].iRow = 1;
snake[0].iCol = 1;

//食物
var food = new gameObject();
//让食物随机出现
randFoodPos();
function randFoodPos()
{
	food.iRow = getRand(1, 8);
	food.iCol = getRand(1, 13);
};
function getRand(begin, end)
{
	return Math.floor(Math.random()*(end-begin) + begin);
};

3、画出所定义的墙壁、蛇头和食物

//没过10ms刷新界面
window.setInterval("drawGame();", 10);
drawGame = function(){
	//范围 480-320
	context.clearRect(0,0,480,320);
	context.save();
	
	context.strokeStyle="#000000";
	//墙壁--10行15列
	for(var i = 0; i < 10; i++)
	{
		for(var j = 0; j < 15; j++)
		{
			if(map[i][j] == 1)
				context.strokeRect(j*32, i*32, 32, 32);
		}
	}
	
	for(var i = 0; i < snake.length; i++)
	{
		//蛇头
		if(i == 0){
			context.fillStyle = "#FF0000";	
			context.fillRect(snake[i].iCol*32, snake[i].iRow*32, 32, 32);
		}
		else{
			if(snake[i].iRow <= 0)
				break;
			
			//蛇身	
			context.strokeStyle = "#00FF00";
			context.strokeRect(snake[i].iCol*32, snake[i].iRow*32, 32, 32);
		}
		
	}
	//食物
	context.strokeStyle = "#0000ff";
	context.beginPath();
	context.arc(food.iCol*32+16, food.iRow*32+16, 16, 0, Math.PI*2, true);
	context.stroke();
};

4、重点-> 游戏思路：  
	1、 控制蛇头的移动
	2、 吃食物
	3、 增长身体
	4、 随机刷新食物

//键盘控制蛇头移动-->iDir
window.addEventListener('keydown', dokeyDown, true);
function dokeyDown(e) {
	var keyID = e.keyCode ? e.keyCode : e.which;

	if(keyID == 37 || keyID == 65) // left 和 A
	{
		snake[0].iDir = 0;
	}
	else if(keyID == 39 || keyID == 68) // right 和 D
	{
		snake[0].iDir = 1;
	}
	else if(keyID == 38 || keyID == 87) // up 和 w
	{
		snake[0].iDir = 2;
	}
	else if(keyID == 40 || keyID == 83) // down 和 S
	{
		snake[0].iDir = 3;
	}	
};

// iRowBk和iColBk备份移动过得坐标
moveSnake = function()
{
	snake[0].iRowBk = snake[0].iRow;
	snake[0].iColBk = snake[0].iCol;
	if(snake[0].iDir == 0)
		snake[0].iCol--;
	else if(snake[0].iDir == 1)
		snake[0].iCol++;
	else if(snake[0].iDir == 2)
		snake[0].iRow--;
	else if(snake[0].iDir == 3)
		snake[0].iRow++;
		
	if(snake[0].iRow <= 0 
	|| snake[0].iRow >= 9
	|| snake[0].iCol <= 0
	|| snake[0].iCol >= 14)
	{
		alert("你已死亡，单击《确定》重新游戏！");
		//死亡之后清除蛇身
		snake.splice(1, snake.length-1);
		snake[0].iRow = 1;
		snake[0].iCol = 1;
		snake[0].iDir = 1;
		//死亡之后重新开始并刷新食物
		randFoodPos();
	}
	
	//移动备份产生移动
	for(var i = 1; i < snake.length; i++)
	{
		snake[i].iRowBk = snake[i].iRow;
		snake[i].iColBk = snake[i].iCol;
		
		snake[i].iRow = snake[i-1].iRowBk;
		snake[i].iCol = snake[i-1].iColBk;
	}
	
};

//吃食物 食物和蛇头的坐标重合
eatFood = function()
{
	if(snake[0].iRow == food.iRow
	&& snake[0].iCol == food.iCol)
	{
		randFoodPos();  // 食物在其他地方出现
		snake[snake.length] = new gameObject();  // 来一截蛇身，长身体
	}
};

5、最后当让是让它运动起来啦

//实时更新
window.setInterval("upDate();", 200);
upDate = function()
{
	moveSnake();	
	eatFood();
};

三、结束

以上，有很多改进的地方，有需要的童鞋可以自行去添加美化。
感谢阅读！