當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

002_推箱子-关卡数据

發布時間：2025/4/17 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 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_推箱子-关卡数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。