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

编程问答

001_推箱子-绘制图片

发布时间：2025/4/17 编程问答 59 豆豆

生活随笔收集整理的这篇文章主要介绍了 001_推箱子-绘制图片小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 新建index.html

1.1. 代码

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_推箱子-绘制图片的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。