A game where the player become a snake who must defeat other snake to be bigger and to control the player snack the player must drag a joystick's game

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

No:10350

←

Prev Next

→

A game where the player become a snake who must de..ALL
Developer User4535｜Date and time 23/7/30 18:37:05
Build time 27.984 sec｜Game capacity 4.546KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            background-color: lightgrey;
            position: relative;
        }
        #player-snake {
            width: 20px;
            height: 20px;
            background-color: green;
            position: absolute;
        }
        #enemy-snake {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
        #joystick {
            width: 100px;
            height: 100px;
            background-color: grey;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        #stick {
            width: 40px;
            height: 40px;
            background-color: black;
            border-radius: 20px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="player-snake"></div>
        <div id="enemy-snake"></div>
    </div>
    <div id="joystick">
        <div id="stick"></div>
    </div>

// Start game
        gameInProgress = true;
        moveEnemySnake();

// Event listeners
        stick.addEventListener('mousedown', startDrag);
        stick.addEventListener('touchstart', startDrag);
        gameBoard.addEventListener('mouseup', stopDrag);
        gameBoard.addEventListener('touchend', stopDrag);
        gameBoard.addEventListener('mousemove', drag);
        gameBoard.addEventListener('touchmove', drag);

// Functions
        function getRandomCoordinate() {
            var min = 0;
            var max = Math.floor(gameBoardRect.width / 20);
            return Math.floor(Math.random() * (max - min + 1)) * 20;
        }

function moveEnemySnake() {
            var dx = (playerSnakePos.x === enemySnakePos.x) ? 0 : (playerSnakePos.x > enemySnakePos.x) ? 20 : -20;
            var dy = (playerSnakePos.y === enemySnakePos.y) ? 0 : (playerSnakePos.y > enemySnakePos.y) ? 20 : -20;

if (dx !== 0) {
                enemySnakePos.x += dx;
            } else {
                enemySnakePos.y += dy;
            }

enemySnake.style.left = enemySnakePos.x + 'px';
            enemySnake.style.top = enemySnakePos.y + 'px';

if (gameInProgress) {
                setTimeout(moveEnemySnake, 1000);
            }
        }

function startDrag(event) {
            event.preventDefault();
            var touch = event.type === 'touchstart' ? event.touches[0] : event;
            joystick.classList.add('activeJoystick');

document.addEventListener('mousemove', drag);
            document.addEventListener('touchmove', drag);

drag(touch);
        }

function stopDrag(event) {
            event.preventDefault();
            joystick.classList.remove('activeJoystick');

document.removeEventListener('mousemove', drag);
            document.removeEventListener('touchmove', drag);

stick.style.left = '30px';
            stick.style.top = '30px';
        }

function drag(event) {
            event.preventDefault();
            var touch = event.type === 'touchmove' ? event.touches[0] : event;
            var newX = touch.clientX - gameBoardRect.left - 10;
            var newY = touch.clientY - gameBoardRect.top - 10;

if (newX >= -30 && newX <= 70 && newY >= -30 && newY <= 70) {
                stick.style.left = newX + 'px';
                stick.style.top = newY + 'px';
                playerSnakePos.x = newX + stick.offsetWidth / 2;
                playerSnakePos.y = newY + stick.offsetHeight / 2;
                playerSnake.style.left = playerSnakePos.x + 'px';
                playerSnake.style.top = playerSnakePos.y + 'px';
            }
        }
    </script>
</body>
</html>