Billiards's game | AI game creator

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

No:46894

117

Billiards
Developer User20280｜Date and time 24/2/26 12:30:33
Build time 42.878 sec｜Game capacity 1.586KB｜

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<script>
    let cueStick = document.getElementById('cueStick');
    let whiteBall = document.getElementById('whiteBall');
    let redBall = document.getElementById('redBall');
    
    let deltaX = 0;
    let deltaY = 0;
    let moveInterval = null;
    
    function getTouchCoordinates(event) {
        event.preventDefault();
        deltaX = event.touches[0].clientX - whiteBall.offsetLeft;
        deltaY = event.touches[0].clientY - whiteBall.offsetTop;
        
        if(moveInterval){
            clearInterval(moveInterval);
        }
        
        moveInterval = setInterval(() =>{
            whiteBall.style.left = whiteBall.offsetLeft + deltaX + 'px';
            whiteBall.style.top = whiteBall.offsetTop + deltaY + 'px';
        }, 10);
    }
    
    function stopMoving(){
        clearInterval(moveInterval);
        
        // Add your billiards game logic here
        
    }
    
    whiteBall.addEventListener('touchstart', getTouchCoordinates);
    document.addEventListener('touchend', stopMoving);
</script>

<style>
    #cueStick{
        position: absolute;
        width: 100px;
        height: 20px;
        background-color: brown;
        z-index: 1;
    }
    #whiteBall{
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: white;
        border-radius: 50%;
    }
    #redBall{
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
        border-radius: 50%;
    }
</style>

<div id="cueStick"></div>
<div id="whiteBall"></div>
<div id="redBall"></div>