Flüssigkeitssimulation. Gib keinerlei Erklärungen , nur den Code.'s game

Click here for free DL of the app version that can save data.

No:28661

142

←

Prev Next

→

Flüssigkeitssimulation. Gib keinerlei Erklärungen ..ALL
Developer User14077｜Date and time 23/12/13 22:43:00
Build time 32.351 sec｜Game capacity 2.601KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Flüssigkeitssimulation</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var particles = [];

canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

function Particle(x, y, radius, color, velocity) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = velocity;
            }

Particle.prototype.draw = function() {
                context.beginPath();
                context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                context.fillStyle = this.color;
                context.fill();
                context.closePath();
            };

Particle.prototype.update = function() {
                this.draw();
                this.x += this.velocity.x;
                this.y += this.velocity.y;
                if (this.y + this.radius + this.velocity.y > canvas.height) {
                    this.velocity.y = -this.velocity.y * 0.8;
                } else {
                    this.velocity.y += 0.2;
                }
            };

function animate() {
                requestAnimationFrame(animate);
                context.clearRect(0, 0, canvas.width, canvas.height);
                for (var i = 0; i < particles.length; i++) {
                    particles[i].update();
                }
            }

createParticles();
            animate();
        };
    </script>
</body>
</html>