用javascript实现模拟火焰

时间:2020-05-12 人气:0

不太像，而且比较耗资原，不知道有没有更好的办法=.=

<html> 
<head> 
<title>火焰</title> 
<script language="JavaScript"> 
function PixelAxis(left, bottom, width, height, color) 
{ 
    color = color || "#000000"; 
    var pixels = []; 
    for(var i = 0; i <= width; i++) 
    { 
        pixels[i] = []; 
        for(var j = 0; j<=height; j++) 
        { 
            var img = new Image(1, 1); 
            img.style.backgroundColor = color; 
            img.style.position = "absolute"; 
            img.style.left = left + i; 
            img.style.top = bottom - j; 
            pixels[i][j] = img; 
            document.body.appendChild(img); 
        } 
    } 
    return function(x, y, color) 
    { 
        pixels[x][y].style.backgroundColor = color; 
    } 
}

function color(r, g ,b) 
{ 
    r = r > 0xF ? r.toString(16) : "0" + r.toString(16); 
    g = g > 0xF ? g.toString(16) : "0" + g.toString(16); 
    b = b > 0xF ? b.toString(16) : "0" + b.toString(16); 
    return "#"+r+g+b; 
} 
function fireColor(seed) 
{ 
    return color(seed, Math.floor(0.5*seed), 0); 
}

function spreadSeeds(width, height) 
{ 
    var pixel = PixelAxis(200, 200, width, height); 
    var fc = []; 
    fc[0] = [];

return function() 
    { 
        for(var i = 0; i <= width; i++) 
        { 
            var s = Math.floor(255 * Math.random()); 
            fc[0][i] = s; 
            pixel(i, 0, fireColor(s)); 
        } 
        for(var i = 1; i < height; i++) 
        { 
            fc[i] = []; 
            for(var j = 0; j <= width; j++) 
            { 
                var a = j > 0 ? fc[i-1][j-1] : 0; 
                var b = fc[i-1][j]; 
                var c = j < width ? fc[i-1][j+1] : 0; 
                var s = Math.floor((a+b+c)/3); 
                //alert(c); 
                fc[i][j] = s; 
                s = s-Math.floor(i/height*255);  
                s = s > 0 ? s : 0; 
                pixel(j, i, fireColor(s)); 
            } 
        } 
    } 
}

</script> 
</head> 
<body bgcolor="#000000">

</body> 
<script> 
    var f = spreadSeeds(60, 120); 
    setInterval("f()",1); 
</script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容