MVC Web API 和 AngularJS 游戏“你是天才”
4.87/5 (20投票s)
本文展示了如何使用 MVC、AngularJS 和 Web API 2 创建一个“你是否是天才”游戏。
引言
* 请观看我的 YouTube 视频链接以了解 MVC Web API 和 AngularJS “你是否是天才”游戏。
你是否是天才？
这个游戏是我从“谁想成为百万富翁”这个世界著名的电视节目中获得的灵感而创建的。在印度，类似的电视节目以泰米尔语播出的名为“Neengalum Vellalam Oru Kodi”，以印地语播出的名为“Kaun Banega Crorepati”。在互联网上，我们可以看到大量类似的在线游戏和手机游戏，大多使用 Flash 编程制作。我曾想过通过使用 MVC 配合 AngularJS 和 WEB API 来简化这一切。我更喜欢制作游戏而不是玩游戏。所以现在我开始玩游戏来制作新游戏。我遵循了相同的规则来制作这个游戏，用积分（Points）代替了金钱（$），并将我的游戏命名为“你是否是天才”。这是维基百科上关于“谁想成为百万富翁”游戏的链接：https://en.wikipedia.org/wiki/Who_Wants_to_Be_a_Millionaire%3F。
让我们看看我游戏“你是否是天才”的规则。
在我的游戏中，我用积分代替了金钱。赢得游戏的的总积分是 100 万。
您将有 15 个问题，每个问题有 30 秒的时间。您必须在 30 秒内回答每个问题。对于每个问题，您可以看到 4 个选项，您必须从问题中选择正确的答案。如果您未能在 30 秒内回答，您将被淘汰出局。能够回答所有 15 个问题并赢得游戏的人才是天才。
生命线：玩家将拥有以下四种生命线。
注意：我将在我的应用程序中使用图标。用户可以点击这些图标来使用生命线。
求助电脑：（如果玩家点击此选项，计算机将显示答案。注意：只有 90% 的答案是正确的。剩余 10% 可能不正确，因此玩家需要自己决定是否选择计算机提供的答案。）
50/50：将删除 2 个错误答案选项。玩家必须从剩余的 2 个选项中选择正确答案。
求助 Shanu：（如果玩家点击此选项，SHANU（程序创建者）将显示答案。注意：只有 90% 的答案是正确的。剩余 10% 可能不正确，因此玩家需要自己决定是否选择 SHANU 提供的答案。）
更换问题：（使用此选项，用户可以更换当前问题为其他选项的问题。如果用户点击更换问题，将显示另一个随机问题。注意：由于显示的是随机问题，因此可能更容易或更难，玩家需要仔细思考后决定是否使用此选项。这是一个棘手的选项。）
从第 1 个到第 15 个问题的每个问题对应的积分。
安全区：在每第 5 个问题时，玩家将到达安全区。在这里，我们可以看到每个第 5 个问题时的积分我用不同的颜色标记。例如，假设一个玩家正在玩这个游戏，他/她回答了 5 个问题，在第 6 个问题时，如果他/她选择了错误答案，他/她将获得总共 1000 积分。如果玩家玩游戏并且回答了 3 个问题，而在第 4 个问题时，如果他/她选择了错误答案，那么无论他/她之前回答了 3 个问题，他/她都将获得 0 积分。玩家必须选择正确的答案。如果他/她选择了错误答案，那么他/她将获得上次安全区的积分。例如，一个玩家回答了 12 个问题，在第 13 个问题时，如果他/她选择了错误答案，那么他/她将获得 32,000 积分，而不是第 12 个问题的 125,000 积分。如果玩家回答了所有 15 个问题，那么他/她就是赢家，并将成为天才。
退出
如果您不想失去所有积分，可以随时退出游戏。例如，您已经回答了 3 个问题，在每个问题提出之前，系统会询问您是继续还是退出。如果您选择退出，您将获得最后赚取的积分。例如，如果您已经回答了 13 个问题，并在回答第 14 个问题之前选择退出，您将获得 250,000 积分。
定时器
每个问题有 45 秒的时间。如果玩家未在 45 秒内选择答案，他/她将获得上次回答的积分并被淘汰出局。
所有这些游戏规则逻辑都已在我使用 AngularJS 和 WEB API 的 MVC 应用程序中实现。在代码部分，我们可以详细了解如何实现此逻辑来制作我们自己的游戏。
必备组件
Visual Studio 2015。 您可以在 这里下载。
您还可以查看我之前关于使用 MVC 和 WCF REST 服务进行 AngularJs 的文章。
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
以前关于 Angular JS、MVC 和 WEB API 的文章
本文将详细介绍如何使用 MVC、Angular JS 和 WEB API 2 创建一个在线“你是否是天才”游戏。本文将介绍
- 如何在 SQL Server 中创建示例表和数据库。
- 使用 Entity Framework 连接到数据库。
- 创建 WEB API 控制器以获取数据并使用 LINQ 查询选择 16 个随机结果。
- 如何在 MVC 应用程序中安装 Angular JS 包。
- 如何创建我们的 Angular JS 应用程序来制作我们自己的“你是否是天才”游戏。
Angular JS
我们可能都熟悉 Model、View、View Model (MVVM) 以及 Model、View 和 Controller (MVC)。Angular JS 是一个纯粹基于 HTML、CSS 和 JavaScript 的 JavaScript 框架。
Angular JS 的 Model View Whatever (MVW) 模式类似于 MVC 和 MVVM 模式。在我们的示例中，我使用了 Model、View 和 Service。在代码部分，让我们看看如何在我们的 MVC 应用程序中安装和创建 Angular JS。
如果您有兴趣阅读更多关于 Angular JS 的内容，请访问以下链接。
https://w3schools.org.cn/angular/default.asp
使用代码
1) 创建数据库和表
我们将在 'GeniusDB' 数据库下创建一个 QuestionDetails 表。
以下是创建数据库、表和示例插入查询的脚本。请在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2014。
-- =============================================
-- Author : Shanu
-- Create date : 2015-09-17
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-09-17
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'GeniusDB' )
DROP DATABASE GeniusDB
GO
CREATE DATABASE GeniusDB
GO
USE GeniusDB
GO
-- 1) //////////// QuestionDetails table
-- Create Table ItemDetails,This table will be used to store the details like Item Information
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'QuestionDetails' )
DROP TABLE QuestionDetails
GO
CREATE TABLE QuestionDetails
(
Ques_ID int identity(1,1),
Question VARCHAR(MAX) NOT NULL,
Option1 VARCHAR(500) NOT NULL,
Option2 VARCHAR(500) NOT NULL,
Option3 VARCHAR(500) NOT NULL,
Option4 VARCHAR(500) NOT NULL,
Answer VARCHAR(500) NOT NULL,
CONSTRAINT [PK_QuestionDetails] PRIMARY KEY CLUSTERED
(
Ques_ID ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- Insert the sample records to the ItemDetails Table
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the Capital of India?','Delhi','OldDelhi','New Delhi','Delhi New','New Delhi')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many continent in world?','6','7','8','9','7')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Seoul is the Capital of which Country?','korea North','Japan','Korea South','China','Korea South')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Who is the First President of America?','George W. Bush','Barack Obama','George Washington','Abraham Lincoln','George Washington')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('who wrote Thirukural?','Avvaiyar','Thiruvalluvar','William Shakespeare','Kalidasa','Thiruvalluvar')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('what is the name of indian currency?','Won','Rupee','Yen','Renminbi','Rupee')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many players are there in a Cricket team?','25','40','11','6','11')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many seconds in one hour?','6','3600','36','360','3600')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Which City located in 2 Continents - Europe and Asia?','Taipei','Ashgabat','Istanbul','Athens','Istanbul')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What Bird Is Used As A Symbol Of Peace?','Peacock','Owl','Dove','White Cockatoo','Dove')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('who is father of Computer?','Charles Babbage','Antoine Lavoisier','Charles Cabbage','Nikola Tesla ','Charles Babbage')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Where did Neil Armstrong landed?','SUN','STAR','MOON','SEA','MOON')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the nick name of Wyoming State?','Water State','Sun State','Natural State','Equality State','Equality State')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Petasos beach is in which country?','Finland','Ireland','Greece','Norway','Greece')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many bones does a dog have?','Average of 319','Average of 139','Average of 913','Average of 639','Average of 319')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the Name of South korea President who got the Noble Price for Peace?','Park Geun-hye','Kim Dae-jung','Lee Myung-bak','Roh Moo-hyun','Kim Dae-jung')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('In which year did Sir Chandrasekhara Venkata Raman received the Nobel Prize for Physics?','1930','1979','1913','1989','1930')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the name of supercontinent that existed during the late Paleozoic and early Mesozoic eras?','Laurasia','Gondwana','Pangaea','Pannotia','Pangaea')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Who are the 4 people who won the Noble Prize 2 times?','Marie Curie,Malala Yousafzai,John Bardeen,Frederick Sanger','Marie Curie,Wolfgang Pauli,John Bardeen,Frederick Sanger','Marie Curie,Linus Pauling,John Bardeen,Frederick Sanger','Marie Curie,Linus Pauling,John Bardeen,Finn E. Kydland','Marie Curie,Linus Pauling,John Bardeen,Frederick Sanger')
Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the Name of present PANAMA President?','Mireya Moscoso','Juan Carlos Varela','Guillermo Endara','Martín Torrijos','Juan Carlos Varela')
select * from QuestionDetails
2) 在 Visual Studio 2015 中创建我们的 MVC Web 应用程序
安装 Visual Studio 2015 后，点击 开始 -> 程序 -> 选择 Visual Studio 2015 -> 点击 Visual Studio 2015
点击新建 -> 项目 -> 选择 Web -> ASP.NET Web 应用程序。选择您的项目位置并输入您的 Web 应用程序名称。
选择 MVC，并在“添加文件夹和核心引用”中。选择 Web API，然后点击确定。
使用 ADO.NET 实体数据模型添加数据库
右键单击我们的项目，然后点击 添加 -> 新建项。
选择 数据 -> 选择 ADO.NET 实体数据模型 -> 为我们的 EF 命名，然后点击 添加
选择“从数据库生成模型”并点击下一步。
在此处点击“新建连接”，然后提供您的 SQL Server 服务器名称并连接到您的数据库。
在这里可以看到我提供了我的 SQL 服务器名称、ID 和 PWD，连接成功后，我选择了数据库 GeniusDB，因为我们已经通过我的 SQL 脚本创建了数据库。
点击下一步，选择我们需要使用的表，然后点击完成。
点击下一步，选择我们需要的表，然后点击完成。
在这里我们可以看到我们已经创建了我们的 GeniusDBModel。
实体创建完成后，下一步我们将 WEB API 添加到我们的控制器并编写函数来进行插入/更新和删除操作。
添加 WEB API 控制器的步骤。
右键单击 Controllers 文件夹 -> 点击 添加 -> 点击 Controller。
由于我们将创建 WEB API Controller，请选择 Controller 并添加 Empty WEB API 2 Controller。为您的 Web API Controller 命名，然后点击 OK。在本例中，我将 Web API Controller 命名为“GeniusController”。
正如我们所创建的 Web API Controller，我们可以看到我们的 Controller 已经继承了 ApiController。
众所周知，Web API 是一个简单易用的 HTTP 服务，用于构建浏览器和移动端的服务。
Web API 有四种方法：Get/Post/Put 和 Delete，其中
Get 用于请求数据。（查询）
Post 用于创建数据。（插入）
Put 用于更新数据。
Delete 用于删除数据。
在我们的示例中，我们将使用Get 方法，因为我们需要从数据库获取所有益智游戏问题的详细信息。
Get 方法
在我们的示例中，我只使用了 Get 方法，因为我用它来从数据库中查询数据以显示单词益智游戏。我们需要为我们的实体创建一个对象，并编写 Get 方法来执行查询操作。
查询操作
我们使用 get 方法通过实体对象获取 QuestionDetail 表的所有详细信息，并将结果作为 IEnumerable 返回。
在这里可以看到，在 get 方法中，我使用了 Take 方法来仅显示数据库中的 16 条记录。为了从数据库中选择随机记录，我使用了 Guid.NewGuid()。
我们将此方法用于我们的 AngularJS，并在 MVC HTML 页面中显示结果。
public class GeniusController : ApiController
{
GeniusDBEntities objAPI = new GeniusDBEntities();
//get all Questions
[HttpGet]
public IEnumerable<QuestionDetail> Get()
{
return objAPI.QuestionDetails.OrderBy(x => Guid.NewGuid()).Take(16).AsEnumerable(); }
}
创建 AngularJs Controller
首先，在 Script 文件夹内创建一个文件夹，我将其命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击 MyAngular 文件夹，然后点击 添加 -> 新建项 -> 选择 Web -> 选择 AngularJs Controller 并为 Controller 命名。我将我的 AngularJs Controller 命名为“Controller.js”。
AngularJs Controller 创建完成后，我们可以看到默认情况下，Controller 会包含带有默认模块定义等代码。
我已经像下面这样修改了上面的代码，添加了模块和控制器。
如果 Angular JS 包丢失，请将包添加到您的项目中。
右键单击您的 MVC 项目，然后点击 -> 管理 NuGet 程序包。搜索 AngularJs 并点击安装。
创建 AngularJs 脚本文件的步骤
Modules.js：在这里我们添加 Angular.js JavaScript 的引用，并创建一个名为“RESTClientModule”的 Angular 模块。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", ['ngAnimate']);
})();
Controllers：在 Angular JS Controller 中，我执行了所有业务逻辑，并将数据从 WEB API 返回到我们的 MVC HTML 页面。
1) 变量声明
首先，我声明了所有需要使用的局部变量。我为每个变量添加了注释。
app.controller("AngularJs_ImageController", function ($scope, $timeout, $rootScope, $window, $http) {
//Global Variables
$scope.date = new Date();
$scope.MyName = "Shanu";
$scope.usrName = "";
$scope.AllQuestions;
//Game Hidden Table row display
$scope.showGameStart = true;
$scope.showGame = false;
$scope.showresult = false;
$scope.showlifeline = false;
//Game Detail Display Variables
$scope.Question = "";
$scope.Option1 = "";
$scope.Option2 = "";
$scope.Option3 = "";
$scope.Option4 = "";
$scope.Answers = "";
$scope.Resuts = "";
$scope.ImageAnswer = "won.png";
//Game variable declared
$scope.questionCount = 1;
$scope.totalPoints = 0;
$scope.rowCount = 0;
//To Display Game Lifeline Images and Status
$scope.imgcomputer = "computerE.png";
$scope.imgcomputerStatus = 0;
$scope.img50 = "50E.png";
$scope.img50Status = 0;
$scope.fiftyElimination = 0;
$scope.imgShanu = "shanuE.png";
$scope.imgShanuStatus = 0;
$scope.imgChange = "changeE.png";
$scope.imgChangeStatus = 0;
$scope.showlifelinetext = "";
//To Display Game Lifeline Images and Status
$scope.answer1ClickStatus =0;
$scope.answer2ClickStatus = 0;
$scope.answer3ClickStatus = 0;
$scope.answer4ClickStatus = 0;
//Timer to display the countdown
$scope.counter = 45;
var countdownStop;
2) 游戏开始函数
默认情况下，我会显示游戏的玩法和给玩家的说明。玩家可以输入他们的名字，然后点击开始游戏按钮来开始新游戏。
在点击开始游戏按钮时，我调用 AngularJs 方法 startGame 来检查用户是否输入了名字。如果用户未输入名字，我会要求其输入名字来开始游戏。如果用户输入了名字，我将调用函数向用户显示第一个问题。注意：问题是随机的，所以第一次出现的问题不会重复。然后我将调用 timerCountDownStart 函数。在此函数中，我将开始倒计时，它将从 45 开始，每秒递减直到 0。玩家有 45 秒的时间回答每个问题。
$scope.startGame = function () {
if($scope.usrName=='')
{
alert("Enter Your Name to start the game !");
$scope.showGameStart = true;
$scope.showGame = false;
$scope.showresult = false;
}
else
{
selectGameDetails();
$scope.timerCountDownStart();
$scope.showGameStart = false;
$scope.showGame = true;
$scope.showresult = false;
}
}
selectGameDetails() 显示每个问题
当用户点击“开始游戏”按钮时，我将问题编号显示为 1，通过 $http.get('/api/ Genius /') 获取数据库中的 16 个随机问题，并将结果数据存储到 $scope. Question 中。对于第一个问题，行计数为 0，我将显示第 1 个问题的相关信息及答案。
//get all Game Details from Database
function selectGameDetails() {
$http.get('/api/Genius/').success(function (data) {
$scope.AllQuestions = data;
if ($scope.AllQuestions.length > 0) {
$scope.Question = $scope.AllQuestions[$scope.rowCount].Question;
$scope.Option1 = $scope.AllQuestions[$scope.rowCount].Option1;
$scope.Option2 = $scope.AllQuestions[$scope.rowCount].Option2;
$scope.Option3 = $scope.AllQuestions[$scope.rowCount].Option3;
$scope.Option4 = $scope.AllQuestions[$scope.rowCount].Option4;
$scope.Answers = $scope.AllQuestions[$scope.rowCount].Answer;
}
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
}
计时器倒计时
timerCountDownStart() 开始倒计时
在此方法中，倒计时将从 45 开始，每秒递减直到 0。玩家有 45 秒的时间回答每个问题。我将一个一个地递减计数器值。
$scope.timerCountDownStart = function () {
countdownStop = $timeout(function () {
console.log($scope.counter);
if ($scope.counter >= 1) {
$scope.counter--;
$scope.timerCountDownStart();
}
else
{
$scope.timerCountDownStop();
$scope.pointsCalculations(1);
$scope.Resuts = "Sorry Time out " + $scope.usrName + " You lose the game :( .Your Total points are " + $scope.totalPoints;
alert($scope.Resuts)
$scope.ImageAnswer = "lose.png";
$scope.wrongAnswerandLoseGame();
}
}, 1000);
};
$scope.timerCountDownStop = function () {
$timeout.cancel(countdownStop);
}
当计数器值为 0 时，我将停止计时器并显示“您输掉了游戏”的警报消息，并显示玩家的最后得分。在这里我们可以看到得分为 0，因为我在第一个问题上未能在 45 秒内回答。
生命线支持
正如我之前所说的，游戏中用户有 4 条生命线。用户可以在游戏中全部使用这 4 条生命线来赢得天才奖。
让我们逐一看看这些生命线。
求助电脑：如果用户不知道当前问题，用户可以要求计算机显示答案。注意：答案有 90% 的几率正确，因此玩家需要自己决定是否选择计算机提供的答案。该生命线每个游戏玩家只能使用一次。在这里，我们可以看到对于以下问题，我不知道答案，所以我点击了“求助电脑”生命线。一旦我点击它，求助电脑的图片将变为禁用状态。用户只能使用一次，所以请在使用此选项前仔细考虑。
在这里我们可以看到，当我点击“求助电脑”生命线时。计算机将在顶部显示答案，如“计算机说正确答案可能是“319 的平均值”，请选择您的选项。”
//to check the Computer Lifeline already used or not If its not used then change the Computer image to Disabled Image.User can click (use only) one time
$scope.funComputerLifeline = function () {
if($scope.imgcomputerStatus==0)
{
$scope.imgcomputer = "computerD.png";
$scope.imgcomputerStatus = 1;
$scope.showlifelinetext = "Computer Says the Correct Answer might be " + $scope.Answers + " Pick Your Choice ";
alert($scope.showlifelinetext)
$scope.showlifeline = true;
}
}
50/50：将删除 2 个错误答案选项。玩家必须从剩余的 2 个选项中选择正确答案。玩家可以使用此生命线从 4 个答案选项中删除任意 2 个未回答的选项。我们可以在下面看到，对于这个问题，我使用了 50/50 生命线。此生命线只能使用一次。
在这里我们可以看到，当我点击 50:50 生命线时。它将删除 2 个错误答案。在这里，B 和 C 已被移除，现在玩家有 A 和 D 两个选项。玩家需要从 A 和 D 中选择正确答案。我们还可以看到倒计时正在进行，倒计时是 26，用户需要在时限内选择答案。并且用户只能使用 50:50 生命线一次。在这里我们可以看到 50:50 生命线的图像已变为禁用图像。在代码部分，我们可以看到我将检查选项和答案，并从列表中删除 2 个不匹配的选项。
//to check the 50/50 Lifeline already used or not If its not used then change the 50/50 image to Disabled Image.User can click (use only) one time
$scope.funFiftyLifeline = function () {
if ($scope.img50Status == 0) {
if ($scope.Option1 != $scope.Answers) {
if ($scope.fiftyElimination <= 1) {
$scope.Option1 = "";
$scope.fiftyElimination = $scope.fiftyElimination + 1;
}
}
if ($scope.Option2 != $scope.Answers) {
if ($scope.fiftyElimination <= 1) {
$scope.Option2 = "";
$scope.fiftyElimination = $scope.fiftyElimination + 1;
}
}
if ($scope.Option3 != $scope.Answers) {
if ($scope.fiftyElimination <= 1) {
$scope.Option3 = "";
$scope.fiftyElimination = $scope.fiftyElimination + 1;
}
}
if ($scope.Option4 != $scope.Answers) {
if ($scope.fiftyElimination <= 1) {
$scope.Option4 = "";
$scope.fiftyElimination = $scope.fiftyElimination + 1;
}
}
$scope.img50 = "50D.png";
$scope.img50Status = 1;
}
}
求助 Shanu：这与求助计算机生命线类似。如果用户不知道当前问题。用户可以求助于 Shanu 显示答案。注意：答案有 90% 的几率正确，因此玩家需要自己决定是否选择 SHANU 提供的答案。此生命线每个游戏玩家只能使用一次。在这里，我们可以看到对于以下问题，我不知道答案，所以我点击了“求助 Shanu”生命线。一旦我点击它，求助电脑的图片将变为禁用状态。用户只能使用一次，所以请在考虑使用此选项前仔细思考。
在这里我们可以看到，当我点击“求助计算机”生命线时。计算机将在顶部显示答案，如“Shanu 说正确答案可能是“Thiruvalluvar”，请选择您的选项。”
//to check the Shanu Lifeline already used or not If its not used then change the Shanu image to Disabled Image.User can click (use only) one time
$scope.funShanuLifeline = function () {
if ($scope.imgShanuStatus == 0) {
$scope.imgShanu = "shanuD.png";
$scope.imgShanuStatus = 1;
$scope.showlifelinetext = "Shanu Says the Correct Answer might be " + $scope.Answers + " Pick Your Choice ";
alert($scope.showlifelinetext)
$scope.showlifeline = true;
}
}
更换问题：（使用此选项，用户可以更换当前问题为其他选项的问题。如果用户点击更换问题，将显示另一个随机问题。注意：由于显示的是随机问题，因此可能更容易或更难，玩家需要仔细思考后决定是否使用此选项。这是一个棘手的选项。）
在这里我们可以看到，当用户点击“更换”生命线时，我将禁用该选项并调用 NextQuestion 方法来为玩家显示另一个随机问题以玩游戏。
//to check the Change Question Lifeline already used or not If its not used then change the Change Question image to Disabled Image.User can click (use only) one time
$scope.funChangeLifeline = function () {
if ($scope.imgChangeStatus == 0) {
$scope.imgChange = "changeD.png";
$scope.imgChangeStatus = 1;
$scope.NextQuestion(1);
}
}
当前问题显示：一旦玩家回答了问题，我将增加 QuestionCount 以显示下一个问题。同时，在积分和问题编号显示的右侧，我将动态改变当前问题表格单元格的背景色为红色。在这里我们可以看到，在我正确回答了第 1 个问题后，我将动态地用红色显示右侧的第 2 个问题。
HTML：这里是 HTML 的示例 2 个答案单元格设计。在这里我们可以看到表格单元格中使用了 AngularJS 的 ng-class。我将检查 current questionCount 并将单元格颜色设置为红色或默认颜色。如果 Answer 为 2，我将通过检查 QuestionCount 来显示红色。
<tr>
<td ng-class="{changeColor: questionCount == '2', actualColor: questionCount != '2'}" align="center">
<b>2</b>
</td>
<td ng-class="{changeColor: questionCount == '2', actualColor: questionCount != '2'}" align="center">
<b>200 (Points)</b>
</td>
</tr>
CSS：在 CSS 中，我将为 actual changeColor 设置表格单元格颜色，以获取当前问题的颜色。
.actualColor {
background-color: #c2cfd8; color:#9F000F ;border: solid 1px #659EC7;cursor: pointer;
}
.changeColor {
background-color: #ff0000; color:#FFFFFF ;border: solid 1px #659EC7;cursor: pointer;
}
AngularJS：在 next question 方法中，我将增加 questioncount 并向用户显示下一个问题。在 Next Question 方法中，我将检查用户确认，询问他是否要继续游戏或带着当前积分退出游戏。如果用户点击 OK，他将继续玩下一个问题。如果玩家点击 Cancel，他将退出游戏，并获得上次回答问题的积分。
// If answer correctly then display the next Question
$scope.NextQuestion = function (nextQuestionCount) {
if (nextQuestionCount == 1) {
}
else
{
if ($scope.questionCount <= 14)
{
var strconfirm = confirm("Do you Like to Continue or Walk Away.if you would like to continue the game click YES if you want to Quit game and go with the money then click Cancel?");
if (strconfirm != true) {
$scope.pointsCalculations(0);
$scope.Resuts = "Thank You for Playing " + $scope.usrName + " Your Total points are " + $scope.totalPoints;
alert($scope.Resuts)
$scope.ImageAnswer = "won.png";
$scope.wrongAnswerandLoseGame();
return true;
}
}
$scope.questionCount = $scope.questionCount + 1;
$scope.timerCountDownStart();
$scope.counter = 45;
}
$scope.rowCount = $scope.rowCount + 1;
$scope.timerCountDownStop();
$scope.Question = $scope.AllQuestions[$scope.rowCount].Question;
$scope.Option1 = $scope.AllQuestions[$scope.rowCount].Option1;
$scope.Option2 = $scope.AllQuestions[$scope.rowCount].Option2;
$scope.Option3 = $scope.AllQuestions[$scope.rowCount].Option3;
$scope.Option4 = $scope.AllQuestions[$scope.rowCount].Option4;
$scope.Answers = $scope.AllQuestions[$scope.rowCount].Answer;
$scope.answer1ClickStatus = 0;
$scope.answer2ClickStatus = 0;
$scope.answer3ClickStatus = 0;
$scope.answer4ClickStatus = 0;
$scope.showlifeline = false;
$scope.showlifelinetext = "";
}
退出：在每个问题之前，用户可以选择继续游戏或退出游戏并获得上次回答问题的积分。在这里我们可以看到，在我回答了第 2 个问题后，我选择了取消继续游戏并选择了退出，我的积分是 200。
答案：当用户点击每个答案时，我将检查用户点击的答案是否与实际答案匹配。如果两个答案都正确，我将显示下一个问题。
在这里我们可以看到，我点击了正确的答案，如果我点击 OK，它将显示下一个问题供我玩。
//Answer A Clicked
$scope.answerAClicked = function () {
if ($scope.Option1 == $scope.Answers)
{
$scope.answer1ClickStatus = 2;
if ($scope.questionCount <= 14) {
$scope.NextQuestion(0);
}
else if ($scope.questionCount == 15) {
$scope.Resuts = "Wow " + $scope.usrName + " :) you won the game .You are the real Genius .Your total points is 1 Million :)";
alert($scope.Resuts)
$scope.ImageAnswer = "won.png";
$scope.wrongAnswerandLoseGame();
}
}
else
{
$scope.answer1ClickStatus = 3;
$scope.wrongAnswerPoints();
$scope.Resuts = "Sorry Wrong Answer Dear " + $scope.usrName + " You lose the game :( .Your Total points are " + $scope.totalPoints;
alert($scope.Resuts)
$scope.ImageAnswer = "lose.png";
$scope.wrongAnswerandLoseGame();
}
}
错误答案：如果玩家选择了错误答案，我将显示消息以及他/她当前获得的积分。
//for calculating wrong answer points
$scope.wrongAnswerPoints = function () {
if ($scope.questionCount <= 4)
{
$scope.totalPoints = "0";
}
else if ($scope.questionCount <= 9) {
$scope.totalPoints = "1,000";
}
else if ($scope.questionCount <= 14) {
$scope.totalPoints = "32,000";
}
}
天才：如果玩家回答了所有 15 个问题，那么他/她将成为天才。在这里我们可以看到，我回答了所有 15 个问题，并赢得了 100 万积分。
关注点
注意：您可以根据您的连接修改数据库。所有问题和答案都来自数据库。您可以在表中添加任意数量的问题和答案。每次我只会从数据库中过滤 16 个随机问题。如果您添加更多问题和答案，这将避免玩家重复遇到问题。希望您喜欢这款游戏，玩得开心。
已测试浏览器：Chrome 和 IE 11。
历史
shanuAngularJSGenius.zip - 2015-09-18