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_推箱子-事件相关推荐

004_推箱子-游戏逻辑
1. 游戏逻辑 1.1. 定义初始化地图变量 1.2. 定义活动地图, 因为人物每移动一次, 地图都发生了变化 1.3. 坐标类, 定义人物位置 1.4. 定义当前人物坐标变量 1.5. 绘制场景时, ...
用JAVA制作小游戏——推箱子（三）
本篇博客主要是对推箱子地图编辑器功能的代码讲解. 首先给出这段代码的部分运行截图: 重难点: 地图编辑器主要有三个重难点: 需要有一个绘制地图的界面能够实现地图绘制的功能地图绘制完成后需要将地图内 ...
用JAVA制作小游戏——推箱子（二）
本篇博客主要是推箱子游戏界面功能的代码讲解. 首先先给出这段代码的部分运行截图: 重难点: 游戏界面主要有五个重难点: 固定好地图的位置地图的显示构建菜单栏读取地图数据玩家操作功能实现地图的 ...
推箱子游戏的java设计思路_用JAVA实现一个推箱子游戏
技术应用 TECHNOLOGY AND MARKET Vol． 26,No． 2,2019 用 JAVA 实现一个推箱子游戏马寅璞1,孔阳坤2 ( 1．南京信息工程大学计算机软件学院物联网工程 1 ...
推箱子游戏 java源代码_java推箱子游戏源代码(含推箱子的判断)
<java推箱子游戏源代码(含推箱子的判断)>由会员分享,可在线阅读,更多相关<java推箱子游戏源代码(含推箱子的判断)(6页珍藏版)>请在人人文库网上搜索. 1.第一个Ja ...
Python使用tkinter模块实现推箱子游戏
前段时间用C语言做了个字符版的推箱子,着实是比较简陋.正好最近用到了Python,然后想着用Python做一个图形界面的推箱子.这回可没有C那么简单,首先Python的图形界面我是没怎么用过,在网上找 ...
【java毕业设计】基于java+swing+Eclipse的推箱子游戏设计与实现（毕业论文+程序源码）——推箱子游戏
基于java+swing+Eclipse的推箱子游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+swing+Eclipse的推箱子游戏设计与实现,文章末尾附有本毕业设计的论文 ...
python推箱子代码详细讲解_Python使用tkinter模块实现推箱子游戏
前段时间用C语言做了个字符版的推箱子,着实是比较简陋.正好最近用到了Python,然后想着用Python做一个图形界面的推箱子.这回可没有C那么简单,首先Python的图形界面我是没怎么用过,在网上找 ...
JAVA简易推箱子小游戏制作
以下是代码: Run.java public class Run {public static void main(String[] args) {// TODO Auto-generated met ...

003_推箱子-事件

003_推箱子-事件相关推荐

最新文章

热门文章