Catch the falling fruits game's game

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

No:933

140

←

Prev Next

→

Catch the falling fruits game
Developer User3198｜Date and time 23/6/17 22:48:01
Build time 19.998 sec｜Game capacity 2.197KB｜

Script

Score: 0

※画像(basket.png)は別途用意が必要です。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fruit Catch Game</title>
<style>
    #game-area {
        width: 300px;
        height: 500px;
        margin: auto;
        position: relative;
        border: 2px solid black;
        background-color: lightblue;
    }
    .fruit {
        position: absolute;
        width: 50px;
        height: 50px;
        font-size: 30px;
        text-align: center;
    }
    #basket {
        position: absolute;
        bottom: 0;
        width: 70px;
        height: 70px;
        background-image: url('basket.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
</style>
</head>
<body>
<div id="game-area">
    <div id="basket"></div>
</div>
<p>Score: <span id="score">0</span></p>
<script>
    var score = 0;

function createFruit() {
        var fruit = document.createElement('div');
        var fruits = ['🍎', '🍊', '🍇'];
        var randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
        fruit.innerHTML = randomFruit;
        fruit.classList.add('fruit');
        fruit.style.left = Math.floor(Math.random() * 250) + 'px';
        document.getElementById('game-area').appendChild(fruit);

setTimeout(function() {
            if (fruit.parentNode) {
                fruit.parentNode.removeChild(fruit);
            }
        }, 5000);

fruit.addEventListener('click', function() {
            fruit.parentNode.removeChild(fruit);
            score += 10;
            document.getElementById('score').innerHTML = score;
        })
    }

setInterval(createFruit, 1000);

document.addEventListener('mousemove', function(e) {
        var basket = document.getElementById('basket');
        var gameArea = document.getElementById('game-area');
        var basketArea = basket.getBoundingClientRect();
        var gameAreaArea = gameArea.getBoundingClientRect();
        var mouseX = e.clientX;
        if (mouseX > gameAreaArea.left && mouseX < gameAreaArea.right) {
            basket.style.left = mouseX - basketArea.width/2 - gameAreaArea.left + 'px';
        }
    })
</script>
</body>
</html>

※画像(basket.png)は別途用意が必要です。