5 cool javascript apps_javascript技巧

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/

时间: 2024-11-06 09:40:50

5 cool javascript apps_javascript技巧的相关文章

JavaScript 小技巧之如何使用运算函数

javascript|函数|技巧|运算 这是一个特殊的内建函数eval包括了运算式子为其参数,运算元,并回传一个值. 这函数对于运算一个表示的数值字串而言非常有用,举例来看,从FORM所输入的值总是字串,但你也许想要拿来运算,那我该怎么办?? 下面的这一个例子包函了输入的文字栏位,应用的运算函数和显示结果的另一区块.假如你打了一个数值运算式在第一个栏位,并且按下了按钮,运算式便会开使运算, <SCRIPT> function compute(obj) { obj.result.value =

JavaScript小技巧之如何用滑鼠控制Web页面

javascript|web|技巧|控制|页面 第一集 如何用滑鼠控制Web页面 在这一部分首先要为你展示的JavaScript特性是将你的滑鼠移到这个不同颜色的连结上面,此时看看浏览器下的状态列有何结果,然后这样的功能我们可以与JavaScript的功能相结合.怎样做到的呢 以下就是这一个连结的作法: <a href="tpage.htm" > 在这儿你只要在传统 <a> 的标签中加入 onMouseOver 的 method 就可达成你要的效果了.这里的 w

介绍9点个人认为比较重要的javascript 编程技巧

  介绍9点个人认为比较重要的javascript 编程技巧        1.巧用判断: 在js中,NaN,undefined,Null,0,"" 在转换为bool的时候,是false,所以,可以这样写. 代码如下: if(!obj) {} 表示一个对象如果为false的时候所做的事情,因为如果obj为以上任何一个,那么就是false,!false即是true,这样,就不需要 if(obj==null || obj == NaN ....). 2.巧用运算符: 有一个很经典的技巧,得

Javascript优化技巧之短路表达式详细介绍

 这篇文章主要介绍了Javascript优化技巧之短路表达式详细介绍,本文讲解了什么是短路表达式,并给出了一些示例,需要的朋友可以参考下     什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值.这是这两个操作符的一个重要属性. 一个最简单的例子:   代码如下: foo = foo||bar;   这行代码是什么意思?答案:  

全面介绍javascript实用技巧及单竖杠_javascript技巧

JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧.本文将为你全面的介绍其中的知识点. 一.js整数的操作 使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等

12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

每日十条JavaScript经验技巧(一)_基础知识

1. 不使用script自闭合标签 script中使用自闭合标签,虽然他在XHTML中合法,但是不符合HTML规范,而且得不到某些浏览器的正确解析.我曾经就在引入EXT时使用此方式,导致无法正确执行脚本. <script src="example.js"/> --> <script src="example.js"></script> 2. 将脚本放到</body>前面 如果将脚本文件放到<head>

每日十条JavaScript经验技巧(二)_基础知识

1. 非数值类型转数值 使用Number()转换时: undefined会转为NaN 如果字符串以0开始,浏览器会忽略前导0,不会按照八进制进行转换 如果字符串以0x开始,浏览器会按照十六进制转化为十进制返回 如果字符串有字符,除(+,-,.)外都会转为NaN,十六进制时,字符串包含任何非数字字符都返回NaN 如果是对象转换,则对象先使用valueof(),然后按照规则转换.如果无valueOf方法,则调用toString方法,再转换. 使用parseInt()转换时: parseInt会忽略前

分享经典的JavaScript开发技巧_javascript技巧

JavaScript开发经典技巧分享给大家: 1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量.2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快.[10] === 10    // is false [10]  == 10    // is true '10' == 10     // is true '10' === 1