AI game creator

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

No:38306

←

Prev Next

→

Mind physics game
Developer User17345｜Date and time 24/1/24 6:23:25
Build time 12.245 sec｜Game capacity 4.249KB｜

Script

Move the player to reach the target!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<html>
<head>
    <style>
        #game-container {
            position: relative;
            width: 100%;
            height: 350px;
            background-color: lightgray;
            border: 2px solid black;
        }
        
        #player {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        
        #target {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        
        #instructions {
            text-align: center;
            margin-top: 50px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div id="target"></div>
    </div>
    <div id="instructions">Move the player to reach the target!</div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var player = document.getElementById('player');
            var target = document.getElementById('target');
            var gameContainer = document.getElementById('game-container');
            var isDragging = false;
            var startX = 0;
            var startY = 0;
            
            player.addEventListener('mousedown', startDrag);
            player.addEventListener('touchstart', startDrag);
            player.addEventListener('mouseup', endDrag);
            player.addEventListener('touchend', endDrag);
            gameContainer.addEventListener('mousemove', handleDrag);
            gameContainer.addEventListener('touchmove', handleDrag);
            
            function startDrag(event) {
                event.preventDefault();
                isDragging = true;
                startX = event.clientX || event.touches[0].clientX;
                startY = event.clientY || event.touches[0].clientY;
            }
            
            function endDrag() {
                isDragging = false;
            }
            
            function handleDrag(event) {
                if (isDragging) {
                    var currentX = event.clientX || event.touches[0].clientX;
                    var currentY = event.clientY || event.touches[0].clientY;
                    
                    var deltaX = currentX - startX;
                    var deltaY = currentY - startY;
                    
                    var newX = player.offsetLeft + deltaX;
                    var newY = player.offsetTop + deltaY;
                    
                    if (newX < 0) {
                        newX = 0;
                    } else if ((newX + player.offsetWidth) > gameContainer.offsetWidth) {
                        newX = gameContainer.offsetWidth - player.offsetWidth;
                    }
                    
                    if (newY < 0) {
                        newY = 0;
                    } else if ((newY + player.offsetHeight) > gameContainer.offsetHeight) {
                        newY = gameContainer.offsetHeight - player.offsetHeight;
                    }
                    
                    player.style.left = newX + 'px';
                    player.style.top = newY + 'px';
                    
                    startX = currentX;
                    startY = currentY;
                    
                    checkCollision();
                }
            }
            
            function checkCollision() {
                var playerRect = player.getBoundingClientRect();
                var targetRect = target.getBoundingClientRect();
                
                if (!(playerRect.right < targetRect.left ||
                      playerRect.left > targetRect.right ||
                      playerRect.bottom < targetRect.top ||
                      playerRect.top > targetRect.bottom)) {
                    alert('Congratulations! You reached the target!');
                    resetGame();
                }
            }
            
            function resetGame() {
                player.style.left = '0px';
                player.style.top = '0px';
            }
        });
    </script>
</body>
</html>