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

No:9226

163

←

Prev Next

→

yo-yo fishing
Developer User4314｜Date and time 23/7/22 18:24:44
Build time 35.01 sec｜Game capacity 4.106KB｜

Script

了解です。以下にヨーヨー釣りというゲームを実装したHTMLファイルの例を示します。このゲームでは、ユーザーがヨーヨーを上下に動かして魚を釣ることが目的となります。

ヨーヨー釣りゲーム

操作方法

スマホの場合: スワイプでヨーヨーを上下に動かす
PCの場合: 矢印キーでヨーヨーを上下に動かす

スコア: 0

このコードをHTMLファイルに保存し、ブラウザで開くとヨーヨー釣りゲームが遊べるようになります。ヨーヨーを上下に動かして魚と衝突するとスコアが増えます。スワイプ（または矢印キー）で操作することができます。スマートフォンに最適化されており、絵文字は使用していませんが、ゲームとして遊べる仕様となっています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>ヨーヨー釣りゲーム</title>
    <style>
        #gameArea {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }
    
        #yoyo {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            bottom: 0;
            left: 125px;
            border-radius: 50%;
        }
    
        #fish {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: -50px;
            left: 0;
        }
    </style>
</head>
<body>
    <h1>ヨーヨー釣りゲーム</h1>
    
    <h2>操作方法</h2>
    <p>スマホの場合: スワイプでヨーヨーを上下に動かす<br>PCの場合: 矢印キーでヨーヨーを上下に動かす</p>
    
    <h2>スコア: <span id="score">0</span></h2>
    
    <div id="gameArea">
        <div id="yoyo"></div>
        <div id="fish"></div>
    </div>

// 初期位置設定
        let yoyoPosition = 0;
        let fishPosition = 0;

// スマホの場合の操作方法
        let startY = null;
        document.addEventListener('touchstart', touchStart);
        document.addEventListener('touchmove', touchMove);
        
        // PCの場合の操作方法
        document.addEventListener('keydown', keyMove);

function touchStart(event) {
            startY = event.touches[0].clientY;
        }

function keyMove(event) {
            if (event.keyCode === 38) {
                moveYoyoUp();
            } else if (event.keyCode === 40) {
                moveYoyoDown();
            }
        }

function moveYoyoUp() {
            yoyoPosition -= 10;
            yoyo.style.bottom = yoyoPosition + 'px';
            checkCollision();
        }

function moveYoyoDown() {
            yoyoPosition += 10;
            yoyo.style.bottom = yoyoPosition + 'px';
            checkCollision();
        }

function checkCollision() {
            const yoyoTop = yoyoPosition;
            const yoyoBottom = yoyoPosition + yoyo.offsetHeight;
            const fishTop = fishPosition;
            const fishBottom = fishPosition + fish.offsetHeight;

if (yoyoTop < fishBottom && yoyoBottom > fishTop) {
                score += 1;
                document.getElementById('score').innerText = score;
                fishPosition = -50;
                fish.style.top = fishPosition + 'px';
            }
        }

// 魚の移動
        setInterval(moveFish, 500);

function moveFish() {
            fishPosition += 50;
            if (fishPosition > 300) {
                fishPosition = -50;
            }
            fish.style.top = fishPosition + 'px';
        }
    </script>
</body>
</html>
```