html5 像素人物,HTML5 Canvas 像素火焰 | 火苗
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
// Tested in Chrome!
class World {
constructor(canvas, w, h, size) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.width = w;
this.height = h;
this.size = size;
this.cols = Math.floor(this.width / this.size);
this.rows = Math.floor(this.height / this.size);
this.grid = [];
}
setup () {
this.canvas.width = this.width;
this.canvas.height = this.height;
this.grid = this.createGrid(this.cols, this.rows);
}
resize (w, h) {
this.width = w;
this.height = h;
this.setup();
}
createGrid () {
var grid = [];
for (var i = 0; i < this.cols; i++) {
for (var j = 0; j < this.rows; j++) {
var cell = new Cell(i, j, this.size, 0);
grid.push(cell);
}
}
return grid;
}
draw () {
this.canvas.style.background = "rgb(35, 35, 35)";
for (var i = 0; i < this.grid.length; i++) {
this.grid[i].show(this.ctx);
}
}
step () {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
for (var i = 0; i < this.grid.length; i++) {
this.grid[i].calcHeat(this);
}
this.draw();
var self = this;
requestAnimationFrame(function(timestamp) {
self.step()
})
}
run (cb) {
if (cb) {
cb();
}
this.setup();
this.step()
}
index (col, row) {
if (col < 0 || row < 0 || col > this.cols - 1 || row > this.rows -1) {
return -1;
}
return row + col * this.rows;
}
}
class Cell {
constructor(c, r, size, heat) {
this.col = c;
this.row = r;
this.size = size;
this.fuel = 150;
if (heat || heat == 0) {
this.heat = heat;
} else {
this.heat = Math.floor(Math.random() * 100) + 1
}
}
calcHeat (world) {
var heat = this.heat;
var sum = 0;
var neighbourHeat = this.checkNeighbours(world);
for (var i = 0; i < neighbourHeat.length; i++) {
sum += neighbourHeat[i];
}
this.heat = (sum * 0.162) * 2.555 * (0.5 + (Math.random() * 0.5));
}
checkNeighbours (world) {
var neighbours = [];
var right = world.grid[world.index(this.col + 1, this.row)];
var bottom = world.grid[world.index(this.col, this.row + 1)];
var left = world.grid[world.index(this.col - 1, this.row)];
if (right) {
neighbours.push(right.heat);
}
if (bottom) {
neighbours.push(bottom.heat);
}
if (left) {
neighbours.push(left.heat);
}
return neighbours;
}
show (ctx) {
var x = this.col*this.size;
var y = this.row*this.size;
ctx.beginPath();
ctx.rect(x,y,this.size,this.size);
if (this.heat >= 11) {
ctx.fillStyle = '#770000';
}
if (this.heat >= 22) {
ctx.fillStyle = '#9b3513';
}
if (this.heat >= 35) {
ctx.fillStyle = '#e27023';
}
if (this.heat >= 64) {
ctx.fillStyle = '#E9F23F';
}
if (this.heat >= 84) {
ctx.fillStyle = '#ffffff';
}
if (this.heat < 11) {
ctx.fillStyle = 'rgb(35, 35, 35)';
}
ctx.fill();
ctx.closePath();
}
}
var pixelSize = 18;
if (window.innerWidth <= 700) {
pixelSize = 10;
}
var world = new World(document.getElementById('canvas'), window.innerWidth, window.innerHeight, pixelSize);
var createFireball = function(clientX, clientY) {
var x = Math.round((clientX)/world.size);
var y = Math.round((clientY)/world.size);
var temp = 140;
if (world.grid[world.index(x,y)]) world.grid[world.index(x,y)].heat = temp;
if (world.grid[world.index(x+1,y)]) world.grid[world.index(x+1,y)].heat = temp;
if (world.grid[world.index(x-1,y)]) world.grid[world.index(x-1,y)].heat = temp;
if (world.grid[world.index(x,y+1)]) world.grid[world.index(x,y+1)].heat = temp;
if (world.grid[world.index(x,y-1)]) world.grid[world.index(x,y-1)].heat = temp;
}
document.onmousemove = function(e) {
createFireball(e.clientX, e.clientY)
};
document.ontouchmove = function(e) {
e.preventDefault()
for (var i = 0; i < e.touches.length; i++) {
createFireball(e.touches[i].clientX, e.touches[i].clientY)
}
};
window.onresize = function(event) {
world.resize(window.innerWidth, window.innerHeight)
};
world.run();
html5 像素人物,HTML5 Canvas 像素火焰 | 火苗相关推荐
- html5 像素游戏,HTML5混搭像素风 也许是HTML5崛起的第一步
在手游时代,像素游戏一直处于微妙的位置.虽然市面上的像素游戏并不少见,<我的世界>.<泰瑞利亚>,国内的<冒险与挖矿>都表现出色.但是在手机游戏上像素游戏依然比较少 ...
- html5画布页面,HTML5 界面元素 Canvas 参考手册
HTML5 界面元素 Canvas 参考手册 转载请保留此句:太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否 ...
- html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆 发布时间:2021-07-08 16:32:10 来源:亿速云 阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
- 在html5页面中添加canvas,HTML页面中添加Canvas标签示例
在HTML页面的 中,可以用像下面的代码来添加标签: 复制代码代码如下: Your browser does not support HTML5 Canvas. 译注:对于canvas,以下写法是不允 ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- Canvas像素调节—调节图片的明暗与对比度
前几周做了一个医疗展示CT图的项目,需要对DICOM文件进行解析展示并且在页面中对图像进行明暗和对比度的调节功能.费了许多精力将此功能做了出来(虽然使用的并不是DICOM文件中的窗宽/窗位,但也算是一 ...
- html5 strongeaseinout,HTML5新特性 之canvas标签(Day1-4)(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...
- canvas像素操作 取色器 写入像素数据 缩放和反锯齿 保存图片
博客简介 HTML5中的canvas允许我们直接对像素进行操作,我们可以通过ImageData对象操纵像素数据,读取或将数据数组写入该对象中.这里还会介绍如何控制图像使其平滑(反锯齿)以及如何从Can ...
- HTML5的图像系统Canvas与SVG
在HTML5之前,没有标准的提供可供Javascript脚本调用的图像系统,以前的做法通常是通过Div来画点.线.矩形这种非常"笨"的办法来变相的绘图,虽然很"笨&quo ...
最新文章
- 【怎样写代码】确保对象的唯一性 -- 单例模式(四):饿汉式单例类与懒汉式单例类的讨论
- CSS3自定义滚动条
- (python的坑,坑的我头晕,下行循环写后根遍历)
- Linux学习笔记(四)之用户登录
- “+=”和append的区别
- 夺命雷公狗---Redis---3-Redis常用命令
- 华为实习日记——第三十七天
- 牛B装备 XSS 漏洞利用工具[使用教程]
- 京东AI:用于视觉识别的上下文Transformer网络-Contextual Transformer Networks for Visual Recognition
- C++函数参数中的省略号
- SpringBoot系列 - 集成JWT实现接口权限认证
- 手机充值 html,仿京东手机充值进度导航_html/css_WEB-ITnose
- PCF8591 A/D转换模块
- 计算机word表格怎么求和,【Word文档怎么求和】- 虎课网
- type-c英文怎么读音发音,type-c怎么读英语发音
- 猿编程python分为几个阶段_python教程- 猿说python
- mysql 枚举字段,MySQL字段中的枚举是什么意思 | 学步园
- 京东面试官:从求职者到面试官的心路历程
- 【Linux】入门介绍
- Task 06:FOR、IF以及while
热门文章
- 万亿市场下,电商代运营还需另求“第二曲线”
- java游戏最终boss烛龙_游戏中劝退玩家的变态小怪!神装扛不住它一击,难度秒杀最终BOSS?...
- python dict update保持顺序_Python OrderedDict不保持元素顺序 - python
- 外星人计算机产品介绍,你对外星人电脑了解吗?感兴趣快看看!
- python多进程关闭socket_用Python制作一个多进程UDP服务器,一个进程监听一个p
- java中集合的区别_Java中的集合与集合之间的区别
- qt log4qt 输出到oracle,Log4Qt 输出地
- cytoscape要求的JAVA版本_微生物研究必备:Cytoscape绘制网络图(一)
- php把年份转为int,PHP将DateInterval转换为int
- python中的类和对象