使

使用 Vanilla JavaScript 构建一个简单的街机游戏 - DOM 操作🚀 我们将涵盖解决它的过程 1. 布局样式 2. JavaScript 完成的程序

2025-05-28

使用 Vanilla JavaScript 构建一个简单的街机游戏 - DOM 操作🚀

我们将涵盖的内容

解决该问题的过程

1.布局

样式

2. JavaScript

已完成的程序

最初发表在我的博客MullinStack上

对于初入 JavaScript 世界的人来说，今天是个特殊的日子。掌握这门手艺的唯一方法就是实践，今天我们要亲自动手，开始提升我们的 DOM 操作技能。怎么做呢？用原生 JavaScript 构建一个简单的街机游戏。重复一遍，这只是 DOM 操作的练习。

尽管这篇文章是针对初学者和新手的，但这并不意味着更有经验的开发人员不会发现它有用。

我们将涵盖的内容

  • CSS 和 JavaScript 的基础知识。
  • Flexbox 的基础，CSS3 网页布局模型。
  • 使用 JavaScript 动态操作 DOM。
  • 演练。

挑战
DOM 操作

街机游戏具有以下要求：

  • 它使用图像作为背景，并有一个可点击的鸭子图像。
  • 当用户点击鸭子时，会发生两件事：
    1. 当前分数增加一分，
    2. 鸭子移动到随机位置。
  • 它应该使用 ES6 规范特性来构建。
  • 它使用 Flexbox 进行布局。

很简单。现在怎么办？一般来说，处理这类问题，我们首先要思考要遵循的方法和方案。这意味着我们需要弄清楚每个步骤以及完成这些要求所需的细节。让我们来分解一下。

解决该问题的过程

为了解决这个难题，我们将按照给定的顺序执行以下步骤。分而治之，方能取胜！

  1. 使用资产（背景图像和鸭子）和分数框实现布局。
  2. 当我点击鸭子时，我需要什么？我们需要一个事件监听器，当我们点击它时，它会触发一个事件。
  3. 创建一个函数来增加当前分数。
  4. 创建一个函数来随机移动鸭子。

不用多说，让我们开始行动吧。

1.布局

我们的布局 (index.html) 将包含一个 div 作为容器，以及两张图片作为背景和鸭子。最后，还有一个scoreContainer元素，其中包含分数文本和分数（计数器）。

<div class="container">
     <img src="https://bit.ly/2Q4q14a" />
     <img id="duck" src="https://bit.ly/2KQJVKc" alt="duck" />
     <div class="scoreContainer">
       <div id="score-text">Score</div>
       <div id="score-counter">0</div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

样式

/*Make any img element responsive*/
img {
 max-width: 100%;
}
/*Set a fixed size for width and height and in an absolute position*/
#duck {
 margin: 50px;
 width: 100px;
 height: 100px;
 position: absolute;
 left: 100px;
 top: 100px;
}
/*Style for the Score container*/
.scoreContainer {
 background-color: black;
 width: 15%;
 height: 15%;
 color: #ffffff;
 top: 5%;
 right: 5%;
 border: 2px solid greenyellow;
 border-radius: 10px;
 display: flex;
 position: fixed;
 flex-direction: column;
 align-items: center;
}
#score-text {
 font-size: 1.5em;
}
#score-counter {
 font-size: 3.1em;
 font-weight: bold;
 color: #06e515;
}
Enter fullscreen mode Exit fullscreen mode

2. JavaScript

2.1 创建事件监听器

现在，我们将在鸭子图像上创建一个事件监听器。当用户点击鸭子图像时，它将触发一个函数。

//Get the target element
const duck = document.querySelector("#duck");
//Add the click event listener
duck.addEventListener("click", () => {
  //Dont forget call the functions here 
  increaseScore();
  moveDuck();
});
Enter fullscreen mode Exit fullscreen mode

2.2 创建一个增加当前分数的函数

我们刚刚创建了事件监听器。现在，我们要创建一个函数，让计数器（也就是我们的分数）加一。

//Increase score by 1
const increaseScore = () => {
  //Get the content of the target element. The current value for score
  const score = document.querySelector("#score-counter").innerHTML;
  //Get the element to increase the value
  const scoreHTML = document.querySelector("#score-counter");
  //Cast the score value to Number type
  let count = Number(score);
  //Set the new score to the target element
  scoreHTML.innerHTML = count + 1;
};
Enter fullscreen mode Exit fullscreen mode

2.3 创建一个函数来随机移动鸭子

现在该移动鸭子了。不过，由于鸭子会随机移动，因此最好创建一个辅助函数来获取随机数，以便稍后设置鸭子的随机位置。让我们创建这个函数：

//Get a random number
const getRandomNum = (num) => {
  return Math.floor(Math.random() * Math.floor(num));
}
Enter fullscreen mode Exit fullscreen mode

现在，我们将创建一个函数来移动鸭子。我们使用innerWidth属性获取窗口的内部宽度（以像素为单位），使用innerHeight属性获取窗口的内部高度（以像素为单位）。此外，我们使用该getRandomNum函数设置 top 和 left 属性的像素值，以影响鸭子的垂直和水平位置。

/*
Move the duck randomly 
*/
const moveDuck = () => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  duck.style.top = getRandomNum(w) + "px";
  duck.style.left = getRandomNum(h) + "px";
};
Enter fullscreen mode Exit fullscreen mode

今天就到这里！希望你通过这个简单的指南，对 DOM 操作有了一定的了解。

已完成的程序

感谢阅读！如果觉得这个故事有趣，请分享给你的朋友，我会非常感激。

欢迎通过我的博客和Medium与我联系

文章来源：https://dev.to/blarzhernandez/build-a-simple-arcade-game-with-vanilla-javascript-dom-manipulation-50en
Devto 翻译
PREV
编写优雅且有弹性的组件的技巧
NEXT
JavaScript 中的 Service Worker 简介