タップで線画画面をタップして、図形が線画される様子を楽しむゲームです。画面には、JavaScriptによって線画されたリサージュ曲線を表示してください。リサージュ曲線は、以下の関数で定義されています。tは媒介変数です。 let f = (a, b, t) => { let obj = {}; obj.x = Math.sin(a * t); obj.y = Math.sin(b * t); return obj; x、yは、画面をタップした座標に応じて変化します。よって、タップした位置によって、リアルタイムで徐々にリサージュ曲線が変化していきます。リサージュ曲線は、ゆっくりと線画されます。また、リサージュ曲線の色は様々な色に動的に変更されます。初めの色は赤色です。's game

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

No:4824

4570

←

Prev Next

→

タップで線画画面をタップして、図形が線画される様子を楽しむゲームです。画面には、JavaSc..ALL
Developer もちきなこ｜Date and time 23/6/28 22:12:10
Build time 17.636 sec｜Game capacity 1.586KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Lissajous Curve Drawing Game</title>
<style>
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>

function drawLissajousCurve() {
    let obj = calculateCoordinates(a, b, t);
    x = obj.x * 100 + canvas.width / 2;
    y = obj.y * 100 + canvas.height / 2;

ctx.lineTo(x, y);
    ctx.stroke();

t += 0.01;

if (t > 2 * Math.PI) {
        a = Math.floor(Math.random() * 9) + 1;
        b = Math.floor(Math.random() * 9) + 1;
        ctx.strokeStyle = randomColor();
        ctx.beginPath();
    }

requestAnimationFrame(drawLissajousCurve);
}

function calculateCoordinates(a, b, t) {
    let obj = {};
    obj.x = Math.sin(a * t);
    obj.y = Math.sin(b * t);
    return obj;
}

function randomColor() {
    let letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

canvas.addEventListener("click", function(event) {
    x = event.clientX - canvas.offsetLeft;
    y = event.clientY - canvas.offsetTop;

a = Math.floor(x / (canvas.width / 8)) + 1;
    b = Math.floor(y / (canvas.height / 8)) + 1;
    ctx.strokeStyle = randomColor();
    ctx.beginPath();
})

ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.beginPath();

drawLissajousCurve();

</script>
</body>
</html>