5 cool javascript apps

By Justin Silverton

The following are 5 javascript apps that I thought would never be possible.  They are all written using the canvas HTML element.

The canvas element is a third party extension to the that allows for dynamic rendering of scriptable bitmap images.

It was initially introduced by Apple or use inside their own Mac OS X Webkit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers (notably Mozilla and Firefox) and standardized by the WHATWG on new proposed specifications for next generation web technologies. Support is also present in the Opera 9.0 browser. Novell manufactures an XForms processor plugin for Internet Explorer, which also provides support for the canvas element. Independent efforts to support the canvas feature on Internet Explorer do not require plugins and are based solely on VML and Google has also begun a project to add canvas abilities to Internet Explorer using the same techniques.

Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, and image composition. Source

Note: Most of these examples are *not* compatible with Internet Explorer

1) Canvascape

A proof of concept of a 3D FPS.  There is a textured and non-textured version available.

2) MSX Emulator

This project shows us the true power of javascript and the canvas element.  It is an MSX emulator, which includes the ability to load and play game roms.

3) Unreal Soccer

A soccer game.

4) Plasma Demo

This is a port of an RGB C plasma demo

5) An Arkanoid clone

A clone of the game Arakanoid.

转自: http://www.whenpenguinsattack.com/2007/01/10/5-cool-javascript-apps/

-->

(0)

相关推荐

  • 5 cool javascript apps

    By Justin Silverton The following are 5 javascript apps that I thought would never be possible.  They are all written using the canvas HTML element. The canvas element is a third party extension to the that allows for dynamic rendering of scriptable

  • JavaScript数据推送Comet技术详解

    JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务

  • JavaScript中防止微信浏览器被整体拖动的方法

    在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动. 结构如图: 但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动page容器,会将微信浏览器整体往下拖,漏出"该网页由XXX提供"的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会滚动,上拖同样遇到了这个问题,非常影响体验.

  • Javascript代码实现仿实例化类

    Javascript能做的事情越发的多了起来,随之而来的问题即是Js代码量的增加,面对代码的加多,我选择了仿面向对像类实例化里的构造函数自动启动的方式,把所有的js代码,以注册的形式,类化了起来. 代码 /** * @version $Id$ * @author xjiujiu <xjiujiu@foxmail.com> * @description HHJsLib Framework Apps * @copyright Copyright (c) 2011-2012 http://www.x

  • Package.js 现代化的JavaScript项目make工具

    Package.js项目地址:http://code.google.com/p/package-js/ Package.js是一个很方便的JavaScript包依赖管理及Make工具.它的设计目标是使浏览器端的JavaScript Component/App 开发更加模块化.如果您只是在开发一个小型的网站,只会混杂在HTML中写几行JS代码用于改善一下用户体验,那么Package.js也许并不适合您.如果您正在开发一个中到大型的WebApp,有几十甚至几百几千个JS文件和CSS文件.HTML模板

  • javascript实现滑动解锁功能

    实现效果: css样式代码略. html代码: 页面上导入了jquery.mobile .jquery 复制代码 代码如下: <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js&quo

  • JavaScript程序员应该知道的45个实用技巧

    如你所知,JavaScript是世界上第一的编程语言,它是Web的语言,是移动混合应用(mobile hybrid apps)的语言(比如PhoneGap或者Appcelerator),是服务器端的语言(比如NodeJS或者Wakanda),并且拥有很多其他的实现.同时它也是很多新手的启蒙语言,因为它不但可以在浏览器上显示一个简单的alert信息,而且还可以用来控制一个机器人(使用nodebot,或者nodruino).掌握JavaScript并且能够写出组织规范并性能高效的代码的开发人员,已经

  • javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时

  • JavaScript 错误处理与调试经验总结

    下面总结一下JS错误处理与调试的方法 方法1:用alert() 和document.write()方法监视变量值. alert()在弹出对话框显示变量值的同时,会停止代码的继续运行,直到用户单击"确定"按钮,而document.write()则在输出值后继续运行代码.调试JS时可以根据具体情况来选择这种方法. 例如下面代码:将数组a中以1开头的数据添加到数组b中 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • 基于javascript实现九宫格大转盘效果

    本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:

随机推荐