用javascript canvas 库面向对象或canvas写一个汉诺塔可视化小游戏

博主最新文章
博主热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)下次自动登录
现在的位置:
& 综合 & 正文
JavaScript学习笔记(一)——JS基础知识介绍
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。
JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言(脚本语言是一种轻量级的)。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
所有的人无需购买许可证均可使用 JavaScript。
概念辨析 
JavaScript与Java
JavaScript最初的确是受Java启发而开始设计的,而且设计的目的之一就是“看上去像Java”,因此语法上有很多类似之处,许多名称和命名规范也借自Java。但是实际上,JavaScript的主要设计原则源自Self和Scheme,它与Java本质上是不同的。它与Java名称上的近似,是当时网景为了营销考虑与Sun公司达成协议的结果。其实从本质上讲javascript更像是一门函数式编程语言.而非面向对象的语言,它使用一些智能的语法和语义来仿真高度复杂的行为。其对象模型极为灵活、开放和强大,具有全部的反射性。
JavaScript与JScript
JScript是Microsoft公司开发的,Javascript是Netscape公司开发的.虽然他们是死对头,但是在现在的浏览器中,无论你把语言指定为Javascript 还是 Jscript, 浏览器都会综合他们两个语言的特性.所以,即使把语言指定为Javascript, 用几句JScript也是没问题的.
JavaScript与VBScript
Javascript 和 VBscript 的互通性很好,而且在 VBArray(Javascript不支持多维数组)和ASCII(Javascript不能吧字符转成ASCII)都得到了应用,这方面基础 VBScript 做得很好。所以我看了看它的代码,大致意思就是 Javascript 可以用 VBScript 的自定义函数和变量(当然不能用内置变量和函数),通过转换调用内置函数。
JavaScript与AJAX
AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),它也是一种JavaScript编程语言。JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。AJAX是基于web标准XHTML+CSS的表示;使用 DOM进行动态显示及交互;使用XML 和XSLT 进行数据交换及相关操作;使用XMLHttpRequest 进行异步数据查询、检索;使用 JavaScript 将所有的东西绑定在一起。
JavaScript与DOM
DOM是Document Object Model(文档对象模型)的简称,它是让javascript与页面交互的一种方式,能够动态修改文档中的节点,元素,属性等。DOM不仅适用于xhtml文档,对于所有的xml文档dom都是可以使用的。
DOM的级别:
1级:基本的节点操作一级里都包括了
2级:增加了对样式表,文档显示,事件处理,等的支持
3级:可以用javascript加载和保存文档,检查文档错误
JavaScript与HTML
HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言。每人都可将短小的代码片断放入HTML 页面中。
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面:document.write("&h1&" + name + "&/h1&")
可以将 JavaScript 设置为当某事件发生时才会被执行,例如页面载入完成或者当用户点击某个 HTML 元素时。
JavaScript 可以读取及改变 HTML 元素的内容。
在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。
JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。
JavaScript与CSS+DIV
CSS(Cascading Style Sheet)层叠样式表,是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。
DIV主要用来布局,与table布局相似,用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
JavaScript可以通过getElementById(id)或getElementsByTabName(TabName)等来设置或修改CSS和DIV的属性值
JavaScript与编程语言
Javascript 不是一个预编译语言,所以虽然 Javascript 的作者尽量把它写得强大。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的编程语言来推广和宣传,但是JavaScript是一门具有非常丰富特性的语言,它有着和其他编程语言一样的复杂性,或更甚复杂。实际上,你必需对JavaScript有扎实的理解才能用它来撰写比较复杂的程序。
赋值运算符(=,+=,-=,*=,/=,%=,&&=,&&=,|=,&=)
算术运算符(+,-,*,/,++,--,%)
比较运算符(&,&,&=,&=,==,===,!=,!==)
逻辑运算符(||,&&,!)、条件运算(?:)、位移运算符(|,&,&&,&&,~,^)、字符串运算符(+)
2、 表达式
1)函数由关键字function定义(也可由Function构造函数构造);
2)使用function关键字定义的函数在一个作用域内是可以在任意处调用的(包括定义函数的语句前);而用var关键字定义的必须定义后才能被调用;
3)函数名是调用函数时引用的名称,它对大小写是敏感的,调用函数时不可写错函数名;
4)参数表示传递给函数使用或操作的值,它可以是常量,也可以是变量,也可以是函数,在函数内部可以通arguments对象(arguments对象是一个伪数组,属性callee引用被调用的函数)访问所有参数;
5)return语句用于返回表达式的值。
6)yield语句扔出一个表达式,并且中断函数执行直到下一次调用next。
一般的函数都是以下格式:
  function myFunction(params){
  //执行的语句
  函数表达式:
  var myFunction=function(params){
  //执行的语句
一组包含数据的属性和对属性中包含数据进行操作的方法,称为对象。比如要设定网页的背景颜色,所针对的对象就是document,所用的属性名是bgcolor,如document.bgcolor="blue",就是表示使背景的颜色为蓝色。
而对事件的处理,W3C的方法是用addEventListener()函数,它有三个参数:事件、引发的函数、是否使用事件捕捉。为了安全性,建议将第三个参数始终设置为false;
传统的方法就是定义元素的on...事件,它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。javascript中事件还分捕获和冒泡两个阶段,但是传统绑定只支持冒泡事件。
  变量有它的类型,上例中myVariable的类型为string(字符串)
  javascript支持的常用类型还有:
  object:对象
  array:数组
  number:数;
  boolean:布尔值,只有true和false两个值,是所有类型中占用内存最少的;
  null:一个空值,唯一的值是null;
  undefined:没有定义和赋值的变量
  实际上javascript的变量是弱变量类型,你赋值给他的是字符串,他就是String .
  是数字他就是整形。是true和false他就是boolean型(注意,不能加引号,不然会被当成字符串处理)。
开发与调试
javascript程序是纯文本的,且不需要编译,所以任何纯文本的编辑器都可以编辑javascript文件
JavaScript Editor (推荐)
Dreamweaver CS4
Visual Studio 2008
Firefox FireBug (推荐)
JavaScript Editor
Visual Studio 2008
根据我自己的学习、开发和调试JavaScript的经验和体会,推荐开发使用JavaScript Editor和调试使用Firefox FireBug
当然啦,牛人直接用NotePad或VIM等文本工具直接编写,也可以的,不过我目前还远远没达到这种水平(努力的目标)
详情请见我先前发表的博客: (JavaScript 学习 和 网页制作学习)
【上篇】【下篇】博主最新文章
博主热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)博主最新文章
博主热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)当前位置: >
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/61510.jpg" width="250" height="158" alt="HTML5仿腾讯QQ开心消消乐小游戏"/>
这是一款HTML5仿腾讯QQ开心消消乐小游戏。开心消消乐是一款三消游戏。玩家只需滑动手指让三个及以上的同色小动物横竖相连即可消除,完成每关的指定消除目标就可以过关。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/11507.jpg" width="250" height="158" alt="纯javascript经典俄罗斯方块小游戏"/>
这是一款使用html、javascript和css制作的经典俄罗斯方块小游戏。该俄罗斯方块小游戏功能齐全,可以正常旋转方块,消行,快速下落等。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/81505.jpg" width="250" height="158" alt="纯CSS3经典windows扫雷小游戏"/>
这是一款使用CSS3制作的经典windows扫雷小游戏。该扫雷小游戏只有一关,界面和鼠标交互全部由CSS来完成。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/11602.jpg" width="250" height="158" alt="HTML5 Canvas 经典赛车小游戏"/>
这是一款使用canvas制作的经典赛车小游戏。它模拟经典的任天堂赛车游戏,用户可以使用方向键来控制赛车的加速和左右移动。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/01627.jpg" width="250" height="158" alt="HTML5剪刀石头布小游戏"/>
这是一款基于angular.js的HTML5剪刀石头布小游戏。这个小游戏是一个人机对战游戏,用户可以选择剪刀、石头和布三种选项中的一个,然后电脑随机出剪刀、石头和布,获胜者加一分。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/72100.jpg" width="250" height="158" alt="纯javascript实现汉诺塔可视化小游戏"/>
这是一款使用纯javascript制作的汉诺塔可视化小游戏。汉诺塔源于印度一个古老传说的益智玩具。游戏中需要将所有的盘子移动到右边的柱子上,每次移动一个盘子,大盘子必须在小盘子之下。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/61613.jpg" width="250" height="158" alt="HTML5 canvas高性能打方块小游戏"/>
BlockBlaster是一款高性能的HTML5 canvas打方块小游戏。这个HTML5游戏仅使用12KB的javascript代码来完成。它可以连发子弹,敌方方块被打碎后会分裂为多个小方块。整个游戏非常流畅,性能非常好。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/91812.jpg" width="250" height="158" alt="HTML5响应式网页贪吃蛇小游戏"/>
这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏。在游戏中,你可以使用键盘的上下左右方向键来控制贪吃蛇的运动方向,屏幕中会随机出现一个绿色的食物,你的任务就是控制蛇去吃这个食物。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/11738.jpg" width="250" height="158" alt="HTML5 canvas趣味飞船捡金币小游戏"/>
这是一款非常有趣的HTML5 canvas飞船捡金币小游戏。游戏中你可以使用上下左右方向键来控制小飞船的飞行。金币会在屏幕中随机出现,飞船具有吸附金币的能力,越接近吸附的越多,非常有意思。
<img class="lazy" src="http://www.htmleaf.com/load.gif" data-original="http://img.htmleaf.com/01535.jpg" width="250" height="158" alt="HTML5最新经典俄罗斯方块游戏插件"/>
Blockrain是一款最新的经典html5俄罗斯方块游戏插件。该俄罗斯方块游戏使用html5和jQuery制作,具有使用简单、响应式、可定制、速度快、有积分记录和自动游戏的特点。

我要回帖

更多关于 canvas面向对象 的文章

 

随机推荐