A cube game with a editor place Ground a button that says play press it a player appears press play again go back to making press a button saying a to place use arrows to move cursor while playing use arrows to move use a to jump's game

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

No:20626

←

Prev Next

→

A cube game with a editor place Ground a button th..ALL
Developer User9100｜Date and time 23/10/10 8:47:50
Build time 12.534 sec｜Game capacity 3.814KB｜

Script

Editor Mode

Click on the ground to place cubes:

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Cube Game</title>
</head>
<body>
    <div id="game-container">
        <div id="editor-mode">
            <h2>Editor Mode</h2>
            <p>Click on the ground to place cubes:</p>
            <div id="ground" onclick="placeCube()"></div>
            <button onclick="startGame()">Play</button>
        </div>
        <div id="game-mode" style="display: none;">
            <h2>Game Mode</h2>
            <div id="player"></div>
            <button onclick="startEditor()">Go Back to Editor</button>
        </div>
    </div>

function placeCube() {
            var ground = document.getElementById("ground");
            var cube = document.createElement("div");
            cube.className = "cube";
            cube.style.top = (event.clientY - ground.offsetTop) + "px";
            cube.style.left = (event.clientX - ground.offsetLeft) + "px";
            ground.appendChild(cube);
            cubes.push(cube);
        }

function removeCubes() {
            var ground = document.getElementById("ground");
            for (var i = 0; i < cubes.length; i++) {
                ground.removeChild(cubes[i]);
            }
            cubes = [];
        }

function startGame() {
            document.getElementById("game-mode").style.display = "block";
            document.getElementById("editor-mode").style.display = "none";
            document.addEventListener("keydown", handleKeyPress);
        }

function startEditor() {
            document.getElementById("game-mode").style.display = "none";
            document.getElementById("editor-mode").style.display = "block";
            document.removeEventListener("keydown", handleKeyPress);
            removeCubes();
        }

function movePlayer(event) {
            var player = document.getElementById("player");
            var key = event.key;
            var topPosition = parseInt(player.style.top) || 0;
            var leftPosition = parseInt(player.style.left) || 0;

switch (key) {
                case "ArrowUp":
                    topPosition -= 10;
                    break;
                case "ArrowDown":
                    topPosition += 10;
                    break;
                case "ArrowLeft":
                    leftPosition -= 10;
                    break;
                case "ArrowRight":
                    leftPosition += 10;
                    break;
                case "a":
                    jump();
                    return;
            }

player.style.top = topPosition + "px";
            player.style.left = leftPosition + "px";
        }

function handleKeyPress(event) {
            movePlayer(event);
        }

function jump() {
            var player = document.getElementById("player");
            player.style.bottom = "30px";
            setTimeout(function() {
                player.style.bottom = "0";
            }, 300);
        }
    </script>

#ground {
            width: 400px;
            height: 200px;
            background-color: #E0E0E0;
            position: relative;
            margin: 0 auto;
            margin-bottom: 20px;
        }

.cube {
            width: 20px;
            height: 20px;
            background-color: #333;
            position: absolute;
        }

#player {
            width: 20px;
            height: 40px;
            background-color: #FF5722;
            margin: 0 auto;
            position: relative;
            top: 0;
            bottom: 0;
        }

button {
            margin-top: 20px;
        }
    </style>
</body>
</html>