Thread 🧵🪡 through the yarn! Player designates a large 🪡 of thread in a loop's game

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

No:6411

1271

←

Prev Next

→

Thread 🧵🪡 through the yarn! Player designates a la..ALL
Developer User3589｜Date and time 23/7/2 11:56:33
Build time 29.052 sec｜Game capacity 3.609KB｜

Script

ゲームのプログラムを以下に示します。

このプログラムは、「糸を🧵🪡通そう！」というゲームを実装しています。プレイヤーは赤い円で表され、マウスの位置に合わせて糸が伸びます。糸が円の中に通るように調整して、通った場合はおめでとうメッセージが表示されます。上記のプログラムをHTMLファイルに保存し、ブラウザで開くとゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

ゲームのプログラムを以下に示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>糸を🧵🪡通そう！</title>
    <style>
        #canvas {
            width: 300px;
            height: 300px;
            background-color: lightgray;
            border-radius: 50%;
            position: relative;
        }

#player {
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

#thread {
            width: 2px;
            height: 0;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: top;
        }
    </style>
</head>
<body>
    <div id="canvas">
        <div id="player"></div>
        <div id="thread"></div>
    </div>

let isMouseDown = false;
        let threadHeight = 0;

document.addEventListener('mousedown', () => {
            isMouseDown = true;
        });

document.addEventListener('mousemove', (event) => {
            if (isMouseDown) {
                const mouseX = event.clientX;
                const mouseY = event.clientY;

const canvasWidth = document.getElementById('canvas').offsetWidth;
                const canvasHeight = document.getElementById('canvas').offsetHeight;
                const canvasTop = document.getElementById('canvas').offsetTop;
                const canvasLeft = document.getElementById('canvas').offsetLeft;

const playerX = canvasLeft + canvasWidth / 2;
                const playerY = canvasTop + canvasHeight / 2;

const angle = Math.atan2(mouseY - playerY, mouseX - playerX);

const threadTop = playerY + Math.sin(angle) * 50;
                const threadLeft = playerX + Math.cos(angle) * 50;

thread.style.top = `${threadTop}px`;
                thread.style.left = `${threadLeft}px`;
                thread.style.transform = `rotate(${angle}rad)`;

threadHeight = Math.sqrt((mouseX - playerX) ** 2 + (mouseY - playerY) ** 2);
                thread.style.height = `${threadHeight}px`;
            }
        });

document.addEventListener('mouseup', () => {
            isMouseDown = false;
            checkPass();
        });

function checkPass() {
            const canvasWidth = document.getElementById('canvas').offsetWidth;
            const canvasHeight = document.getElementById('canvas').offsetHeight;

if (threadHeight >= canvasWidth / 2 && threadHeight <= canvasHeight / 2) {
                alert('糸が通りました！おめでとうございます！');
            } else {
                alert('糸が通りませんでした…もう一度挑戦してみてください！')
            }
        }
    </script>
</body>
</html>
```

このプログラムは、「糸を🧵🪡通そう！」というゲームを実装しています。プレイヤーは赤い円で表され、マウスの位置に合わせて糸が伸びます。糸が円の中に通るように調整して、通った場合はおめでとうメッセージが表示されます。

上記のプログラムをHTMLファイルに保存し、ブラウザで開くとゲームをプレイすることができます。