<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{
display: block;
}
</style>
</head>

<body>
<canvas id="canvas"></canvas>
<script>
function $(id){
return document.getElementById(id);
}
//画布 的大小设置
var mywindow=window.screen;
var canvas=$("canvas");
canvas.width=mywindow.width;
canvas.height=mywindow.height;

//要输出的信息
var str="0123456789";
str=str.split("");
var fontSize=16;//输出字体的大小
//每列显示多少个信息
var cols=canvas.width/fontSize;
//数组，统计下落的位置
var drops=[];
for(var i=0;i<cols;i++){
drops[i]=1;
}
//
var ctx=canvas.getContext("2d");
function draw(){
/**
*这的黑客帝国：
* 获取页面的 大小 包括宽度和高度
* 用cols获取能够宽度加载列数
* drops加载每一列的位置
* drops[2]=10 2为第二排的 top为10
*/
ctx.fillStyle="rgba(0,0,0,0.05)";
ctx.fillRect(0,0,canvas.width,canvas.height);

ctx.fillStyle="green";
ctx.font=fontSize+"px arial";
for(var i=0;i<cols;i++){

var text=str[ Math.floor( Math.random() * (str.length) ) ];
// console.info("x-"+i*fontSize);
// console.info("y-"+drops[i]*fontSize);
ctx.fillText(text,i*fontSize,drops[i]*fontSize);
if(drops[i]*fontSize > canvas.height || Math.random() > 0.95)
drops[i] = 0;//把位置恢复到最上面
//控制下落的位置
drops[i]++;
}
}
setInterval(draw,33);
</script>
</body>

</html>

HTML5-黑客帝国2D的更多相关文章

  1. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  2. HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇--如何结合createJS应用box2d.js

    太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章," ...

  3. HTML5 Canvas 2D library All In One

    HTML5 Canvas 2D library All In One https://github.com/search?q=Javascript+Canvas+Library https://git ...

  4. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  5. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  6. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  7. HTML5之2D物理引擎 Box2D for javascript Games 系列 第三部分之创建图腾破坏者的关卡

    创建图腾破坏者的关卡 现在你有能力创建你的第一个游戏原型,我们将从创建图腾破坏者的级别开始. 为了展示我们所做事情的真实性,我们将流行的Flash游戏图腾破坏者的一关作为 我们模仿的对象.请看下面的截 ...

  8. HTML5之2D物理引擎 Box2D for javascript Games 系列 第二部分

    这是系列第二部分,之前部分在本博客中找 源码demo存放在https://github.com/willian12345/Box2D-for-Javascript-Games 向世界添加刚体 刚体(B ...

  9. HTML5之2D物理引擎 Box2D for javascript Games 系列 第一部分

    我要的是能在H5页面上跑的javascript版的Box2D啊!!! 最近想学习Javascript版本的Box2D JS物理引擎,无奈搜了半天也没找到相对比较系统的资料 官方网站也只是简单的介绍,A ...

  10. HTML5游戏2D开发引擎

    1.PixiJS(基于webGl和canvas) 官网:http://www.pixijs.com/ github(star:20672):https://github.com/pixijs/pixi ...

随机推荐

  1. 宁波Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. redux-applyMiddleware实现理解+自定义中间件

    前言: 终于好好理解了middleware.... 1.redux middleware提供的是位于 action 被发起之后,到达 reducer 之前的扩展点. redux通过store.disp ...

  3. 一个很cool的C#的高性能数学库

    High Performance Math Library for C# and .NET是一个很cool的C#的高性能数学库,3D效果也很不错,下图是首页上的一个例子.他也有一个交互的网页,你可以自 ...

  4. 使用PullToRefresh实现下拉刷新和上拉加载

    使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...

  5. Android 颜色渲染(十) ComposeShader组合渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] Android 颜色处理(十) ComposeShader组合渲染 public ComposeShader(Shader sh ...

  6. PHP读取文件头(2字节)判断文件类型(转)

    看到此标题或许你会说是否是多此一举,直接判断扩展名不就知道文件类型了吗,但是扩展名很容易伪造,这样就绕过了判断.大部分的文件都会将一个特殊的数字或字符存放在文件的特定位置里(开始处的2个字节) /** ...

  7. Java基础知识强化之集合框架笔记39：Set集合之HashSet存储字符串并遍历

    1. HashSet类的概述: (1)不保证set的迭代顺序 (2)特别是它不保证该顺序恒久不变 HashSet底层数据结构是哈希表,哈希表依赖于哈希值存储,通过哈希值来确定元素的位置,  而保证元素 ...

  8. Android 布局

    转自:http://www.cnblogs.com/chiao/archive/2011/08/24/2152435.html Android布局是应用界面开发的重要一环,在Android中,共有五种 ...

  9. 2进制，16进制，BCD，ascii，序列化对象相互转换

    public final static char[] BToA = "0123456789abcdef".toCharArray() ; 1.16进制字符串转为字节数组 /** * ...

  10. isAssignableFrom与instanceof的区别

    1.isAssignableFrom针对的是class对象: 2.instanceof是实例. isAssignableFrom是用来判断一个类Class1和另一个类Class2是否相同或是另一个类的 ...