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

No:40751

←

Prev Next

→

Golf game 🎮
Developer User18241｜Date and time 24/2/4 2:50:37
Build time 21.751 sec｜Game capacity 7.088KB｜

Script

Sure! Here is a simple implementation of a Golf game using JavaScript, HTML, and pictograms. This single HTML file can be opened on a smartphone browser and played as a finished game. Please note that this is a basic demonstration, and you can enhance it further based on your requirements:

Golf Game 🎮

Score: 0

In this game, you control the ball by swiping (moving your finger) on the screen. The goal is to move the ball towards the hole, represented by the pictogram, and increase your score with each successful shot. The club pictogram represents the starting position. You can replace the URLs within the `background-image` properties with the actual URLs of the pictograms you want to use. Please note that for this game to work correctly, you would need to replace the placeholder URLs for the ball, hole, and club pictograms with actual URLs pointing to appropriate images.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Golf Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        #score {
            font-size: 24px;
            margin-top: 10px;
        }
        
        #playground {
            width: 300px;
            margin: 20px auto;
            border: 2px solid black;
        }
        
        #ball {
            width: 30px;
            height: 30px;
            background-image: url('https://example.com/ball.png'); /* Replace with actual ball pictogram URL */
            background-size: 100%;
        }
        
        #hole {
            width: 40px;
            height: 40px;
            background-image: url('https://example.com/hole.png'); /* Replace with actual hole pictogram URL */
            background-size: 100%;
        }
        
        #club {
            width: 40px;
            height: 40px;
            background-image: url('https://example.com/club.png'); /* Replace with actual club pictogram URL */
            background-size: 100%;
        }
    </style>
</head>
<body>
    <h1>Golf Game 🎮</h1>
    <div id="score">Score: 0</div>
    <div id="playground">
        <div id="ball"></div>
        <div id="hole"></div>
        <div id="club"></div>
    </div>

// Initialize ball position
        var ball = document.getElementById('ball');
        ball.style.left = getInitialPosition().x + 'px';
        ball.style.top = getInitialPosition().y + 'px';

// Initialize hole and club positions
        var hole = document.getElementById('hole');
        hole.style.left = holePosition.x + 'px';
        hole.style.top = holePosition.y + 'px';

var club = document.getElementById('club');
        club.style.left = clubPosition.x + 'px';
        club.style.top = clubPosition.y + 'px';

// Handle touch events
        document.addEventListener('touchstart', handleTouchStart, false);
        document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
        var yDown = null;

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

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

var xUp = event.touches[0].clientX;
            var yUp = event.touches[0].clientY;

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

if (Math.abs(xDiff) > Math.abs(yDiff)) { // horizontal swipe
                if (xDiff > 0) {
                    moveBall(-1, 0); // Move left
                } else {
                    moveBall(1, 0); // Move right
                }
            } else { // vertical swipe
                if (yDiff > 0) {
                    moveBall(0, -1); // Move up
                } else {
                    moveBall(0, 1); // Move down
                }
            }

xDown = null;
            yDown = null;

event.preventDefault();
        }

// Move the ball in the given direction
        function moveBall(x, y) {
            var currentPosition = getBallPosition();
            var newX = currentPosition.x + x * 10;
            var newY = currentPosition.y + y * 10;

var playground = document.getElementById('playground');
            var playgroundRect = playground.getBoundingClientRect();

if (newX < playgroundRect.left) {
                newX = playgroundRect.left;
            } else if (newX > playgroundRect.right - ball.offsetWidth) {
                newX = playgroundRect.right - ball.offsetWidth;
            }

if (newY < playgroundRect.top) {
                newY = playgroundRect.top;
            } else if (newY > playgroundRect.bottom - ball.offsetHeight) {
                newY = playgroundRect.bottom - ball.offsetHeight;
            }

ball.style.left = newX + 'px';
            ball.style.top = newY + 'px';

checkShot();
        }

// Check if the ball reaches the hole
        function checkShot() {
            var ballPosition = getBallPosition();

if (
                ballPosition.x >= holePosition.x &&
                ballPosition.x + ball.offsetWidth <= holePosition.x + hole.offsetWidth &&
                ballPosition.y >= holePosition.y &&
                ballPosition.y + ball.offsetHeight <= holePosition.y + hole.offsetHeight
            ) {
                score++;
                document.getElementById('score').textContent = 'Score: ' + score;

holePosition = getRandomPosition();
                hole.style.left = holePosition.x + 'px';
                hole.style.top = holePosition.y + 'px';
            }
        }

// Get the current ball position
        function getBallPosition() {
            var ballRect = ball.getBoundingClientRect();
            return { x: ballRect.left, y: ballRect.top };
        }

// Get a random position within the playground
        function getRandomPosition() {
            var playground = document.getElementById('playground');
            var playgroundRect = playground.getBoundingClientRect();

var maxLeft = playgroundRect.width - ball.offsetWidth;
            var maxTop = playgroundRect.height - ball.offsetHeight;

var x = Math.floor(Math.random() * maxLeft);
            var y = Math.floor(Math.random() * maxTop);

return { x: x, y: y };
        }

// Get the initial ball position at the center of the playground
        function getInitialPosition() {
            var playground = document.getElementById('playground');
            var playgroundRect = playground.getBoundingClientRect();

var x = (playgroundRect.width - ball.offsetWidth) / 2;
            var y = (playgroundRect.height - ball.offsetHeight) / 2;

return { x: x, y: y };
        }
    </script>
</body>
</html>
```

Please note that for this game to work correctly, you would need to replace the placeholder URLs for the ball, hole, and club pictograms with actual URLs pointing to appropriate images.