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

编程问答

001_推箱子-绘制图片

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

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

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