如何以初学者身份编写游戏代码

介绍

我们将创造什么

入门

创建我们的 Cookie

添加分数

点击 cookie

添加一个真正的饼干

想法

接下来会发生什么？

介绍

你想学习编程吗？而且你确定要开发游戏，那么这篇博客或许正适合你。在这篇博客中，我将讲解编程的基础知识。为此，我们将使用p5.js。你可能听说过JavaScript (JS)，而 p5.js 只是一个 JavaScript 库——它是 JavaScript 语言的一个扩展——它拥有丰富的绘图功能，可以用来开发 2D 游戏。

我们将创造什么

我们将创建我们自己的饼干点击游戏！

入门

首先你需要打开p5js 编辑器，我们将在这里编写代码。这个编辑器非常棒，因为一旦你完成了游戏，你就可以把链接发给你的朋友，让他们也能玩！

您应该看到以下内容：

你会看到播放按钮，点击它——这将运行你的代码：

你应该能在右侧的预览部分看到以上内容，这是现有代码的输出结果。

setup() 和 draw() 函数

现有代码包含两个函数 ` setup()f` 和 `g` draw()。函数就是一段执行特定任务的代码块，花括号 `{}` 内的任何内容都是一个代码块。因此，`f`setup()和 `g`draw()函数各有其任务。这两个函数的概念非常简单。

设置（）

该setup()函数会在程序启动时调用一次，因此一旦你按下播放按钮，该setup()函数就会执行。

画（）

该draw()函数会持续被调用，直到程序停止执行为止，因此draw()函数内部的所有内容都会一遍又一遍地执行。这种情况每秒发生 60 次，也就是我们常说的帧率，所有游戏玩家应该都很熟悉这个术语！

createCanvas(400, 400) 和 background(220) 分别是什么？

创建画布

这将创建一个宽度和高度均为 400px 的canvas 元素draw()。基本上，我们就在这个 canvas 元素上进行绘制！还记得 `and`和 ` or` 是setup()函数吗？这里我们调用了一个名为 `or` 的函数createCanvas。所以，我们的 ` setup()or` 函数会调用另一个名为 `or` 的函数createCanvas，记住，这只会发生一次，因为 ` setup()or` 只会被调用一次。注意 ` createCanvas(400, 400)or` 函数接收两个数字，这些数字被称为函数参数，这意味着我们可以向函数传递一些信息，使其以特定的方式运行。在本例中，我们传递的是宽度和高度。

请修改传递给createCanvas函数的数字，编写代码createCanvas(600, 600)并点击播放，注意右侧的画布是如何变大的？

背景

背景函数用于为画布着色。如果您只指定一个值作为参数（例如，background(220)它是灰度图像），则可以使用 RGB 参数选择任何您想要的颜色。例如，使用 RGBbackground(251, 211, 219)值会得到漂亮的粉色。每个值的取值范围为 0 到 255。更多信息请点击此处。

将您的后台函数调用更改为以下内容：

background(251, 211, 219)

点击播放：

创建我们的 Cookie

饼干通常是圆形的，所以我们来画一个圆。幸运的是，p5.js 有一个 circle 函数可以调用。函数定义如下：circle(x, y, diameter)调用函数时，你需要提供这些数字。

画布左上角的坐标是 (x, y) = (0, 0)，右下角的坐标是 (600, 600)，希望下图能帮助你更好地理解：

draw()所以，如果我们想在画布的正中心放置一个图形，它的坐标应该是多少呢？没错，x = 300，y = 300。接下来，让我们在下面的代码中编写调用圆函数的代码background。

circle(300, 300, 300)

所以前两个 300 分别代表 x 和 y，你可以尝试改变这些数字，看看它会如何变化；第三个 300 是直径，也就是圆的大小。

这是你目前为止的代码应该的样子：

function setup() {
  createCanvas(600, 600)
}

function draw() {
  background(251, 211, 219)
  circle(300, 300, 300)
}

注意circle函数调用是在另一个background函数调用之后进行的。这是因为我们希望它circle位于顶部background。就像你画画一样，如果你要画一只天空中的鸟，你会先画天空，然后再在天空上画鸟，而不是先画鸟，然后再在鸟上画天空，那样的话你就只剩下天空了！

添加分数

当有人点击我们的饼干/圆圈时，我们希望显示一个分数，并且每次点击都会增加分数。我们先来添加分数。

变量

你可能听说过“变量”这个词，但它到底是什么呢？变量允许我们存储一些信息，以便在程序中使用。例如，我们想存储分数以便显示它。在 JavaScript 中，你可以用几种方式定义变量，但本教程将使用 `var`。以下是一些你可能想在程序中存储的内容示例，以及如何定义变量：

后面的单词var是你选择的变量名，建议使用驼峰命名法来命名变量，所以如果你的变量名很长，它看起来会像这样：

aReallyLongVariableName

其中第一个单词的首字母小写，后续单词的首字母大写。有关变量的更多信息请点击此处，但我们的 cookie 点击器不需要这些信息！

所以，我们来添加分数变量。当然，我们希望分数初始值为 0。记住，如果把这个变量放在draw()函数内部，每次函数被调用时，分数都会被重新赋值，这意味着每次调用函数分数都会被重置为 0，我们不希望这样。所以，我们把它添加var score = 0到文件的最顶部。

var score = 0  
function setup() {  
  createCanvas(600, 600)  
}  

function draw() {  
  background(251, 211, 219)  
  circle(300, 300, 300)  
}

如果你点击播放，程序的输出结果将与预期相同，因为虽然我们已经设置了第一个变量，但我们实际上并没有使用它！

为了显示分数，我们将使用text函数。该text(word, x, y)函数接受三个参数：第一个参数是单词，第二个参数是 x 坐标，第三个参数是 y 坐标。我们把分数作为要显示的单词，然后输入 x 和 y 坐标。将以下代码添加到 draw 函数中：

text(score, 300, 100)

你应该可以看到分数已经添加到画布上了！恭喜，你刚刚创建并使用了一个变量。

它可能有点太小了，所以让我们使用textSize来改变文本的大小，此函数接受一个参数，即文本的大小textSize(theSize)。

让我们在程序中添加以下内容：

textSize(60)

看起来应该像这样：

尺寸更合适了，但是稍微偏离中心，我们用textAlign函数，并将 CENTER 作为参数传递进去。在 draw 函数的代码中添加以下代码：

textAlign(CENTER)

这样，你的代码最终看起来会是这样：

var score = 0  
function setup() {  
  createCanvas(600, 600)  
}  

function draw() {  
  background(251, 211, 219)  
  circle(300, 300, 300)  

  text(score, 300, 100)  
  textAlign(CENTER)  
  textSize(60)  
}

播放时应该看起来像这样： 现在我们终于有点进展了！

点击 cookie

当我们点击 cookie 时，我们希望分数增加 1。为了实现这一点，我们需要在代码中添加一个名为 `click()` 的函数mouseClicked()。这样，​​每当有人使用鼠标点击时，该函数就会执行：

在 draw 函数下方添加以下代码。

function mouseClicked() {  
  console.log('I just got clicked')  
}

注意，如果你玩游戏，然后点击任意位置，控制台会显示“我刚刚被点击了”——每次点击都会显示一次。这是一种调试程序或检查函数是否执行的console.log方法，就像我们刚才做的那样。我添加这个功能只是为了确保当我们用鼠标点击时，该函数能够被执行。console.log('I just got clicked')

增加计数

所以，当我们点击时，我们希望分数增加 1。因此，让我们将以下代码添加到mouseClicked函数中：

score = score + 1

这样做会将变量的值增加 1，也就是将变量的值加 1。这也可以简写为score++：

var score = 0;
function setup() {
  createCanvas(600, 600)
}

function draw() {
  background(251, 211, 219)
  circle(300, 300, 300)

  text(score, 300, 100)
  textAlign(CENTER)
  textSize(60)
}

function mouseClicked() {
  score = score + 1
}

所以现在点击后分数应该会增加：

太棒了！不过，这种方法有个小问题，如果你发现了就太好了！无论你是否点击 cookie，分数都会增加，而我们希望只有在你点击 cookie 时分数才会增加。

为此，我们需要用到一点数学知识！

我们将使用dist(x, y, x1, x2)计算两点间距离的函数。这两点分别是圆心和用户点击的位置。如果两点间的距离小于或等于圆的半径，则表示用户点击的位置在圆内。希望下图能更好地解释这一点：

让我们添加这段代码，使我们的mouseClicked函数看起来像这样：

function mouseClicked() {
  var distance = dist(300, 300, mouseX, mouseY)
  if (distance <= 150) {
    score++
  }
}

这里有几个地方需要解释。第一行我们调用了一个dist函数，该函数返回两点之间的距离。函数的前两个参数dist是 300 和 300，分别是圆心的 x 和 y 坐标；第二个坐标是mouseX和 ，mouseY它们是 p5.js 的特殊变量，用于跟踪鼠标的位置。因此，我们获取了如图所示的两点之间的距离，然后将其赋值给一个名为 的新变量，以便我们可以在if 语句distance中使用它。

如果语句

if 语句允许我们根据不同的条件执行不同的操作。它们的结构如下：

if (condition) {
  //  block of code to be executed if the condition is true
}

在我们的例子中，if (distance <= 150)这段代码的意思是：如果距离小于或等于圆的半径（圆的直径为 300，半径是直径的一半），则执行代码，score++从而增加分数。如果条件不满足，例如，用户点击了饼干旁边但不在饼干内部，则分数不会增加。

不妨亲自试试！

让它弹跳

当我们点击它时，我们希望得到某种指示，表明 cookie 正在被点击，所以让我们让它弹跳一下。

所以，与其将圆的直径硬编码为 300，不如创建一个新的变量，以便随时引用。在代码顶部你编写变量的地方，score我们添加var diameter = 300并更新对函数的调用circle(x, y, diameter)，使其接受我们创建的直径变量作为参数，而不是硬编码的 300。代码现在应该如下所示：

var score = 0
var diameter = 300
function setup() {
  createCanvas(600, 600)
}

function draw() {
  background(251, 211, 219)
  circle(300, 300, diameter)

  text(score, 300, 100)
  textAlign(CENTER)
  textSize(60)
}

function mouseClicked() {
  var distance = dist(300, 300, mouseX, mouseY)
  if (distance <= 150) {
    score++
  }
}

如果你运行该程序，功能上应该不会有任何区别，因为我们所做的只是为之前硬编码的值设置一个变量。

接下来，当我们点击时，我们希望变量的直径减小到 280，然后我们将进行一些特殊处理，使其恢复到实际大小。

diameter = 280在我们的mouseClicked函数中添加：

function mouseClicked() {
  var distance = dist(300, 300, mouseX, mouseY)
  if (distance <= 150) {
    score++;
    diameter = 280
  }
}

所以你会注意到，当你点击播放按钮，然后点击饼干时，它的大小会缩小，但它会保持那个大小，因为那是我们设置的大小！

要使其恢复到初始大小，请在我们的draw函数中添加以下代码。

diameter = lerp(diameter, 300, 0.1)

lerp函数将一个数字线性插值到另一个数字——所以我们的直径从 280 逐渐变化回 300。不用担心这个函数的具体细节，它只是给我们的饼干赋予了一种漂亮的弹跳效果！

添加一个真正的饼干

点击圆圈太无聊了，我们来添加一块真正的饼干吧。

右键点击并保存这张图片，我们要把它添加到游戏中！图片来源： https://dribbble.com/shots/5358537-Cookie

您需要在https://editor.p5js.org/注册一个账号才能上传图片，我建议您注册一个账号，这样可以保存您的所有代码！（注册是免费的）

在编辑器中，单击侧边栏：

然后使用下拉菜单“上传文件”：

你应该能在文件列表中看到 cookie.png 文件：

cookieImage让我们加载图像，首先，让我们在文件顶部创建一个空变量：

var cookieImage

它最初没有任何值，我们将加载图像，然后设置该变量。因此，在我们的setup()函数中添加以下内容：

cookieImage = loadImage('cookie.png')

这个loadImage(pathToImage)函数的功能正如你所想，它将图像加载到内存中以便我们使用它。我们的代码开头应该如下所示：

var score = 0
var diameter = 300
var cookieImage
function setup() {
  createCanvas(600, 600)
  cookieImage = loadImage('cookie.png')
}
// .. rest of code

接下来我们需要用饼干替换圆圈，让我们注释掉圆圈的代码。

评论

代码中的注释是一种解释代码运行方式的方法，注释可以以两个斜杠开头。

// this is a comment

你可能在之前解释 if 语句时已经注意到注释了。注释不会被执行，它对程序没有任何影响。所以你可以添加注释来帮助自己理解代码，或者帮助其他人理解你编写的代码！

在我们的例子中，我们将注释掉圆圈的代码，使其不再执行；或者，您也可以直接删除该代码！

如果你把代码注释掉，circle(300, 300, diameter)让它看起来像这样，// circle(300, 300, diameter)那么当你运行程序时，它应该看起来像这样：

太棒了，现在让我们使用图像函数添加我们的 cookie吧。image(img, x, y, width, height)它以图像作为第一个参数，图像的 x 和 y 坐标分别作为第二个和第三个参数，宽度和高度分别作为第四个和第五个参数！

在注释掉圆圈代码的正下方，输入以下内容：

image(cookieImage, 300, 300, diameter, diameter)

现在运行程序后，你应该会看到以下内容：

这不太对，图像通常是从左上角开始绘制的，我们希望参考点是中心，所以就像我们处理文本那样，imageMode(CENTER)在图像前面添加一个参考点。所有代码加起来应该如下所示：

var score = 0
var diameter = 300
var cookieImage
function setup() {
  createCanvas(600, 600)
  cookieImage = loadImage('cookie.png')
}

function draw() {
  background(251, 211, 219)
  //circle(300, 300, diameter)
  imageMode(CENTER)
  image(cookieImage, 300, 300, diameter, diameter)
  text(score, 300, 100)
  textAlign(CENTER)
  textSize(60)
  diameter = lerp(diameter, 300, 0.1)
}

function mouseClicked() {
  var distance = dist(300, 300, mouseX, mouseY)
  if (distance <= 150) {
    score++;
    diameter = 280
  }
}

玩法应该如下：

想法

博客就到这里啦，但你可别就此止步！如果你真的想学习编程，就需要自己动手尝试。这里有一些你可以编写的代码示例，可以扩展我们的饼干点击游戏，希望能巩固我们所学到的知识。

• 点击位置越靠近中心，得分增加越多。
• 随着得分增加，让饼干变大
• 让饼干在屏幕上移动
• 让饼干旋转

发挥你的想象力，或者看看其他cookie点击游戏的功能，尝试复刻它们的做法。我建议参考p5.js文档，看看有哪些函数可以用！

接下来会发生什么？

瞧，你已经编写了一个游戏，并学习了一些编程的关键概念。如果你喜欢这篇博客，我建议你继续阅读《适合初学者编写的五款最佳游戏》。如果你跟着这些博客学习，你应该能够很好地创建自己的游戏，甚至可以创建多人游戏，和你的朋友们一起玩！

如果你喜欢这篇博客，我的个人网站codeheir.com上还有更多游戏开发相关的博客。