<!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. Python copy对象(copy与deepcopy)

    Python中的对象之间赋值时是按引用传递的,如果需要拷贝对象,需要使用标准库中的copy模块. 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deep ...

  2. ACM1877_又一版A+B

    .这道题与2031极为相似. #include<iostream> using namespace std; void fun(int n,int r) { ]="0123456 ...

  3. 内存数据库MemSQL ——基于内存，MVCC+哈希表、跳表

    本周数据库业界探讨最火热的话题就是MemSQL,究竟是不是"旧瓶装新酒"引发了诸多的辩论,同时也引发了究竟是产品技术重要还是DBA重要的疑问.网络中有一些关于MemSQL的介绍,基 ...

  4. 搜狗输入法皮肤安装 分类： windows常用小技巧 2014-05-04 15:10 172人阅读 评论(0) 收藏

    第一步: 下载皮肤,皮肤是.ssf格式的. 第二步: 找到安装目录:(以我的为例) D:\软件\搜狗输入法\SogouInput\7.1.0.1652\AllSkin: 把下载的皮肤剪切(或复制)到此 ...

  5. 解决wix生成的msi的license对话框空白的问题

    今天用Wix做之前写的那个Windows Live Writer的Markdown插件的msi安装包,在wxs文件中用如下的代码添加license文件,结果发现生成msi后license文件框一直是空 ...

  6. eclipse编辑器，怎么创建PHP和JAVA的工程项目？

    eclipse编辑器,怎么创建PHP和JAVA的工程项目.强大的eclipse,编写php或者java由你选择!!! 我为什么这么说? 我是新手,写下这篇文章,可能对新手会有一点点的帮助而已,然后为了 ...

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

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

  8. Android如何创建背景透明的Dialog

    一:控制Dialog 的背景方法:1.定义一个无背景主题主题<!--去掉背景Dialog--> <style name="NobackDialog" parent ...

  9. MySQL Error Handling in Stored Procedures---转载

    This tutorial shows you how to use MySQL handler to handle exceptions or errors encountered in store ...

  10. 『零行代码』解决键盘遮挡问题（iOS）

    关注仓库,及时获得更新:iOS-Source-Code-Analyze https://github.com/draveness/iOS-Source-Code-Analyze Follow: Dra ...