001_推箱子-绘制图片

1. 新建index.html

1.1. 代码

<!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></body>
</html>

1.2. 效果图

2. 图片资源

2.1. 新建images文件夹

2.2. 把图片放入images文件夹下

3. 绘制游戏地图

3.1. 获取画布

3.2. 绘制砖块

3.2.1. 绘制砖块代码

3.2.2. 绘制砖块效果图

3.3. 画布大小设置为560px * 560px, 我们设置为16 * 16的矩阵, 矩阵元素的大小35px * 35px。我们砖块的图片大小也是35px * 35px。

3.4. 绘制砖块矩阵

3.4.1. 代码

3.4.2. 效果图

3.5. 绘制小球

3.5.1. 小球的大小是30 * 30

3.5.2. 绘制小球代码

3.5.3. 由于小球的大小是30 * 30, 砖块的大小是35 * 35, 所以小球并没有在砖块的中心显示。

3.5.4. 调整绘制小球起始位置代码

3.5.5. 调整绘制小球起始位置后效果图

3.6. 在第三行(i)第四列(j)绘制人物

3.6.1. 人物图片大小

3.6.2. 代码

3.6.3. 效果图

3.6.4. 人物偏下, 调整高度起始位置

3.6.5. 效果图

3.7. 完整代码

<!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">// 获取画布var can = document.getElementById('canvas');// 获取画笔(实际上是CanvasRenderingContext2D对象)var ctx = can.getContext("2d");// 创建砖块图片var block = new Image();// 图片加载完成回调函数block.onload = function(){// 绘制砖块// ctx.drawImage(block, 0, 0, block.width, block.height);for(let i = 0; i < 16; i++){ // i代表行for(let j = 0; j < 16; j++){ // j代表列ctx.drawImage(block, j*block.width, i*block.height, block.width, block.height);}}};block.src = 'images/block.gif';var w = 35, h = 35; // w矩阵元素的宽度, h矩阵元素的高度// 创建小球图片var ball = new Image();ball.onload = function(){// 从0,0的位置绘制小球// ctx.drawImage(ball, 0, 0, ball.width, ball.height);ctx.drawImage(ball, (w - ball.width) / 2, (h - ball.height) / 2, ball.width, ball.height);};ball.src = 'images/ball.png';// 创建人物图片var man = new Image();man.onload = function(){for(let i = 0; i < 16; i++){for(let j = 0; j < 16; j++){if(i == 2 && j == 3){// 绘制人物// ctx.drawImage(man, j * w + (w - man.width) / 2, i * h + (h - man.height) / 2, man.width, man.height);// 去掉除以2, 整个人物多出的高度全部向上偏移ctx.drawImage(man, j * w + (w - man.width) / 2, i * h + (h - man.height), man.width, man.height);}}}};man.src = 'images/down.png';</script></body>
</html>

001_推箱子-绘制图片相关推荐

教你一小时做出推箱子游戏【附源码】
经典的推箱子是一个古老游戏,目的是在训练你的逻辑思考能力. 在一个狭小的仓库中,要求把木箱放到指定的位置,稍不小心就会出现箱子无法移动或者通道被堵住的情况,所以需要巧妙的利用有限的空间和通道,合理安排 ...
004_推箱子-游戏逻辑
1. 游戏逻辑 1.1. 定义初始化地图变量 1.2. 定义活动地图, 因为人物每移动一次, 地图都发生了变化 1.3. 坐标类, 定义人物位置 1.4. 定义当前人物坐标变量 1.5. 绘制场景时, ...
003_推箱子-事件
1. 事件方法 1.1. 新建事件方法 1.2. 键盘按键值对象 1.3. 初始化事件方法 1.4. 给body元素添加按键方法 1.5. 添加事件方法, 可以传递参数 1.6. 下一关卡方法 1.7 ...
【休闲游戏实战1】推箱子PC端小游戏（附源码）
游戏链接 :点击打开链接效果图: 第100关有些难度,用了449步才过关(我用的是可跳关版的,直接玩的最后一关) 源码解读源码一共3个文件:index.html(游戏界面加载,核心功能),js/m ...
用JAVA制作小游戏——推箱子（三）
本篇博客主要是对推箱子地图编辑器功能的代码讲解. 首先给出这段代码的部分运行截图: 重难点: 地图编辑器主要有三个重难点: 需要有一个绘制地图的界面能够实现地图绘制的功能地图绘制完成后需要将地图内 ...
用JAVA制作小游戏——推箱子（二）
本篇博客主要是推箱子游戏界面功能的代码讲解. 首先先给出这段代码的部分运行截图: 重难点: 游戏界面主要有五个重难点: 固定好地图的位置地图的显示构建菜单栏读取地图数据玩家操作功能实现地图的 ...
Python使用tkinter模块实现推箱子游戏
前段时间用C语言做了个字符版的推箱子,着实是比较简陋.正好最近用到了Python,然后想着用Python做一个图形界面的推箱子.这回可没有C那么简单,首先Python的图形界面我是没怎么用过,在网上找 ...
【java毕业设计】基于java+swing+Eclipse的推箱子游戏设计与实现（毕业论文+程序源码）——推箱子游戏
基于java+swing+Eclipse的推箱子游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+swing+Eclipse的推箱子游戏设计与实现,文章末尾附有本毕业设计的论文 ...
推箱子游戏java毕业答辩ppt_基于Java推箱子游戏的设计与实现
基于Java推箱子游戏的设计与实现(任务书,外文翻译,毕业论文20000字,程序代码,答辩PPT) 摘要社会在进步,人们生活质量也在日益提高.高强度的压力也接踵而来.社会中急需出现新的有效方 ...

001_推箱子-绘制图片

001_推箱子-绘制图片相关推荐

最新文章

热门文章