particle's game | AI game creator

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

No:32679

112

particle
Developer User15481｜Date and time 23/12/31 23:04:03
Build time 23.551 sec｜Game capacity 2.869KB｜

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Game Partikel</title>
<style>
    canvas {
        border:1px solid #d3d3d3;
        background-color: #f1f1f1;
    }
</style>
</head>
<body onload="startGame()">

<script>
    var game;
    
    function startGame() {
        game = new Game();
        game.start();
    }

function Game() {
        this.canvas = document.createElement("canvas");
        this.ctx = this.canvas.getContext("2d");
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        
        this.particles = [];
        this.score = 0;
        
        this.start = function() {
            setInterval(this.update.bind(this), 20);
            setInterval(this.addParticle.bind(this), 1000);
            
            window.addEventListener('click', function(event) {
                this.handleClick(event.clientX, event.clientY);
            }.bind(this));
        }
        
        this.update = function() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            
            for(var i=0; i<this.particles.length; i++) {
                var particle = this.particles[i];
                particle.y += particle.speed;
                particle.draw(this.ctx);
            }
            
            this.ctx.font = "30px Arial";
            this.ctx.fillStyle = "black";
            this.ctx.fillText("Score: " + this.score, 10, 50);
        }
        
        this.addParticle = function() {
            var particleSize = Math.floor(Math.random() * 50) + 10;
            var particleSpeed = Math.floor(Math.random() * 5) + 1;
            
            var particle = {
                x: Math.random() * (this.canvas.width - particleSize),
                y: -particleSize,
                size: particleSize,
                speed: particleSpeed,
                draw: function(ctx) {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
                    ctx.fillStyle = "blue";
                    ctx.fill();
                    ctx.closePath();
                }
            }
            
            this.particles.push(particle);
        }
        
        this.handleClick = function(clickX, clickY) {
            for(var i=0; i<this.particles.length; i++) {
                var particle = this.particles[i];
                var dx = Math.abs(particle.x - clickX);
                var dy = Math.abs(particle.y - clickY);
                var distance = Math.sqrt(dx*dx + dy*dy);
                
                if(distance <= particle.size) {
                    this.particles.splice(i, 1);
                    this.score++;
                    break;
                }
            }
        }
    }
</script>

</body>
</html>