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

No:20839

105

Create a simulator game about movie creating
Developer User9170｜Date and time 23/10/11 8:27:00
Build time 175.307 sec｜Game capacity 6.051KB｜

Sure! Here's an example of a simple movie creation simulator game implemented as a single HTML file using JavaScript. The game allows players to create movies by selecting different scenes, actors, and props. I've used pictogram-like images for visuals, and the game can be played on a smartphone. Note: This is just a basic example to get you started. Feel free to modify and expand it based on your specific requirements.

Movie Creation Simulator

Actor 1

Actor 2

Actor 3

Prop 1

Prop 2

Prop 3

In this example, I've used `<div>` elements to represent the scene, actors, and props. Clicking on the scene will change its background color, simulating a change in the scene. Clicking on the actors and props will toggle their selection visually. When the "Create Movie" button is clicked, the game checks if a scene, at least one actor, and at least one prop are selected. If all the requirements are met, it displays a message showing the selected scene, actors, and props as the created movie. Otherwise, it prompts the user to make the necessary selections. You can replace the placeholder `<img>` tags with actual pictogram-like images for the actors and props. Also, make sure to provide the actual image files (e.g., `emozi_all/pictogram.png`, `emozi_rabbit.png`, etc.) in the same directory as the HTML file. Feel free to customize and enhance this example to match your desired game mechanics and visual style.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a simple movie creation simulator game implemented as a single HTML file using JavaScript. The game allows players to create movies by selecting different scenes, actors, and props. I've used pictogram-like images for visuals, and the game can be played on a smartphone.

Note: This is just a basic example to get you started. Feel free to modify and expand it based on your specific requirements.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Movie Creation Simulator</title>
    <style>
        body {
            text-align: center;
        }
        #scene {
            width: 180px;
            height: 180px;
            border: 2px solid #333;
            margin-bottom: 10px;
        }
        #actors {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        .actor {
            width: 50px;
            height: 50px;
            border: 2px solid #333;
            cursor: pointer;
        }
        #props {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        .prop {
            width: 50px;
            height: 50px;
            border: 2px solid #333;
            cursor: pointer;
        }
        #result {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Movie Creation Simulator</h1>
    <div id="scene"></div>
    <div id="actors">
        <div class="actor" id="actor1"><img src="actor1.png" alt="Actor 1"></div>
        <div class="actor" id="actor2"><img src="actor2.png" alt="Actor 2"></div>
        <div class="actor" id="actor3"><img src="actor3.png" alt="Actor 3"></div>
    </div>
    <div id="props">
        <div class="prop" id="prop1"><img src="prop1.png" alt="Prop 1"></div>
        <div class="prop" id="prop2"><img src="prop2.png" alt="Prop 2"></div>
        <div class="prop" id="prop3"><img src="prop3.png" alt="Prop 3"></div>
    </div>
    <button id="createButton">Create Movie</button>
    <div id="result"></div>

<script>
        document.addEventListener("DOMContentLoaded", function() {
            var scene = document.getElementById("scene");
            var actors = document.querySelectorAll(".actor");
            var props = document.querySelectorAll(".prop");
            var createButton = document.getElementById("createButton");
            var result = document.getElementById("result");

var selectedScene = "";
            var selectedActors = [];
            var selectedProps = [];

// Handler for scene selection
            scene.addEventListener("click", function() {
                // Simulate changing scene visually
                scene.style.backgroundColor = getRandomColor();
                selectedScene = "Scene Selected";
            });

// Handler for actor selection
            actors.forEach(function(actor) {
                actor.addEventListener("click", function() {
                    // Toggle selection visually
                    actor.classList.toggle("selected");

// Update selected actors array
                    if (actor.classList.contains("selected")) {
                        selectedActors.push(actor.id);
                    } else {
                        selectedActors = selectedActors.filter(function(id) { return id !== actor.id; });
                    }
                });
            });

// Handler for prop selection
            props.forEach(function(prop) {
                prop.addEventListener("click", function() {
                    // Toggle selection visually
                    prop.classList.toggle("selected");

// Update selected props array
                    if (prop.classList.contains("selected")) {
                        selectedProps.push(prop.id);
                    } else {
                        selectedProps = selectedProps.filter(function(id) { return id !== prop.id; });
                    }
                });
            });

// Handler for movie creation button click
            createButton.addEventListener("click", function() {
                if (selectedScene && selectedActors.length > 0 && selectedProps.length > 0) {
                    var actorsString = selectedActors.join(", ");
                    var propsString = selectedProps.join(", ");
                    result.textContent = "Movie Created - Scene: " + selectedScene + ", Actors: " + actorsString + ", Props: " + propsString;
                } else {
                    result.textContent = "Please select a scene, at least one actor, and at least one prop.";
                }
            });

// Utility function to generate a random background color
            function getRandomColor() {
                var letters = "0123456789ABCDEF";
                var color = "#";
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * letters.length)];
                }
                return color;
            }
        });
    </script>
</body>
</html>
```

In this example, I've used `<div>` elements to represent the scene, actors, and props. Clicking on the scene will change its background color, simulating a change in the scene. Clicking on the actors and props will toggle their selection visually. When the "Create Movie" button is clicked, the game checks if a scene, at least one actor, and at least one prop are selected. If all the requirements are met, it displays a message showing the selected scene, actors, and props as the created movie. Otherwise, it prompts the user to make the necessary selections.

You can replace the placeholder `<img>` tags with actual pictogram-like images for the actors and props. Also, make sure to provide the actual image files (e.g., `actor1.png`, `prop1.png`, etc.) in the same directory as the HTML file.

Feel free to customize and enhance this example to match your desired game mechanics and visual style.