游戏资源加载与关卡数据封装-优快云博客

1. 加载图片资源封装

1.1. 加载图片资源封装为loadImages方法

1.2. 图片资源封装成对象

1.3. 加载图片资源的初始化方法

1.4. 计算加载图片的数量

1.5. 对加载成功图片计数

1.6. 加载图片对外提供回调方法, 可以计数图片加载进度

1.7. 加载图片完整代码

// 加载图片资源封装
function loadImages(){
	// 图片资源封装成对象
	var imageSrc = {
		"block": "images/block.gif", // 砖块图片路径
		"wall": "images/wall.png", // 墙图片路径
		"box": "images/box.png", // 盒子图片路径
		"ball": "images/ball.png", // 小球图片路径
		"up": "images/up.png", // 人物向上的图片路径
		"down": "images/down.png", // 人物向下的图片路径
		"left": "images/left.png", // 人物向左的图片路径
		"right": "images/right.png" // 人物向右的图片路径
	};

	var exports = {};
	// 封装所有的Image对象
	exports.images = {};
	// 所有图片加载成功状态
	exports.succeed = false;

	// 加载图片资源的初始化方法
	exports.init = function(callback){
		var count = 0, imgCount = 0;

		// 计算加载图片的数量
		for (let key in imageSrc) {
			imgCount++;
		}

		for(let key in imageSrc){
			this.images[key] = new Image();
			// 图片加载成功的回调方法
			this.images[key].onload = function(){
				// 对加载成功图片计数
				count++;

				if(count == imgCount){
					exports.succeed = true;
				}

				// 加载图片对外提供回调方法, 可以计数图片加载进度
				callback(count, imgCount);
			};
			this.images[key].src = imageSrc[key];
		}
	};

	return exports;
}

1.8. 调用加载图片代码调试

1.9. 效果图

2. 关卡数据

2.1. 关卡数据16 * 16的矩阵

2.2. 获取画布和画笔

2.3. 矩阵元素的宽度和高度

2.4. 初始化场景方法

2.5. 图片加载成功后初始化场景

2.6. 效果图

2.7. 关卡数据0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物

2.8. 元数据配置

2.9. 画墙、小球、箱子和人物

2.10. 效果图

3. 封装关卡数据

3.1. 新建mapdata.js文件

3.2. 拷贝关卡数据到mapdata.js文件中

3.3. 引入mapdata.js文件

3.4. 关卡地图配置数据

3.4.1. 关卡地图配置数据

3.4.2. 修改测试方法

3.4.3. 效果图

3.5. 完整代码

3.5.1. index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>推箱子</title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background-color: #000;
			}
			#game {
				width: 560px;
				margin: 0 auto;
			}
			#canvas {
				background: #fff;
			}
			#msg {
				color: #fff;
				font-size: 16px;
				height: 40px;
				line-height: 40px;
				background-color: #000;
			}
			#btn {
				height: 50px;
				line-height: 50px;
				background-color: #FFF;
			}
			#btn input {
				height: 30px;
				width: 100px;
				-webkit-appearance: button;
			}
		</style>
	</head>
	<body>
		<div id="game">
			<canvas id="canvas" width="560px" height="560px"></canvas>
			<div id="msg">第1关, 移动次数: 0</div>
			<div id="btn">
				<input type="button" id="previous" value="上一关" />
				<input type="button" id="next" value="下一关" />
				<input type="button" id="replay" value="重玩本关" />
				<input type="button" id="descript" value="游戏说明" />
			</div>
		</div>

		<script type="text/javascript" src="mapdata.js"></script>
		<script type="text/javascript">
			// 加载图片资源封装
			function loadImages(){
				// 图片资源封装成对象
				var imageSrc = {
					"block": "images/block.gif", // 砖块图片路径
					"wall": "images/wall.png", // 墙图片路径
					"box": "images/box.png", // 盒子图片路径
					"ball": "images/ball.png", // 小球图片路径
					"up": "images/up.png", // 人物向上的图片路径
					"down": "images/down.png", // 人物向下的图片路径
					"left": "images/left.png", // 人物向左的图片路径
					"right": "images/right.png" // 人物向右的图片路径
				};

				var exports = {};
				// 封装所有的Image对象
				exports.images = {};
				// 所有图片加载成功状态
				exports.succeed = false;

				// 加载图片资源的初始化方法
				exports.init = function(callback){
					var count = 0, imgCount = 0;

					// 计算加载图片的数量
					for (let key in imageSrc) {
						imgCount++;
					}

					for(let key in imageSrc){
						this.images[key] = new Image();
						// 图片加载成功的回调方法
						this.images[key].onload = function(){
							// 对加载成功图片计数
							count++;

							if(count == imgCount){
								exports.succeed = true;
							}

							// 加载图片对外提供回调方法, 可以计数图片加载进度
							callback(count, imgCount);
						};
						this.images[key].src = imageSrc[key];
					}
				};

				return exports;
			}

			// 初始化场景方法
			function initScene(level, images){
				var block = images["block"];

				for(let i = 0, ilen = level.length; i < ilen; i++){
					for(let j = 0, jlen = level[i].length; j < jlen; j++){
						let data = level[i][j];
						let img = block;

						switch(data){
							case dataItem.wall:
								img = images["wall"];
							break;
							case dataItem.ball:
								img = images["ball"];
							break;
							case dataItem.box:
								img = images["box"];
							break;
							case dataItem.down:
								img = images["down"]; // 人物初始化使用向下的图片, 看起来是面向屏幕外
							break;
						}

						// // 画砖块
						ctx.drawImage(block, j * w, i * h, block.width, block.height);
						// 画墙、小球、箱子和人物
						if(level[i][j] != 0){
							ctx.drawImage(img, j * w + (w - img.width) / 2, i * h + (h - img.height), img.width, img.height);
						}
					}
				}
			}

			(function(global){
				// 获取画布
				global.can = document.getElementById('canvas');
				// 获取画笔(实际上是CanvasRenderingContext2D对象)
				global.ctx = global.can.getContext("2d");

				global.w = 35, global.h = 35; // w矩阵元素的宽度, h矩阵元素的高度
				
				// 0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物
				global.dataItem = {block: 0, wall: 1, ball: 2, box: 3, down: 4};

				// 关卡数据16 * 16的矩阵
				var levelBack1=[
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];

				// 0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物
				var levelBack2=[
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0],
				[0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0],
				[0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0],
				[0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];

				var li = loadImages();
				li.init(function(count, imgCount){
					console.log(count / imgCount * 100 + '%');

					// 图片加载成功后初始化场景
					if(li.succeed){
						initScene(levels[0], li.images);
					}
				});
				
			})(window);
		</script>
	</body>
</html>

3.5.2. mapdata.js

// 0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物
var level=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0],
[0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];

var levels=[]; // 关卡地图配置数据
levels[0]=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0],
[0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];