用JavaScript写一个推箱子游戏

好的，以下是一个简单的推箱子游戏的 JavaScript 代码：

// 定义地图
var map = [
  [1, 1, 1, 1, 1],
  [1, 0, 0, 0, 1],
  [1, 0, 2, 0, 1],
  [1, 0, 0, 0, 1],
  [1, 1, 1, 1, 1]
];

// 定义人物和箱子的位置
var player = {x: 1, y: 1};
var box = {x: 2, y: 2};

// 监听键盘事件
document.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
    case 37: // 左箭头
      move(-1, 0);
      break;
    case 38: // 上箭头
      move(0, -1);
      break;
    case 39: // 右箭头
      move(1, 0);
      break;
    case 40: // 下箭头
      move(0, 1);
      break;
  }
});

// 移动人物和箱子
function move(dx, dy) {
  var newPlayer = {x: player.x + dx, y: player.y + dy};
  if (map[newPlayer.y][newPlayer.x] === 0) {
    player = newPlayer;
  } else if (map[newPlayer.y][newPlayer.x] === 2) {
    var newBox = {x: box.x + dx, y: box.y + dy};
    if (map[newBox.y][newBox.x] === 0) {
      player = newPlayer;
      box = newBox;
    }
  }
  
  // 重新绘制地图
  drawMap();
}

// 绘制地图
function drawMap() {
  var mapElement = document.getElementById('map');
  mapElement.innerHTML = '';
  for (var y = 0; y < map.length; y++) {
    var row = map[y];
    var rowElement = document.createElement('div');
    rowElement.className = 'row';
    for (var x = 0; x < row.length; x++) {
      var cell = row[x];
      var cellElement = document.createElement('div');
      cellElement.className = 'cell';
      if (x === player.x && y === player.y) {
        cellElement.classList.add('player');
      } else if (x === box.x && y === box.y) {
        cellElement.classList.add('box');
      } else if (cell === 1) {
        cellElement.classList.add('wall');
      }
      rowElement.appendChild(cellElement);
    }
    mapElement.appendChild(rowElement);
  }
}

// 初始化地图
drawMap();

你可以在 HTML 中添加一个 id 为 `map` 的元素，然后在 CSS 中定义 `.wall`、`.player` 和 `.box` 的样式，就可以看到一个简单的推箱子游戏了。

注意：这只是一个简单的示例代码，实际的推箱子游戏可能需要更复杂的逻辑和更多的关卡。