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();