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

No:23701

A geometry type game with a editor online and leve..ALL
Developer User11107｜Date and time 23/11/3 1:13:37
Build time 48.393 sec｜Game capacity 2.84KB｜

Script

Sure! Here's an example of a simple geometry game with an online editor and levels. The game consists of placing different shapes on a canvas to create a specific pattern. You can use pictograms to represent the shapes.

Geometry Game

Select a shape:

🔴

△

■

Objective:

Place the shapes on the canvas to create a specific pattern.

Level 1:

Place a circle at the center of the canvas.

This is just a basic example to give you an idea of how a geometry game with an online editor and levels can be implemented using HTML, CSS, and JavaScript. Feel free to customize and expand the game based on your requirements and desired functionality.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Geometry Game</title>
    <style>
        #canvas {
            width: 300px;
            height: 300px;
            border: 2px solid black;
        }
        .shape {
            width: 50px;
            height: 50px;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>Geometry Game</h1>
    
    <div id="canvas"></div>
    
    <h2>Select a shape:</h2>
    <div class="shape" onclick="selectShape('circle')">🔴</div>
    <div class="shape" onclick="selectShape('triangle')">△</div>
    <div class="shape" onclick="selectShape('square')">■</div>
    
    <h2>Objective:</h2>
    <p>Place the shapes on the canvas to create a specific pattern.</p>
    
    <h2>Level 1:</h2>
    <p>Place a circle at the center of the canvas.</p>
    
    <script>
        var selectedShape = null;
        
        function selectShape(shape) {
            selectedShape = shape;
        }
        
        document.getElementById('canvas').onclick = function(event) {
            if (selectedShape) {
                var canvas = document.getElementById('canvas');
                var shape = document.createElement('div');
                shape.className = 'shape';
                shape.innerHTML = getShapeSymbol(selectedShape);
                shape.style.left = (event.clientX - canvas.offsetLeft - 25) + 'px';
                shape.style.top = (event.clientY - canvas.offsetTop - 25) + 'px';
                
                canvas.appendChild(shape);
                checkPattern();
            }
        };
        
        function getShapeSymbol(shape) {
            switch(shape) {
                case 'circle':
                    return '🔴';
                case 'triangle':
                    return '△';
                case 'square':
                    return '■';
                default:
                    return '';
            }
        }
        
        function checkPattern() {
            var shapesCount = document.getElementsByClassName('shape').length;
            if (shapesCount === 1 && selectedShape === 'circle') {
                alert('Congratulations! Level 1 completed!');
                // TODO: Move to next level or end the game
            }
        }
    </script>
</body>
</html>
```