推箱子是一種非常經典的游戲，而Javascript中的Canvas技術可以幫助我們實現這個游戲。推箱子中最主要的就是地圖的繪制和箱子的移動，下面我們就來詳細介紹如何利用Javascript Canvas來實現推箱子游戲。

首先我們需要了解如何使用Canvas來繪制地圖。我們可以使用Canvas的2D上下文來實現矩形和方塊的繪制，而推箱子中的地圖就是由矩形和方塊組成。舉個例子，我們可以這樣繪制一塊矩形：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);

上面的代碼表示，在Canvas中繪制綠色的矩形，其左上角坐標為（10,10），寬度和高度都為50。這就是地圖中的一個矩形，我們可以通過循環來繪制整個地圖。

接下來我們就需要考慮如何移動箱子。我們可以用四個方向鍵來控制箱子的移動，如果箱子遇到墻壁或者其他箱子就無法移動。我們可以定義一個Box對象來表示箱子的位置和移動方向，舉個例子：

class Box {
constructor(x, y, direction) {
this.x = x;
this.y = y;
this.direction = direction;
}
move(map) {
let dx = 0, dy = 0;
if (this.direction === 'up') {
dy = -1;
} else if (this.direction === 'down') {
dy = 1;
} else if (this.direction === 'left') {
dx = -1;
} else if (this.direction === 'right') {
dx = 1;
}
const nx = this.x + dx;
const ny = this.y + dy;
if (map[ny][nx] === 1 || map[ny][nx] === 3) {
return;
}
this.x = nx;
this.y = ny;
}
}

上面的代碼表示一個Box類，有三個屬性：x，y表示當前位置，direction表示移動方向。Box類還有一個方法move，用來控制箱子的移動。我們首先判斷箱子能否移動，如果能移動就更新箱子的位置。

我們可以將地圖、箱子和移動控制綁定在一起，就可以實現一個完整的推箱子游戲：

const map = [
[1, 1, 1, 1, 1],
[1, 0, 0, 3, 1],
[1, 0, 0, 2, 1],
[1, 1, 1, 1, 1]
];
const box = new Box(3, 2, 'up');
function drawMap() {
for (let y = 0; y< map.length; y++) {
for (let x = 0; x< map[y].length; x++) {
if (map[y][x] === 1) {
ctx.fillStyle = 'gray';
ctx.fillRect(x * 50, y * 50, 50, 50);
} else if (map[y][x] === 2) {
ctx.fillStyle = 'red';
ctx.fillRect(x * 50, y * 50, 50, 50);
} else if (map[y][x] === 3) {
ctx.fillStyle = 'blue';
ctx.fillRect(x * 50, y * 50, 50, 50);
}
}
}
}
function drawBox() {
ctx.fillStyle = 'orange';
ctx.fillRect(box.x * 50, box.y * 50, 50, 50);
}
function update() {
box.move(map);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawMap();
drawBox();
}
setInterval(update, 1000 / 60);

上面的代碼就是一個完整的推箱子游戲。我們首先定義了地圖、箱子和移動控制，然后分別實現了繪制地圖、繪制箱子和更新畫面的函數。最后通過setInterval函數每秒鐘更新60次畫面來實現游戲的動畫效果。

總結一下，利用Javascript Canvas技術，我們可以很方便地實現推箱子游戲。我們需要實現地圖的繪制、箱子的移動控制以及畫面的更新等功能。推箱子游戲是一個非常簡單、經典的游戲，但是通過實現它，我們可以掌握Canvas的基本用法，并且加深對面向對象編程的理解。