Windows Store App JavaScript 开发：小球运动示例
通过前面内容的学习，相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解，本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目，以及怎样向项目中添加功能实现代码。
首先启动Visual Studio 2012集成开发工具，打开“文件”菜单，选择其中的“新建项目”菜单项后会弹出“新建项目”窗口。在“新建项目”窗口左侧的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;
//每隔10毫秒递归调用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 小球运动效果图
Windows Store App JavaScript 开发：小球运动示例的更多相关文章
- Windows Store App JavaScript 开发：简单对象绑定
简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...
- Windows Store App JavaScript 开发：页内导航
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...
- Windows Store App JavaScript 开发：获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- Windows Store App JavaScript 开发：选取文件和文件夹
前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...
- Windows Store App JavaScript 开发：模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
- Windows Store App JavaScript 开发：页面加载
在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...
- Windows Store App JavaScript 开发：WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...
- Windows Store App JavaScript 开发：文件选取器
正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...
- Windows Store App Image开发示例
通过上面的介绍,读者已经了解了Image对象及ImageBrush对象的使用方法和常用属性,在实际的开发工作中,比较常用的是Image对象,下面以一个幼儿园识物识字卡应用为例,来帮助读者更好的理解Im ...
随机推荐
- java性能监控常用命令
jps -m -l:主要用来输出JVM中运行的进程状态信息 jstack -l pid 来观察锁持有情况 jsatck pid | grep pid(十六进制):输出进程pid的堆栈信息 jmap - ...
- [java报错]Could not instantiate listener XXXXXX
写在开头的话: 兜兜转转,辞去了深圳的工作,回到了武汉,从事的居然一度是我最不想学的语言-java,曾经以为自己并不会java,但是上手之后,发现语言都是相通的,自己一度排斥学习java真的是不能再傻 ...
- webDriver 执行杀死浏览器进程方法
/** * 执行dos命令 * @param command */ public static void command(String command) { ...
- 微信小程序-画布组件
canvas 画布. 注: canvas 标签默认宽度300px.高度225px 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的 ...
- Fluent API 配置
EF里实体关系配置的方法,有两种: Data Annotation方式配置 也可以 Fluent API 方式配置 Fluent API 配置的方法 EF里的实体关系 Fluent API 配置分为H ...
- myeclipse10 优化设置
http://it.oyksoft.com/post/5898/ 一.Myeclipse10修改字体MyEclipse10是基于Eclipse3.7内核,但在Eclipse的Preferences-〉 ...
- Arduino 极速入门系列 - 光控灯（2） - 关于开关，上拉、下拉电阻那些事
接上篇,这次继续讲解光控灯的另外两个组成部分 - 开关和光敏电阻,光控灯里面将会有自锁开关按钮和光敏电阻.这此主要给新玩电子的朋友解释一下开关按钮的做法. 开关按钮的引脚电平读取问题 - 新手专用 我 ...
- Servlet 工程 web.xml 中的 servlet 和 servlet-mapping 标签
本文转载自 陈蒙的博客 最近在学习JavaEE轻量级框架,对于servlet-mapping中的url-partten标签以及网页访问时的执行顺序不是很清楚,搜索了很多遍终于找到了这篇博文(搜索也是个 ...
- js创建节点及其属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 防止SQL注入的方法
方法1⃣️addslashes(); $username=addslashes($_POST['username']); 方法2⃣️mysql_escape_string(); 方法3⃣️开启魔术引号 ...