"Pistol Shooting" is an HTML-based game in which the user uses their phone as a pistol to shoot the target, earn points, level up and increase the target's movement speed.'s game

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

No:18733

←

Prev Next

→

"Pistol Shooting" is an HTML-based game in which t..ALL
Developer Burak Arda Bulut｜Date and time 23/9/30 14:59:35
Build time 9.869 sec｜Game capacity 3.271KB｜

Script

Here's an example of an HTML-based game called "Pistol Shooting" where the user can use their smartphone as a pistol to shoot targets and earn points. The target's movement speed increases as the user levels up. This game uses pictograms for a visually engaging experience. To play the game, copy the code below into a single HTML file and open it in a browser.

Score: 0

Level: 1

Tap anywhere to shoot!

Note: Replace `'emozi_cat.png'` with the actual file name and extension of your target pictogram image.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pistol Shooting Game</title>
    <style>
        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: black;
            overflow: hidden;
        }

#target {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-image: url('target.png'); /* Replace with target pictogram */
            background-size: cover;
        }

#score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: white;
        }

#level {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
            color: white;
        }

#instructions {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="target"></div>
        <div id="score">Score: 0</div>
        <div id="level">Level: 1</div>
        <div id="instructions">Tap anywhere to shoot!</div>
    </div>

var target = document.getElementById('target');
        var scoreText = document.getElementById('score');
        var levelText = document.getElementById('level');
        var instructionsText = document.getElementById('instructions');

target.addEventListener('click', function() {
            score++;
            scoreText.textContent = 'Score: ' + score;

if (score >= level * 10) {
                level++;
                speed += 2;
                levelText.textContent = 'Level: ' + level;
            }
        });

document.addEventListener('click', function(event) {
            instructionsText.style.display = 'none';

var xPos = event.clientX - target.offsetWidth/2;
            var yPos = event.clientY - target.offsetHeight/2;

target.style.left = xPos + 'px';
            target.style.top = yPos + 'px';
        });

setInterval(moveTarget, 20);

function moveTarget() {
            var xPos = parseInt(target.style.left, 10);
            var yPos = parseInt(target.style.top, 10);

if (xPos < 0 || xPos + target.offsetWidth > window.innerWidth) {
                speed *= -1;
            }

xPos += speed;
            target.style.left = xPos + 'px';
        }
    </script>
</body>
</html>
```

Note: Replace `'target.png'` with the actual file name and extension of your target pictogram image.