通过前面内容的学习，相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解，本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目，以及怎样向项目中添加功能实现代码。

首先启动Visual Studio 集成开发工具，打开"文件"菜单，选择其中的"新建项目"菜单项后会弹出"新建项目"窗口。在"新建项目"窗口左侧的JavaScript模板分类中选择"Windows应用商店"，并在窗口中间的项目模板列表中选择"空白应用程序"项目模板，然后在窗口下方的"名称"文本框中输入项目命名AMovingBall，点击"新建项目"窗口右下角的"确定"按钮完成项目创建。

完成项目的创建之后打开"解决方案资源管理器"窗口，可以发现项目中已经默认包含了一些文件夹和文件，本示例将会用到项目根目录下的default.html文件和js文件夹中的default.js文件。

首先在default.html文件中设计应用程序的前台界面，打开default.js文件可以发现，文件中已经默认包含了对WinJS库文件以及default.js、default.css文件的引用。在body元素内添加一个画布元素，并将id属性值设置为AnimationCanvas。相应的HTML代码片段如下所示：

<body>

<canvas id="AnimationCanvas"></canvas>

</body>

下面在default.js文件中实现小球运动的逻辑功能。打开default.js文件会看到，文件中已经默认包含了一个匿名函数，并在匿名函数内定义了处理应用程序生命周期事件的函数。在"var activation = Windows.ApplicationModel.Activation;"语句后面定义三个变量，以便在后面的程序中使用，代码片段如下所示：

var animationContext = null;

var ballPosition = { x: 100, y: 100 };

var ballSpeed = { x: 5, y: 4 };

其中animationContext变量用来保存与画布相关的对象，另外两个变量ballPosition和ballSpeed中分别保存了小球的初始位置和初始运动速度。

接下来在应用程序激活事件的处理函数中"args.setPromise(WinJS.UI.processAll());"语句的后面添加代码，初始化画布画布相关对象并在画布上绘制小球，代码片段如下所示：

var animationCanvas = document.getElementById("AnimationCanvas");

//设置画布大小

animationCanvas.width = window.innerWidth;

animationCanvas.height = window.innerHeight;

//获取用于绘制2d图形的画布相关的对象

animationContext = animationCanvas.getContext("2d");

drawABall();

在上面的代码中，首先调用document对象的getElementById函数获得id属性值为AnimationCanvas的元素对象，并赋值给animationCanvas变量。接着通过animationCanvas变量为元素对象的width和height属性赋值分别设置画布的宽度和高度。宽度设置为应用程序窗口中内容部分的宽度，不包含窗口边框和滚动条等的宽度；高度设置为应用程序窗口中内容部分的高度，不包含边框和工具条等的高度。然后通过animationCanvas变量调用元素对象的getContext函数得到用于2D绘图的对象，并保存在前面定义的animationContext变量中，最后调用drawABall函数在画布上绘制运动的小球。

下面给出代码中使用的drawABall函数，这个函数的位置在"app.start();"语句之前，实现每隔一段时间在画布上绘制一个小球，函数的代码如下所示：

function drawABall() {

var animationCanvas = document.getElementById("AnimationCanvas");

//清除画布内容

animationContext.clearRect(0, 0, animationCanvas.width, animationCanvas.height);

animationContext.beginPath();

animationContext.fillStyle = "#FFFFFF";

//表述形状

animationContext.arc(ballPosition.x, ballPosition.y, 50, 0, Math.PI * 2, true);

//开始绘制小球

animationContext.fill();

//当小球碰到画布的边缘时，改变运动方向

if (ballPosition.x < 50 || ballPosition.x > animationCanvas.width - 50) {

ballSpeed.x = -ballSpeed.x;

}

if (ballPosition.y < 50 || ballPosition.y > animationCanvas.height - 50) {

ballSpeed.y = -ballSpeed.y;

}

//改变小球的圆心位置

ballPosition.x += ballSpeed.x;

ballPosition.y += ballSpeed.y;

毫秒递归调用draw()函数，实现运动效果

setTimeout(function () { drawABall() }, 10);

}

在上面的代码中，首先调用document对象的getElementById函数获得id属性值为AnimationCanvas的元素对象，并赋值给animationCanvas变量。通过animationContext调用元素对象的clearRect函数清除画布上的内容，由于在内存中图形是以一组子路径的形式存储的，因此在清除了画布内容之后还需要通过animationContext变量调用元素对象的beginPath函数重置子路径。接着通过animationContext变量使用元素对象的fillStyle函数设置填充颜色，调用arc函数指定所绘制图形的位置和形状，其中位置由ballPosition变量指定，形状则是一个半径为50像素的小球，并使用fill函数开始绘制小球。接下来根据position对象判断小球在应用程序界面中的位置，当小球圆心的位置与左边缘或右边缘的距离小于小球的半径时，将小球在水平方向的速度设置为当前水平方向速度的相反数，当小球圆心的位置与上边缘或下边缘的距离小于小球的半径时，将小球在竖直方向的速度设置为当前竖直方向速度的相反数，这样可以使小球在碰到画布边缘时返回画布内。最后更改ballPosition变量的值重新设置小球的位置，并调用setTimeout函数在10毫秒后调用drawABall函数，擦除画布上原有的小球并在新的位置重新绘制小球。

启动调试，将出现小球在屏幕上运动的画面，这里只捕捉了小球运动的三个时刻，如图19-6所示。在最左边的图中，小球开始向右下方运动；经过一段时间之后，小球碰到了画布的下边缘，如中间的图所示；然后小球弹回屏幕内并向右上方运动，如最右边的图所示。

图19-6 小球运动效果图

Win10系列：JavaScript小球运动示例的更多相关文章

  1. Windows Store App JavaScript 开发：小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  2. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  3. Javascript调用ActiveX示例

      Javascript调用ActiveX示例   写一个ActiveX控件比如叫做MyNameSpace.SecreteInfo,安装在客户机器上,这样可以通过c++获取到机器的几乎任何信息. 在网 ...

  4. 原生js小球运动

    //html代码 <input type="button" value="小球运动" /> <div></div> //js ...

  5. 3.翻译系列：EF Code-First 示例(EF 6 Code-First系列)

    原文链接:http://www.entityframeworktutorial.net/code-first/simple-code-first-example.aspx EF 6 Code-Firs ...

  6. Velocity魔法堂系列一：入门示例（转）

    Velocity魔法堂系列一:入门示例 一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本 ...

  7. JavaScript 系列--JavaScript一些奇淫技巧的实现方法（二）数字格式化 1234567890转1,234,567,890；argruments 对象(类数组)转换成数组

    一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746 ...

  8. day38—JavaScript的运动基础-匀速运动

    转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...

  9. Win10系列：JavaScript综合实例1

    上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识 ...

随机推荐

  1. 结合CRT与欧拉定理高阶幂求余

  2. 力扣（LeetCode） 771. 宝石与石头

    给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 S中的所有字符都是字母 ...

  3. C# 遍历文件夹筛选目标文件

    有近400G的数据,首先需要写程序把目标文件标准化名称(相当耗时,各种情形,间接说明在数据采集过程中标准化操作的重要性,这样会给后续处理带来很多不必要的麻烦和消耗) 网上找了个方法还不错,还有一种递归 ...

  4. 通过cookies跳过验证码登陆页面，直接访问网站的其它URL

    我每次手动访问去NN网的一家酒店,就不需要登陆,一旦我用脚本打开就会让我登陆,而登陆页面又有验证码,不想识别验证码,所以就想:“通过cookies跳过验证码登陆页面,直接访问网站的其它URL”   转 ...

  5. Windows 7 Update Settings Disabled (Important Updates Grayed Out)

    This worked for me: 1) Hold WindowsKey + R     (is hold Start & press R on your keyboard) 2) Typ ...

  6. OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App

    1.页面效果图:(点击底部导航按钮,可切换到不同的页面) 演示地址:http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/ 2.项目目录结构 3.核 ...

  7. You Don't Know JS: this & Object Prototypes( 第3章 对象)

    前2章探索了this绑定指向不同的对象需要函数引用的call-site. 但是什么是对象,为什么我们需要指向它们? 本章探索细节. Syntax the rules  that describe ho ...

  8. mat 使用 分析 oom 使用 Eclipse Memory Analyzer 进行堆转储文件分析

    概述 对于大型 JAVA 应用程序来说,再精细的测试也难以堵住所有的漏洞,即便我们在测试阶段进行了大量卓有成效的工作,很多问题还是会在生产环境下暴露出来,并且很难在测试环境中进行重现.JVM 能够记录 ...

  9. SSD: ReLU6

    1.在src\caffe\proto\caffe.proto中搜索message LayerParameter,在optional ReLUParameter relu_param = 123之后添加 ...

  10. PHP策略模式demo

    <?php//策略模式就是你有很多的方法,选择一种适合自己的,// 单例模式就是只有一个实例对象,不需要每个文件都要加载,比如连接数据库,// 工厂模式就是//策略模式interface cha ...