Win10系列:JavaScript小球运动示例
通过前面内容的学习,相信读者已经对开发基于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小球运动示例的更多相关文章
- Windows Store App JavaScript 开发:小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- Javascript调用ActiveX示例
Javascript调用ActiveX示例 写一个ActiveX控件比如叫做MyNameSpace.SecreteInfo,安装在客户机器上,这样可以通过c++获取到机器的几乎任何信息. 在网 ...
- 原生js小球运动
//html代码 <input type="button" value="小球运动" /> <div></div> //js ...
- 3.翻译系列:EF Code-First 示例(EF 6 Code-First系列)
原文链接:http://www.entityframeworktutorial.net/code-first/simple-code-first-example.aspx EF 6 Code-Firs ...
- Velocity魔法堂系列一:入门示例(转)
Velocity魔法堂系列一:入门示例 一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本 ...
- JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890转1,234,567,890;argruments 对象(类数组)转换成数组
一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746 ...
- day38—JavaScript的运动基础-匀速运动
转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...
- Win10系列:JavaScript综合实例1
上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识 ...
随机推荐
- WebSocket前后台交互
其实对于前后台交互有很多种方法(只列举我知道的,嘻嘻): 1:from 表单: 使用场景——小信息量提交给后台 2:ajax(跨域的话用jsonp): 可以进行多量的前后台信心传递: 但实时性不高,不 ...
- 多线程工具之CompletionService
这里涉及到Java的多线程并发知识,以及线程池相关的知识.就不在此说明了.具体说说CompletionService的应用场景和使用方法. 比如我们有10个线程需要丢到线程池里面去执行,然后把10个线 ...
- python如何判断一个字符串是中文,还是英文。
参考链接: https://blog.csdn.net/hit0803107/article/details/52885702 decode: 将其它编码转成 ===>unicode enc ...
- Win7无法保存共享帐户密码
每次机器重启完之后,网络共享的密码总是要重新输入. [记住我的凭据]选项不起作用. 查到了下面百度经验的文章,挺靠谱的. https://jingyan.baidu.com/article/59a01 ...
- 基于 Spring Cloud 完整的微服务架构实战
本项目是一个基于 Spring Boot.Spring Cloud.Spring Oauth2 和 Spring Cloud Netflix 等框架构建的微服务项目. @作者:Sheldon地址:ht ...
- 雷林鹏分享:XML 相关技术
XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...
- Python中字典和集合的用法
本人开始学习python 希望能够慢慢的记录下去 写下来只是为了害怕自己忘记. python中的字典和其他语言一样 也是key-value的形式 利用空间换时间 可以进行快速的查找 key 是唯一的 ...
- HDOJ 1023 Train Problem II
考虑第1个火车出站的时刻,从1到n都有可能,如果它是第i个出栈,那么前面有规模为i-1的子问题,后面有规模为n-i的子问题.累加.
- 无线网络覆盖-java中,用Math.sqrt()时,必须要注意小数问题
时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 我们的乐乐同学对于网络可算得上是情有独钟,他有一个计划,那就是用无线网覆盖郑州大学. 现在学校给了他一个机会,因此他要购买 ...
- 数组<-->变量
/** * *数组与变量之间转换 **/ $name='jb51'; $email='jb51@jb51.net'; $info=compact('name','email'); print_r($i ...