html5 canvas迷宫游戏源码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5 canvas迷宫游戏源码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 canvas迷宫游戏源码</title>
</head>

<body>
<h2>HTML5 Maze Game</h2>
<canvas width="615" height="556" id="mazecanvas">Can't load the maze game, because your browser doesn't support HTML5.</canvas>
<noscript>JavaScript is not enabled. To play the game, you should enable it.</noscript>
<script>
	// 425 (X), 3 (Y) RECTANGLE
	// 542 (center X), 122 (center Y) CIRCLE
	var canvas = document.getElementById("mazecanvas");
	var context = canvas.getContext("2d");
	var currRectX = 425;
	var currRectY = 3;
	var mazeWidth = 556;
	var mazeHeight = 556;
	var intervalVar;

	function drawMazeAndRectangle(rectX, rectY) {
		makeWhite(0, 0, canvas.width, canvas.height);
		var mazeImg = new Image();
		mazeImg.onload = function() {
			context.drawImage(mazeImg, 0, 0);
			drawRectangle(rectX, rectY, "#0000FF");
			context.beginPath();
			//终点标志
			context.arc(15, 115, 7, 0, 2 * Math.PI, false);
			context.closePath();
			context.fillStyle = '#00FF00';
			context.fill();
		};
		mazeImg.src = "img/maze2.gif";
	}

	function drawRectangle(x, y, style) {
		makeWhite(currRectX, currRectY, 13, 13);
		currRectX = x;
		currRectY = y;
		context.beginPath();
		context.rect(x, y, 13, 13);
		context.closePath();
		context.fillStyle = style;
		context.fill();
	}

	function moveRect(e) {
		var newX;
		var newY;
		var movingAllowed;
		e = e || window.event;
		switch (e.keyCode) {
			case 38: // arrow up key
			case 87: // W key
				newX = currRectX;
				newY = currRectY - 3;
				break;
			case 37: // arrow left key
			case 65: // A key
				newX = currRectX - 3;
				newY = currRectY;
				break;
			case 40: // arrow down key
			case 83: // S key
				newX = currRectX;
				newY = currRectY + 3;
				break;
			case 39: // arrow right key
			case 68: // D key
				newX = currRectX + 3;
				newY = currRectY;
				break;
		}
		movingAllowed = canMoveTo(newX, newY);
		if (movingAllowed === 1) { // 1 means 'the rectangle can move'
			drawRectangle(newX, newY, "#0000FF");
			currRectX = newX;
			currRectY = newY;
		} else if (movingAllowed === 2) { // 2 means 'the rectangle reached the end point'
			clearInterval(intervalVar);
			makeWhite(0, 0, canvas.width, canvas.height);
			context.font = "40px Arial";
			context.fillStyle = "blue";
			context.textAlign = "center";
			context.textBaseline = "middle";
			context.fillText("Congratulations!", canvas.width / 2, canvas.height / 2);
			window.removeEventListener("keydown", moveRect, true);
		}
	}

	function canMoveTo(destX, destY) {
		var imgData = context.getImageData(destX, destY, 13, 13);
		var data = imgData.data;
		var canMove = 1; // 1 means: the rectangle can move
		if (destX >= 0 && destX <= mazeWidth - 13 && destY >= 0 && destY <= mazeHeight - 13) {
			for (var i = 0; i < 4 * 13 * 13; i += 4) {
				if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0) { // black
					canMove = 0; // 0 means: the rectangle can't move
					break;
				} else if (data[i] === 0 && data[i + 1] === 255 && data[i + 2] === 0) { // #00FF00
					canMove = 2; // 2 means: the end point is reached
					break;
				}
			}
		} else {
			canMove = 0;
		}
		return canMove;
	}

	function createTimer(seconds) {
		intervalVar = setInterval(function() {
			makeWhite(mazeWidth, 0, canvas.width - mazeWidth, canvas.height);
			if (seconds === 0) {
				clearInterval(intervalVar);
				window.removeEventListener("keydown", moveRect, true);
				makeWhite(0, 0, canvas.width, canvas.height);
				context.font = "40px Arial";
				context.fillStyle = "red";
				context.textAlign = "center";
				context.textBaseline = "middle";
				context.fillText("Time's up!", canvas.width / 2, canvas.height / 2);
				return;
			}
			context.font = "20px Arial";
			if (seconds <= 10 && seconds > 5) {
				context.fillStyle = "orangered";
			} else if (seconds <= 5) {
				context.fillStyle = "red";
			} else {
				context.fillStyle = "green";
			}
			context.textAlign = "center";
			context.textBaseline = "middle";
			var minutes = Math.floor(seconds / 60);
			var secondsToShow = (seconds - minutes * 60).toString();
			if (secondsToShow.length === 1) {
				secondsToShow = "0" + secondsToShow; // if the number of seconds is '5' for example, make sure that it is shown as '05'
			}
			context.fillText(minutes.toString() + ":" + secondsToShow, mazeWidth + 30, canvas.height / 2);
			seconds--;
		}, 1000);
	}

	function makeWhite(x, y, w, h) {
		context.beginPath();
		context.rect(x, y, w, h);
		context.closePath();
		context.fillStyle = "white";
		context.fill();
	}
	drawMazeAndRectangle(342, 100);
	window.addEventListener("keydown", moveRect, true);
	createTimer(1000); // 2 minutes
</script>
<form>
	<input type="submit" name="cx" value="重置游戏" />
</form>

</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)