Recreation of a scene from the movie "Twister"'s game

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

No:38714

←

Prev Next

→

Recreation of a scene from the movie "Twister"
Developer User17421｜Date and time 24/1/25 8:02:43
Build time 21.878 sec｜Game capacity 5.123KB｜

Script

Sure! Here's a recreation of a scene from the movie "Twister" implemented as a single HTML file using JavaScript enclosed in script tags. The game can be played on a smartphone and uses pictograms for visual representation.

🌪️

Get ready to chase the Twister!

This HTML file sets up a simple Twister game where the player has to chase the twister pictogram using direction buttons (⬆️, ➡️, ⬇️, ⬅️) displayed on the screen. The game starts when the player clicks the "Start Chasing" button, after which the player should click the direction buttons to move the twister pictogram in the chosen direction. The goal is to catch the twister within the set of predefined positions. If the player misses the twister, a "Game Over" message is displayed, and a "Restart" button appears to start the game again.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Twister Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #game-board {
            margin: 50px auto;
            width: 300px;
            border: 2px solid #000;
            padding: 10px;
        }
        #game-message {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        .pictogram {
            font-size: 60px;
        }
        .btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div class="pictogram">🌪️</div>
        <div id="game-message">Get ready to chase the Twister!</div>
        <button class="btn" id="start-button">Start Chasing</button>
    </div>

function generateTwisterPosition() {
            var twisterPositions = [
                '🔄🏠', '🔄🌳', '🔄⛪', '🔄🏢', '🔄🚗',
                '🔄🚜', '🔄⛽', '🔄✈️', '🔄🌊', '🔄🎡'
            ];
            var index = Math.floor(Math.random() * twisterPositions.length);
            showTwister(twisterPositions[index]);
        }

function showTwister(position) {
            document.getElementById('game-board').innerHTML = '<div class="pictogram">' + position + '</div>';
            document.getElementById('game-message').textContent = 'Catch the Twister!';
            createMovementButtons();
        }

function createMovementButtons() {
            var directions = ['⬆️', '➡️', '⬇️', '⬅️'];
            var buttonsHtml = '';
            for (var i = 0; i < directions.length; i++) {
                buttonsHtml += '<button class="btn" onclick="moveTwister(\'' + directions[i] + '\')">' + directions[i] + '</button>';
            }
            document.getElementById('game-board').innerHTML += buttonsHtml;
        }

function moveTwister(direction) {
            var possiblePositions = [
                '🔄🏠', '🔄🌳', '🔄⛪', '🔄🏢', '🔄🚗',
                '🔄🚜', '🔄⛽', '🔄✈️', '🔄🌊', '🔄🎡'
            ];
            var currentTwister = document.getElementsByClassName('pictogram')[0].textContent;
            var currentIndex = possiblePositions.indexOf(currentTwister);
            var newIndex;

if (direction === '⬆️') {
                newIndex = currentIndex - 3;
            } else if (direction === '➡️') {
                newIndex = currentIndex + 1;
            } else if (direction === '⬇️') {
                newIndex = currentIndex + 3;
            } else if (direction === '⬅️') {
                newIndex = currentIndex - 1;
            }

if (newIndex >= 0 && newIndex < possiblePositions.length) {
                showTwister(possiblePositions[newIndex]);
            } else {
                document.getElementById('game-message').textContent = 'You missed the Twister! Game Over';
                document.getElementById('game-board').innerHTML = '<button class="btn" id="restart-button">Restart</button>';
                document.getElementById('restart-button').addEventListener('click', restartGame);
            }
        }

function restartGame() {
            document.getElementById('game-message').textContent = 'Get ready to chase the Twister!';
            document.getElementById('restart-button').style.display = 'none';
            document.getElementById('start-button').style.display = 'block';
            document.getElementById('game-board').innerHTML = '<div class="pictogram">🌪️</div>';
        }
    </script>
</body>
</html>
```