解锁前端面试每日 3+1：携手共创第 815 天

在前端面试每日 3+1 的第 815 天，让我们继续踏上提升前端技能的征程，共同探索 HTML5、CSS3 和 JavaScript 的趣味练习。今天，我们将使用 HTML5 烘焙一个多层的生日蛋糕，用 CSS3 绘制一辆行驶在道路上的汽车动画，并用 JavaScript 编写一个方块移动游戏。

HTML5：多层生日蛋糕

使用 HTML5，我们可以轻松地创建一个令人垂涎欲滴的多层生日蛋糕。通过使用 <div> 元素来创建不同的层，并使用 CSS 来设置样式，我们可以让蛋糕看起来栩栩如生。

<div class="cake-layer bottom"></div>
<div class="cake-layer middle"></div>
<div class="cake-layer top"></div>

<style>
  .cake-layer {
    width: 200px;
    height: 50px;
    background: #ffe4c4;
    border: 1px solid #c88a50;
    border-radius: 10px;
    margin: 10px 0;
  }
  .cake-layer.bottom {
    border-bottom: 5px solid #c88a50;
  }
  .cake-layer.top {
    border-top: 5px solid #c88a50;
  }
</style>

CSS3：道路上行驶的汽车动画

使用 CSS3，我们可以创建一辆在道路上行驶的汽车动画。通过使用 @keyframes 规则和 animation 属性，我们可以让汽车沿着一條道路平稳行驶。

@keyframes drive {
  from {
    left: -100px;
  }
  to {
    left: 100%;
  }
}

.car {
  animation: drive 3s infinite linear;
}

.car {
  width: 100px;
  height: 50px;
  background: #000;
  position: absolute;
  left: 0;
  top: 100px;
}

JavaScript：方块移动游戏

使用 JavaScript，我们可以编写一个方块移动游戏。玩家可以使用箭头键控制方块在网格中移动，并收集沿途的硬币。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const player = {
  x: 100,
  y: 100,
  width: 20,
  height: 20,
  speed: 5,
};

function drawPlayer() {
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

function updatePlayer() {
  if (keys['ArrowUp']) {
    player.y -= player.speed;
  } else if (keys['ArrowDown']) {
    player.y += player.speed;
  }
  if (keys['ArrowLeft']) {
    player.x -= player.speed;
  } else if (keys['ArrowRight']) {
    player.x += player.speed;
  }
}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPlayer();
  updatePlayer();
  requestAnimationFrame(gameLoop);
}

gameLoop();

通过完成这些趣味练习，你可以深入理解 HTML5、CSS3 和 JavaScript 的基本概念和应用。持续练习和探索，你将不断提升你的前端技能，在面试中脱颖而出。