If you are anything like I was, you came into the programming world with some kind of fantasy of making your own video game.Maybe dreams of making something on the PS360 or the Xbox Advance. But you don’t have to limit yourself to waiting until you work for a videogame company. You can make something right now for the browser you’re using right now. So here is a quick example of making a browser game using HTML, Canvas, Javascript and some knowledge of the Atari VCS(aka Atari 2600).

如果您像我一样，便以制作自己的视频游戏的幻想进入了编程世界，也许是梦想在PS360或Xbox Advance上制作东西。 但是您不必将自己局限于等待直到在视频游戏公司工作。 您可以立即为当前使用的浏览器创建内容。 因此，这里有一个使用HTML，Canvas，Javascript和Atari VCS(又名Atari 2600)的知识制作浏览器游戏的快速示例。

First thing we have to do is set up our base html page and set up a section for our screen. Our screen is basically going to be the <canvas> tag. After we create the html, we want to make up a js.file and make sure the website brings it to the page.Because we are going to keep referring to the element, you could make a basic selectQuery that will find a parent tag and append one to the page like the attached example. When we create<canvas>, we need to feed it a width and height so it knows how big to make the canvas. The numbers inputted are the pixels which should come in handy. This canvas will ultimately act as our screen displaying the “graphics” of the game.

我们要做的第一件事是设置基本的html页面并为屏幕设置一个部分。 我们的屏幕基本上将是<canvas>标记。 创建html之后，我们想组成一个js.file并确保网站将其带到页面。由于我们将继续引用该元素，因此可以创建一个基本的selectQuery来找到一个父标记并像所附示例一样，将一个附加到页面。 创建<canvas>时，需要为其提供宽度和高度，以便它知道将画布制作多大。 输入的数字是应该派上用场的像素。 该画布最终将充当我们的屏幕，显示游戏的“图形”。

After setting up our js file and creating the canvas. We will want to create a series of variables you will end up using throughout the game. When you create the variables, be mindful that you will want some of these variables to change (and often), while you will want others to always stay the same.

设置完我们的js文件并创建画布之后。 我们将要创建一系列变量，这些变量最终将在整个游戏中使用。 创建变量时，请注意，您将希望其中一些变量(经常)更改，而您希望其他变量始终保持不变。

After this, you should start to make a few things that will “govern” the game. This includes making a few Event Listeners that are listening to button presses. For this game, we want to make a game where the player can move their “sprite” up and down to interact. looking at the event listeners, you will notice a few if statements and us setting an earlier declared variable to either true or false. Let’s breakdown what we are doing there

此后，您应该开始做一些可以“控制”游戏的事情。 这包括使一些事件监听器监听按钮的按下。 对于此游戏，我们希望制作一个游戏，玩家可以上下移动“精灵”进行互动。 查看事件侦听器，您会注意到一些if语句，我们将较早声明的变量设置为true或false。 让我们细分一下我们在做什么

1) We are doing event listeners on key up and down. This makes it so that it can do 2 different things depending on the user pressing a button or releasing it2) Inside the event listeners we have an if statement checking to see specific buttons are pressed and running some code of that. This makes it so we can specify the user’s control and not get bogged down by other buttons outside of our “gamepad”3) Inside of that we are now switching the values we declared above. Doing it this way will help out further down, but ultimately, it may not be a good idea to have all those the later logic we are going to be using sitting inside the event listener

1)我们在向上和向下键上进行事件监听。 这样一来，它就可以根据用户按下按钮或释放按钮来做2种不同的事情。2)在事件侦听器内部，我们有一个if语句检查是否已按下特定按钮并运行某些代码。 这样一来，我们就可以指定用户的控件，而不会被“游戏手柄”之外的其他按钮所困扰3)在其中，我们现在正在切换上面声明的值。 这样做将有助于进一步解决问题，但最终，将所有稍后将要使用的逻辑包含在事件侦听器中可能不是一个好主意

We will return to this later, but you want to create const gameStart which is a setInterval that I will use to “draw” the game,and set a FPS using milliseconds. We are passing through a callback Function that we will declare later. The later functions we make should make this make more sense, but ultimately this setInterval is designed to keep drawing the game and basically keep a perpetual loop. By saving it to a variable, if we ever need to clear the set Interval and stop the game from running[SPOILER: you probably will want to]

我们稍后将返回此内容，但是您想创建const gameStart，它是一个setInterval，我将使用它来“绘制”游戏，并以毫秒为单位设置FPS。 我们正在传递一个回调函数，稍后我们将对其进行声明。 我们后来制作的函数应该更有意义，但最终，此setInterval旨在继续吸引游戏并基本上保持永久循环。 通过将其保存到变量，如果我们需要清除设置的时间间隔并停止游戏运行[SPOILER：您可能会想要]

Next step is to create a draw function that will always call when the setInterval runs. This function is going to do a few things, but most importantly, it is meant to act as a wrapper for other functions that are designed to draw our images. One of the first things we want to throw into the draw function is ctx.clearRect. This functions as a way to erase the content inside of canvas so that script can safe move what is being painted on canvas, and give you a clean slate to start displaying new objects. Because the game is running at a faster speed that the human eye can notice(60 frames per second), you won’t really notice the screen erasing and redrawing where something should be.

下一步是创建一个绘制函数，该函数将在setInterval运行时始终调用。 此功能将做一些事情，但最重要的是，它旨在充当旨在绘制图像的其他功能的包装。 我们要添加到draw函数中的第一件事是ctx.clearRect。 这是一种擦除画布内部内容的方法，以便脚本可以安全地移动画布上正在绘画的内容，并为您提供一个干净的状态来开始显示新对象。 由于游戏以人眼可以察觉的更快速度运行(每秒60帧)，因此您不会真正注意到屏幕擦除和重新绘制的位置。

We are then creating 2 functions to draw each paddle. Before we dive into this, you should look at the following documentation to understand exactly what is happening with canvas. but here we are drawing the paddles at certain positions that may change depending on what is happening in the game. Using the same logic, we are going to draw our ball

然后，我们将创建2个函数来绘制每个桨。 在深入探讨之前，您应该查看以下文档，以确切了解画布正在发生的情况。 但是在这里，我们在某些位置绘制桨，这些位置可能会根据游戏中发生的变化而变化。 使用相同的逻辑，我们要画球

After creating these functions and throwing these into the draw function, we should now see canvas drawing the paddles in the initial locations we set up with different colors (for now) and drawing a ball. So we tackled the first part of at least showing something on the screen. Now we want to make it move.

创建完这些函数并将它们放入draw函数之后，我们现在应该看到画布在我们用不同颜色设置的初始位置(暂时)绘制桨叶并绘制一个球。 因此，我们解决了至少在屏幕上显示某些内容的第一部分。 现在我们要使其移动。

So after everything is done, we have the ball moving and kind of bouncing off of the paddles. but you can see that it is bouncing of of where player1 start, but is bouncing on empty space. So this means we have to refactor this part.

因此，在完成所有操作之后，我们将球移动并从球拍上弹起。 但您可以看到它在播放器1的起始位置跳动，但在空白处跳动。 因此，这意味着我们必须重构此部分。

If we paid attention to the way we drew the paddles, we can start to think of how we can solve the collision. We started building it with a ctx.rect giving it the part x,y coordinates where we want it to start, then we gave it height and width. So when we make the collection, we want to make sure that when the ball’s x-axis is located at the boundaries of the paddle is. In addition to that, we want to make sure that the top of the ball is located either at or under the very top of the paddle. After we do that, we need to make sure that if the ball is located above the bottom of the paddle, that it “collides” as well. By making these conditions into 1 if statement with a bunch of &&s, we can make sure that the logic is sound and the checks are all happening once. Especially the comparisons of the ball being below the top of the paddle and above the bottom of the paddle. Because both would be true, that would be the ball would be located somewhere in the middle. And because the paddle is a solid rectangle, that means we definitely want to have it “collide”. The logic should look like this

如果我们注意划桨的方式，我们可以开始考虑如何解决碰撞。 我们使用ctx.rect开始构建它，并为其指定x，y坐标，该坐标是我们希望开始的位置，然后给出其高度和宽度。 因此，当我们进行收集时，我们要确保当球的x轴位于球拍的边界处时。 除此之外，我们还要确保球的顶部位于桨的顶部或下方。 完成此操作后，我们需要确保如果球位于球拍底部的上方，那么球也会“碰撞”。 通过将这些条件设为带有多个&&的if语句，我们可以确保逻辑是正确的，并且检查全部都发生一次。 尤其是球在桨叶顶部下方和桨叶底部上方的比较。 因为两者都是正确的，那就是球将位于中间的某个位置。 而且由于桨是一个实心矩形，这意味着我们绝对希望使其“碰撞”。 逻辑应如下所示

So now that we have something to display, we have movement, and we have collision detection, it’s time to make this an actual game by introducing scoring. Compared to what we’ve just done, this should be relatively easy. We are going to make another drawing function, but this time we are going to draw text instead of rectangles. But before that, we want to dart back up to the top of our code where are variables are stored and add a player 1 score and a player 2 score variable. By it’s nature this is something we would want to increase, so make sure you don’t delcare it with a “const”. Since we have the collection detection with the paddles, we just have to do one basic check which is perfect for us. We know that if the ball touches the paddle, it will bounce back, so we don’t have to calculate any of that again for scoring. In this case, we just have to see if the x-axis of the ball ever touches any of the canvas edges. Once it does, it would need to give a point to the other player, and reset the ball. Here is an example of how this code would look

因此，现在我们可以显示一些东西，有了运动，有了碰撞检测，现在该是通过引入计分使其成为实际游戏的时候了。 与我们刚刚所做的相比，这应该相对容易一些。 我们将制作另一个绘图功能，但是这次我们将绘制文本而不是矩形。 但在此之前，我们想回到存储代码的顶部，然后添加玩家1得分和玩家2得分变量。 从本质上讲，这是我们要增加的内容，因此请确保不要用“ const”代替它。 由于我们具有桨叶的收集检测功能，因此我们只需要进行一项最适合我们的基本检查即可。 我们知道，如果球碰到球拍，球会反弹回来，所以我们不必再计算任何球来得分。 在这种情况下，我们只需要查看球的x轴是否接触过任何画布边缘即可。 一旦完成，就需要给其他玩家一个分数，并重新设置球。 这是此代码的外观示例

So now we have game set up where it will do be able to control the paddles, keep track of score, and actually make the ball bounce correctly while restarting the ball position. The only thing we are left with is deciding what to do with the blue paddle, and how will do about a game over.

因此，现在我们有了游戏设置，可以在重新启动球位置时控制球拍，跟踪得分并实际使球正确反弹。 我们唯一剩下的就是决定如何使用蓝色球拍，以及如何结束游戏。

Both scenarios basically leads to the Designer(you now)’s decision. In regards to the blue paddle, you can either make this a 2 player game or assign the blue paddle to a computer and make it a single player game. If you want to make it a 2 player game, it should be easy since we have already included the logic previously. You would want to go to the Event Listeners and add what ever buttons you want for player 2. Then you just have to go to variables and assign similar variables as the ones used to store. Reuse a few more lines of code and now you have yourself a 2 player game. To make this a single player game against a robot, you want to create some kind of function that would make the player2 paddle to either keep increasing or decreasing its y-axis . by changing that variable, the paddle will move up or down, giving you a basic Man vs Robot game.

这两种情况基本上都会导致Designer(现在由您)做出决定。 关于蓝色手柄，您可以将其设为2人游戏，也可以将蓝色手柄分配给计算机，使其成为单人游戏。 如果您想使其成为2人游戏，应该很容易，因为我们之前已经包含了逻辑。 您可能想要转到事件侦听器，并为播放器2添加所需的按钮。然后，只需转到变量并分配与用于存储的变量相似的变量即可。 重复使用几行代码，现在您拥有了一个2人游戏。 要使该游戏成为与机器人的单人游戏，您需要创建某种功能，该功能将使player2桨叶保持增加或减少其y轴。 通过更改该变量，桨将向上或向下移动，为您提供基本的“人与机器人”游戏。

To end the game is left to your imagination. Do you want the game to end based on player score, or stop after a certain amount of time. Both are going to require you to make up another function so its easier to keep track of what is going.

最终，游戏留给您的想象力。 您是否要根据玩家得分结束游戏，还是在一定时间后停止游戏？ 两者都将要求您组成另一个功能，以便更轻松地跟踪正在发生的事情。

Now before you continue, do you remember the line called gameStart that I said we’d go over later. Now is the time. Because we assigned the setInterval to a variable. We can use that variable to now remove the setInterval(which would also stop the game rendering). Basically stopping the game. So we should make another function and fill it with whatever you want. If you want to base your victory on score, you can call that function inside of the draw function and just have it compare the player score variables you declared to the score limit. Once it reaches that, you use the line clearInterval(gameStart) which is kill the perpetual loop and end your game. If you decide to end the game based on time, instead of calling this function inside of draw. You should call this function under something called setTimeout. setTimeout works similar to how setInterval works except that it counts down to a certain moment before executing a function that would kill the setInterval using clearInterval. But either way, once you’ve made that decision and added it to your code, you can now say you just created a function game !!

现在，在继续之前，您还记得我说过会在后面提到的名为gameStart的行。 现在是时候了。 因为我们将setInterval分配给了一个变量。 我们现在可以使用该变量删除s​​etInterval(这也会停止游戏渲染)。 基本上停止游戏。 因此，我们应该创建另一个函数，并用您想要的任何东西填充它。 如果您想将胜利作为得分的基础，则可以在平局函数内调用该函数，并将其声明的玩家得分变量与得分极限进行比较。 一旦达到目标，就可以使用clearInterval(gameStart)行，它会杀死永久循环并结束游戏。 如果您决定根据时间结束游戏，则不要在平局内调用此函数。 您应该在名为setTimeout的情况下调用此函数。 setTimeout的工作方式与setInterval的工作方式类似，不同之处在于它在执行使用clearInterval杀死setInterval的函数之前会倒数一秒。 但是无论哪种方式，一旦您做出了决定并将其添加到代码中，就可以说您刚刚创建了一个功能游戏！

So we’ve used HTML, we’ve used Javascript, so now is where we can use some Atari VCS(aka Atari 2600) trivia to tie everything up & expand our game and possibility. Ready? Well, the Atari VCS had an interactive sprite limitation of 2 paddles, 2 missile sprites, and 1 ball. It was not able to calculate more natively. According to some people, the system was originally designed with Pong and Tank in mind which only used those things. But if you do a simple search for the number of games released for the system, thats a lot of games made with such limitations. When creators made their games for the system, they took those limitations and applied some ingenuity. They knew they had the means to display/keep track of sprites on the screen, they knew they could do some type of collision detection, and a way to keep score. Through this, they were able to make racing games, puzzle games, action games,and others. I’m sure you can use this and twist it around to make something that’s special to you.

因此，我们使用了HTML，使用了Javascript，因此现在可以在其中使用一些Atari VCS(又名Atari 2600)琐事来捆绑一切并扩展我们的游戏和可能性。 准备？ 好吧，Atari VCS的交互式精灵限制为2个桨，2个导弹精灵和1个球。 它无法进行更多本地计算。 有人认为，该系统最初是在设计时考虑到Pong和Tank的，所以只使用了这些东西。 但是，如果您简单地搜索为该系统发布的游戏数量，那就是很多受此限制的游戏。 当创作者为系统制作游戏时，他们就采取了这些限制并运用了一些独创性。 他们知道他们有办法在屏幕上显示/保持精灵的轨迹，他们知道可以进行某种类型的碰撞检测以及保持得分的方法。 通过这种方式，他们能够制作赛车游戏，益智游戏，动作游戏等。 我确定您可以使用它并将其扭曲以制作出对您来说特别的东西。

普通英语JavaScript (JavaScript In Plain English)

Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!

您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！