Make a game that you can move around in and add a scoreboard that go’s up when you touch an object's game

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

No:22562

←

Prev Next

→

Make a game that you can move around in and add a ..ALL
Developer User10392｜Date and time 23/10/23 4:39:02
Build time 40.225 sec｜Game capacity 3.33KB｜

Script

Sure! Here's an example of a simple game where you can move around and score points by touching objects. It uses HTML, CSS, and JavaScript. To keep it as a single HTML file, I've wrapped the JavaScript code within script tags. The game can be played on a smartphone.

Score: 0

In this game, there is a red square that represents the player, and a blue square that represents the object. You can move the player by touching the screen and the object will move randomly. Whenever the player touches the object, the score will increase by 1, which is displayed in the score container. The gameContainer div serves as the game area. You can adjust the width and height as per your preference.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
<style>
    #gameContainer {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid black;
        overflow: hidden;
    }

.player {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
    }

.object {
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: blue;
    }

#scoreContainer {
        margin-top: 10px;
        font-size: 20px;
    }
</style>
</head>
<body>
    <div id="gameContainer">
        <div id="player" class="player"></div>
        <div id="object" class="object"></div>
    </div>
    <div id="scoreContainer">
        Score: <span id="score">0</span>
    </div>

// Initial position
        var xPos = 0;
        var yPos = 0;

// Move player
        function movePlayer(x, y) {
            xPos += x;
            yPos += y;
            player.style.transform = 'translate(' + xPos + 'px, ' + yPos + 'px)';
        }

// Update score
        function updateScore() {
            score++;
            scoreContainer.textContent = score;
        }

// Move player on touch events
        document.addEventListener('touchstart', function(e) {
            var touchX = e.touches[0].clientX;
            var touchY = e.touches[0].clientY;

var rect = gameContainer.getBoundingClientRect();
            var offsetX = touchX - rect.left;
            var offsetY = touchY - rect.top;
            
            if (offsetX >= 0 && offsetX <= gameContainer.clientWidth - player.clientWidth &&
                offsetY >= 0 && offsetY <= gameContainer.clientHeight - player.clientHeight) {
                movePlayer(offsetX - xPos, offsetY - yPos);
            }

// Check if object is touched
            if (playerTouchesObject()) {
                updateScore();
            }
        });

// Check if player touches object
        function playerTouchesObject() {
            var playerRect = player.getBoundingClientRect();
            var objectRect = object.getBoundingClientRect();

return !(playerRect.right < objectRect.left ||
                playerRect.left > objectRect.right ||
                playerRect.bottom < objectRect.top ||
                playerRect.top > objectRect.bottom);
        }
    </script>
</body>
</html>
```