AI game creator

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

No:39894

132

←

Prev Next

→

تیتریس
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/30 19:06:22
Build time 18.013 sec｜Game capacity 3.692KB｜

Script

了解しました。以下に示すのは、HTMLとJavaScriptを用いて実装した簡単なゲームの例です。この例では、キーボードの上矢印キーを押すことでブロックが移動し、揃った列が消えるテトリス風のゲームを作成しています。

このHTMLファイルを開くと、ゲームボードが表示され、ブロックが下方向に落ちていきます。キーボードの矢印キーを押すことでブロックを移動させることができます。この例では、スマホではなくPCのキーボード操作を前提としていますが、スマートフォン向けに操作可能にするためには、タッチイベントを追加するなどの修正が必要となります。また、絵文字を使う具体的な例はないため、ゲームの要素に絵文字を組み込むなど、独自のアレンジを行ってください。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。

以下に示すのは、HTMLとJavaScriptを用いて実装した簡単なゲームの例です。この例では、キーボードの上矢印キーを押すことでブロックが移動し、揃った列が消えるテトリス風のゲームを作成しています。

```html
<!DOCTYPE html>
<html>
<head>
<style>
    #game-board {
        width: 200px;
        height: 400px;
        border: 1px solid black;
        position: relative;
        overflow: hidden;
    }
    .block {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        border: 1px solid black;
    }
</style>
</head>
<body>
    <div id="game-board">
    </div>

initGame();

document.addEventListener('keydown', moveBlock);

function initGame() {
            for (let i = 0; i < 20; i++) {
                for (let j = 0; j < 10; j++) {
                    const block = document.createElement("div");
                    block.classList.add("block");
                    block.style.left = (j * 20) + "px";
                    block.style.top = (i * 20) + "px";
                    gameBoard.appendChild(block);
                    blocks.push([block, i]);
                }
            }

currentBlock = createNewBlock();
            intervalId = setInterval(moveDown, 500);
        }

function createNewBlock() {
            const block = document.createElement("div");
            block.classList.add("block");
            block.style.left = "80px";
            block.style.top = "0";
            gameBoard.appendChild(block);
            return [block, 0];
        }

function moveDown() {
            const canMove = blocks.every(([block, y]) => {
                const newY = y + 1;
                return newY < 20 && !blocks.some(([otherBlock, otherY]) => otherY === newY && otherBlock.style.left === block.style.left);
            });

if (canMove) {
                const [block, y] = currentBlock;
                block.style.top = (y * 20 + 20) + "px";
                currentBlock = [block, y + 1];
            } else {
                clearInterval(intervalId);
            }
        }

function moveBlock(event) {
            const [block, y] = currentBlock;
            const x = parseFloat(block.style.left.slice(0, -2));

if (event.key === "ArrowUp") {
                block.style.transform = "rotate(90deg)";
            } else if (event.key === "ArrowDown") {
                block.style.transform = "rotate(-90deg)";
            } else if (event.key === "ArrowLeft") {
                block.style.left = ((x - 20) < 0 ? 0 : (x - 20)) + "px";
            } else if (event.key === "ArrowRight") {
                block.style.left = ((x + 20) > 180 ? 180 : (x + 20)) + "px";
            }
        }
    </script>
</body>
</html>
```

このHTMLファイルを開くと、ゲームボードが表示され、ブロックが下方向に落ちていきます。キーボードの矢印キーを押すことでブロックを移動させることができます。

この例では、スマホではなくPCのキーボード操作を前提としていますが、スマートフォン向けに操作可能にするためには、タッチイベントを追加するなどの修正が必要となります。また、絵文字を使う具体的な例はないため、ゲームの要素に絵文字を組み込むなど、独自のアレンジを行ってください。