vanilla js_我用Vanilla JS开发了一个游戏，却不知道如何编码3个月

vanilla js

好吧，我只知道基础知识，也知道我想学习编码，无论如何，正如我所解释的那样 在这里 。

经过一段时间自己尝试学习后，我发现对我来说，在家乡注册编码训练营会更好。

对于那些只想玩游戏而不对如何制作故事感兴趣的人来说， 这里就是 ！

哦，男孩！ 几乎每天都在编写代码，需要做LABS（作业），只要我需要帮助或指导，就有老师可以帮助，而其他一群与我处境相同的学生确实对我的学习进度产生了影响。

但是，我并不是要告诉您-如果您正在学习编码-您必须注册其中之一，每个人对此都有不同的看法。

我在这里解释在学习了第一个模块之后，仅学习HTML，CSS和Javascript的能力。

该模块的最终项目是我们必须在2周内开发的游戏。 我们在执行该操作上有完全的自由，唯一的规则是不使用任何框架。

在西班牙，必须领取驾驶执照时，您必须通过医疗检查。 这项测试很无聊，只是评估您的听觉和听觉效果，但是它还有一件使它非常令人愉快的事情：一点协调视频游戏。

玩家由仅在水平方向移动的2个点（每只手一个）表示。

它由两条从上面看的小路组成，突然向右或向左转弯，目的是要使两个点都保持在路中间，这是一个挑战。

因此，游戏的目的是避免步入正轨。

游戏将在特定点结束，然后游戏结束屏幕将显示玩家从头到尾退出的时间百分比（％）。

我以前从未玩过这种游戏，之后也从未玩过，但是从那以后，几年前它一直挂在我头上。

所以我决定重新制作。

首先，我试图在Github上的自述文件中组织所有必须完成的工作：

游戏状态 仅包含3个屏幕：

• 开始屏幕 ->标题+开始按钮
• 实际的游戏屏幕 ->指令+播放按钮-> Javascript画布
• 屏幕游戏 ->结果+再次播放按钮

然后，针对实际游戏的MVP（最低可行产品）的开发将如下所示：

• 创建一个点并将其显示在屏幕上。
• 水平移动点->单击向右或向左箭头可在画布上移动播放器。
• 创建道路->首先，是一条直线。 然后，向右或向左添加转弯。
• 检查碰撞（点从道路上驶出时）。
• 如果发生碰撞->点的总和时间->更改颜色。
• 在某个时间点（？秒）结束游戏。
• 用双手复制它。

然后，如果我有足够的时间，我想添加其他种类的东西，例如：

• 添加背景音乐和声音效果
• 用CSS使其美丽

实际上这是我第一次制作游戏，我第一次使用 Canvas和我第一次尝试以一种Model-View-Controller方式（ MVC ）来组织我的代码。

如果您不知道，Canvas可以用一个正方形表示，该正方形使我们可以使用Javascript在屏幕上“绘制”东西，而Model-View-Controller是一个概念，可以帮助我们避免将所有代码都放在一个大文件中，但将关注点分离开来，使其更易于阅读和维护。

我得出了必须创建这些文件的结论：

• 用于放置HTML标记和一些内容的index.html 。
• 放置CSS的stylesheet.css 。
• main.js将充当视图，从HTML获取数据并更新HTML。
• 一个game.js将同时充当控制器和模型，并具有内部逻辑。
• 一个player.js和path.js ，它们将创建所需的其他动态和可复制部分。

为了简单起见，我什至没有在任何地方托管游戏，我将Netlify链接到我的Github存储库以快速，轻松地部署它。 这是一个很棒的工具！

在Github上，我第一次开始使用branch 。 拥有分支意味着创建所有代码文件的“克隆”，这使您可以对其进行更改和测试，而不必担心太麻烦。 一旦有了可以使用的东西，就可以将该测试分支与您的主代码（通常称为“主”）“合并”。

我决定将游戏命名为“ Coordinator 2000 ”，以进行追溯，然后开始编写代码。

在屏幕上显示一个小方块是最简单的部分。 我在canvas标签上放置了HTML标签：

< canvas id = "coordinator" width = "1200" height = "600" > </ canvas >

在main.js文件上，“获取”画布：

let canvas = document .getElementById( 'coordinator' );

给它一个上下文，以便它知道哪种绘图板是：

let ctx = canvas.getContext( '2d' );

并使用该属性初始化类“ Game”：

let game = new Game(ctx);

在game.js文件中，有一个绘制它的方法：

_drawPlayer(player) {this .ctx.fillStyle = player.color;  
    this .ctx.fillRect(player.x, player.y, player.width, player.height);
  };

等等...

我不会深入研究代码本身（您可以在这里看到它），因为描述这两周内每一行的发生情况以及每一步中发生的事情将花费很多时间，但是我要评论这些要点：

我首先想到我应该创建2条线来定义道路，然后以某种方式移动它们，直到班上的另一位学生告诉我，可能会更容易地创建一系列相同颜色的小矩形 ，一个在顶部彼此的道路。

然后，移动道路以绘制转弯将与在数组上添加新矩形时添加或减去X位置一样容易。

我遇到了一个小问题，因为数组越来越大，浏览器开始显示出性能低下的迹象，在某个时候几乎冻结，所以我刚刚添加了一个函数，当矩形移出矩形后立即将其从数组中删除画布的：

_deletePath(array) {for ( let i = 0 ; i < array.length; i++) {
      if (array[ 0 ].y >= this .canvasHeight) {
        array.shift();
      } 
    }
  }

另外，我不知道如何使转弯动态，所以我只对它们进行了编码：

_generateTurnsR() {let lastItem = this .rightPathArray[ this .rightPathArray.length - 1 ];

  if ( this .frames >= 0 && this .frames < 160 ) {  // turn right 
    this ._generatePathR(lastItem.x += 1 ); 
  } else if ( this .frames > 155 && this .frames < 220 ) { // turn left 
    this ._generatePathR(lastItem.x -= 1 );
  } else if ( this .frames > 215 && this .frames < 420 ) { // straight
    this ._generatePathR(lastItem.x); 

在“更新方法”上添加帧计数器使我每隔几秒钟就可以放置一次转弯，只需增加或减去小矩形的X位置即可。

在那两个星期中，有几天我感到非常沮丧，因为我不知道该怎么做。 幸运的是，我有一名助教Alex，有时可以帮助我指出正确的方向。

最后，仍然存在一些错误 （如果您在玩游戏，当左点离开道路时，边框不会变成红色，就像右边的一样），这是一些错误的做法 （计时器是GIF图片，而不是代码，因为我没有足够的时间来正确地做它），并且代码在被我重构几次之后仍然草率且充满了“不知道怎么做”的内容（例如，我会尽快处理所有CSS，而不考虑屏幕尺寸或响应速度）。

仍然是我逐行编码所有行而创建的第一个“事物”。 过去，我创建了一些网页，但是所有使用Wordpress的网页和感觉都不一样。 这是令人兴奋的一千倍！

现在...是的！ 你可以在这里玩！ :)

翻译自: https://hackernoon.com/i-built-a-game-in-vanilla-js-and-i-dont-know-how-to-code-3-months-ago-pi3136ik

vanilla js