sandbox game fame where you can drag around a box that will rotate and move whenever you touch it and it will go to your touch's game

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

No:51652

113

←

Prev Next

→

sandbox game fame where you can drag around a box ..ALL
Developer User21361｜Date and time 24/3/14 10:12:13
Build time 6.25 sec｜Game capacity 2.087KB｜

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>Box Rotation Game</title>
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
    }
</style>
</head>
<body>
<div id="box"></div>
<script>
    let box = document.getElementById('box');

box.addEventListener('touchstart', handleTouchStart, false);
    box.addEventListener('touchmove', handleTouchMove, false);

let xDown = null;
    let yDown = null;

function handleTouchStart(e) {
        const firstTouch = e.touches[0];
        xDown = firstTouch.clientX;
        yDown = firstTouch.clientY;
    };

function handleTouchMove(e) {
        if (!xDown || !yDown) {
            return;
        }

let xUp = e.touches[0].clientX;
        let yUp = e.touches[0].clientY;

let xDiff = xDown - xUp;
        let yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
            if (xDiff > 0) {
                // Swipe left
                moveBox('left');
            } else {
                // Swipe right
                moveBox('right');
            }
        } else {
            if (yDiff > 0) {
                // Swipe up
                moveBox('up');
            } else {
                // Swipe down
                moveBox('down');
            }
        }

// Reset values
        xDown = null;
        yDown = null;
    };

function moveBox(direction) {
        switch (direction) {
            case 'left':
                box.style.left = parseFloat(box.style.left) - 10 + 'px';
                break;
            case 'right':
                box.style.left = parseFloat(box.style.left) + 10 + 'px';
                break;
            case 'up':
                box.style.top = parseFloat(box.style.top) - 10 + 'px';
                break;
            case 'down':
                box.style.top = parseFloat(box.style.top) + 10 + 'px';
                break;
        }
    }
</script>
</body>
</html>