画布式编程

by Surbhi Oberoi

由Surbhi Oberoi

构建HTML5画布游戏如何帮助我学习编程 (How building HTML5 canvas games helped me learn programming)

Like many 9 year-olds, the first thing I did when our family got a computer was install games on it. My brother and I would tussle after school over who got to play before mom or dad got home and booted us off of it.

像许多9岁的孩子一样，当我们一家人得到计算机时，我要做的第一件事就是在计算机上安装游戏。 我的兄弟和我放学后会争吵谁在爸爸妈妈回家之前引导我们离开。

As I grew up, my interests drifted away from gaming, and toward reading. Then a few days ago, my friend showed me Super Mario on his phone. And just like that, I was hooked on games again.

随着我的成长，我的兴趣逐渐从游戏转向阅读。 几天前，我的朋友在手机上给我看了《超级马里奥》。 就像那样，我又迷上了游戏。

A thought occurred to me in that moment: why not create a game? Now that I’m learning to code with Free Code Camp, I just might be able to create a basic game. But I had no clue where to start. So I started googling.

那一刻我想到：为什么不创造游戏？ 现在，我正在学习使用Free Code Camp进行编码 ，我也许可以创建一个基本的游戏。 但是我不知道从哪里开始。 所以我开始谷歌搜索。

I found out about canvas API, and how it could be used to create basic games. I took Udacity’s HTML5 Canvas course. It took me three days to finally wrap my head around the concepts of canvas.

我了解了canvas API，以及如何将其用于创建基本游戏。 我参加了UdacityHTML5 Canvas课程。 我花了三天的时间才完全了解画布的概念。

After the course, I still felt I needed a tutorial to teach me how to build a game from the scratch step-by-step, so I followed one. This revealed to me that I was still lost on some of the fundamentals of Object Oriented Programming, so I found another course on Udacity for Object Oriented JavaScript.

课程结束后，我仍然觉得我需要一个教程来逐步教我如何从头开始制作游戏，因此我遵循了一个教程。 这向我揭示了我仍然对面向对象编程的某些基础知识迷失了，因此我找到了另一门关于面向对象JavaScript的Udacity的课程。

This was pretty dense, and took some time to digest. I had to watch some videos twice to understand them. But eventually, I finished watching all the videos, and came to the last chapter where you finally create a game. The good part about this course was that they provided a game framework already.

这非常密集，需要一些时间来消化。 我必须看两次视频才能理解它们。 但是最终，我看完了所有视频，并进入了最后一章，在那里您终于创建了一个游戏。 关于本课程的好处是他们已经提供了一个游戏框架。

The game was called “Frogger”, where a sprite would have to cross a path full of bugs without colliding with any of them. The sprite could also collect gems to score extra points.

该游戏称为“蛙人”，在这种情况下，精灵必须越过充满错误的路径，而不会与任何错误发生冲突。 精灵还可以收集宝石来得分。

To begin with, I forked their GitHub repo. There were files already created — like when using a generator like Yeoman — and the JavaScript was divided into three files: app.js, engine.js and resources.js. All I had to do was fill in the pre-written functions. Since these functions were already named, I got a fair idea of which arguments to pass and what loops to create.

首先，我分叉了他们的GitHub存储库。 已经创建了文件(例如使用Yeoman这样的生成器时)，并且JavaScript分为三个文件：app.js，engine.js和resources.js。 我要做的就是填写预先编写的函数。 由于这些函数已经被命名，因此我对传递哪些参数以及创建哪些循环有了一个清晰的认识。

There are three important aspects to any game:

任何游戏都有三个重要方面：

1. The game loop — it keeps repeating a process, so that the game won’t stop unless you call the function to stop.

   游戏循环 -它不断重复一个过程，因此除非调用该函数停止，否则游戏不会停止。

2. Rendering — taking cues from the back end works and showing sprites on the front end (using canvas, in this case).

   渲染 -从后端获取提示，并在前端显示精灵(在这种情况下，使用画布)。

3. Updating — updating the positions of the sprites according to the specified moves.

   更新 -根据指定的移动来更新精灵的位置。

This might seem easy for someone who has been coding for years, but starting off fresh required a lot of patience.

对于已经编码多年的人来说，这似乎很容易，但是从头开始需要很多耐心。

After quite a bit of brainstorming and fixing bugs, the game worked. Even though it was quite basic, the sheer joy I felt having created a game was immense.

经过大量的头脑风暴和修复错误后，该游戏成功了。 尽管这很基本，但我感到创造游戏的纯粹乐趣是巨大的。

Here’s what my game looks like:

这是我的游戏样子：

And here’s my code on GitHub:

这是我在GitHub上的代码：

surbhioberoi/frontend-nanodegree-arcade-gameContribute to frontend-nanodegree-arcade-game development by creating an account on GitHub.github.com

surbhioberoi / frontend-nanodegree-arcade-game 通过在GitHub上创建一个帐户来促进frontend-nanodegree-arcade-game开发。 github.com

This game can be improved in a number of ways, such as by using random inputs. Here, I’ve hard-coded the positions, which is not a good practice. I am learning to do things in a better way, and the first step is acknowledging that a better way exists.

该游戏可以通过多种方式进行改进，例如通过使用随机输入。 在这里，我对职位进行了硬编码，这不是一个好习惯。 我正在学习以更好的方式做事，第一步是要承认存在更好的方式。

Over the weekend, I practiced Canvas some more, and it was fun! I created simple things on JSfiddle — just anything that popped into my head that could use canvas.

周末，我练习了更多Canvas，这很有趣！ 我在JSfiddle上创建了简单的东西-凡是可以使用画布弹出的东西。

I wanted to create something more now. I had heard about Conway’s Game of Life. Initially, I thought that it would be really hard to create it. Despite my skepticism that I could pull it off, I just started thinking about it.

我现在想创建更多东西。 我听说过康威的《人生游戏》。 最初，我认为创建它确实很难。 尽管我怀疑我能否实现它，但我只是开始考虑它。

There are two very important things about coding that I learnt after making many silly mistakes: Never never panic! Everything is doable — just find out how. And never begin writing code straight away. Take time, think, sketch out your data and functionality on a sheet of paper. Try to solve the problem manually first, like you would do without a computer. If you follow this approach, writing code should always be the last step, for it’s important to know what to code first.

在犯了许多愚蠢的错误后，我学到了关于编码的两个非常重要的事情： 永远不要惊慌！ 一切都是可行的-只要找出如何做即可。 永远不要立即开始编写代码。 花时间思考，在一张纸上勾勒出您的数据和功能。 首先尝试手动解决问题，就像没有计算机一样。 如果您采用这种方法，那么编写代码应该始终是最后一步，因为首先知道要编写什么内容非常重要。

In my notebook, I wrote my functions, data, and what I thought would be my inputs. I created the canvas first, then proceeded to create the grid for the Game of Life.

在笔记本上，我写了函数，数据以及我认为将作为输入的内容。 我先创建了画布，然后继续为“生命游戏”创建网格。

Honestly, it’s frustrating when something does not work how you expect it to, but when it eventually works, all the irritation was worth it. It feels good to create things, and even better when those things are playable games.

老实说，当某些东西无法按您预期的那样工作时，这令人沮丧，但是当它最终起作用时，所有的刺激都是值得的。 创造事物感觉很好，而当这些事物是可玩游戏时，感觉会更好。

The challenging part of creating this game was figuring out how to make the grid area clickable. This really worked me up, but I finally figured out a way: using offset coordinates.

创建此游戏的挑战性部分是弄清楚如何使网格区域可点击。 这确实使我工作起来，但是我终于找到了一种方法：使用偏移坐标。

Here’s what The Game of Life looks like:

这是《人生游戏》的样子：

And here’s my code on GitHub:

这是我在GitHub上的代码：

surbhioberoi/GameOfLifeGameOfLife - Conway's game of lifegithub.com

surbhioberoi / GameOfLife GameOfLife-康威的人生游戏 github.com

The problems that I often faced when creating something new was the fear that I wouldn’t be able to do it. I kind of overcame this fear by learning to create games.

创建新内容时，我经常遇到的问题是担心自己无法做到。 通过学习创建游戏，我有点克服了这种恐惧。

Also, I thought that rendering the back end on the front end was the hardest part, and it genuinely scared me. But now I’m getting past that challenge, as well.

另外，我认为在前端渲染后端是最困难的部分，这确实让我感到恐惧。 但是现在我也克服了这一挑战。

I’ve found creating games to be the most fun way of practicing programming, because I’ve always loved playing them. Games have helped me learn programming in an entertaining way, and that I think is the best way to learn anything new.

我发现创建游戏是练习编程的最有趣方式，因为我一直喜欢玩游戏。 游戏帮助我以有趣的方式学习编程，而我认为这是学习新事物的最佳方式。

HTML5 Canvas is really awesome, and once you get a hang of it, it is convenient to use. It’s quite fascinating how you can create so many things with just this one element.

HTML5 Canvas确实很棒，一旦您掌握了它，就可以轻松使用。 您仅凭这一元素就可以创建很多东西，这非常令人着迷。

Now, I don’t know whether you like playing games. If there’s something that you enjoy more, just try to create that. When you create something that you actually like, you can overcome the fear of not being able to create it. It will still be hard, but you’ll have the benefit of enjoyable perks along, like having a new game to play afterward. And the best part — the sense of accomplishment — will always be there waiting for you, no matter how long the creative process takes.

现在，我不知道您是否喜欢玩游戏。 如果您喜欢某些东西，只需尝试创建它即可。 当您创建自己真正喜欢的东西时，您可以克服无法创建它的恐惧。 仍然会很困难，但是您将享受到一些令人愉快的特权，例如以后拥有一个新游戏。 最好的部分-成就感-不管创意过程花费多长时间，都将一直在等着您。

Originally published at surbhioberoi.com.

最初发布在surbhioberoi.com 。

翻译自: https://www.freecodecamp.org/news/how-creating-simple-canvas-games-helped-me-6eef839f450e/

画布式编程