用JavaScript创建一个简单的Windows 8游戏:输入和声音点

  • A+
所属分类:WINDOWS问题

本系列文章将向您展示如何使用HTML 5、JavaScript、WinJS和CreateJS.

该游戏基于xna示例游戏。“弹射器战争实验室”...在开发基于Web技术的Windows 8新版本时,我们将重用该游戏中的资产。

在这篇文章中,我们将响应用户的输入,通过添加声音使事情变得更加生动。

处理用户输入

当然,我们可以用很多方法拍摄瞄准工作--随机的、基于时间的、基于精度的(例如“单击…”)。),但在本例中,我们将让用户绘制一条线,指示方向和速度。

首先,让我们在

1
default.js

:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图

Windows 8支持多种绘制方式-鼠标、触摸、钢笔-我们的游戏需要足够的灵活性,以支持任何用户。幸运的是,MSPoter系统将对所有这些的支持合并为一个。我们会用

1
MSPointerDown/Up

开始和结束目标,加上

1
MSPointerMove

在用户调整目标时提供反馈。

顺便说一下,也有很大的支持

1
MSGesture

用于检测手势,如抽头、双击等。处理输入和手势的一个很好的示例是“BallInEight”样本在MSDN上。

这些事件是通过指向监听器函数来使用的,当它们触发时调用。现在让我们来处理这个问题,在

1
initialize()

职能:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图1

现在是函数本身:添加您喜欢的地方,但我放在

1
update()

1
fireShot()

:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图2

注意,这里留下了一个练习。为了简单起见,在

1
adjustAim()

功能。继续并尝试添加-从早期的部分,我们已经使用了完全相同的技术,您将需要。

以及一个帮助我们计算目标的函数:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图3

同样,简单是一天的规则,这只适用于第一名玩家,但下面是所发生的事情:

  • 项目239-241-创造一个新的
    1
    Point

    从起点到终点

    1
    Point

    将其缩小到适用于每帧/更新的良好速度。

  • 第242和244行-确保
    1
    x

    1
    y

    是有限的,所以镜头不会简单地从屏幕上消失,走得太快。

  • 第243和245行-确保枪声指向敌人…或多或少。

我们之前添加了一些临时代码到

1
update()

玩家1总是随机开火。现在我们可以用新的

1
aimVector

:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图4

继续运行游戏…

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图5

现在你可以用鼠标,笔,或触摸来控制射击!

“我一定听到了什么!”--加上声音

我们作为游戏开发人员的工作直到我们有了声音才能完成。我们已经把声音文件放回去了第二部分因此,让我们通过加载它们来进行下一步。

首先,在

1
default.js

保持事物整洁:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图6

从第二部分我们已经接通了

1
PreloadJS

确保我们的资源在游戏开始时就准备好了?我们可以对声音使用相同的方法,所以让我们将它们添加到清单中:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图7

要使用这些文件,我们将创建HTML实例

1
audio

元素。长话短说,如果您只是创建一个音频实例每个声音文件,您可能会遇到剪辑,因为一个声音无法播放之前,该实例的播放完成。有几种处理此问题的方法(例如,请参见HTML 5音频和JavaScript控件),但是我们会做简单的&低效每次我们播放声音时都要使用一个实例。

注意,我们不会使用SoundJS(CreateJS的另一部分)在这个例子中,当然欢迎您带它转一转!

添加

1
playSound(file)

辅助功能:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图8

就这样!现在我们只需要调用它,指定指向正确文件的常量。我们会在几个地方这样做。

首先,添加一个调用到

1
fireShot()

:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图9

现在,

1
processHit()

:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图10

正如评论中提到的那样,如果你想让一个弹射器被多次击毁,你可以用“命中”的声音代替“爆炸”。

最后,玩完赢或输的声音

1
endGame()

:

用JavaScript创建一个简单的Windows 8游戏:输入和声音点插图11

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: