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

编程问答

003_推箱子-事件

發布時間：2025/5/22 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 003_推箱子-事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 事件方法

1.1. 新建事件方法

1.2. 鍵盤按鍵值對象

?1.3. 初始化事件方法

?1.4. 給body元素添加按鍵方法

1.5. 添加事件方法, 可以傳遞參數

1.6. 下一關卡方法

1.7. 幫助方法

1.8. 初始化事件?

2. 測試事件

2.1. 配置3關數據

2.2. 點擊上一關按鈕

2.3. 點擊下一關和重玩本關按鈕

2.4. 點擊游戲說明按鈕

2.5. 上、下、左、右鍵和w、a、s、d鍵

3. 切換人物圖片?

3.1. 定義當前人物圖片變量

3.2. 給事件傳遞圖片對象?

3.3. 人物行走的方法

3.4. 調用go方法

3.5. 修改繪制人物的圖片為當前圖片

?3.6. 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 = {};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"];img = curManImg; // 人物初始化使用向下的圖片, 看起來是面向屏幕外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 doEvent(images){// 鍵盤按鍵值對象var keyCode = {up: 38, // 鍵盤上的上鍵, 人物向上走w: 87, // 鍵盤上的w鍵, 人物向上走down: 40, // 鍵盤上的下鍵, 人物向下走s: 83, // 鍵盤上的s鍵, 人物向下走left: 37, // 鍵盤上的左鍵, 人物向左走a: 65, // 鍵盤上的a鍵, 人物向左走right: 39, // 鍵盤上的右鍵, 人物向右走d: 68 // 鍵盤上的d鍵, 人物向右走};var exports = {};// 初始化事件方法exports.init = function(){var previous = document.getElementById('previous');var next = document.getElementById('next');var replay = document.getElementById('replay');var descript = document.getElementById('descript');document.body.addEventListener('keyup', this.bodyKeyup, false);this.addEventListener(previous, 'click', this.nextLevel, -1);this.addEventListener(next, 'click', this.nextLevel, 1);this.addEventListener(replay, 'click', this.nextLevel, 0);this.addEventListener(descript, 'click', this.descript);};// 給body元素添加按鍵方法exports.bodyKeyup = function(e){switch(e.keyCode){case keyCode.up:case keyCode.w:console.log('人物向上走');exports.go('up');break;case keyCode.down:case keyCode.s:console.log('人物向下走');exports.go('down');break;case keyCode.left:case keyCode.a:console.log('人物向左走');exports.go('left');break;case keyCode.right:case keyCode.d:console.log('人物向右走');exports.go('right');break;}};// 添加事件方法, 可以傳遞參數exports.addEventListener = function(obj, name, fn, args){var addfn = function(){fn.call(obj, args);};obj.addEventListener(name, addfn, false);};// 下一關卡方法exports.nextLevel = function(l){curLevel += l;if(curLevel < 0) {curLevel = 0;}if(curLevel >= levels.length){curLevel = levels.length - 1;}console.log('當前關卡: ' + curLevel);};// 幫助方法exports.descript = function(){alert("用鍵盤上的上、下、左、右鍵移動人物, 把箱子全部推到小球的位置即可過關。箱子只可向前推, 并且人物一次只能推動一個箱子。");};// 人物行走的方法exports.go = function(dir){ // 人物圖片key、方向curManImg = images[dir];initScene(levels[0], images);};return exports;}(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};global.curLevel = 0; // 當前關卡var li = loadImages();li.init(function(count, imgCount){console.log(count / imgCount * 100 + '%');if(li.succeed){initScene(levels[0], li.images);}});// 初始化事件doEvent(li.images).init();global.curManImg = li.images['down']; // 當前人物圖片, 默認向下的人物圖片})(window);</script></body> </html>

?3.7. mapdata.js

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]];levels[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,1,1,1,1,1,0,0,0,0,0,0,0], [0,0,0,0,1,4,0,0,1,0,0,0,0,0,0,0], [0,0,0,0,1,0,3,3,1,0,1,1,1,0,0,0], [0,0,0,0,1,0,3,0,1,0,1,2,1,0,0,0], [0,0,0,0,1,1,1,0,1,1,1,2,1,0,0,0], [0,0,0,0,0,1,1,0,0,0,0,2,1,0,0,0], [0,0,0,0,0,1,0,0,0,1,0,0,1,0,0,0], [0,0,0,0,0,1,0,0,0,1,1,1,1,0,0,0], [0,0,0,0,0,1,1,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]];levels[2]=[ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,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,1,1,1,1,0,0,0,0,0], [0,0,0,0,1,0,0,0,0,0,1,1,1,0,0,0], [0,0,0,1,1,3,1,1,1,0,0,0,1,0,0,0], [0,0,0,1,0,4,0,3,0,0,3,0,1,0,0,0], [0,0,0,1,0,2,2,1,0,3,0,1,1,0,0,0], [0,0,0,1,1,2,2,1,0,0,0,1,0,0,0,0], [0,0,0,0,1,1,1,1,1,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];

3.8. 運行程序

3.8.1. 效果圖

3.8.2. 向右移動??

3.8.3. 向上移動

3.8.4. 向左移動?

3.8.5. 向下移動?

總結

以上是生活随笔為你收集整理的003_推箱子-事件的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： 059_arguments.callee
下一篇： 004_推箱子-游戏逻辑