만날 누워서 골골 대다가 기력이 생겨서 만들어바따



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas tutorial</title>
<script type="text/javascript">
class Snow{
constructor(x, y){
this._x = x;
this._y = y;
}

action(){
const direction = Math.random();

if(direction > 0.5){
this._x++;
} else{
this._x--;
}

this._y++;
}

draw(ctx){
ctx.fillStyle = "white";
ctx.fillRect(this._x, this._y, 5, 5);
}
}

const FPS = 60;
const FRAME_LENGTH = 1000 / FPS;
var g_current = Date.now();
var g_current_frame = 0;
var g_accumulated_frame = 0;
const g_snow_list = [];

function input(){

}

function update(){
const now = Date.now();
if(this._previous_tick == undefined){
this._previous_tick = Date.now();
}

if(this._previous_tick + FRAME_LENGTH > now){
setTimeout(main, 0);
return;
}

g_current_frame++;
this._previous_tick = now;

if(now - g_current > 1000){
g_current = now;
g_accumulated_frame = g_current_frame;
g_current_frame = 0;
}

for(const e of g_snow_list){
e.action();
}

const x = Math.floor(Math.random() * (800));
const y = 0;
let snow = new Snow(x, y);
g_snow_list.push(snow);
g_snow_list.filter(e => e._y >= 800);

setTimeout(main, 0);
}

var deg_to_rad = Math.PI / 180.0;
var depth = 9;

function drawLine(x1, y1, x2, y2, brightness, ctx){
ctx.beginPath();
if(brightness > 3){
ctx.strokeStyle = "brown";
}
else{
ctx.strokeStyle = "green";
}

ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineWidth = brightness;
ctx.closePath();
ctx.stroke();
}
function drawTree(x1, y1, angle, depth, ctx){
if (depth !== 0){
var x2 = x1 + (Math.cos(angle * deg_to_rad) * depth * 10.0);
var y2 = y1 + (Math.sin(angle * deg_to_rad) * depth * 10.0);
drawLine(x1, y1, x2, y2, depth, ctx);
drawTree(x2, y2, angle - 20, depth - 1, ctx);
drawTree(x2, y2, angle + 20, depth - 1, ctx);
}
}

function draw(){
var canvas = document.getElementById('tutorial');

if (!canvas.getContext){
return;
}

var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext('2d');

ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height);

ctx.font = "30px Arial";
ctx.fillText("FRAME : " + g_accumulated_frame, 10, 50);

drawTree(width / 2, height * 0.8, -90, depth, ctx);

for(const e of g_snow_list){
e.draw(ctx);
}
}

function main(){
input();
update();
draw();
}

</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="main();">
<canvas id="tutorial" width="800" height="800"></canvas>
</body>
</html>