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:22563

←

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:35
Build time 36.221 sec｜Game capacity 3.027KB｜

Script

Sure! Here's a simple game where you can move around and collect objects to increase your score. The game is implemented as a single HTML file and uses JavaScript. Please note that the game logic assumes smartphone operation, and pictograms are used for the objects.

👤

Score: 0

To play the game, simply copy the above code and save it into a single HTML file. Open the file in a web browser that supports JavaScript. The game will start, and you can move the player avatar around by touching/clicking on the game area. Each time you touch the object (depicted as an apple emoji), your score will increase, and the object will disappear. Hope you enjoy playing the game!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Moving Game</title>
    <style>
        #game {
            position: relative;
            width: 100%;
            height: 500px;
            background-color: lightgray;
        }

.player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
        }

.object {
            position: absolute;
            font-size: 30px;
        }

#score {
            text-align: center;
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div class="player">👤</div>
        <div id="score">Score: 0</div>
    </div>

game.addEventListener('click', function (event) {
            var rect = game.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

player.style.left = x + 'px';
            player.style.top = y + 'px';

var objects = document.querySelectorAll('.object');
            for (var i = 0; i < objects.length; i++) {
                var obj = objects[i];
                var objRect = obj.getBoundingClientRect();
                if (x >= objRect.left && x <= objRect.right && y >= objRect.top && y <= objRect.bottom) {
                    obj.parentNode.removeChild(obj);
                    score++;
                    updateScore();
                    break;
                }
            }
        });

function updateScore() {
            document.getElementById('score').textContent = 'Score: ' + score;
        }

function createObject() {
            var object = document.createElement('div');
            object.classList.add('object');
            object.innerHTML = '🍎';
            var posX = Math.floor(Math.random() * (game.offsetWidth - 50));
            var posY = Math.floor(Math.random() * (game.offsetHeight - 50));
            object.style.left = posX + 'px';
            object.style.top = posY + 'px';
            game.appendChild(object);
        }

setInterval(createObject, 3000);
    </script>
</body>
</html>
```

Hope you enjoy playing the game!