【HTML5游戏】从敲打空格键开始

简介: 从头开始创建令人印象深刻且引人入胜的跨平台游戏,本教程将学习如何剖析制作成功游戏的元素,以及如何开发游戏设计,循环和用户输入、动画、地图、碰撞检测和AI、数学、游戏物理等方面的实践技能。

从头开始创建令人印象深刻且引人入胜的跨平台游戏,本教程将学习如何剖析制作成功游戏的元素,以及如何开发游戏设计,循环和用户输入、动画、地图、碰撞检测和AI、数学、游戏物理等方面的实践技能。

如果只有几秒钟的时间来学习游戏开发,那么这里就是超级浓缩版。获取用户输入。稍微移动所有内容。检查是否有任何重叠。画所有东西。每秒重复60次。

如果有几分钟的时间,那么这里是扩展版本。计算机可以很快地完成很多事情。它可以更新敌方坦克部队或虚拟兔子群的个人位置。它可以发射导弹或种胡萝卜或产生美丽的粒子效果。它可以检测到发生的任何碰撞。它可以在屏幕上绘制所有内容。十分之一秒。

游戏开发类似于编排实时、交互式、定格动画电影。每次屏幕更新(称为“帧删除”,通常仅持续16毫秒左右),演员的动作都很小。这些微小的量加在一起,所以高速播放会产生运动的轮廓。游戏开发几乎完全是关于创造幻想。如果要“行走”,首先在几帧内显示一个腿部张开的角色的图像,然后在几帧内切换到腿部闭合的图像。如果你注意时间(和艺术风格),你会有一个令人信服的步行周期。

image.png

动画和移动只是我们每一帧必须做的一件事。在最高级别,主游戏循环(每帧运行一次)如下所示:

image.png

这个高层次的循环并没有说明如何协调和管理所有这些操作,而是一个简单的模型,用于开始考虑游戏的核心工作原理。

这是玩游戏所需的全部。不要过度考虑,不要过度架构。只要意识到一台计算机可以在六十分之一秒内完成许多事情,一堆小动画和互动很快就变得不仅仅是其各个部分的总和:人脑非常擅长将生命归因于无生命的物体。从在屏幕上移动一个正方形开始,再添加在相反方向上移动的其他正方形,那么看看它如何成为超级马里奥兄弟就不费吹灰之力了!

image.png

如果有函数式编程或web背景,那么在循环中按顺序执行所有操作的想法可能看起来有点“程序化”,但这只是一个较高的层次。游戏最终是一个状态球。但是你可以说你想要的模型。

游戏设计

我们如何将这种“主循环”的高级概念应用于制作实际上类似于游戏的东西?作为一个领域,视频游戏设计还很年轻,但是它已经有足够的时间来制定和完善一套,而更像是规则、指南、格言、最佳实践、学术理论、神话和传说。

游戏设计(不同于游戏开发)是关于利用这些集体知识来改进你的游戏。幸运的是,你不需要精通整个游戏设计领域就可以开始有效地进行游戏设计,就像你不需要了解音乐理论就可以组建一个乐队并创作出伟大的歌曲一样。但是你学的越多,你就越快能弄清楚某些事情是不是起作用了。你知道的规则越多,你就越能打破规则,并对自己的选择充满信心。

本文不会深入研究游戏设计的细节,有很多令人惊叹的资源。而且,像所有学术活动一样,一旦开始,这将是一个深深的兔子洞。有大量的内容专门用于简单地定义什么是“游戏”!如果想开启冒险之旅,可以从阅读杰西·谢尔(Jesse Schell)的《[游戏设计艺术:一本书]》开始。在此早期阶段,我们主要关注选择游戏设计的语言,以便我们可以逐步完成游戏开发旅程,并且一切都在同一页面上。

可以说,游戏最重要的方面是其机制,游戏机制是指特定的游戏元素。它是游戏的一个方面的目标,它是执行规则或鼓励探索以了解游戏的事物。通常,会拥有一大堆机制,这些机制共同构成了整体游戏玩法,但是定义游戏特殊性的要素的一个或多个元素称为核心机制。

例如,在游戏平台中,“跳跃”是一种机制(非常关键!)。也许在游戏中,核心机制是玩家在跑步时可以跳得更远。作为游戏设计师,这使您可以发明玩家需要选择跳远跳还是短跳并做出相应反应的情况。在添加,修改或删除机制时,需要非常小心,因为这些机制会极大地改变游戏的整体形状。

与游戏设计密切相关的是关卡设计。设计关卡不仅仅在于制作关卡,还在于思考制作关卡!一旦定义了游戏的机制后,就可以开始将其雕刻成旨在为玩家提供的整体体验。也许前几个级别需要几次跳远,但随着游戏的进行,它们变得越来越必要-直到玩家几乎只执行跳远。然后,在关键时刻,投掷一些交替的长/短/跳,以使他们感到震惊和惊奇,并使他们保持脚尖。

关卡设计用于控制游戏的节奏。节奏是游戏随着时间流逝的方式。紧张时刻在哪里?和平时刻在哪里?它们结合起来的自然程度如何?图1显示了经典电影情节的张力周期。不仅仅是爆炸和追车,否则很快就会变得乏味。必须改变难度-也许容易地开始然后逐渐增加。但是时间不要太长,否则播放器会精疲力尽。应该有一段时间的救济和惊喜-高潮和低潮。节奏是阻止玩家精通核心机制后感到无聊的原因。

image.png

整理好我们的技工和节奏后,我们需要谈论艺术。 在整本书中,我将区分图形和美学。 它们是相关的,但又有很大的不同。图形包括艺术家创建的图像-构成角色的像素、徽标、背景。美学与游戏的外观和感觉有关,是更高级别的主题 ,它产生的心情,将颜色,符号和图像用于艺术目的。

美学几乎总是比图形更重要。 即使画面不那么出色,具有一致和连贯美感的游戏也可以在视觉上令人愉悦和令人印象深刻。 对于我们许多在Photoshop中表现糟糕的人来说,这是个好消息。

最后,果汁。这一术语可能不会出现在很多学术文献中,但它对于创造一个很棒的情感游戏是必不可少的。果汁是上光剂,对细节的关注,必要的不必要的东西,爱。它是爆炸时的震动屏幕,小颗粒在玩家奔跑时的轨迹,平滑的弹跳动画和用户界面中的效果。其中许多都非常容易添加到您的核心机制之上,我们将继续添加它们堆。

image.png

既然我们已经掌握了行话,那就让我们来定义本书的主要目标:创建一个简单但有趣的核心机制,再加上竞争性的级别设计、良好的步调、令人愉悦的美感和一大堆果汁!


相关文章
|
7月前
|
移动开发 HTML5
html5掷骰子跳棋游戏源码
html5掷骰子跳棋游戏源码
133 1
html5掷骰子跳棋游戏源码
|
3月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
6月前
|
移动开发 前端开发 程序员
程序员必知:基于HTML5堆木头游戏
程序员必知:基于HTML5堆木头游戏
38 0
|
6月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
45 0
|
存储 人工智能 移动开发
HTML5 游戏开发实战 | 五子棋
五子棋是一种家喻户晓的棋类游戏,它的多变吸引了无数的玩家。本章首先实现单机五子棋游戏(两人轮流下),而后改进为人机对战版。整个游戏棋盘格数为 15×15,单击鼠标落子,黑子先落。在每次下棋子前,程序先判断该处有无棋子,有则不能落子,超出边界不能落子。任何一方有横向、竖向、斜向、反斜向连到 5 个棋子则胜利。
23517 8
HTML5 游戏开发实战 | 五子棋
|
7月前
|
安全 Windows
在线网页版扫雷游戏HTML源码
在线网页版扫雷游戏HTML源码
270 1
在线网页版扫雷游戏HTML源码
|
7月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
127 1
|
7月前
|
JavaScript
基于js和html的骰子游戏
基于js和html的骰子游戏
94 0
|
7月前
|
前端开发 JavaScript 定位技术
web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏
113 0
|
前端开发 JavaScript
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
86 0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
下一篇
DataWorks