如何做一个2D 横版过关类游戏

如何做一个2D 横版过关类游戏

好多人学编程的初衷都是对电子游戏的热爱，以及想做自己的电子游戏，从而学习了计算机专业。然而随学习大多发现自己并没有做电子游戏方面的进步。这个教程在这里给仍对游戏编程执念的同学一点启发，给曾经想做电子游戏的同学一点 “原来如此” 的回味。

不可否认，电子游戏的主题是电子艺术。而电子游戏编成只是给电子艺术表现的平台。本文意在介绍2D电子游戏编程的原理和程序设计方向，不在艺术方面讨论。作者本人并没有专业游戏开发经验。只是凭编程直觉和出自对电子游戏的个人理解。本文以制作超级玛丽洛克人一类游戏为主题。

游戏循环 (game loop)

在回合制游戏, RPG游戏往往不需要游戏循环。简单的游戏设计，游戏过程主要靠用户的指令来进行，甚至可以在没有用户输入的情况不更新画面。即时的游戏常常需要一个游戏循环函数 gameLoop()。如果把一个游戏看作一部动画的话，每次这个函数被呼叫都会更新画面一帧。在固定时间间断被重复呼叫，就形成了动态的游戏。这个函数同时也会处理用户输入：比如控制角色移动跳跃。以及更新游戏里的敌人和其他角色的动态。

如果你用的引擎没有提供游戏循环的话，你可以自己把游戏循环函数绑定在时钟上。

图像引擎

一个2D动画游戏的画面基本上由一个个方块图片。组成通过移动图片，切换帧实现动画效果。

画方块图

图像引擎基本需要:

• 能够贴图
• 能够把一组图放在同一个坐标系里。通过移动坐标系移动所有的图
• 画图片有前后顺序 (zIndex)

这里我用了 Pixi.js https://www.pixijs.com/ 这个引擎提供了画图功能。

物理引擎

为了让图像能动起来，最简单的方法就是给你的图设置一个速度 (dx, dy) 每次游戏循环时调整它的位置 (x,y)

x = x + dx;
y = y + dy;

这样你的图片就移动起来。然而这种移动应该叫作“飞”， 因为他是不受引力限制的。为了允许某些物体坠落，可以给图设置一个加速度。(gravityX, gravityY)

 dx = dx + gravityX;
 dy = dy +