21xrx.com
2025-03-22 12:29:52 Saturday
文章检索 我的文章 写文章
用 JavaScript 编写简单小游戏的代码示例
2023-06-12 02:43:55 深夜i     --     --
JavaScript 小游戏 DOM

我最近开始学习 JavaScript，想试着写一个简单的小游戏。经过一番尝试，我成功地写出来了一个小游戏的代码，现在和大家分享一下。

这个小游戏是一个兔子抓萝卜的游戏。我们需要通过键盘控制兔子的移动，抓住随机出现的萝卜。下面是代码：

script
// 初始化游戏区域和兔子位置
let field = document.querySelector(".game-field");
let rabbit = document.querySelector(".rabbit");
let rabbitLeft = 200;
rabbit.style.left = rabbitLeft + "px";
// 监听键盘事件
document.addEventListener("keydown", function(event) {
 if(event.key === "ArrowLeft") { // 向左移动
  rabbitLeft -= 10;
  rabbit.style.left = rabbitLeft + "px";
 } else if(event.key === "ArrowRight") { // 向右移动
  rabbitLeft += 10;
  rabbit.style.left = rabbitLeft + "px";
 }
});
// 每隔一段时间随机出现萝卜
setInterval(function() {
 let carrot = document.createElement("div");
 carrot.classList.add("carrot");
 carrot.style.left = Math.floor(Math.random() * 570) + "px";
 field.appendChild(carrot);
 // 判断兔子是否抓到萝卜
 let isCaught = false;
 rabbit.addEventListener("click", function() {
  isCaught = true;
  field.removeChild(carrot);
 });
 // 游戏结束
 setTimeout(function() {
  if(!isCaught) {
   alert("游戏结束");
   window.location.reload();
  }
 }, 5000);
}, 2000);

代码中用到了键盘事件、随机数生成、DOM 操作等知识点。通过这个小游戏的编写，我对 JavaScript 的语法以及应用有了更加深刻的理解。

操作

  
  

评论区