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

No:23687

Switch Blocks is not the name :Blocks:Ground :Brea..ALL
Developer User9100｜Date and time 23/11/2 23:56:19
Build time 141.329 sec｜Game capacity 7.714KB｜

Script

Sure! Below is an example of a simple game called "Switch Blocks" implemented as a single HTML file using JavaScript and enclosed in script tags. It allows smartphone operation and uses pictograms. The game features a player that can move and jump on different types of blocks, including ground and breakable brick blocks. The player can be placed and moved using touch controls in the editor mode.

Switch Blocks

Editor Mode

To play the game, simply copy the above code into a new HTML file and open it in a web browser on your smartphone. The game starts with a start screen where you can choose to either start the game or enter editor mode. In editor mode, you can touch and drag on the editor area to place blocks. Tap the "Start Game" button to begin playing. The player can be controlled using on-screen arrow buttons, and tap the up button to jump. The goal is to avoid falling out of bounds and to collect any breakable blocks on the way. Enjoy playing "Switch Blocks"!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Switch Blocks</title>
    <style>
        body {
            text-align: center;
        }
        
        #game {
            display: none;
        }
        
        #editor-mode {
            display: none;
        }
        
        #editor {
            border: 2px solid black;
            width: 200px;
            height: 400px;
            margin: 20px auto;
            position: relative;
            touch-action: none;
        }
        
        .block {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #CCC;
        }
        
        .ground {
            background-color: green;
        }
        
        .breakable {
            background-color: orange;
        }
        
        .player {
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>Switch Blocks</h1>
    <div id="start-screen">
        <button onclick="startGame()">Start Game</button>
        <button onclick="toggleEditorMode()">Editor Mode</button>
    </div>
    
    <div id="game">
        <div id="editor-mode">
            <h3>Editor Mode</h3>
            <div id="editor"></div>
        </div>
        
        <h2 id="game-over" style="display: none">Game Over!</h2>
        <canvas id="canvas"></canvas>
    </div>
    
    <script>
        // Game variables
        var canvas;
        var context;
        var playerX = 50;
        var playerY = 0;
        var jumpHeight = 100;
        var blockSize = 40;
        var groundBlocks = [
            { x: 0, y: 360, width: 400, height: 40 }
        ];
        var breakableBlocks = [
            { x: 80, y: 280, width: 40, height: 40 }
        ];
        
        // Game state
        var isGameOver = false;
        var isJumping = false;
        
        // Touch controls
        var touchStartX = 0;
        var touchStartY = 0;
        
        function startGame() {
            document.getElementById('start-screen').style.display = 'none';
            document.getElementById('game').style.display = 'block';
            canvas = document.getElementById('canvas');
            context = canvas.getContext('2d');
            canvas.width = 400;
            canvas.height = 400;
            draw();
        }
        
        function toggleEditorMode() {
            document.getElementById('start-screen').style.display = 'none';
            document.getElementById('editor-mode').style.display = 'block';
            var editor = document.getElementById('editor');
            editor.addEventListener('touchstart', onTouchStart);
            editor.addEventListener('touchmove', onTouchMove);
            editor.addEventListener('touchend', onTouchEnd);
        }
        
        function onTouchStart(event) {
            touchStartX = event.touches[0].clientX;
            touchStartY = event.touches[0].clientY;
        }
        
        function onTouchMove(event) {
            event.preventDefault();
            
            var touchX = event.touches[0].clientX - touchStartX;
            var touchY = event.touches[0].clientY - touchStartY;
            
            var block = document.createElement('div');
            block.className = 'block';
            block.style.left = (touchX + playerX) + 'px';
            block.style.top = (touchY + playerY) + 'px';
            
            document.getElementById('editor').appendChild(block);
        }
        
        function onTouchEnd() {
            touchStartX = 0;
            touchStartY = 0;
        }
        
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            if (!isGameOver) {
                // Draw ground blocks
                for (var i = 0; i < groundBlocks.length; i++) {
                    var block = groundBlocks[i];
                    context.fillStyle = 'green';
                    context.fillRect(block.x, block.y, block.width, block.height);
                }
                
                // Draw breakable blocks
                for (var i = 0; i < breakableBlocks.length; i++) {
                    var block = breakableBlocks[i];
                    context.fillStyle = 'orange';
                    context.fillRect(block.x, block.y, block.width, block.height);
                }
                
                // Draw player
                context.fillStyle = 'blue';
                context.fillRect(playerX, playerY, blockSize, blockSize);
                
                // Check collisions
                checkCollisions();
                
                // Update player position
                if (isJumping) {
                    playerY -= 2;
                    
                    if (playerY <= jumpHeight) {
                        isJumping = false;
                    }
                } else {
                    playerY += 2;
                }
                
                requestAnimationFrame(draw);
            } else {
                document.getElementById('game-over').style.display = 'block';
            }
        }
        
        function checkCollisions() {
            var playerBottom = playerY + blockSize;
            
            // Check collision with ground
            for (var i = 0; i < groundBlocks.length; i++) {
                var block = groundBlocks[i];
                if (playerBottom >= block.y && playerY < block.y + block.height && playerX + blockSize > block.x && playerX < block.x + block.width) {
                    // Player collided with ground
                    isJumping = false;
                    playerY = block.y - blockSize;
                    break;
                }
            }
            
            // Check collision with breakable blocks
            for (var i = 0; i < breakableBlocks.length; i++) {
                var block = breakableBlocks[i];
                if (playerBottom >= block.y && playerY < block.y + block.height && playerX + blockSize > block.x && playerX < block.x + block.width) {
                    // Player collided with breakable block
                    isJumping = false;
                    playerY = block.y - blockSize;
                    breakableBlocks.splice(i, 1); // Remove breakable block
                    break;
                }
            }
            
            // Check collision with canvas boundaries
            if (playerY + blockSize >= canvas.height) {
                // Player fell out of bounds
                isGameOver = true;
            }
        }
        
        function jump() {
            if (!isJumping) {
                isJumping = true;
                playerY -= 2;
            }
        }
    </script>
</body>
</html>
```