使用-PHP-和-jQuery-构建游戏化-Web-站点（全）

使用 PHP 和 jQuery 构建游戏化 Web 站点（全）

原文：zh.annas-archive.org/md5/a9c92181e14a72b81ed3a8d14d6790a1

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

几年前，如果你对某人说“游戏化”，你会得到一个奇怪的表情，好像你在编造一些新东西。也许你会得到一个快速的跟进问题：“嗯？那是什么？”

今天，那种遭遇会有所不同。尽管被人们误解，但企业正在非常认真地对待游戏化，因为他们发现越来越难以吸引并最终留住客户。

在这本书中，我们更仔细地研究了游戏化。我们假设您对游戏化一无所知，但对网站开发有一些背景。我们将带您了解本书中概述的游戏化设计框架，并在此过程中应用游戏化原则。

尽管不难理解，但游戏化需要一种专注于用户参与和乐趣的方法来开发系统。

完成后，您将拥有一个实时项目，以展示您对关键游戏化原则的理解。

本书涵盖的内容

第一章，游戏化教育过程，列举了教育环境中游戏化的当前用途。

第二章，框架，为读者提供了一个框架，可以应用到未来的游戏化项目中，以及我们将在本书的其余部分中构建的最终网站项目的视觉模拟。

第三章，目标和目标行为，带领读者通过游戏化过程的前几个实际步骤。我们为我们的项目定义了目标和目标行为。

第四章，玩家，帮助我们识别系统中的角色，用户和利益相关者（即玩家），以及他们的动机。

第五章，活动，概述了我们网站项目的游戏化系统的关键点，机制，元素，规则等。

第六章，乐趣，帮助读者理解内在动机和外在动机之间的区别，以及什么使一项活动有趣。

第七章，总结，总结了我们在前几章中所做的一切。读者通过游戏化设计框架进行迭代，实施更多的游戏元素来驱动用户行为。

附录，表，包含了 Bartle 玩家类型的参与循环以及我们的游戏化系统的游戏化设计框架概述。

这本书需要什么

要运行本书中的示例，需要最新版本的以下软件：

• WAMP 服务器

• PHP（5.0 版本或更高版本）

• MySQL

• MySQL Workbench（可选）

• JQuery 库

• 文本编辑器

读者会发现这些材料很有用，如果他们对网站开发有基本的了解（HTML、JavaScript、CSS 和 PHP）。

这本书适合谁

这本书适用于想要构建游戏化应用程序的 IT 专业人员。您需要了解基本的 HTML 和网站工作的基本原理。如果您曾经构建过任何类型的网站，那么您已经走在了正确的道路上。

约定

在本书中，您会发现一些区分不同信息类型的文本样式。以下是这些样式的一些示例，以及它们的含义解释。

文本中的代码单词显示如下：“将数据库命名为VuPoint”。

代码块设置如下：

[DELIMITER //
-- Procedure Name: SelectOnlinePlayers
-- Procedure Purpose: Returns a lists of players how currently logged in is true
CREATE PROCEDURE 'vupoint'.'SelectOnlinePlayers'()
BEGIN
Select  * from Player where CurrentlyLoggedIn=true;
END//
DELIMITER;

新术语和重要单词以粗体显示。例如，屏幕上看到的单词，菜单或对话框中的单词会在文本中出现，就像这样：“点击数据库菜单”。

注意

警告或重要提示会以这样的框出现。

提示

提示和技巧会以这种方式出现。

第一章：游戏化教育过程

游戏有潜力带来个人方面的巨大变化。历史上，游戏被用来提高技能，有时还能培养新技能。最明显的游戏化例子可以是全球军队进行的“战争游戏”，帮助士兵体验战争环境并运用他们的训练技能取得成果。这些游戏帮助他们运用和发展他们的技能。尽管游戏化方法需要谨慎使用，但如果游戏化过程得到聪明实施，其优势将超过警告。

游戏化到底是什么？

游戏化是游戏设计师在游戏之外的情境中使用的策略和技术，让人们更像玩游戏一样对待这些情境。人们将严肃游戏、博弈论、视频游戏设计和游戏化混为一谈。这些可能是一些有趣、规则、竞争、积分等，然后将它们应用到非游戏情境中。

游戏化与严肃游戏不同。严肃游戏被认为是游戏，但它们并非旨在带来乐趣。它们用于更实际的用途。例如，飞行模拟器具有飞行视频游戏中的所有机械、技术和设计过程。然而，开发者创建视频游戏是为了娱乐目的，而飞行模拟器具有更严肃的目的。

另一方面，博弈论仅仅是研究战略决策的学科，它在做决策时考虑了“类似游戏”的思维。

游戏化涉及应用于良好游戏设计的结构和设计过程，无论是视频游戏、桌面游戏还是严肃游戏。游戏化只是游戏设计中使用的一组工具和材料，也适用于除了创造游戏之外的工作。

在不久的将来，我们将看到的大多数游戏化应用将是严肃游戏。我们将开始在日常生活中越来越多地看到游戏元素的出现。

游戏化领域的一个巨大增长领域是教育游戏化。将游戏化应用于学习过程有很多前景。

使用游戏化的学校

如果我们考虑学校是什么，我们很快就会得出结论，学校本身就是一个游戏。我们传统的学校系统中已经内置了所有经典的游戏元素。在几乎每种学习环境中，你都会发现奖励制度的概念。这种奖励制度可以以成绩或平均成绩的形式存在。学校奖励表现良好的人高分，而不是表现不佳的人。

学校也有处罚制度。如果学习者表现不达标，学校会对他/她进行惩罚。它会阻止他/她，排斥他/她，并在某些情况下将他/她从社区中移除。学校可能是世界上玩得最多的游戏。不幸的是，今天大多数人并不觉得学校有多有趣。因此，学校作为游戏的概念几乎不存在。然而，在未来几十年，随着我们使学习环境更具吸引力，你可以期待这种改变。

教育中游戏化的历史

游戏化在学习环境中最早的应用可以追溯到 20 世纪 80 年代的视频和电脑游戏，比如《世界在哪里是卡门圣地亚哥》。软件开发商 Broderbund Software 于 1985 年出版了这款游戏。它取得了巨大成功。这款游戏教授地理和历史知识，玩家扮演侦探，ACME 侦探社寻找前 ACME 侦探卡门圣地亚哥。它获得了 70 多个奖项，特别是 1996 年获得了国家教育媒体网络的银苹果奖。

学习中游戏化的简史如下图所示：

其他成为家喻户晓的早期电脑游戏包括《梅维斯·比肯教打字》和《文明》。还有一些其他游戏显示在下图中：

大富翁学院

有几位创新的教育工作者正在努力在他们的课堂中实施游戏机制。其中一位是加利福尼亚州橙县的 Hesperia Unified School District 的老师蒂姆·范登堡。范登堡在他所在学区的六年级学生中开设了“大富翁学院”（Monopoly Academy）。(www.youtube.com/watch?v=3iHv3vrW2Lo) 游戏的截图如下：

大富翁学院使用大富翁游戏来教授数学概念。范登堡是一位冠军级的大富翁玩家，他利用这个游戏来教授比率、概率、期望值和其他传统上孩子们难以理解的数学概念。

范登堡在他的课堂上实施了“水平制”，这是一个游戏元素。他将班级分成不同的水平，学生需要达到一定的里程碑才能参与游戏。他使用了一个“名人堂”，上面展示了过去玩家的高分，起到了排行榜的作用。排行榜是另一个重要的游戏元素。

范登堡将他的数学课变成了一个有趣的互动场所，学生们通过玩大富翁来学习。当大富翁学院于 2007 年开始时，只有十名范登堡的学生在加利福尼亚标准化数学测试中被评为高级。到 2010 年，他使用大富翁作为主要教学工具，将这一数字增加到了 37 人。

可汗学院

在网络上使用游戏化的另一个领先组织是可汗学院（www.khanacademy.org/）。这是一个致力于改变全世界教育的非营利组织。

他们的超过 100 个自主学习练习、1800 个课程和 2100 个视频对于任何访问他们网站的人都是免费的。尽管他们的大部分教学材料都是视频为基础的，但网站上也大量使用了游戏元素。它为学习者提供挑战。它根据学生回答问题的正确性和速度来奖励学生。该网站量化了学习进度，并在学生每次登录网站时与学生分享反馈。

根据可汗学院总裁沙坦努·辛哈的说法，“我们当前的教育体系拥有一个设计不佳的激励系统。它对大多数人来说并不起作用。”

Spongelab

在学习环境中还有几种其他的游戏化应用。加拿大游戏开发商 Spongelab 创建了视频游戏《生物学史》，在整个加拿大用于教授生物学。用户通过玩不同的生物学相关游戏来获得徽章。

该网站通过为加入网站的学生提供初始的欢迎徽章来迅速吸引学生。学生可以使用在网站在线市场积累的积分和学分来购买高级内容。Spongelab 甚至已经引入了基于现金的奖励，用于参与他们网站上的某些挑战www.spongelab.com/。

Youtopia

Youtopia 允许教师将游戏元素应用到他们的学习环境中。因为教师将这个网站（home.youtopia.com/）作为他们课堂的延伸，设计师们将其称为混合学习平台。这个在线平台允许教师和在家自学的家长将游戏元素，如积分、徽章和排行榜，插入到他们的课堂中。学生可以赚取积分和徽章，然后在教师的 Youtopia 商店中兑换。朋友、家人和其他 Youtopians 可以看到学生的成就和徽章。教师有能力为他们的班级和学校创建排行榜。他们允许教师通过将积分、徽章和成就作为班级和学校来实现团队概念。这使得利用基于班级和学校的竞争成为可能。

Youtopians 可以建立一个 Youtopia 简历，许多学生可以用它来建立他们申请第一份工作经验时的初始简历。教师能够快速登录并查看他们的学生表现。以下是 Youtopia 成绩单的示例截图：

Youtopia 不仅仅局限于学校相关的活动。学生们也可以在网站上记录志愿服务小时和课外活动。这记录了他们软技能的发展以及具体技能，都在同一个地方。这使得学生的能力和潜力能够更真实地展现出来。

Quest2Learn

Quest2Learn 是位于曼哈顿的一所学校，是教育部、公共教育新视野和游戏研究所的合作项目。他们实际上创建了一所课程完全基于游戏机制的学校。

Quest 学生按照一种游戏的方式完成课程。学生不是按年级水平前进，而是按照由一系列任务组成的十周任务前进。在任务结束时，学生升级到 Boss-Level（挑战）。学生在这个挑战级别停留 2 周，老师们根据他们在任务中学到的技能给他们分配一个复杂的问题来解决。该领域的专家评判挑战的结果。学生需要通过创造结果来展示他们学到的东西，而不仅仅是在测试中回答问题。

一个名为“幽灵对决”的任务挑战了学校的七年级学生去思考不同的观点。学生们要学习人们如何将各种经历带到一个事件中。一群虚构的来自不同祖先和背景的幽灵对美国殖民地建立相关事件的不同观点进行争论。幽灵们为了对不同事件的解释而争斗。在任务的过程中，学生们深入研究原始文件，以揭示支持有争议事件不同版本的证据。

Quest 学生仍然必须满足与纽约公立教育学生相同的标准。然而，教师还要根据一组核心能力来评估他们，如同理解和合作。到目前为止，测试结果显示，Quest 学生的标准化测试成绩略高于同一人口统计学的其他学生。此外，该学校还赢得了纽约市数学奥林匹克竞赛。

他们甚至使用谷歌地球学习地理知识。他们的一个关键优势是搭建基于问题的学习，根据罗格斯大学的研究，这种学习方式被证明可以提高学术技能和动力。我们希望所有学校再次变得有趣。这是教育中游戏化运动的核心。(q2l.org/)

Classcraft 世界

Classcraft 的世界是一个增强现实的基于计算机的课堂游戏。有趣的是，它并不是由公立教育系统资助的，而是由 Kickstarter 资助的。学生们玩这个游戏来获得真正的力量，并将课堂变成一次冒险。玩家们打败怪物（家庭作业）和 boss（考试）。学生们获得经验点（XP）、生命值（HP）、行动点（AP）和能量点（PP），如下面的屏幕截图所示：

当玩家完成某些任务时，他会获得经验点。这些任务的例子是：

• 在课堂笔记中找到错误

• 每次考试成绩超过 70％的得分

• 在课堂上给出正确的答案

• 帮助另一个学生完成他的课业

• 利用自己的力量帮助另一个玩家

• 在课堂上积极努力

游戏主（老师）将学生分成八人小组。他们加入三个班级中的一个：牧师，法师或战士。老师是游戏主。学生在课堂上宣布他们想要承担的任务，游戏主（老师）将它们记录在游戏系统中。(worldofclasscraft.com/en/)

大学中的游戏化

大学比 K-12、小学和中学教育机构更多地使用游戏机制。许多教授对教学过程有更多的控制。例如，卡尔顿大学的肖恩·格雷厄姆教授在“历史学家的技艺课”（历史 2809 www.playthepast.org/?p=848）中设置了一个复杂的成就系统。这个系统是自愿的，这正是学生们喜欢的原因。他们不是被迫参与，这让它感觉更像一个游戏。

在传统的大学课程中，你的成绩主要是基于你在几次考试中的得分。学生从 100％的成绩开始，然后在整个学期失去分数，直到他/她最终确定了一个最终成绩。格雷厄姆建立了一个系统，学生可以通过不同类型的成就来赚取积分。根据格雷厄姆的说法，“我希望学生有更多的机会练习作为历史学家的技艺，超越课堂上的正式评估。”这些成就范围从考试成绩到课堂参与。学生可以获得不同的成就点，比如进行外部研究，拜访教授。一些游戏挑战包括抄写古代纸草的行数，学习嵌入计算机代码的修辞，完成关于逻辑谬误的教程，学习一些拉丁语，并参与在线众包历史项目。学生的成绩是基于他/她的成就水平，而不仅仅是他/她的考试成绩。更重要的是，这个系统是自愿的，所以一个学生通往 A 级成绩的道路可能与另一个学生通往相同成绩的道路非常不同。尽管是自愿的，格雷厄姆看到大约 40％的参与率，所有学生完成了超过十项成就，以 A 或 B 的成绩完成了课程。

学生在学习过程中有一种自主感，研究表明这是内在（自发产生的）动机的主要组成部分。格雷厄姆教授证明了当有一定程度的自主性、挑战（掌握）和参与的背景（目的）时，参与度会大大提高。

坦普尔大学福克斯商学院助理教授史蒂文·L·约翰逊教授通过在他的 MIS3538 课程社交媒体创新中添加他所称的“任务”，引入了游戏化。约翰逊的目标是通过一系列逐渐变得更加困难的必修和自愿活动来鼓励自主学习。

他使用了基本的现成工具来实施他的计划。他使用了 WordPress 成就插件和 Google 表单。学生们赚取了积分和徽章。班级有一个排行榜，约翰逊每周为达到游戏下一个级别的学生进行表彰。

约翰逊设置了这样一个系统，学生们在他们的前三篇帖子和预设的评论水平（例如，第 1、5、10、20 等，一直到第 100 个）中赚取积分和徽章。他甚至为学生留下了一些隐藏的成就，这在他们达到时增加了一些惊喜。

学生们发现竞争环境既具有挑战性又有趣。有趣的是，约翰逊发现在游戏中表现良好的学生和排行榜底部的学生之间的乐趣和参与度并没有什么不同。似乎无论学生在班级中的个人进步如何，乐趣和参与度都是平等分配的。最终，他能够创造出大多数老师都希望创造的东西——一个令人兴奋和引人入胜的学习体验，学生可以利用并有能力这样做。

教育中的游戏化的未来

游戏和体育总的来说，教会了我们宝贵的软技能。例如，它们教会了我们团队合作、沟通、委派和协作。今天学校中的大部分学习都集中在结晶化的学习目标上。结晶化学习包括事实、数字、公式等。教育中游戏化的真正未被利用的好处在于流体智力领域。流体智力更多地涉及问题解决和情商。

教育系统的主要目的是为未来做准备。我们当前的教育系统正在为一个已经不存在的现实做准备。它试图在游戏擅长的领域赶上。

已经有超过 50 年的研究表明，游戏在某些领域增强了学习体验。不幸的是，这些领域并不是我们传统上衡量的领域。由于我们在成绩单上不衡量沟通能力、情绪控制和领导能力等领域，我们没有过多关注确保学生学会这些技能。然而，这些正是我们发现在社会中最重要的技能。

游戏独特地展示了这些类型的技能。它们也是展示学习者为什么某种行为或行为是不正确的很好的工具。例如，当玩家在视频游戏中犯了一个错误时，他/她会失去一个回合或失去一个角色。正是通过安全地失败，我们最终学会了。游戏允许安全失败。传统学校环境中的大多数课程只有在不可逆的失败之后才能学到，比如考试失败。

游戏通常会包含失败。当我们考虑视频游戏时，通常认为每个玩家都有一定数量的玩家可以尝试。如果犯了一个错误，玩家会在游戏中被摧毁，但通常会有另一个机会用另一个游戏代币再次尝试。

这种即时反馈在学习过程中非常重要。学习者需要一个让他们知道自己是否在进步的系统。不幸的是，通过我们传统的教育系统，学习者需要等待长达 12 年的时间才能知道他们是否真正学会了成为一个有生产力的公民所需的知识。这种长时间的延迟导致了反馈循环失败，无法及时给学习者提供充分的反馈。

另一方面，游戏可以提供即时的反馈和纠正。这为学生、家长和教师提供了他们需要的信息，以确保学生正常学习。

课堂中的游戏化

尽管人们对课堂中的游戏化充满了兴奋，但也有一些怀疑者。首要的问题是教育中的游戏化有多大的可扩展性，无论是在线还是不在线。一些成功的例子并不足以彻底改变我们整个教育系统。

可以肯定的是，在教育环境中，游戏化并不总是奏效。事实上，根据 2013 年 Gartner 的一份报告，超过 80%的游戏化项目将无法实现其目标。当然，他们指的是特定的游戏化项目，但其中许多将与教育相关。

根据 Gartner 的说法，大多数失败是由于：

• 糟糕的设计

• 缺乏规划和策略

• 糟糕的流程

• 不切实际的期望

即使是格雷厄姆教授，他试图在课堂上模拟游戏《文明》，也承认这是一个令人沮丧的失败。他将失败归因于游戏机制不是自愿的。在这种情况下，他要求所有学生参与游戏，这似乎影响了学生享受课程的能力。然而，在大多数学校中，这将是一个真正的问题。教育委员会的整个目的是制定标准并决定学生需要什么。这与给予学生在过程中一定程度的自主权的概念完全矛盾。

在尝试在教育环境中应用游戏化之前，另一个基本问题是，“学校应该是有趣的吗？”许多教育倡导者认为，给学生一个愉快的体验并不是学校的目标，获得技能是成为有生产力公民所必需的。

从我的角度来看，真正的问题是：

• 未来成为有生产力公民所必需的技能是什么？

• 游戏机制能被用来教授那些成为有生产力公民所必需的技能吗？

• 学生是否被激励和奖励来学习这些成为有生产力公民所必需的技能？

支持教育体验游戏化的人认为，游戏和游戏元素并不是教师的替代品。良好的游戏设计与充满激情的教师共同促成了充满活力的学习环境。此外，传统的教育体系已经被证明在传授批判性的读写能力方面非常有效。然而，在教授思维技能、软技能和体验式学习方面做得很差。似乎，游戏化教育的角色并不是取代或打破。它的角色更多地是增强和延伸当前的过程。

将学习环境变成游戏的成功或失败将归结为良好的游戏化设计。我们看到许多网站添加积分、徽章和排行榜（PBLs）并称其为游戏化。良好的设计意味着一个框架和一个结构。框架导致明确的、可衡量的目标。设计框架包括对受众的清晰理解以及他们做事情的动机。它提供了一个遵循的过程。当这些事情发生在学习环境中时，学生将会有动力去学习。在那一刻，当有一个清晰可理解的奖励并且它是在适当的背景下时，就会有动力。这些时刻成为学习的肥沃机会。

当我们正确地开发学习环境时，学生甚至不应该意识到他们正在学习。他们应该只是参与游戏并享受乐趣。学习是那个环境的副产品。

在学校玩得开心吗？

传统上，当我们想到学校时，会想到很多词，但有趣不是其中之一。事实上，迄今为止，学校惩罚学习者做游戏认为是正常的事情。例如，学习者因未能跟上规定的学习进度而受到惩罚。这种学习压力是适得其反的。压力使过程变得不愉快。一个经常使用的游戏元素是进步的概念。当学生以自己的步伐学习和进步时，他们会更有乐趣。

在一些游戏化圈子中，比如教育游戏化，F-词（乐趣）是不受欢迎的。我们倾向于回避主要的游戏元素，即乐趣，而是努力追求参与和动机。参与和动机确实是一个良好的游戏化应用的结果，但它们并不是乐趣的替代品；相反，它们是设计师针对的乐趣体验的结果。

然而，我们必须记住，乐趣并不是一个“一刀切”的命题。对一个人来说有趣的事情对另一个人来说可能并不有趣。这是试图将课堂设置游戏化的批评之一。一组游戏元素对一个学生来说可能很有趣，但对另一个学生来说却不会有趣。

游戏化的实施者必须非常清楚他们的受众（玩家）以及他们想要通过他们的系统实现的目标行为。

总结

到目前为止，我们已经看了一些成功将教育过程游戏化的教育机构。在下一章中，您将学习如何通过理解游戏化设计框架来使您的过程游戏化。

第二章：框架

现在我们已经看到了游戏化在现实世界中的一些用途，让我们更仔细地看看我们将如何创建我们的游戏化电子学习系统。

正如前面提到的，大多数游戏化应用都会失败。这不是因为游戏化不起作用，而是因为我们应用不当。我们希望通过遵循开发系统的过程和框架来避免这种情况。在本章中，我们将概述这个框架，并开始为我们的系统建立一些结构。

我们将遵循一个由六个组成部分组成的游戏化设计框架。它们是：

• 业务目标

• 目标行为

• 玩家

• 活动循环

• 有趣

• 工具

在接下来的几页中，我们将更仔细地研究每个部分，并开始为我们的游戏化电子学习网站增加一些内容。

我们将以高层次的模拟图结束本章，这将使我们更容易地进入细节并构建我们的应用程序。

业务目标

在我们开始任何旅程之前，我们首先需要明确我们试图去哪里。这就是业务目标出现的地方。尽管游戏是有趣的，游戏化是为了在不失去业务目标的情况下产生积极情绪，但游戏化是一项严肃的业务。

组织每年在信息技术上花费数百万美元。对信息技术的持续投资预计将通过改善业务流程带来投资回报。它旨在帮助组织更顺畅、更轻松地运行。

游戏化的目的在于“改进”业务流程。组织试图尽可能改进流程本身，而技术只是促进流程。因此，游戏化努力将受到类似信息技术努力的审查和成功度量标准的影响。顾客、员工或利益相关者对组织提供的产品更有乐趣这一事实是不够的。它需要达到一个业务目标。

定义业务目标的起点是组织希望改进的业务流程。

在我们的情况下，我们计划改进的过程是电子学习。我们正在研究 K-12 年龄段的人学习“思考”的过程。那个过程现在是什么样子？

图片来源：http://www.moddb.com/groups/critical-thinkers-of-moddb/images/critical-thinking-skills-explained

在一个完整的电子学习情境中，我们将尽可能地使这个过程游戏化。对于我们的目的，我们将专注于谈判和合作领域。根据批判性思维过程的谈判和合作阶段，学习者考虑不同的观点并与他人进行讨论。

这给了我们一个清晰的目标图景。它们可能是：

• 与他人讨论增加参与度

• 增加对不同观点的考虑程度

请注意，这些目标是可衡量的。随着时间的推移，我们将能够测试我们正在寻找的增加/改进是否真的发生了。

有了一组可衡量的目标，我们可以把注意力转向下一步，即我们的游戏化设计框架中的目标行为。

目标行为

现在我们清楚了我们的系统想要实现什么，我们将专注于我们希望激励的行为：我们的目标行为。

关于游戏化努力的一个重要问题是它是否真的能引起行为改变。员工、客户和利益相关者在游戏结束后是否会简单地回到他们习惯的做事方式？他们会想出一种“作弊”系统的方法吗？

以系统化的方式实现长期组织目标的唯一途径是，应用不仅仅引起瞬间的改变，而且在长期内产生持久的改变。许多游戏化应用在长期行为改变方面失败了，原因在于此。

心理学家长期以来一直研究行为变化生命周期。研究表明，人们在改变行为时经历五个不同的阶段。每个阶段都提出了一系列不同的挑战。

行为生命周期的五个阶段如下：

• 意识：在一个人采取任何行动改变行为之前，他/她必须首先意识到他们当前的行为以及它可能需要改变。

• 认同：在一个人意识到他们需要改变之后，他们必须同意他们实际上需要改变并做出必要的承诺来实现这一点。

• 学习：但实际上一个人需要做什么来改变呢？不能假设他/她知道如何改变。他们必须学习新的行为。

• 采用：现在他/她已经学会了必要的技能，他们需要实际实施它们。他们需要采取新的行动。

• 维持：最终，采用新行为后，只有通过不断的实践才能使其成为持久的改变。

图片来源：http://www.accenture.com/us-en/blogs/technology-labs-blog/archive/2012/03/28/gamification-and-the-behavior-change-lifecycle.aspx）

我们如何利用这一理解来建立我们的目标行为？请记住，我们的目标是通过讨论增加互动并增加对其他观点的考虑。根据我们对围绕我们目标的行为变化的理解，我们需要我们的用户：

• 意识到他们与其他用户的讨论频率

• 意识到其他观点的存在

• 承诺与其他用户进行更多的讨论

• 承诺考虑其他用户的观点

• 学习如何与其他用户进行更多的讨论

• 了解其他用户的观点

• 与其他用户进行更多的讨论

• 实际考虑其他用户的观点

• 继续保持与其他用户的讨论一贯的频率

• 继续考虑其他用户的观点

这概述了用户需要执行的活动列表，以便我们的系统满足我们的目标。当然，我们的一些目标行为将是明确的。在其他情况下，我们需要一些创造力来促使用户采取这些行动。

那么，我们可以让用户采取哪些可能的行动来推动他们沿着行为变化生命周期前进呢？

• 检查他们的讨论帖数

• 审查不同观点部分

• 设定特定时间段的目标讨论数量

• 设定一个目标数量的不同观点来审查

• 观看关于如何使用讨论区的视频（或一些指导材料）

• 观看关于观看其他观点价值的视频（或一些指导材料）

• 参与讨论小组

• 阅读其他用户的讨论帖子

• 随着时间的推移参与讨论小组

• 随着时间的推移阅读其他用户的观点

其中一些目标行为相对容易实施。其他则需要更多的思考。更重要的是，我们现在已经确定了我们希望用户采取的目标行为。这将指导我们其余的发展工作。

玩家

尽管最近几节都是关于严肃的事情，比如目标和目标行为，但我们仍然把游戏化作为焦点。因此，从这一点开始，我们将把我们的用户称为玩家。我们必须记住，尽管我们已经定义了我们希望玩家采取的行动，但激励他们采取这些行动的策略因玩家而异。游戏化绝对不是一刀切的过程。我们需要从玩家的角度看待我们的每个目标行为。我们必须考虑他们的动机，除非我们的机制基本上是试错。我们需要一种更有结构的方法。

根据巴特尔的玩家动机理论，任何游戏系统的玩家都属于以下四类之一：

• 杀手：这些人受到参与游戏场景的主要目的是通过“对其他玩家采取行动”来赢得游戏的动机驱使。这可能包括杀死他们，在游戏中击败其他玩家直接竞争。

• 成就者：另一方面，这些人受到对抗系统本身以取胜的明确行动的动机驱使。他们的动机不是打败对手，而是通过取得成就来取胜。

• 社交者：这些人参与游戏有非常不同的动机。他们更多地受到与其他玩家互动和交流的动机驱使。

• 探险家：像社交者一样，探险者喜欢互动和交流，但与其他玩家的互动不如与系统本身的互动。

以下图表概述了每种玩家动机类型以及什么游戏机制可能最能保持他们的参与度。

图片来源：http://frankcaron.com/Flogger/?p=1732

在定义我们的活动循环时，我们需要确保包括每种类型的玩家及其动机。

活动循环

游戏化系统，就像其他系统一样，只是一系列行动。玩家对系统进行操作，系统做出响应。我们将用户与系统互动的方式称为活动循环。我们将讨论两种类型的活动循环，参与循环和进度循环，以描述我们的玩家互动。

参与循环描述了玩家如何与系统互动。它们概述了玩家做什么以及系统如何做出响应。根据他们的动机，玩家的活动会有所不同，因此我们还必须考虑玩家为什么采取他们正在采取的行动。

进度循环描述了玩家如何与整个系统互动。它概述了玩家如何通过游戏本身取得进展。而参与循环讨论了玩家在详细层面上做什么，进度循环概述了玩家在系统中的移动。

例如，当一个人开车时，他/她几乎不断地与汽车进行互动。这种互动是一组参与循环。与此同时，汽车正在前往某个地方。汽车的目的地描述了它的进度循环。

活动循环往往遵循动机、行动、反馈的模式。

注

有关更多详细信息，请参见附录，表格。

玩家受到足够的动机来采取行动。当玩家采取行动并从系统中获得反馈时，希望反馈能够足够激励玩家采取另一个行动。他们采取这个行动并获得更多的反馈。在理想的世界中，这个循环将无限期地继续下去，玩家永远不会停止玩我们的游戏化系统。我们的目标是尽可能接近这种持续的活动循环。

进度循环

在过去的几页中，我们已经看到了玩家在我们的参与循环中与系统进行的详细互动。现在是时候把注意力转向另一种类型的活动循环，即进展循环。进展循环从宏观角度看待系统。它描述了玩家在系统中的旅程。当我们考虑进展循环时，通常会考虑级别、徽章和/或模式。我们回答诸如：你去过哪里，你现在在哪里，你将去哪里等问题。所有这些都可以总结为对玩家掌握水平的编码。

在我们的应用中，我们将从新手、专家和大师的角度来看待旅程。

加入游戏后，玩家将从新手级别开始。

在新手级别，我们将专注于：

• 欢迎

• 入职和让用户适应使用系统

• 可实现的目标

在欢迎阶段，我们将简单地向用户介绍游戏，并鼓励他/她尝试。在入职时，我们需要尽可能简化流程，并尽快给予积极的反馈。一旦用户上手，我们将概述参与并开始旅程的最简单方式。

在专家级别，玩家经常参与游戏。然而，其他玩家可能不认为这个玩家是游戏中的领导者。我们在这个级别的目标是逐渐提出更困难的挑战。当玩家遇到看起来太困难的挑战时，我们可以在途中包括一些意外的替代方案，以保持他们的动力，直到他们突破专家级别达到大师级别。

游戏和其他玩家会认可大师。他们应该在游戏中显著展示，并可能倾向于在新手和专家级别帮助其他玩家。这些选项应该在游戏的后期阶段可用。

乐趣

在我们确定了目标、定义了目标行为、确定了玩家范围并规划了系统活动之后，我们最终可以考虑许多新手游戏设计师开始的系统领域：乐趣。其他游戏化从业者会避免或至少掩饰游戏化设计过程中的乐趣方面。重要的是我们不要过分或不足地强调过程中的乐趣。例如，厨师们用香料烹饪整顿饭菜，但他们不会把所有香料都加在一起。他们在烹饪中适量使用香料，为菜肴增添风味。把乐趣看作是我们可以应用于活动循环的一系列香料。

马克·勒布朗将乐趣分为八个不同的类别。我们将尝试在适当的情况下适量地添加每种乐趣，以达到期望的乐趣程度。请记住，一个玩家认为有趣的体验对另一个玩家来说可能并不相同。在这种情况下，一刀切绝对行不通。

• 感知：愉快的体验

• 叙事：一个展开的故事

• 挑战：一个障碍课程

• 幻想：虚构

• 团体：社交框架

• 发现：探索未知领域

• 表达：玩家获得了一个平台

• 提交：无意识的活动

那么我们如何在系统中适度引入上述乐趣维度？以下表格为我们概述了选项：

采取的行动	乐趣维度
检查他们的讨论帖子数量	挑战
审查不同观点部分	发现
设定特定时间段内的讨论数量目标	挑战
设定“不同观点”的目标数量进行审查	挑战
观看关于如何使用讨论区的视频（或一些指导材料）	挑战
观看关于观看其他观点价值的视频（或一些指导材料）	挑战
参与讨论小组	团体表达
阅读其他用户的讨论帖子	发现
随着时间的推移参与讨论组	FellowshipExpression
随着时间的推移阅读其他用户的观点	发现

工具

我们终于到了可以开始实施的阶段。在这一点上，我们可以看看各种游戏元素（工具）来实施我们的游戏化系统。如果我们一直遵循这个框架，那么机制和元素应该变得明显。我们不是为了而简单地添加排行榜或积分系统。我们可以将我们使用的所有工具都与我们之前的工作联系起来。这将为我们的应用程序产生一个游戏化设计矩阵。但在我们继续之前，让我们停下来看看我们手头的一些工具。

我们有无数的工具、机制和策略可供我们使用。每天都有新的工具被设计出来。以下是我们在设计游戏化系统时会遇到的一些最常见的机制：

• 成就：这些是玩家达到的具体目标。

• 头像：这些是玩家在游戏中的角色、角色或角色的视觉表示。

• 徽章：这些是用来认可特定成就的视觉元素。它们让玩家感到自豪，可以向他人展示。

• Boss 战：这是游戏情景中异常困难的挑战，通常在关卡结束时展示足够的技能水平以晋升到下一个级别。

• 排行榜：这些公开显示玩家的排名。它们认可像徽章一样的成就，但是所有人都可以看到。我们几乎每天都能看到这一点，无论是从体育团队排名到销售代表的月度成绩。

• 积分：这些相当直接。玩家在系统中累积积分并采取各种行动。

• 任务/任务：这些是游戏情景中的专门挑战，具有故事和目标的特点。

• 奖励：这是用来外部激励用户采取特定行动的任何东西。

• 团队：这是一组作为单个单位玩游戏的玩家。

• 虚拟资产：这些是游戏中具有一定价值的元素，可以被获取或用来获取其他资产，无论是有形的还是虚拟的。

现在是时候转变，摘下我们的游戏化设计帽子，戴上我们的开发者帽子。让我们从开发一些初步的草图开始，以展示我们最终网站可能会是什么样子，使用我们之前概述的设计。许多人使用诸如 Photoshop 或 Gimp 之类的图形工具来开发草图。在这个阶段，我们的草图将不那么详细，只是使用铅笔草图或诸如 Balsamiq 之类的草图工具。

注

有关此更多详细信息，请参见附录，表格。

登录屏幕

这是我们应用程序中基本登录屏幕的草图。玩家习惯于基本的登录和密码情景，我们在这里提供了。

帐户创建屏幕

首次玩家需要首先创建一个帐户。

这是我们注册页面的草图。

主玩家屏幕

这捕捉了当玩家完全参与系统时我们系统的主要元素。

主玩家发布回应屏幕

我们已经通过草图概述了我们的游戏化系统的关键功能。草图是一种视觉上向我们的团队传达我们正在构建的东西以及我们为什么在构建它的方式。视觉草图也给了我们一个机会，在设计的早期阶段发现问题。

总结

大多数游戏化应用程序将因为设计不当的系统而失败。因此，我们引入了一个游戏化设计框架来指导我们的开发过程。我们知道，如果我们：

• 明确业务目标

• 建立目标行为

• 了解我们的玩家

• 通过活动循环工作

• 记住乐趣

• 优化工具

第三章：目标和目标行为

在上一章中，我们概述了游戏化设计过程，从定义我们的业务目标和目标行为开始。

我们开发游戏化系统的目标是引起行为改变。在我们的用户拥有我们的游戏化系统之前，他们以某种方式行为。在我们实施我们的系统之后，我们希望他们的行为有所不同。我们希望他们采取符合我们业务目标的行为。因此，在本章中，我们将更仔细地看看在幕后真正需要发生什么，以使我们的用户（玩家）采取我们需要他们采取的行动。

我们在上一章中发现了我们希望玩家采取的 10 个行动：

• 检查他们的讨论帖数

• 审查不同观点部分

• 设定特定时间段的讨论数量目标

• 设定要审查的不同观点数量的目标

• 观看关于如何使用讨论区的视频（或一些指导材料）

• 观看关于查看其他观点价值的视频（或一些指导材料）

• 参与讨论小组

• 阅读其他用户的讨论帖子

• 随着时间的推移参与讨论小组

• 随着时间的推移阅读其他用户的观点

我们假设如果玩家定期并一贯地采取这 10 个行动，我们可以实现我们的业务目标：

• 增加与他人讨论的参与度

• 增加对不同观点的考虑程度

我们希望如果我们实现这两个目标，我们可以实现我们的教学使命，并帮助我们的玩家通过与我们的游戏化系统互动学习思维技能。

在设计我们的系统时，我们需要牢记行为实际上不仅仅是一个行动，而是我们希望玩家采取的一系列行动。我们将在本章后面更详细地绘制我们的行为链（我们希望用户采取的行动）。理想情况下，我们可以在玩家中创建一种行为循环（即习惯）。然而，习惯并非偶然发生；我们必须设计我们的系统来鼓励我们希望成为习惯的行为。

重要的是，我们找到最小的行为或行动，并且如果可能，将该行为附加到现有行为上。

例如，大多数人习惯于早上第一件事就是查看他们的电子邮件。这是否是一个好习惯还是坏习惯有争议，但无论如何，这是我们许多玩家的习惯。我们希望我们的玩家阅读其他玩家的帖子作为目标行为。他们可以采取的一个小行为是简单地查看过去 24 小时内发帖的人。我们可以将这与他们检查电子邮件的现有习惯联系起来，通过电子邮件每天发送给他们一个简单的仪表板。当然，他们可以关闭此功能，让他们掌控。玩家有能力直接从此仪表板阅读帖子并回复帖子。

Fogg 行为模型

这是一个我们需要问并最终回答的基本问题。斯坦福大学说服技术实验室的创始人和主任 BJ Fogg 教授在Fogg 行为模型（FBM）中出色地描述了为什么人们采取特定行动。这是设计师可以使用的工具，以了解用户为什么采取或不采取特定行动或行为。

根据 FBM，如果您的用户没有采取设计的行动，那是因为行为方程中缺少了某些东西。FBM 行为方程式陈述行为=动机+能力+触发器。

当有足够的动机水平，加上适当的能力水平和适当的触发器时，行为每次都会发生。这可以从以下图表中看出：

图片来源：BJ Fogg 的行为模型（www.behaviormodel.org/）

在这两个概念——动机和能力触发器——融合的时候，行为发生了。

动机

对一个人来说真正激励的东西可能对另一个人来说并不激励，因此需要清楚了解你的玩家和激励类型。但根据 Fogg 教授的说法，动机由三个组成部分构成。动机的三个子组成部分是：

• 感觉：在愉悦到痛苦的连续体上进行测量

• 预期：在希望到恐惧的连续体上进行测量

• 社会凝聚力：在接受到拒绝的连续体上进行测量

对于每个人来说，他们采取特定行动的动机程度可以沿着这三个连续体进行测量，从而得出他们采取该行动的动机程度。因此，我们的任务是尽可能使我们的目标行为愉快，激发尽可能多的希望，并使它们尽可能受到社会的接受。我们必须牢记，这些都是根据个体不断波动的变量。

能力

假设用户有足够的动机，他/她还必须有能力采取所需的行动。许多应用在涉及用户能力方面非常幼稚，他们期望用户做的事情。Fogg 的模型表明，仅仅有动机做某事是不够的，还必须具备能力。动机也必须存在。

Fogg 在感知的简单性的背景下讨论了能力。如果用户认为某个行动很简单，那么他/她就更有能力采取这个行动。从用户的角度来看，任务被认为越简单，它在能力连续体上的位置就越高。

Fogg 进一步提出，简单性是资源稀缺的函数。用户拥有的资源越多，任务就越简单。在试图确定用户感知简单性时要关注的六个关键资源是：

• 金钱：任务需要的金钱相对于用户拥有的金钱数量

• 时间：任务需要的时间相对于用户拥有的时间

• 体力付出：任务需要的体力付出相对于用户的身体能力

• 脑力消耗：用户完成任务时需要思考的程度相对于用户当时的智力水平

• 社会偏差：采取行动会让用户脱离社会规范的程度

• 非例行：用户需要偏离正常例行程序的程度

用户认为自己有足够的资源来采取行动的程度描述了任务对他/她来说有多简单，以及他/她有多有能力采取行动。

请注意，我们指的是感知的简单性。实际上，当用户耗尽上述资源时，简单性就会结束。当用户耗尽金钱、时间、身体能力等资源时，任务从定义上变得困难。然而，我们指的是感知的简单性。感知的简单性是指用户认为任务应该需要的资源量与实际需要的资源量之间的比较。

例如，如果我们的用户认为登录、阅读帖子和回复帖子需要 10 分钟，但实际上只用了 4 分钟，他们会认为这个任务很简单。这是理想的情况。理想情况下，我们希望我们的目标行为比我们的玩家最初预期的要简单（即需要更少的资源）。简而言之，我们将确保提高用户的资源期望，然后努力使我们的目标行为尽可能轻松。

触发器

假设我们现在有一个动机足够的用户，有能力采取我们目标行为中定义的行动。换句话说，他们已经超过了我们目标行为的激活门槛。但出于某种原因，我们的玩家并没有像我们期望的那样行为。根据 FBM，必须有一个适当的触发器让用户意识到采取行动以及为什么他/她应该采取行动。所有这些需要同时发生。触发器有三种形式，取决于用户及其相对于激活门槛的位置：

• 促进者：当动机水平高而能力低时，这种形式最有效。这种触发器试图让已经有动机的用户更容易地采取目标行为。

• 信号：当动机水平和完成任务的能力都很高时，这种形式最有效。这种触发器仅作为提醒采取行动（例如，闹钟）。

• 火花：当能力很高但动机水平不太高时，这种形式最有效。火花暂时提高用户的动机水平。就像他/她着火了一样。

在试图提高玩家采取我们期望的行为的机会时，我们将努力确保必要的触发器存在。然后，我们将努力简化行为并增加用户采取行动的动机，以降低激活门槛。我们将先做简单的事情，然后再解决更难的任务。提出行动触发比简化任务更容易。假设您清楚地呈现了触发器，并简化了任务，我们可以将注意力转向激励玩家采取行动。

我们应用中的触发器

让我们将注意力转向我们 VUPoint 电子学习应用的一些潜在触发器。记住，时机是有效触发的关键。我们需要让玩家意识到他们何时超过了激活门槛。这是当他们的动机和能力水平足够高以使触发器产生影响时。

我们已经提到的一个潜在触发器是每日仪表板电子邮件。另一个可能是在某人连续五天未登录时发送一封电子邮件提醒。我们甚至可以考虑在周末发送这个触发器，假设玩家的时间资源和大脑资源可能更高。（这只是一个假设。）

我们可以安全地假设每次登录时玩家都有足够的动机，因为他们会努力登录。在登录时，给出相同的仪表板信号触发是有意义的。玩家登录并阅读其他玩家的一些帖子后，提供促进者触发可能是有意义的。我们提供一个快速回复按钮给一个随机帖子。我们需要更多地考虑如何选择那个随机的快速帖子。

但是对于那些甚至不再登录的用户呢？我们将假设他们的动机相对较低，但采取行动的能力是可用的。我们可能会发送一个火花触发的电子邮件。在这封电子邮件中，目标是激励并激发玩家采取行动。我们可以快速介绍网站上正在进行的活动以及他们错过了多少。然后，我们可以给他们提供快速回复的选项，就像我们与促进者一样。希望激励的话语/信息足以提高玩家的动机水平。然后，我们可以通过给他/她一个快速简单的任务来促进行动。

增加我们玩家的能力

假设我们已经合理地放置了所有触发器，而没有关闭我们的玩家，我们可以专注于玩家的能力。请记住，这取决于从玩家的角度来看采取期望行为的简单程度。

我们可以立即采取的一步是尽可能为用户自动完成尽可能多的活动。例如，登录应用程序和接收电子邮件触发器应该是默认的。当然，用户可以选择关闭这些默认设置。我们希望在不超过两次鼠标点击的情况下完成所有行为，并在可能的情况下只需一次点击。在测试阶段，我们可以识别需要超过两分钟的任务，并尝试减少执行它们所需的时间。

我们可能可以做一些事情来减少进行我们的目标行为所需的大脑循环（大脑能量）。首先想到的是，让玩家很容易识别相反和相似的观点。我们可以通过简单地根据我们认为玩家会同意或不同意该观点来对帖子进行颜色编码来解决这个问题。我们不需要在我们的预测中正确，因为我们的目标是减少玩家在决定阅读哪些帖子时的思考量。这样的预测算法超出了本书的范围，但我们可以做任何事情来减少进行我们的目标行为（即回复帖子）所需的心理能力是目标。

激励我们的玩家

到目前为止，FBM 中最难制造或控制的是动机方面。我们可以尝试通过外部奖励来产生尽可能多的动机，但有太多的心理变量需要应对，这完全超出了我们的控制范围。我们试图做的是设计用户行为。更好的是，我们希望在玩家中创建一种习惯，以采取我们期望的行动。

但是，习惯到底是什么？习惯就是当我们不做某个特定行为时所感受到的痛苦。我们如何创造一种情况，让我们的玩家如果不登录我们的应用程序就会经历负面情绪？我们如何创造一个环境，让玩家不回复其他玩家的帖子或不阅读其他玩家的帖子会让他们感到社交排斥？他/她会因为不定期使用应用程序而感到一种预期的恐惧吗？当然，我们可以单独写一本书来讨论这些概念，但这些都是我们在试图激励用户时需要解决的问题。

讲师和作家尼尔·艾尔将在玩家中建立动机和习惯称为创造欲望引擎，如下图所示：

他建议我们可以系统地创造欲望，并最终将我们的目标行为变成玩家的习惯。他的公式简单而循环。

识别内部和外部触发器

外部触发器就像我们之前讨论过的触发器一样，而内部触发器是玩家在自己的情绪中经历的触发器。例如，玩家收到一封电子邮件，这是一个外部触发器，突出了关于美国枪支暴力的帖子。如果玩家曾经是枪支暴力的受害者或以某种方式经历过，他/她可能会对这个话题产生强烈的情绪，并更倾向于回应这篇帖子（即采取我们的目标行为）。我们的外部触发器在玩家内部引发了一个内部触发器。我们需要尽可能地最大化内部触发器。我们已经在前几节中概述了一些外部触发器。我们的玩家可能会经历哪些内部触发器呢？

预期行动

因为我们的触发器引发了一个行动，我们现在的任务是尽可能简化这个行动的执行。我们已经讨论了一键式操作和尽可能自动登录来实现这些目标。

可变奖励

但是，我们应该如何回应玩家执行我们的动作呢？我们用可变的奖励来回应。我们最初的想法可能是任何奖励都足够了。但根据艾尔的说法，奖励应该是不可预测的，以创造一种期待和渴望的感觉。例如，当我们打开灯开关时，灯会亮起。这是我们期望的。假设一切正常，这是可预测和可靠的。然而，这并不会创造出一种渴望或持续打开灯开关的动力。然而，如果每次你打开开关时，不同的电器都会开启呢？在某种情况下，灯可能会亮起，在另一种情况下，电视会开启，而在另一种情况下，收音机会随机开启。现在我们创造了渴望。这是经典的玩偶匣情景，你永远不知道小丑何时会从盒子里跳出来。

我们可以通过随机弹出消息给用户，例如“干得好”，来创建一个可变的奖励。有时，当用户采取行动时，我们会表现得很热情，而其他时候则不会。我们改变执行动作的奖励，以便玩家永远不确定他们是否会收到奖励，如果他们确实收到了，他们也不知道会是什么。

研究表明，当我们期待获得奖励时，大脑会产生愉悦化学物质多巴胺。当奖励变化时，多巴胺的产生会显著增加。

在我们的情景中，有时用户会收到弹出消息以获得奖励。在其他时候，我们会给玩家建议去评论更多的帖子。

最后，我们要求玩家投入一些时间、精力或努力。请记住，此时玩家的大脑充满了多巴胺。现在我们可以要求他们对我们的游戏做出一些小的承诺。我们要求他们评价其他人的帖子，阅读其他人的帖子，甚至可能邀请一个 Facebook 朋友加入。玩家的这种小承诺为通过“Desire Engine”开启另一条道路创造了条件。

我们的开发环境

所有这些关于行为和心理的讨论可能会让我们忽视我们在这里的目标。目标是构建一个游戏化的电子学习应用程序。为此，我们需要设置我们的环境来构建我们的应用程序。

构建我们的应用程序，我们需要一些基本条件。我们需要：

• 一个 Web 服务器（Apache）

• 服务器端技术（PHP）

• 一个数据库（MySQL）

• 客户端技术（JQuery）

• 一个文本编辑器（Notepad++）

我们需要一个 Web 服务器来托管和测试我们的应用程序。我们将使用开源 Web 服务器 Apache。我们将使用Hypertext Preprocessor (PHP)，它将在 Apache Web 服务器上运行以生成我们页面的 HTML。我们将在开源数据库 MySQL 上存储和访问我们应用程序所需的数据。我们将主要使用 JavaScript 与玩家在客户端（即浏览器）进行交互。我们将主要使用 JQuery JavaScript 框架。最后，我们需要一个纯文本编辑器。有几个免费和付费版本，所以使用您最熟悉的那个。我将使用 Notepad++。

但在我们开始编码之前，我们需要设置和测试我们的环境。

安装 LAMP stack

我们将使用的 Web 开发环境通常被称为LAMP（Linux, Apache, MySQL, PHP）Stack。根据您的操作系统，有各种不同版本的 Stack。我将演示设置WAMP，即 LAMP stack 的 Windows 版本。

注意

MAC 用户请参考 MAMP（www.mamp.info）

Linux 用户请参考 XAMPP（www.apachefriends.org/en/xampp.html）

1. 让我们从www.wampserver.com/en下载 WAMP 并在本地计算机上安装。

2. 假设一切都安装正确，您将在系统托盘中看到一个WAMPSERVER图标，您可以使用启动所有服务选项实际启动 Web 服务器。当您在系统托盘中看到服务器在线消息时，您将知道您的 WAMP 服务器安装正在正确运行，如下截图所示：

3. 我们将在 WAMP 服务器安装文件夹的www目录中构建和存储我们的网站文件。

注意：

默认安装文件夹是C:\wamp。

1. 现在让我们看看您的 PHP 是否正确运行。转到您的 Web 浏览器并输入http://localhos``t/。假设没有其他 Web 服务器在运行，并且没有其他应用程序阻止端口 80，您应该会看到一个类似于以下截图的屏幕：

2. 最后，让我们测试一下 PHP 是否正确响应。在我们的文本编辑器中，我们将要求 PHP 为我们显示一些关于服务器的一般信息，带有特殊的“Hello World”消息。

3. 在您的文本编辑器中创建一个名为index.php的文件。输入以下代码。（稍后我们将更详细地讨论 PHP 的具体内容）：

<html>
<body>
<?php 
echo print "<p>Hello World... </p>";
phpinfo();
?>
<body>
</html>

结果应该如下截图所示：

故障排除 WAMP 服务器设置

如果您在运行 Apache Web 服务器时遇到问题，请执行以下一些故障排除步骤：

1. 检查当前计算机上正在监听什么。在命令提示符（cmd）中输入netstat –aon | more，如下截图所示：

2. 检查您的任务管理器以查看该进程 ID 属于哪个应用程序。以下是一个示例：

3. 简单地禁用此应用程序。如果没有此选项，例如 NT 内核的情况，或者运行在端口 80 上的系统，您将需要在 Apache 配置文件（httpd.conf）中更改端口。

4. 如果您仍然在安装过程中遇到问题，访问诸如 Stack Overflow（www.stackoverflow.com）之类的网站应该会导致一些其他可能的故障排除选项。

摘要

我们对我们提出的系统有目标和目标，总体目标是改变行为。我们特别注意确保我们的目标行为支持我们的业务目标。这使我们对我们的游戏化系统的成功和失败标准有了很好的把握。

第四章：玩家

在本章中，我们将概述我们系统/项目中的角色、用户和利益相关者（玩家）。在第二章中，框架，我们讨论了巴特尔游戏测试中概述的玩家类型（杀手、成就者、社交者和探险者）。我们需要更仔细地研究我们的用户/玩家及其动机，以便在设计我们的游戏化电子学习系统时最大程度地了解这一点。我们将在 MySQL 中完成一些初始数据库设计，以便我们有所有的技术来构建我们的系统。

Bartle 游戏心理测试

尽管它可能需要更新，但巴特尔游戏心理测试已经成为讨论游戏化系统中玩家类型的标准。巴特尔在上世纪 90 年代中期设计了这个系统/测试，当时是在视频游戏设计的背景下，并已经被移植到了游戏化领域。这个模型可能需要一些调整，但它是朝着正确方向的良好开端。

巴特尔测试是一系列设计用于评估个性类型和偏好相对于游戏情景中的互动的 30 个问题。玩家通常在一个类别中有更多的倾向。让我们快速回顾一下它们。

杀手

杀手受到对系统中其他玩家的直接游戏和影响的激励。他们渴望赢得游戏。我们将在我们的系统中支持这些玩家，并讨论以下章节中的游戏元素。

排行榜

排行榜是游戏中得分最高的领导者的显著展示图形。以下是一个例子：

为辩护和批评帖子提供奖励

由于杀手受到直接竞争的激励，我们可以通过为玩家为其他玩家的帖子辩护以及攻击（批评）玩家的帖子提供额外积分来满足这种动机。

成就者

与杀手一样，成就者希望对系统产生直接影响。然而，这种影响不需要以其他玩家为代价。玩家被驱使着赢得并实现目标，但不需要赢，因为达到目标就足够了。

我们可以通过以下游戏元素来实现这一点。

徽章

成就者受到他们的成就带来的认可的高度激励。我们可以通过排行榜在一定程度上满足这种动机。然而，排行榜将玩家置于彼此之间的竞争中，这对成就者来说并不像杀手那样有益。因此，他们需要奖杯。他们需要对他们的成就给予认可，而不是为了成就而成就。徽章使这成为可能。

徽章是玩家获得的图形图像，表示他们已经达到了一个里程碑。我们非常习惯用徽章来承认成就，从青少年侦察项目到对权威人物的认可。因此，这个概念在社会上是可以接受的。

将徽章计划纳入系统是游戏化运动的主要批评之一，因此我们需要小心地运用机制。糟糕的徽章通常会适得其反。

我们希望确保我们的徽章系统符合以下四个标准。徽章应该：

• 用令人向往的、可预测的成就来惊喜玩家：徽章通常在用于认可明确成就时效果最好。奖励本身有一定的惊喜因素。然而，它们不能太随机，以至于玩家无法将其与他们所要认可的进展或地位联系起来。另一方面，它们也不能太线性，以至于玩家对它们感到厌倦。我们的电子学习系统中的玩家将收到各种徽章，以表示他们与系统的参与程度。玩家达到一定阈值（比如 25 篇帖子）后，他们将获得参与徽章。玩家将能够在继续达到其他阈值时获得更多徽章。

• 美观性：徽章需要看起来好看，对玩家视觉上吸引力。玩家需要为徽章的外观感到自豪。

• 稀缺性：徽章系统的一个更有力的方面是稀缺性因素。如果某物“不易获得”，它往往会被认为具有更大的价值。因此，徽章应该很少发放。因此，我们将限制对任何成就发放的徽章数量为用户的预定百分比。此外，随着预定百分比的用户达到徽章，我们将提高未来徽章的门槛水平。这增加了获得这些徽章的难度水平。

• 有意义：我们需要将徽章系统与玩家会发现有意义的东西联系起来。我们不能仅仅为了发放徽章而发放。尽管对一些人来说收集徽章是一种动机，但收集的需求不应该盖过实现的需求。

一些示例徽章

级别/进度

我们已经在之前关于徽章的讨论中讨论了级别。级别是一种游戏机制，通过这种机制我们奖励并认可玩家在系统中达到一定的掌握水平。在许多情况下，达到更高的级别也会为玩家打开更多的游戏福利和功能。

我们已经讨论过给予我们的玩家批评或者捍卫帖子的能力（请参阅捍卫和批评帖子的奖励部分的截图）。然而，我们可以在玩家在系统中达到一定的参与水平之后才提供这个功能。我们可以通过积累的积分数量来衡量这种参与水平。

挑战

挑战特别吸引成就者类型的动机。挑战是玩家可以努力实现的预设目标。

在我们的系统中，我们允许玩家为自己设定目标，但我们也可以向玩家提供挑战。例如，我们可以挑战玩家在 7 天内回复一定数量的帖子。这是许多成就者会努力实现并且可以合理获得的目标。

社交者

这些玩家的动机与杀手和成就者的动机非常不同。社交者通过与其他玩家互动而受到驱动。像杀手一样，他们渴望与其他玩家互动，但他们的互动并不是具有攻击性的，而是更具合作性的。

我们将通过以下元素来支持社交者：

• 分享：我们对分享的概念非常熟悉。这是社交媒体的核心。我们将奖励玩家与他们在 Facebook 和 Twitter 上的朋友分享帖子的积分。但分享不仅限于玩家已建立的社交网络。分享的一个关键方面是与可能对分享感兴趣的其他人交友或关注。在我们的电子学习系统中，玩家将有选择关注那些他们倾向于有共同观点的其他玩家的选项。当玩家关注其他玩家或被其他玩家关注时，将奖励他们积分。

• 团队合作：团队合作考虑了队伍的积分累积。例如，玩家可以创建团队。我们将实施一个团队排行榜。而杀手和成就者会采取行动来提高他们在排行榜上的得分，社交者将确保更倾向于采取行动来提高他们团队的积分累积。作为个人，这个行动可能不是优先考虑的，但作为团队的贡献者，它是的。

探险者

通过审查探险者以及我们如何吸引这种游戏个性类型，我们完成了对我们游戏化系统潜在玩家的审视。探险者和社交者一样，寻求互动和参与，但更多的是与系统本身而不是其他玩家互动。像成就者一样，他们想要与系统互动，但不是为了实现目标。他们满足于享受游戏本身。对他们来说，旅程就是奖励。发现是他们的主要动机。

与探险者一起运作良好的游戏机制是任务（搜索）、谜题和收集。以下是我们可以在系统中实施的一些例子。

我们可以通过设置玩家随时可以参与的一系列任务来在系统中实施任务/搜索。我们可以为每次玩家查看帖子记录积分，但是每次帖子在不同类别中时，将帖子的积分值加倍。目标是创造一种冒险感。

另一个可能的情景是为创建新的讨论主题给予积分和奖励。探险者总是试图推动系统的极限。

我们的玩家

以下列表显示了各种玩家：

• 发帖者：这是一个回应另一个玩家观点的通用玩家。

• 防守者：这是支持玩家观点的发帖者。

• 评论家：这是一个不同意玩家观点的发帖者。

• 队友：这是一个与另一个玩家有团队关系的玩家。

• 新手：这是第一个在某个主题上发表观点的玩家。

• 创建者：这是一个创建讨论主题的玩家。

• 新手：这是一个有账户但没有回复或发帖的玩家。

• 老手：这是一个拥有超过 30 天和/或 30 次登录会话的玩家。

创建 MySQL 数据库

我们需要一种方式来保存关于我们的玩家和系统的所有信息。如果我们没有以合理的方式存储这些信息，玩家每次登录时都需要重新开始我们的系统。这不是一个好的系统。

在我们的环境中，我们选择使用开源数据库 MySQL。如果您在上一章中安装了 WAMP 服务器，您应该已经安装了 MySQL。在这里我们将开始使用它。

我们的 WAMP 安装包括 phpMyAdmin，如下截图所示。这是一个可以直接从 Web 浏览器创建和管理数据库的工具。

点击 WAMP 服务器菜单上的phpMyAdmin选项后，我们应该期望看到 PHP Admin 工具的主屏幕：

让我们创建主要的 Point 数据库。点击数据库菜单。将数据库命名为VuPoint，然后点击创建。您可以在左侧看到我们的数据库列表：

我们可以在PHPMyAdmin主屏幕的左侧的数据库列表中找到我们新创建的数据库：

创建 MySQL 数据库

有许多基于 GUI 的 MySQL 工具，我们可以安装以使一些数据库表的创建和存储过程的创建更简单。我们将以两者为例。选择您最熟悉的那个。前往www.mysql.com/downloads查看工具选项。

创建我们的表

数据库由由列/字段组成的表组成。在最初创建表后，我们可以添加/修改/删除列，但最好将这些类型的更改保持在最低限度，因为它们可能会严重干扰已存储在表中的数据。

这是我们系统所需的一些表：

• 玩家：这个表将保存关于系统用户的所有信息

• 玩家 ID：这是每个玩家的内部唯一标识符

• 用户名：这是玩家在系统中将被称为的名称（外部标识符）

• 密码：玩家用于登录系统的密码

• 积分：玩家当前累积的积分

• 获得徽章：玩家通过徽章获得的活动 ID

• 电子邮件地址：玩家的唯一电子邮件地址

• 登录次数：玩家登录的总次数

• 最后登录：玩家上次登录系统的日期和时间

• 当前登录：该玩家是否登录的true/false值

• 账户创建：玩家创建此账户的日期和时间

请注意，PlayerID字段是使用auto_increment创建的，并且是主键（如上所示）。请注意，AccountCreated表是一个时间戳数据类型，其默认值为current_timestamp。我们将在创建的其他表中模仿这种方法。

我们需要创建其余的表，如下所示：

• 帖子：此表将包含系统中的所有帖子

• 帖子 ID：每个帖子的内部唯一标识符

• 类型：帖子的类型（防御、批评或中立）

• 主题：此帖子相关的讨论主题的 ID

• 玩家：发帖的玩家的 ID

• 帖子：发布的消息的实际文本

• 日期时间：帖子创建的日期和时间

• 活动：此表将包含玩家可以获得积分的所有可能事项及其积分值

• 活动 ID：活动的内部唯一标识符

• 活动：活动的描述

• 值：特定活动的积分值

• 徽章：与活动相关的徽章（如果存在）。

• 主题：此表包含有关讨论主题的所有信息

• 主题 ID：主题的内部唯一标识符

• 主题：讨论主题的实际文本

• 创建者：创建主题的玩家的 ID

• 帖子数量：主题上中立帖子的总数

• 添加日期：此主题添加到系统中的日期和时间

现在我们已经有了支持 VuPoint 电子学习应用的基本表结构，让我们开始向应用程序添加一些基本代码。我们有三个代码将执行的地方。我们可以编写在客户端（浏览器）中使用 JQuery/JavaScript 运行的代码。我们可以编写在服务器上使用 PHP 运行的代码。我们可以编写在数据库中使用 MySQL 存储过程运行的代码。理论上，我们可以编写所有代码在一个地方运行，但在大多数情况下，这不仅不切实际，而且还会使我们的一些任务变得更加困难。所以问题是，“在哪里编写我们的代码最好？”以下是我们将遵循的顺序：

1. 我们将编写在数据库中添加、修改或删除数据的任务部分。

2. 我们将编写生成在服务器上运行的 HTML 的任务部分。

3. 我们将编写与玩家交互的任务部分，使用 JQuery。

那么可能使用数据库的一些操作是什么？有几种，但以下是一些起步的操作：

操作	存储过程	输入	输出
检查用户是否经过身份验证	选择玩家	用户名``电子邮件地址``密码	恰好一条玩家记录
添加新玩家	插入玩家	用户名``电子邮件地址``密码	N/A
获取玩家的积分	选择玩家积分	用户名	总积分数量
记录帖子	插入帖子	用户名``类型``主题``玩家 ID``帖子	N/A
获取特定主题的所有帖子	选择主题帖子	主题	与该主题相关的所有帖子记录
获取所有主题	选择所有主题	N/A	所有主题
获取排行榜数据	选择领导者	多少	按积分累积数量排序的前几名玩家的记录（比如前 10 到 25 名），并且这由多少限制
获取在线玩家	SelectOnlinePlayers	N/A	所有LoggedIn列值为true的玩家记录
创建新的讨论话题	InsertATopic	Topic``Player	N/A
获取热门话题	SelectHotTopics	HowMany	按帖子累积数量排序的热门话题记录（比如前 10 到 25 个），由HowMany限制
获取玩家徽章	SelectPlayerBadges	Player	玩家获得的徽章的逗号分隔列表

以下是创建这些存储过程的代码：

DELIMITER //
-- Procedure Name: InsertAPlayer
-- Procedure Purpose: Inserts a New Player into the system
CREATE PROCEDURE 'vupoint'.'InsertAPlayer'(IN _UserName varchar(20),

  _EmailAddress varchar(40),
  _Password varchar(20))
BEGIN
Insert into Player (UserName,Password,EmailAdddress) values(_UserName,_Password,_EmailAdddress);
END//

DELIMITER ;

DELIMITER //
-- Procedure Name: InsertAPost
-- Procedure Purpose: Inserts a posts into the VuPoint database
CREATE PROCEDURE 'vupoint'.'InsertAPost'(IN _UserName varchar(20),   _Type varchar(10),_Topic int,_Player int,_Post varchar(4000))
BEGIN
Insert into Posts (UserName,Type,Topic,Player,Post) values(_UserName,_Type,_Topic,_Player,_Post);
END//

DELIMITER ;

DELIMITER //
-- Procedure Name: InsertATopic
-- Procedure Purpose: Inserts a new topic into the system 
CREATE PROCEDURE 'vupoint'.'InsertATopic'(IN _Topic varchar(10), _Player int)
BEGIN
Insert into Topics (Topic,PlayerCreated) values (_Topic,_Player);
END//

DELIMITER ;

DELIMITER //
-- Procedure Name: SelectAPlayer
-- Procedure Purpose: Returns the record for a player
CREATE PROCEDURE 'vupoint'.'SelectAPlayer' (In _UserName varchar(20), 
  _EmailAddress varchar(40),
  _Password varchar(20) )
BEGIN
Select * from Player 
where (UserName=_UserName|| EmailAddress=_EmailAddress)
and Password=_Password;
END // 

DELIMITER ;

DELIMITER //
-- Procedure Name: SelectAllTopics
-- Procedure Purpose: Returns all the topics in the system
CREATE PROCEDURE 'vupoint'.'SelectAllTopics'()
BEGIN
Select * from Topics;
END//
DELIMITER ;

DELIMITER //
-- Procedure Name: SelectPlayerBadges
-- Procedure Purpose: Returns a list of the players badges
CREATE PROCEDURE 'vupoint'.'SelectPlayerBadges'(IN _UserName varchar(20),
  OUT _badges varchar(100))
BEGIN
Select BadgesEarned into _badges from Player 
where UserName=_UserName;
END//
DELIMITER ;

DELIMITER //
-- Procedure Name: SelectHotTopics
-- Procedure Purpose: Returns topics ordered by the number of posts and limited by how -- many
CREATE PROCEDURE 'vupoint'.'SelectHotTopics'(IN _HowMany int)
BEGIN
Select  * from Topics order by NumberOfPosts desc LIMIT 0,_HowMany ;
END//
DELIMITER ;

DELIMITER //
-- Procedure Name: SelectOnlinePlayers
-- Procedure Purpose: Returns a lists of players how currently logged in is true
CREATE PROCEDURE 'vupoint'.'SelectOnlinePlayers'()
BEGIN
Select  * from Player where CurrentlyLoggedIn=true ;
END//
DELIMITER ;

DELIMITER //
-- Procedure Name: SelectPostsByTopic
-- Procedure Purpose: Returns all the posts associated with a Topic
CREATE PROCEDURE 'vupoint'.'SelectPostsByTopic'(IN _Topic int)
BEGIN
Select * from posts where Topic =_Topic ;
END//
DELIMITER ;

总结

我们已经确定了系统中的玩家。我们知道是什么激励了每个玩家，以及我们如何给予他们需要的反馈。现在，我们已经有了数据库设计，这是我们游戏化系统的基础。现在，我们只需要为我们的骨架系统添加细节。

第五章：活动

在任何游戏化系统的核心是活动。用户是谁以及他/她的动机很重要，但归根结底，一切都归结为系统允许用户采取的活动。在本章中，我们讨论活动。我们看看我们的玩家可以参与和将要参与的元素、进展循环和参与场景。

游戏化系统中的活动只是游戏机制的配方。这些是规则和构造，它们控制玩家在游戏场景中的行为。它们概述了玩家通过奖励、反馈和激励系统的移动。正是游戏机制使系统变得有趣。

然而，我们必须清楚，游戏元素不是游戏，就像足球不是足球比赛一样。然而，它是游戏的一个元素和关键机制。它的本质决定了玩家在游戏中可以做什么和不能做什么。如果我们用棒球代替足球，游戏的基本本质将发生变化。因此，机制是游戏化系统的核心。

游戏元素金字塔

根据《为胜利而战：游戏思维如何革新您的业务》一书的作者凯文·沃尔巴赫博士，游戏元素可以分为三类，构成了他所称的游戏元素金字塔，如下截图所示：

游戏元素金字塔是一种以视觉方式思考各种游戏元素的方法。动态是关于大局的。它们代表了通过系统、叙事和系统对玩家的整体限制的进展。系统的机制是系统的动词。它们是推动玩家沿着进展循环前进的元素。组件是细节。这些是我们在想到游戏元素时会想到的东西，比如积分、排行榜、徽章。构成游戏化体验的一切都可以归类为元素金字塔中的元素。

游戏化工具箱-比 PBLs 更好

批评者很快指出游戏化元素的不良使用，表明游戏化还有很多不足之处。在许多情况下，他们是正确的。PBLs（积分、徽章和排行榜）很快成为游戏化应用的主打。虽然它们是优秀的游戏元素，但在特定情况下可能有可能没有意义。优秀的游戏元素永远不会让设计不佳的流程变得有趣。更重要的是，我们不应该希望它们会。不幸的是，它们正在定义游戏化行业。

然而，我们手头有许多工具（即游戏元素）在我们的游戏化工具箱中，只有那些鼓励我们目标行为的工具才重要。关键在于元素的质量而不是数量，这将决定系统的成功与否。

以下是一些游戏动态的例子：

• 社交互动：关系产生团队和归属感。例如，与朋友分享成就。

• 情感：挫折和成就是游戏化环境可能引起的情感。例如，提出略高于玩家技能水平的挑战会引起挫折感。另一方面，玩家在掌握挑战后会感到成就感。

• 限制：在所有游戏的核心是迫使玩家进行权衡的规则。例如，玩家现在可以在游戏中获得更多资产，但解决挑战的时间可能更短。

• 进展：玩家随时间的发展；例如，当玩家在游戏中变得更好时，她会被赋予一个头衔。例如，Foursquare 用户随着时间的推移逐渐成为市长。

• 叙事：一个持续的故事情节；例如，玩家在整个游戏中扮演一个角色，并且围绕玩家和游戏的其他机制发展了一个故事。

以下是一些游戏机制的例子：

• 奖励：玩家因为内在/外在奖励而采取某些行动

• 反馈：玩家需要关于他们在系统中的进展的信息

• 竞争：有明确的赢家和输家

• 挑战：系统中需要一定程度努力的任务

以下是一些更常见的游戏元素（即工具）：

• 排行榜：这个工具指定了玩家进展和成就的视觉显示

• 级别：这个工具指定了玩家进展中的定义步骤

• 徽章：这个工具指定了成就的视觉表示

• 积分：这个工具指定了游戏进展的数字表示

• 任务：这个工具指定了具有目标和奖励的预定义挑战

• 社交图表：这个工具指定了游戏中玩家社交网络的表示

• 团队：这个工具指定了为了共同目标而一起工作的玩家的定义组

• 虚拟商品：这个工具指定了具有感知或实际货币价值的游戏资产

通过正确的游戏元素组合，比如前面段落中提到的那些，再加上数据分析和社交媒体，我们的目标是创造一个引人入胜的体验。

我们的电子学习应用程序可能会是什么样的正确组合？以下是我们可能考虑的一些标准：

• 积分：我们为目标行为提供积分

• 徽章：我们为达到某些预定义成就提供徽章

• 排行榜：我们在主页上显著地列出了前几名玩家（按积分值）

• 反馈：我们在应用程序的每个屏幕/视图上显著地向玩家提供他/她的当前得分

• 竞争：我们展示了竞争的强烈使用，允许玩家批评和/或捍卫其他玩家的观点

VuPoint 应用程序

让我们再次把注意力转向我们的应用程序代码。我们将从应用程序的用户界面方面开始。这是处理用户与应用程序交互的代码。由于这是一个 Web 应用程序，这段代码将在 Web 浏览器中运行。JavaScript 已经成为在 Web 浏览器中运行代码的事实标准语言。

jQuery

如前所述，我们需要有几个地方来编写代码。在上一章中，这主要是在数据库中。在这里，我们将把注意力转向服务器（PHP）和客户端（jQuery）。

在我们继续之前，让我们在 Wamp 服务器安装的根目录（www）文件夹内为 VuPoint 应用程序创建一个目录结构。完成后，您应该有以下内容：

jQuery 是一个流行的开源 JavaScript 框架，允许我们在浏览器中搜索（或查询）项目，并与这些项目进行交互。因此得名 jQuery。jQuery 的主要优势之一是它为我们处理了许多不同浏览器的细微差别，使我们能够专注于我们想要做的事情，而不是不同浏览器可能如何处理我们的代码。jQuery 保护我们免受这些影响。

我们有几种选项可以在我们的应用程序中安装 jQuery。我们可以从www.jquery.com/downloads下载整个库。有一个压缩版本，我们应该在生产环境中使用，还有一个未压缩版本用于开发和调试目的。第三个选项是使用来自内容传送网络（CDN）的托管版本的库。以下是一些您可能考虑使用的位置。这实际上是一个偏好问题，您更希望从系统获得可靠的互联网连接。如果您没有互联网连接，您将需要在本地计算机上下载代码的版本。这就是我们将要做的，但以下是一些常见的 jQuery CDN 来源：

• jQuery

<script src="http://code.jQuery.com/jQuery-1.9.1.min.js"></script>
<script src="http://code.jQuery.com/jQuery-migrate-1.1.1.min.js"></script>

• 谷歌

<script src="//ajax.googleapis.com/ajax/libs/jQuery/2.0.0/jQuery.min.js"></script>

• 微软

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.9.0.js"></script>

我们将按照以下截图直接在我们的系统上下载和安装库：

下载后，只需将.js文件保存到我们将存储所有 JavaScript 代码的scripts目录中。

我们可以通过创建和运行一个简单的页面来测试 jQuery 是否已安装。我们将创建一个.js文件来保存我们的 HelloWorld JavaScript 方法。然后，我们将在Vupoint文件夹的根目录中创建一个index.html页面并执行它。

Vupoint.js

此代码验证了 jQuery 是否成功安装：

function HelloWorld(){
  alert('Hello World');
}

Index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>VuPoint E-Learning System</title>
    <link href="assets/stylesheets/main.css" rel="stylesheet" type="text/css" media="all">
    <script  type="text/javascript" src="scripts/jQuery-2.0.0.js"></script>
    <script  type="text/javascript" src="scripts/vupoint.js"></script>
  <script  type="text/javascript" >
  $(document).ready(function(){
  HelloWorld();
  });

</script>
  </head>
<body>

<body>
</html>

由上述代码生成的输出如下所示：

主页

现在我们知道一切都运行良好，我们将把注意力转向构建我们的电子学习应用程序的框架。

在大多数网站中，当没有特定调用其他页面时，会呈现一个默认或索引页面给用户。在我们的情况下，我们将构建一个index.php页面，它将位于我们应用程序的root文件夹中。这将是第一个被调用的页面。

然而，我们的index.php页面不会向用户呈现任何内容。它将更多地作为我们应用程序的驱动程序。它将简单地重定向到其他实际用户视图的各个页面。最初，我们将检查用户的计算机上是否有VuPointuser cookie。如果找到了，这意味着他们有一个帐户，可以直接进入主视图页面或登录页面。在我们放置了账户创建和登录页面之后，我们将添加这个功能。以下是我们初始index.php页面的代码：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>VuPoint E-Learning System</title>
    <link href="assets/stylesheets/main.css" rel="stylesheet" type="text/css" media="all">
    <script  type="text/javascript" src="scripts/jQuery-2.0.0.js"></script>
    <script  type="text/javascript" src="scripts/vupoint.js"></script>
    <script  type="text/javascript" >
      $(document).ready(function(){
        HelloWorld();
      });
    </script>
  </head>
  <body>
    <?php
      deleteCookie("VuPointUser");
    if(!isset($_COOKIE['VuPointUser'])) {
      redirect('AccountCreation.php');
    }else{
      redirect('Login.php');
    }
    function redirect($url, $statusCode = 303)
    {
      header('Location: ' . $url, true, $statusCode);
      die();
    }
    function deleteCookie($cookieName){
      setcookie($cookieName, "", time()-3600);
    }
    ?>
  <body>
</html>

账户创建页面

这是玩家将看到的实际页面，如下面的截图所示。当没有找到VuPointUser cookie 时，他/她将被重定向到这个页面。

创建此页面的代码如下：

<?php include 'header.php'; ?>
<div class="container">
  <?php include 'menu.php'; ?>
  <div class="content">
    <h1>Account Creation Page</h1>
    <form action="AccountCreation.php" method="post">
    <table width="550" border="0">
  <tr>
    <td>Name</td>
    <td><input id="username" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input id="email" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input  id="password" type="password" size="30" /><span class="instruction"> At Least 5 Characters<span></td>
  </tr>
  <tr>
    <td>Confirm Password</td>
    <td><input id="confirmPassword" type="password" size="30" /></td>
  </tr>
<tr>
    <td colspan="2">
    <input id="termsofuseagreement" type="checkbox" value="" />
    I agree to the Terms of Use and Privacy Policy</td>
  </tr>
<tr>
    <td colspan="2">
  <input id="signup" type="button" value="Sign Up" onClick="return ValidateAccountCreationForm();" />&nbsp; <a href="Login.php">Already Have An Account</a> </tr>
</table>
</form>
  </div>
   <?php include 'footer.php'; ?>
  </div>
</body>
</html>

现在我们有了页面本身，当我们点击注册按钮时实际上会发生什么？

在点击注册按钮时，我们需要做以下几件事：

1. 验证表单。

2. 确保玩家输入的密码匹配。

3. 确保玩家已输入有效的电子邮件地址。

4. 将这个新帐户添加到数据库中。

5. 将VuPointUser cookie 添加到玩家的浏览器中。

6. 登录玩家。

7. 带他/她去主视图。

这似乎是很多需要考虑的事情，但我们将以一种小模块化的方式来开发和编码它们。

验证表单

由于这是客户端功能，我们将使用 jQuery 来处理这个功能。虽然有免费可用的插件来帮助我们进行验证，但我们将编写自己的插件。我们首先将一个表单验证方法添加到我们的vupoint.js文件中。

以下是我们将需要的一些方法：

//Purpose: Test to see if the information on the form is valid
function ValidateAccountCreationForm(){
  if(EmailAddressValid()&&PasswordLongEnough(5)&&PasswordsMatch())
    {return true;}
  else
    {return false;}
}

//Purpose: Test to see if the email address is valid
function EmailAddressValid(){
  var emailAddress=$("#email").val();
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if(!re.test(emailAddress)){
    alert('The Email Address you entered is not valid. TryAgain');
  $("#email").focus();
  return false;
  }
  else{
    return true;
  }
}

//Purpose: Test to see if the entered password is long enough 
function PasswordLongEnough(len){
  if(parseInt($("#password").val().length) < parseInt(len)){
    alert('The Password you entered is not long enough. Try Again');
  $("#password").focus();
  return false;
  }
  else{
    return true;
  }
}

//Purpose: Test to see if the entered passwords match
function PasswordsMatch(){
  if(($("#password").val()!=$("#confirmPassword").val())){
    alert('The Passwords you entered do not match. Try Again');
    $("#password").focus();
    return false;
  }
  else{
    return true;
  }
}

将新帐户写入数据库

现在我们将注意力转向编写一个 php 函数，将表单中的信息插入到我们的VuPoint数据库中。此函数接受来自表单的用户名、密码和电子邮件地址，并将玩家插入到数据库中。该函数的编码如下：

function CreatePlayerAccount($UserName,$Password,$EmailAdddress){
  createDBConnection();
  $CheckIfExist = "Select count(*) from Player where UserName='$UserName' and Password='$Password' and EmailAddress='$EmailAdddress'";
  $insStatment = "Insert into Player (UserName,Password,EmailAddress) values('$UserName','$Password','$EmailAdddress')";
  $result = mysql_query($CheckIfExist);
  $row = mysql_fetch_row($result);
  $numOfRows = $row[0];
  if($numOfRows>0){
    echo '<p>You already have a VuPoint Account.</p>';
    return false;
  }
  else{
    if(mysql_query($insStatment)){
    return true;
  }
  else{
    die("Insert  failed ".mysql_error());
    return false;
    }
  }
}

登录页面

登录页面是账户创建页面的补充页面。玩家将使用此页面登录到站点的主视图。如下面的截图所示：

<?php include 'vupoint.php'; ?>
<?php include 'header.php'; ?>

<div class="container">
  <?php include 'menu.php'; ?>
  <div class="content">
  <?php if(isset($_POST['login'])=='Login') {
    $UserNameEmail=$_POST['username_email'];
    $Password=$_POST['password'];
    if(LogPlayerIn($UserNameEmail,$Password)){
      redirect('MainVu.php');
    }
    else{
      echo 'Invalid Login... Try Again';
    }
    }
    else{ ?>
      <h1>Login Page</h1>
       <form action="Login.php" method="post">
    <table width="420" border="0">
  <tr>
    <td>Player Name/Email</td>
    <td><input id="username_email" name="username_email" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input id="password" name="password" type="password" size="30" /></td>
  </tr>
  <tr>
    <td colspan="2">
    <input name="rememberme" type="checkbox" value="" />
    Remember Me</td>
  </tr>
  <tr>
    <td colspan="2">
  <input name="login" type="submit" value="Login"  onClick="return ValidateLoginForm();"/>&nbsp; <a href="accountcreation.php">Sign Up</a> </tr>
    </table>
  </form>
  <?php } ?>
  </div>
    <?php include 'footer.php'; ?>
  </div>
  </body>
</html>

我们可以使用 jQuery 和 JavaScript 验证用户输入的内容，就像我们在账户创建页面中所做的那样，如下面的代码片段所示：

function ValidateLoginForm(){
  var pwd = $("#password").val(),username='',emailaddress = '',username_email=$("#username_email").val();
  if(pwd==''||username_email==''){
    alert('You have entered an invalid username/email and password combination');{
  return false;
  }
}

主页面视图

在这里，我们布局了主页面。一旦我们将布局结构放置好，我们就准备好用开发每个模块（块）的代码来填充它们，如下面的代码片段所示：

<?php include 'vupoint.php'; ?>
<?php include 'header.php'; ?>
<div class="container">
<div class="header">
  <a href="../VuPoint"><img src="images/logo.png" alt="Insert Logo Here" name="Insert_logo"  id="Insert_logo" style="background: #8090AB; display:block;" /></a>
    </div>
  <div class="content" style="width:100%">
    <div id="col1">
    <div id="vupointscorediv">VuPoint Score</div>
    <div id="myachievementsdiv">My Achievements</div>
    <div id="vupointrulesdiv">VuPoint Rules</div>
    </div>
    <div id="col2">
    <div id="hottopicsdiv">Hot Topics</div>
    <div id="pointsofvudiv">Points of Vu</div>
    <div id="mypointofvudiv">My Point of Vu</div>
    </div>
    <div id="col3">
    <div id="leaderboardsdiv">Leader Board</div>
    <div id="playersonlinenowdiv">Players Currently Online</div>
    </div>
   </div>
   <?php include 'footer.php'; ?>
  </div>
</body>
</html>

现在我们应该有的与之前的草图模型相比如下：

这是我们的原始草图：

摘要

此时，我们应该对我们试图开发的内容和原因有一个很好的想法。

我们已经开发了我们游戏化系统的核心。我们已经概述了玩家互动的活动。我们已经研究了他/她是谁，以及他/她的动机是什么。我们已经定义了我们的元素、进展循环和参与场景。从众多可用的游戏机制中，我们已经将其缩小到我们认为玩家会觉得有趣的原则、规则和结构。在下一章中，我们将更深入地探讨这个有趣的概念。

第六章：乐趣

为什么要在应用程序中添加游戏化元素？试图让某事更有趣的整个意义是什么？我们是否在回避操纵的主要问题？我们应该操纵任何人去做任何事吗？他们应该做他们想做的事。生活和幸福不都是关于“自由意志”吗？也许是这样，但科学和大量研究表明，我们的行为和所做的事情显然比我们最初想的更可预测和可塑。

内在与外在行为

真正的问题是，我们是否会自愿做某事（目标行为），还是总是需要有人或某物推动和激励我们？在长期内，推动和激励用户按照我们的系统行事是不可持续的。我们需要让我们的目标行为成为玩家“愿意”在没有刺激的情况下继续进行的事情。我们不希望不断地付钱让他们执行我们的目标行为。我们希望他们按照系统行事，而不是我们为他们做事并花费大量精力。实际上，我们希望他们出于自愿去做。我们希望我们的目标行为成为他们喜欢做的事情。

那么，人们喜欢做什么？我们知道他们喜欢做有趣的事情。人们做他们觉得有趣的事情。他们喜欢做有内在好处的事情。奖励的概念在游戏化中是一个主要焦点。当我们想到奖励时，脑海中首先想到的是积分、金钱、成就等。游戏化系统中的奖励通常是一件好事。我们认为任何激励人们采取我们的目标行动的东西都是好事。然而，从长远来看，我们希望鼓励内在动机的发展。内在动机意味着他们会出于采取行动的本身而采取我们期望的行动。演员从采取行动中获得足够的快乐和幸福，这意味着他/她不再需要外部奖励。

例如，专业运动员通常并不只是为了金钱补偿而参加他们特定的运动。他们通常不仅仅是为了得分和赢而受到激励。他们参加比赛是因为他们最终享受参加这项运动。他们会玩这个游戏，并且一直这样做，大部分时间都没有得到任何重大的报酬或好处。我们可以安全地假设赢得比赛激励他们。但即使他们输了，他们仍然会继续参加比赛。

我们需要在系统中建立机制，以增加玩家随着时间推移的内在动机水平。这就是乐趣的目的。

我们需要让用户觉得有趣，这样他们就会感到愉快。所以每当他们想要享受，不一定是得分，他们就会参与我们的系统。每当他们想要放松，他们就会参与我们的系统。每当他们想要完成某事并对自己感到满意，他们就会参与我们的系统。这就是我们所说的内在动机。

当一个人决定开发一个游戏化系统时，外在动机的机制是他/她首先考虑的。他/她实施了一个积分系统、一个奖励系统和一个排行榜。这些都是有价值的，但我们也必须包括乐趣的元素。否则，玩家会逐渐失去对采取行动的兴趣，更重要的是，对“玩我们的游戏”的兴趣。最终，系统将失败。

我们的第一个目标是在系统中建立内在动机。玩家参与系统是因为他们从参与中感到需要、快乐和欣赏。这对我们来说是理想的，而不是使用我们有限的资源来迫使他们这样做。这就是我们将要关注的地方，也是为什么让我们的系统在最后一天变得有趣如此重要。

什么使“乐趣”有趣？

那么，什么使乐趣…有趣？这是一个非常重要的问题。如果我们不知道什么是乐趣，我们怎么能将其构建到我们的系统中呢？我们需要明白，对一个人来说有趣的事情对另一个人来说未必有趣。

我们需要根据我们所指的人的情境来定义乐趣。对于不同的人，乐趣是不同的。这取决于他们生活中的位置。这取决于他们目前最重要的事情。然而，我们可以概述乐趣的一般概念。更重要的是，我们可以捕捉这些概念的本质。然后我们只需要在可能的地方实施它们。

当我们做一些迫使我们走出自己的事情时，通常会体验到乐趣。当我们挑战自己并努力去完成某事时，我们会体验到一种喜悦。这个想法的核心是成就。成就是有趣的。

许多人发现打破他们的日常例行程序是有趣的。当我们逃离我们的日常例行程序和环境时，通常会觉得很愉快。惊喜和经历意外的事情往往具有一定的乐趣元素。惊喜和意外是有趣的。

根据巴特尔的玩家理论，冒险和探索吸引了许多人。他将他们称为探险家。这些人喜欢外出并体验冒险的乐趣。

与其他人一起做事是有趣的。在游戏环境中，与他人互动激励了社交者。任何具有社交成分的活动都被认为是有趣的。

行动是有趣的。要有乐趣并且被动是非常困难的。参与、互动和交流往往会激发乐趣。

许多人喜欢表达自己。情感表达是有趣的。情感表达对不同的人来说是不同的。我能够通过这种活动分享我独特的东西的想法使它变得有趣。我们在采取行动并在情感层面表达独特和特别的东西中找到乐趣。

乐趣绝对不是一个统一的、一刀切的概念。我们可以识别一些使活动有趣的组成部分或事物，并加以利用。以下是其中一些：

• 参与

• 社交互动

• 冒险

• 探索

• 惊喜

• 不确定性

• 挑战

这些都是增加乐趣的事物。我们可以采用这些元素并将其构建到我们的系统中，使系统更有趣。

玩家的体验

我们需要一个过程和方法来概述我们为玩家创造的愉快体验。斯科特·里格比和理查德·瑞恩（2006 年）起草了一篇关于玩家体验的研究论文。他们称之为玩家需求满足的体验（PENS）模型。他们评估并证明玩家的体验中至少需要三样东西才能使体验更愉快：能力、自主权和相关性。

玩家的体验

能力

玩家需要感觉自己足够能够玩游戏。然而，他们也期望游戏中有一定程度的挑战。挑战和玩家的能力水平应该理想地匹配。随着玩家在游戏中变得更加熟练（更有能力），游戏变得更加困难。作者Mihaly Csikszentmihalyi将此称为“心流”。这是一种理想状态，任务既不会太难以至于人们放弃，也不会太容易以至于他们感到无聊。

目标是保持游戏的难度与玩家完成任务的能力保持一致。这会导致玩家达到一定满意度水平。

自主权

PENS 模型的另一个组成部分是自主权。尽管玩家处于游戏机制的构造之内，他们需要感觉自己始终控制着局面。他们可以决定接下来要做什么。他们可以使用策略。他们可以自由地采取任何行动。

相关性

最后，PENS 模型要求相关性和社交互动。玩家需要与其他玩家建立联系。例如，在游戏《魔兽世界》中，玩家属于公会。我们还需要创建这种社交互动。

丹尼尔·平克，《驱动力：关于是什么激励我们的惊人真相》的作者，在他的著作中支持 PENS 模型。在书中，平克建议我们的动力来自于掌握。这相当于能力。他还建议我们渴望在所做的事情中拥有自主权。他最后建议我们需要从我们所采取的行动中感到一种目的感。我们喜欢知道我们所做的事情在世界上有一定的相关性。

尽管相关性并不完全是目的，并且来自不同的角度，但这两个想法是重叠的。也许相关性是将目的带入活动的因素。当用户看到他们所做的事情影响的不仅仅是自己，而是影响整个社会时，它变得更加愉快。

这些都是我们需要构建到玩家体验中的一些东西，使我们的游戏化系统对玩家更有趣，更愉快。我们有许多方式来衡量我们系统的成功或失败。

得分模块

首先，我们将看一下得分模块。它由 JavaScript 组成，其中包含一个 Ajax 调用，实际上从数据库获取得分数据。以下是 JavaScript 方法的代码：

function GetMyScore(){
  var action='GetMyPoints',
    player=getFromLocalStorage('player');
   $("#myscore").html('0');
   $.ajax({
        dataType: "text",
        data: {action:action,player:player},
        url: $AJAXHANDLER,
        success: function (data) {
    $("#myscore").html(data);
  },
        error: function (xhr, status, error) {
            alert(status + error + xhr.responseText);
        }
    });

  }

AjaxHandler.php

在以下代码中，Ajax 方法调用ajax_handler.php，其工作是接受 Ajax 调用并根据 Ajax 调用传递给它的操作参数调用正确的 PHP 函数：

<?php include 'vupoint.php'; ?>
<?php
if(isset($_GET['player'])){$player=$_GET['player'];  }

switch ($_GET['action']) {
  case 'GetMyPoints':
  GetMyVuPoints($player);
    break;
    case 'GetLeaderBoard':
  GetLeaderBoard();
  break;
  case 'GetPlayersOnlineNow':
  GetPlayersOnlineNow();
  break;
  case 'GetMyAchievements':
  GetMyAchievements($player);
  break;
  default:
  Error();
  break;
}
?>

在这种情况下，ajax_handler 调用GetMyVuPoints PHP 函数，该函数位于 vupoint.php 文件中。它接受玩家的用户名或电子邮件地址，并从数据库返回玩家的积分。

function GetMyVuPoints($Player){
$storedProcedure = "Select points from Player where UserName='$Player' or EmailAddress='$Player'";
$result = mysql_query($storedProcedure);
$pointsarray = mysql_fetch_row($result);
if($result){
$points = $pointsarray[0];
}else{
$points='10';
}
echo $points;
}

成就模块

成就模块的流程与其他模块相同。我们再次调用 ajax_handler.php 来构建这个模块。请注意，在来自 Ajax 调用的回调函数中，数据以 JavaScript 对象表示法（JSON）的形式写入。我们需要循环这个 JSON 对象来实际访问成就数据。我们还需要动态构建一个包含成就图片的 HTML 表格。最后，我们将构建的 HTML 附加到 MyAchievements div 中：

function GetMyAchievements(){
  var action='GetMyAchievements',
  player=getFromLocalStorage('player'),
  html="<table style=\"margin:0 auto;\">";
  $.ajax({
        dataType: "json",
        data: {action:action,player:player},
        url: $AJAXHANDLER,
        success: function (data) {
    var Achievements = data[0].BadgesEarned.split(',');
    for (var i = 0; i < Achievements.length; i++) { 
    AchievementId=Achievements[i];
    html+='<tr>';
    html+='<td><a href=\"#\"><img src=Images/'+ AchievementId+'.png></a></td>'
    html+='</tr>';
    }
    html+="</table>";
    $("#myachievementsdiv").append(html);
  },
        error: function (xhr, status, error) {
            alert(status + error + xhr.responseText);
        }
    });

  }

function GetMyAchievements($Player){
$storedProcedure = "Select BadgesEarned  from Player where UserName='$Player' or EmailAddress='$Player'";
$MyAchievements = array();
$fetch = mysql_query($storedProcedure); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['BadgesEarned'] = $row['BadgesEarned'];
array_push($MyAchievements,$row_array);
}
echo json_encode($MyAchievements);
}

排行榜模块

排行榜模块与成就模块的流程相同。以下是 JavaScript 代码：

function GetLeaderBoard(){
var action='GetLeaderBoard',html='',Username='',Points='',html="<table>";
$.ajax({
dataType: "json",
data: {action:action},
url: $AJAXHANDLER,
success: function (data){
for (var i = 0; i < data.length; i++) { 
if (data[i].UserName==''){Username='Anonymous'}else{Username=data[i].UserName};
Points = data[i].Points;
html+='<tr><td><a href="#">'+Username +'</a></td><td>'+Points+'</td></tr>';  
}
html+="</table>";
$("#leaderboardsdiv").append(html);
},
error: function (xhr, status, error) {
}
});
}

以下是相关的 PHP 函数：

function GetLeaderBoard(){
$storedProcedure = "Select distinct UserName,Points from Player order by points desc LIMIT 0,5";
$Leaders = array();
$fetch = mysql_query($storedProcedure); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['UserName'] = $row['UserName'];
$row_array['Points'] = $row['Points'];
array_push($Leaders,$row_array);
}
echo json_encode($Leaders);
}

当前在线玩家

让我们构建代码来获取并显示当前在线玩家的列表。在这里，我们编写一个 JavaScript 函数，调用我们的 PHP 模块返回已登录玩家的列表。

JavaScript 函数如下：

function GetPlayersOnlineNow(){
var action='GetPlayersOnlineNow',Username='',  html="<table>";
$.ajax({
dataType: "json",
data: {action:action},
url: $AJAXHANDLER,
        success: function (data){
    for (var i = 0; i < data.length; i++) { 
    if(data[i].UserName==''){Username='Anonymous'}else{Username=data[i].UserName};
    html+='<tr><td><a href="#">'+Username +'</a></td></tr>';  
    }
    html+="</table>";
    $("#playersonlinenowdiv").append(html);
  },
        error: function (xhr, status, error) {
            alert(status + error + xhr.responseText);
        }
    });

}

PHP 代码如下：

function GetPlayersOnlineNow(){
$storedProcedure = "Select  UserName from Player where CurrentlyLoggedIn=true";
$OnlinePlayers = array();
$fetch = mysql_query($storedProcedure); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['UserName'] = $row['UserName'];
array_push($OnlinePlayers,$row_array);
}
echo json_encode($OnlinePlayers);
}

在这一点上，我们应该看到以下截图：

总结

在本章中，我们已经介绍了对于首次对过程进行游戏化的核心原因。我们想要一种期望的行为。我们不能强迫任何人做任何事情。然而，我们可以让以某种方式行为更有趣。乐趣和愉悦是一个强大的动力因素，并利用了我们吸引快乐和避免痛苦的基本人类需求。在我们放置了代码之后，我们有了实现我们在早期章节中概述的游戏化电子学习系统的功能。

第七章：总结

那么我们接下来该怎么办呢？在过去的六章中，我们快速地了解了游戏化的世界。我们从理解游戏化开始。然后我们研究了游戏化设计过程。我们讨论了游戏机制，甚至尽可能地定义了乐趣。

只是个开始

我们发现游戏化实际上是各种学科的“混合”，或者说是为了实现业务目标而凑合在一起的。在进行游戏化项目时，您将涉及从动机理论到游戏理论、设计和心理学等各个方面。因此，您可以进一步深入了解游戏化，因此我们可以深入研究的事情有很多。

我们可以选择进一步进行科学研究。在这里，我们可以追求对许多不同行为模型的更好理解，比如Fogg 行为模型、Bartle 的玩家模型或PENS模型。研究人员只是初步了解了游戏环境中人们行为的表面。

我们可以预期，在未来三到四年内，随着更多企业需要与他们的客户互动，游戏化将会大幅增长。然而，这种互动必须对客户来说是愉快的。当今人们在选择购买对象时有很多选择。他们有更多的组织可以参与。我们只会参与和使用我们喜欢的产品和服务。

游戏化帮助组织与他们进行互动，吸引他们，并使产品购买更加愉快。这才是游戏化的最终目的。

我们可以预期看到游戏化应用程序在我们周围不断出现。游戏化不仅在教育领域大行其道，也在公共服务领域，比如政府部门。我们可以预期在任何行为对组织的成功或失败至关重要的地方，游戏化都会得到增加。

另一方面，不良游戏化实施的增加应该引起我们的警惕。随着游戏化从业者摸索出方法，我们可以预期会出现一些错误。我们需要时间来理解游戏化不仅仅是关于积分、排行榜和徽章，它更多的是为我们的用户提供愉快的参与和体验。

从长远来看，我们可以预期游戏化将成熟，并最终变得无处不在。我们将期望任何组织或产品都能给我们带来挑战、快乐、愉悦和社交互动。

第三方插件

在我们的电子学习应用程序中，我们写了很多代码。我们在 MySQL 数据库中编写代码，使用 PHP，在客户端或特别是在 JavaScript 中编写代码，或者在可能的情况下，我们使用 jQuery，这只是一个帮助我们做事情的 JavaScript 函数库，但有一些事情我们本可以做得更好，或者让应用程序更加清洁和美观。我们本可以在 jQuery 插件中免费找到很多这样的功能。

一个我们可能要考虑的重要因素是一个帮助我们构建对话框的插件，例如（Alertify.js），它在网上是免费提供的。我们可能还要考虑与icheck.js合作，这是一个增强表单控件的 jQuery 插件。它是完全可定制的，甚至可以在移动环境中使用。我们可以让我们的按钮和复选框看起来更漂亮。

我们可能还可以使用一个jqueryfileupload对象，这是一个允许拖放和多文件上传的 jQuery 小部件插件。

我认为我们可能还可以在我们的账户创建模块中使用一个 jQuery，即complexify.js，它可以确定或评估用户密码的复杂性。您可以在表单和类似对象上使用它。它可以向用户呈现一个百分比。因此，您可以强制用户创建具有指定复杂级别的密码，使其更安全。

插件在互联网上是免费提供的，它们非常容易使用。因此，我们可以利用其他开发人员编写的代码，使我们的应用程序更加清洁、外观更加美观，使用起来更加容易。

Gigya 插件

当涉及到游戏化插件时，有几家公司提供游戏化 API 和 SDK。然而，它们通常不是免费的。您可以使用各种即插即用模块来使您的网站的许多方面实现游戏化。这使您能够快速将一些基本的游戏机制实现到您的 Web 应用程序中。Gigya 提供了一个排行榜插件，突出显示表现最好的人。您可以配置它以按时间段和成就类型进行过滤。

Gigya 还提供了一个个人资料插件，显示用户当前的状态和社交排名。它提供了用户在您的游戏化环境中的完整概述。

他们提供了用于展示用户奖励和显示徽章的成就插件。他们的通知插件在用户解锁新成就和徽章时会提醒用户。

也许他们最令人兴奋的插件是Activity Feed插件。它在页面上显示实时用户活动，几乎就像 Facebook 一样。这利用了整个社交连接。它允许用户从他们的社交网络朋友和其他玩家那里获得实时的竞争更新。

Badgeville

另一家为游戏化环境提供一套工具和插件的公司是 Badgeville。他们提供了小部件工作室和开发人员工具，为我们提供了一个 JavaScript 小部件库。它们的工作方式很像与 Badgeville API 交互的 jQuery 插件。它们基于 JavaScript，并且像任何其他 RESTful API 一样工作，使它们相对容易实现。小部件工作室允许您在网站中添加不同的小部件和游戏化机制，而您几乎不需要编写任何代码。

Badgeville 专注于行为机制。因此，他们的许多插件都是用于与客户和员工进行用户参与。他们的平台比积分、徽章和排行榜更深入。他们的套件使用声誉机制和社交机制来影响行为。他们提供了一套工具，让您奖励用户，提升他们的地位，让他们有成就感，并提供整体的社交体验。

更多资源

以下是一些参考资料，如果您打算详细阅读本书中提到的主题，这些参考资料将会很有用。

游戏化

• 游戏化维基：www.gamification.org/

• 游戏化新闻和信息的主要来源：www.gamification.co/

• 游戏化峰会：gsummit.com/

• Coursera 和宾夕法尼亚大学的游戏化课程：www.coursera.org/course/gamification

• 在游戏化方面获得认证：gamificationu.com/

• Bartle 的游戏者心理测试：www.gamerdna.com/quizzes/bartle-test-of-gamer-psychology

• 有关教育游戏化的资源：www.gamifyingeducation.org/

• 教育游戏化信息图表：www.knewton.com/gamification-education/

PHP

• PHP 手册和文档：www.php.net/

• 帮助 PHP 开发人员的 PHP 开发人员：www.phpbuilder.com/

• 完整的脚本和类：php.resourceindex.com/

MySQL

• MySQL 资源和下载：www.mysql.com/

• 一个用 PHP 编写的免费软件工具，用于处理 MySQL 的管理：www.phpmyadmin.net

jQuery

• jQuery 文档：jquery.com/

• JSON（JavaScript 对象表示）文档：www.json.org/

附录 A. 表格

以下表格讨论了用户行为。表格概述了是什么激励用户采取特定行动以及他们应该收到什么反馈。

参与循环（表 A-1）

以下表格指出了我们的游戏化系统中杀手、成就者、社交者和探险者玩家类型的关键参与循环。请记住，行动基本上是相同的。然而，动机和反馈是不同的。

玩家类型：杀手

动机	要采取的行动	反馈
---	---	---
看看玩家的讨论主题数量是否最高。他们是否超越了谁？谁在玩家之前？	检查他们的讨论主题数量	他们相对于其他玩家的位置。
看看他们是否能比其他人审查更多	审查不同观点部分	他们迄今为止做了多少审查，相对于他们同伴中的其他玩家。
比其他玩家更多地满足目标讨论数量	为特定时间段设定目标讨论数量	满足他们的讨论目标的统计数据，与其他人满足目标的情况相比。
比其他玩家更多地满足玩家的不同观点目标	设定一个不同观点目标进行审查	满足他们的不同观点目标的统计数据，与其他人满足目标的情况相比。
比其他人更早观看和参与教学视频	观看关于如何使用讨论区的视频（或一些教学材料）	显示与他们的同伴相比参与教学项目所需时间的统计数据。
满足他们的讨论目标的统计数据，与其他人满足目标的情况相比	观看关于查看其他观点价值的视频（或一些教学材料）	显示他们参与教学项目所需时间的统计数据，与他们的同伴相比。
在讨论组中成为最活跃的参与者	参与讨论组	显示玩家参与了多少讨论的统计数据。
在讨论组中成为最活跃的参与者	阅读其他用户的讨论帖子	显示玩家已查看/阅读了多少讨论的统计数据。
在讨论组中成为最一贯的参与者	随着时间的推移参与讨论组	显示玩家已参与的时间以及上次参与的统计数据。
在讨论组中成为最一贯的参与者	随着时间的推移阅读其他用户的观点	显示玩家参与的时间以及上次参与的统计数据。

玩家类型：成就者

动机	要采取的行动	反馈
---	---	---
看看他们参与了多少讨论主题	检查他们的讨论主题数量	显示他们的讨论主题数量自上次登录以来增加了多少。
审查更多不同观点	审查不同观点部分	每次审查另一个不同观点时都会收到一条好消息。
满足他们为自己设定的目标	为特定时间段设定目标讨论数量	玩家距离达到目标有多近，以及当玩家达到目标时的祝贺消息。
满足他们为自己设定的目标	设定一个不同观点目标进行审查	玩家距离达到目标有多近，以及当玩家达到目标时的祝贺消息。
尽可能满足系统中的挑战	观看关于如何使用讨论区的视频（或一些教学材料）	显示可能遇到的挑战列表，以及教学材料。
尽可能满足/征服系统中的挑战	观看关于观看其他观点价值的视频（或一些教学材料）。	显示一个可能的挑战列表，带有教学材料。
尽可能满足/征服系统中的挑战	参与讨论小组	显示一个可能的挑战列表，参与讨论小组的阈值为（25）。
尽可能满足/征服系统中的挑战	阅读其他用户的讨论帖子	显示一个可能的挑战列表，阅读其他用户的讨论帖子作为阈值（25）。
尽可能满足/征服系统中的挑战	随时间参与讨论小组	显示一个可能的挑战列表，用户在一定时间内参与一定数量的讨论。
尽可能满足/征服系统中的挑战	随时间阅读其他用户的观点	显示一个可能的挑战列表，用户在一定时间内阅读一定数量的其他玩家帖子。

玩家类型：社交者

动机	采取行动	反馈
---	---	---
看看有多少其他人在同一个帖子下	检查他们的讨论帖数。	与同一讨论帖数范围内的玩家列表。
与其他人交流不同观点	查看不同观点部分。	目前在不同观点部分的玩家列表。
寻找其他人可能帮助他们达到目标	为特定时间段设定目标讨论数量。	一个在达到目标的阈值内的用户列表（即 10%）。
寻找其他人可能帮助他们达到目标	设定一个不同观点的目标进行审查。	一个在达到目标的阈值内的用户列表（即 10%）。
寻找与其他用户一起观看/讨论教学材料的方式	观看关于如何使用讨论区的视频（或一些教学材料）。	下次将有一组展示/显示教学材料。
寻找与其他用户一起观看/讨论教学材料的方式	观看关于观看其他观点价值的视频（或一些教学材料）。	下次将有一组展示/显示教学材料。
寻找与其他用户互动的方式	参与讨论小组。	目前已登录并正在讨论的用户。
寻找与其他用户互动的方式	阅读其他用户的讨论帖子。	目前已登录并在发布内容的用户。
建立友谊	随时间参与讨论小组。	显示哪些玩家是该玩家的朋友。
建立友谊	随时间阅读其他用户的观点。	显示哪些玩家是该玩家的朋友。

玩家类型：探险者

动机	采取行动	反馈
---	---	---
了解游戏中发生了什么	检查他们的讨论帖数。	显示最热门帖子或热门讨论的统计数据。
了解游戏中最不同的观点是什么	查看不同观点部分。	显示玩家在观点上的差异范围。
看看玩家可以参与多少不同类型的讨论	为特定时间段设定目标讨论数量。	显示玩家参与了多少不同类型的讨论。
看看玩家可以参与多少不同类型的讨论	设定一个不同观点的目标进行审查。	显示玩家参与了多少不同类型的讨论。
查看玩家可以找到多少教学链接	观看如何使用讨论区的视频（或一些教学材料）。	显示玩家已访问的教学链接数量。
显示玩家已参与的不同类型讨论的数量	观看价值观察其他观点的视频（或一些教学材料）。	显示玩家已访问的教学链接数量。
查看玩家可以参与的不同类型讨论的数量	参与讨论组。	显示玩家已参与的不同类型讨论的数量。
查看玩家可以参与的不同类型讨论的数量	阅读其他用户的讨论帖子。	显示玩家已参与的不同类型讨论的数量。
查看玩家可以参与的不同类型讨论的数量	随着时间的推移参与讨论组	查看玩家在过去 30 天内参与的不同类型讨论的数量。
查看玩家可以参与的不同类型讨论的数量	随着时间的推移阅读其他用户的观点。	查看玩家在过去 30 天内参与的不同类型讨论的数量。

游戏化设计矩阵（表 A-2）

目标	目标行为	玩家类型	动机	反馈	乐趣维度	工具
增加与他人讨论的参与度	检查他们的讨论帖子数量	杀手	查看他们的讨论帖子数量是否最高。谁超越了玩家？谁领先于他们？	他们相对于其他玩家的位置？	挑战	积分排行榜
增加对不同观点的考虑程度	查看不同观点部分	杀手	查看玩家是否能比其他人审查更多。	他们迄今为止对其他玩家的同伴进行了多少审查？	发现	积分排行榜
增加与他人讨论的参与度	为特定时间段设定目标讨论数量	杀手	达到比其他玩家更多的目标讨论数量。	达到讨论目标的统计数据，与其他玩家达到目标的情况进行比较。	挑战	徽章
增加对不同观点的考虑程度	设定不同观点的目标以进行审查	杀手	设定比其他玩家更大的不同观点目标。	达到不同观点目标的统计数据，与其他玩家达到目标的情况进行比较。	挑战	积分徽章
增加与他人讨论的参与度	观看如何使用讨论区的教学材料	杀手	比任何其他人更早观看和参与教学视频。	参与教学项目所花费的时间统计。	挑战	积分
增加对不同观点的考虑程度	观看价值观察其他观点的教学材料	杀手	达到讨论目标的统计数据，与其他玩家达到目标的情况进行比较。	参与教学项目所花费的时间统计，与他们的同伴进行比较。	挑战	积分
增加与他人讨论的参与度	参与讨论组	杀手	成为讨论组中最活跃的玩家。	玩家已参与的讨论数量统计。	团契表达	积分
增加对不同观点的考虑程度	阅读其他用户的讨论帖子	杀手	成为讨论组中最活跃的玩家。	玩家已查看/阅读的讨论数量统计。	发现	积分
与他人讨论增加参与度	随着时间参与讨论小组	杀手	成为讨论小组中最一贯的参与者。	统计数据显示玩家参与讨论的时间长短和上次参与的时间。	FellowshipExpression	PointsBadgesLeaderboard
提高对不同观点的考虑程度	随着时间阅读其他用户的观点	杀手	成为讨论小组中最一贯的参与者。	统计数据显示玩家参与讨论的时间长短和上次参与的时间。	Discovery	PointsBadgesLeaderboard