AI game creator

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

No:52753

399

←

Prev Next

→

hole.io
Developer User22126｜Date and time 24/3/24 13:59:29
Build time 9.164 sec｜Game capacity 2.365KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hole.io Game</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    #hole {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: black;
        border-radius: 50%;
    }
    #player {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: blue;
        border-radius: 50%;
    }
</style>
</head>
<body>
<div id="hole"></div>
<div id="player"></div>

player.style.top = Math.floor(Math.random() * (window.innerHeight - playerSize)) + 'px';
    player.style.left = Math.floor(Math.random() * (window.innerWidth - playerSize)) + 'px';

window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
        let x = event.gamma; // Incline left and right
        let y = event.beta; // Incline front and back
        
        player.style.top = constrain(parseInt(player.style.top) + y, 0, window.innerHeight - playerSize) + 'px';
        player.style.left = constrain(parseInt(player.style.left) + x, 0, window.innerWidth - playerSize) + 'px';

if (isColliding(player, hole)) {
            score++;
            holeSize -= 2;
            hole.style.width = holeSize + 'px';
            hole.style.height = holeSize + 'px';
            hole.style.top = Math.floor(Math.random() * (window.innerHeight - holeSize)) + 'px';
            hole.style.left = Math.floor(Math.random() * (window.innerWidth - holeSize)) + 'px';
        }
    }

function isColliding(a, b){
        let aRect = a.getBoundingClientRect();
        let bRect = b.getBoundingClientRect();
        return !(
            aRect.top + aRect.height < bRect.top ||
            aRect.top > bRect.top + bRect.height ||
            aRect.left + aRect.width < bRect.left ||
            aRect.left > bRect.left + bRect.width
        );
    }

function constrain(value, min, max){
        if(value < min) return min;
        if(value > max) return max;
        return value;
    }
</script>
</body>
</html>