AI game creator

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

No:21166

209

←

Prev Next

→

particle
Developer User9365｜Date and time 23/10/13 22:11:51
Build time 44.927 sec｜Game capacity 1.458KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
    
    <canvas id="gameCanvas" width="400" height="200"></canvas>

// move the particle based on user input
    function moveParticle(event) {
        if (event.key === "ArrowUp") {
            velocityY = -1;
        } else if (event.key === "ArrowDown") {
            velocityY = 1;
        } else if (event.key === "ArrowLeft") {
            velocityX = -1;
        } else if (event.key === "ArrowRight") {
            velocityX = 1;
        }
    }

// update the particle's position
    function update() {
        particleX += velocityX;
        particleY += velocityY;
    }

// draw the particle on the canvas
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(particleX, particleY, 20, 20);
    }

// start the game loop
    function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
    }

// add event listener for user input
    document.addEventListener("keydown", moveParticle);

// start the game loop
    gameLoop();
    </script>
</body>
</html>