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:20620

←

Prev Next

→

A cube game with a editor place Ground a button th..ALL
Developer User9100｜Date and time 23/10/10 8:44:57
Build time 11.711 sec｜Game capacity 3.508KB｜

Script

←

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>
    <style>
        #gameContainer {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #cursorBlock {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <button onclick="startGame()">Play</button>
    <div id="gameContainer"></div>

function startGame() {
            gameContainer.innerHTML = '';
            player = createPlayer();
            cursorBlock = createCursorBlock();
            isPlaying = true;

document.addEventListener("keydown", handleKeyPress);

gameLoop();
        }

function createPlayer() {
            var playerElem = document.createElement("div");
            playerElem.id = "player";
            gameContainer.appendChild(playerElem);
            return playerElem;
        }

function createCursorBlock() {
            var cursorElem = document.createElement("div");
            cursorElem.id = "cursorBlock";
            gameContainer.appendChild(cursorElem);
            return cursorElem;
        }

function handleKeyPress(event) {
            if (!isPlaying) {
                return;
            }

switch (event.keyCode) {
                case 37: // Left Arrow
                    moveCursor(-50, 0);
                    break;
                case 39: // Right Arrow
                    moveCursor(50, 0);
                    break;
                case 65: // A Key
                    placeBlock();
                    break;
                case 38: // Up Arrow
                    jump();
                    break;
                case 40: // Down Arrow
                    break;
            }
        }

function moveCursor(x, y) {
            var cursorLeft = cursorBlock.style.left ? parseInt(cursorBlock.style.left) : 0;
            var cursorBottom = cursorBlock.style.bottom ? parseInt(cursorBlock.style.bottom) : 0;

cursorBlock.style.left = cursorLeft + x + "px";
            cursorBlock.style.bottom = cursorBottom + y + "px";
        }

function placeBlock() {
            var cubeElem = document.createElement("div");
            cubeElem.classList.add("cube");
            cubeElem.style.left = cursorBlock.style.left;
            cubeElem.style.bottom = cursorBlock.style.bottom;
            gameContainer.appendChild(cubeElem);
           
        }

function gameLoop() {
            if (!isPlaying) {
                return;
            }
            requestAnimationFrame(gameLoop);
        }
    </script>
</body>
</html>