我正在创建一个游戏引擎！

这场伟大的冒险简介

几周以来，我一直在定期从事一个我认为谈论起来可能很有趣的项目，即基于 canvas 用 Ja​​vaScript 和 HTML5 创建我的视频游戏引擎。

您可能想知道为什么选择 HTML5 和 JavaScript 来创建视频游戏？答案没有问题那么酷，这是我的学校（Zone01 Normandie）所需的项目的竞争，以及这些语言拥有执行该项目所需的一切的事实，导致我选择了这些技术

但实际上这些并不是我会选择作为基础的语言，在完成这个语言之后我肯定会用不同的语言开始这种类型的其他冒险。

建筑学

因此，我开始设计我的视频游戏引擎，它将由几个类组成，其中至少包括两个主要类：管理整个游戏区域的 Game 类和允许您生成对象的 GameObject 类在我们的游戏中并使它们相互交互。

对于这些类，我将添加 CollideBox 类，它将允许我管理所有对象的碰撞框。

Game 类有一个 GameLoop 方法，将在游戏的每一帧（图像）执行，还有一个 Draw 方法，将在每个游戏循环期间调用。

对于GameObject类，它有一个Step方法和一个Draw方法。
第一个执行游戏循环的每一轮，第二个每次调用 GameLoop 类的 Draw 方法时执行。

这理论上允许您通过将引擎模块导入到项目中来创建游戏。
为了显示精灵，我选择使用内置于 HTML5 的canva API（内置意味着它默认附带）
它将允许我显示所有精灵并重新剪切图像以创建对我来说非常有用的动画！

几天后，我能够以给定的速度显示动画，并通过我的 CollideBoxes 检测碰撞。
还有很多其他好东西，我会让你在下面看到：

GameObject 类

class GameObject{
    constructor(game) { // Initialize the GameObject
        this.x = 0
        this.y = 0 
        this.sprite_img = {file: undefined, col: 1, row: 1, fw: 1, fh: 1, step: 0, anim_speed: 0, scale: 1}
        this.loaded = false
        this.game = game
        this.kill = false
        this.collision = new CollideBox()

        game.gObjects.push(this)

    };
    setSprite(img_path, row=1, col=1, speed=12, scale=1) {
        var img = new Image();
        img.onload = () => {
            console.log("image loaded")
            this.sprite_img = {file: img, col: col, row: row, fw: img.width / col, fh: img.height / row, step: 0, anim_speed: speed, scale: scale}
            this.onSpriteLoaded()
        };
        img.src = img_path


    }
    onSpriteLoaded() {}
    draw(context, frame) { // Draw function of game object
        if (this.sprite_img.file != undefined) {


            let column = this.sprite_img.step % this.sprite_img.col;
            let row = Math.floor(this.sprite_img.step / this.sprite_img.col);

           // context.clearRect(this.x, this.y, this.sprite_img.fw, this.sprite_img.fh);
            context.drawImage(
                this.sprite_img.file,
                this.sprite_img.fw * column,
                this.sprite_img.fh * row,
                this.sprite_img.fw,
                this.sprite_img.fh,
                this.x,
                this.y,
                this.sprite_img.fw * this.sprite_img.scale,
                this.sprite_img.fh * this.sprite_img.scale
            );

            if (frame % Math.floor(60 / this.sprite_img.anim_speed) === 0) {
                // Mise à jour de step seulement à 12 fps
                if (this.sprite_img.step  box.x &&
            this.collision.y  box.y
          )
    }
    onStep()   {};
}   

游戏类

class Game {
    constructor(width = 1400, height = 700) {
        this.gObjects = [];
        this.toLoad = [];
        this.timers = [];
        this.layers = [];
        this.canvas = document.getElementsByTagName("canvas")[0]

        this.canvas.width = width
        this.canvas.height = height
        this.context =  this.canvas.getContext("2d")
        this.context.globalCompositeOperation = 'source-over';
        this.inputs = {};
        this.mouse = {x: 0, y: 0}
        document.addEventListener('keydown', (e) => {
            this.inputs[e.key] = true;
        }, false);
        document.addEventListener('keyup', (e) => {
            this.inputs[e.key] = false;
        }, false);
        document.addEventListener('mousemove', (e) => {
            this.mouse.x = e.x;
            this.mouse.y = e.y;
        })
        document.addEventListener('mouseevent', (e) => {
            switch (e.button) {

            }
        })

    }
    draw(frame) {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        console.log( this.canvas.width, this.canvas.heigh)
        for(let i = 0; i  {
            clock  = 1
            for(let i = 0; i 



当然有很多优化或其他错误，但一切都正常，

“完美的！”你能告诉我吗？

那就太简单了。


  
  
  忧虑


完成此任务并开始尝试使用此引擎创建游戏后，我在与同事的谈话中得知了一些可怕的消息。

我想您还记得所做的技术选择是为了符合我的 Zone01 学校的要求......

好吧，确实选择的语言很好，但我不知道有一条指令会严重阻碍该项目......

我们被禁止使用 Canva 库！

提醒一下，这是我们用来显示图像的库。


  
  
  接下来是什么？


当我写这篇文章时，我也开始完全重新设计这个游戏引擎，而不使用canva。

这个开发日志已经完成，您很快就会看到这个故事的其余部分，别担心。

对于下一个开发日志，我肯定会尝试新的格式。

希望这些内容对您有所帮助，给您带来乐趣，或者至少在一些主题上对您进行了教育。祝您一天愉快，编码愉快。


  
  
  DevLogs 1.1：引擎完成了，它是如何工作的？



  
  
  之前


几个月前，我开始创建我的视频游戏引擎，我完成了它......很久以前，在 Zone01 的几位同事的帮助下，我们甚至成功地创建了一款受《超级马里奥兄弟》启发的游戏，可以在我的网站上找到Itch.io 页面。

决定申请这个开发日志的格式花了很多时间，我承认我稍微推迟了甚至完全推迟了撰写这篇文章的截止日期。

通过耐心地以我犹豫不决为借口不从事这个主题，我现在发现自己在计划发布日期两个月后在鲁昂汽车站的休息区写作，而取消的火车迫使我多等一个小时。 

因此，让我们涵盖架构的所有细节，自我的开发日志的第一部分以来，这个架构的变化很小（除了通过避免使用画布进行的调整之外）。

因此，我们将讨论所执行的项目、我们作为团队的工作方式以及我们遇到的问题。

将此视为对此项目的反馈，我希望您能够从本文中吸取一些教训，这将对您的项目之一有所帮助。


  
  
  项目


该项目是用 JavaScript 重新创建一个超级马里奥兄弟，并从头开始，至少在代码方面是这样。

规格很简单，我们必须有一个具有多个关卡的马里奥游戏，这是一种简单地创建新关卡的方法。

此外，我们还必须创建一个记分板和一个菜单来调整选项。

这个项目的难点是：

• 屏幕上元素的水平滚动
• 优化屏幕上不存在的元素

滚动，因为它要求所有元素在相对于玩家位置的背景中滚动。
优化屏幕上未显示的元素可以减少运行游戏所需的资源，而不会损失性能。

解决了这些困难后，我们在我的 itch.io 页面上发布了这个游戏，您甚至可以去测试它。

这就是这个开发日志的结束方式，现在完成了，我将能够撰写有关其他项目和/或其他主题的文章。

如果您对我告诉您的内容有一点兴趣，您可以在 github 上查看我的不同项目（包括本开发日志中的项目）。

祝您今天休息愉快！