002_推箱子-关卡数据

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]];

002_推箱子-关卡数据相关推荐

用C语言写一个可以选择关卡添加关卡的小游戏,推箱子
目录关于用C语言写一个可以选择关卡的小游戏代码部分所有代码 Tui_Xiang_Zi.h Tui_Xiang_Zi.cpp 关卡数据关卡数据规则思路和建议建议警告关于用C语言写一个可以 ...
经典推箱子游戏无敌版
1共有5个关卡 2两个箱子和箱子碰墙不动 3按空格初始化该关卡 4撤销上一步 5正确路提示 6关卡编辑器 7关卡存在文件里 8可以读取文件里的地图 9关卡选择 10制作了个很丑的界面对应之法: 功能 ...
java推箱子随机地图的产生_为什么没有人研究推箱子地图自动生成算法？算法随机生成地图，不需要地图库！?...
其实是有的,可以参考 Ty Taylor 的 The Art and Science of Procedural Puzzle Generation,https://www.youtube.com/w ...
个推的appid是指什么_推箱子软件介绍→安卓下最专业的推箱子软件（推箱快手）...
俗语说:工欲善其事必先利其器目前各安卓系统下的应用市场有很多很多推箱子软件,除了soko++推箱子软件比较好以外,其余没有任何一款软件是推箱子好手想去使用的,为什么呢? 先说说soko++这款软件好 ...
【C++小游戏】推箱子代码+详解
这是一个以生活为灵感的游戏! 注:本程序完全原创,如果有BUG,欢迎私信投诉. 一.功能: 共40关,1~6关较为简单,后面的比较难: 可以新建文件作为存档: 关卡内部可以用Z键撤销: 可以疯狂跳关. ...
c语言推箱子代码_C语言烂大街的东西都学不会！C语言多关卡推箱子制作教程
C语言多关卡推箱子,兄台了解一下?没错,C语言完整简单项目实战很高兴你能光临小编寒舍首先感谢百忙之中你能从万千文章中点小编得专属页面.这不是娱乐篇,这是学习道场.开始前,小编就做一个简单得自我介绍 ...
基于Linux系统的C语言多关卡推箱子设计
基于Linux系统的C语言多关卡推箱子设计目录基于Linux系统的C语言多关卡推箱子设计前言一.设计方案二.功能设计 2.1功能简述 2.2流的类型和操作 2.3标准I/O 2.4流的使用 ...
推箱子C++(多关卡)
推箱子C++(多关卡) 该项目用到了类和对象,封装,程序设计,并且运用了easyx库.该项目可在vc2010等编译器下运行,用的都是C++98标准(着实是被C98恶心到了,深刻感受到了C++11的好) ...
c语言多关卡推箱子程序,多关卡地图推箱子游戏
多关卡地图推箱子游戏 # include # include # include //调出地图 void file(int map[14][16],int n,int flag) //n表示关卡数 , ...

002_推箱子-关卡数据

002_推箱子-关卡数据相关推荐

最新文章

热门文章