psychedelic art's game | AI game creator

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

No:5945

254

psychedelic art
Developer User1006｜Date and time 23/7/1 3:15:29
Build time 26.326 sec｜Game capacity 3.267KB｜

以下は、JavaScriptを使用して作成したサイケデリックアート風のゲームです。プレイヤーはスマホで操作し、絵文字を使って描かれた図形を表す数字を当てることが目的です。

上記のコードでは、1つのHTMLファイル内にHTML、CSS、JavaScriptが含まれています。スクリプトタグで囲むことで、JavaScriptのコードを実行できます。このゲームでは、`game-area`というIDを持つ要素に囲まれた300x300の領域がゲームエリアとなります。`game-cell`というクラスを持つ要素が配置され、それぞれのセルをクリックすることでゲームを進めます。最初にランダムに選ばれたセルが、正解のセルとなります。プレイヤーはクリックしたセルが正解かどうかを判定し、正解の場合はおめでとうのメッセージが表示されます。プレイヤーが不正解の場合は、クリックしたセルの数字と色が変わります。正解または不正解後、ゲームをリセットして新たな正解セルをランダムに選びます。スマホでこのHTMLファイルを開いて、ゲームをお楽しみください！

→ 　

3　

1　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

以下は、JavaScriptを使用して作成したサイケデリックアート風のゲームです。プレイヤーはスマホで操作し、絵文字を使って描かれた図形を表す数字を当てることが目的です。

```html
<!DOCTYPE html>
<html>

<head>
    <title>サイケデリックアートゲーム</title>
    <style>
        #game-area {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

.game-cell {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <script>
        window.onload = function () {
            var gameArea = document.getElementById("game-area");
            var numCells = 10;
            var targetCell = Math.floor(Math.random() * numCells * numCells);
            
            for (var i = 0; i < numCells * numCells; i++) {
                var cell = document.createElement("div");
                cell.classList.add("game-cell");
                cell.innerText = "🌸";
                gameArea.appendChild(cell);

cell.onclick = function () {
                    var index = Array.prototype.indexOf.call(gameArea.children, this);
                    if (index === targetCell) {
                        this.innerText = "🌼";
                        alert("正解！おめでとう！");
                        resetGame();
                    } else {
                        this.innerText = index + 1;
                        this.style.backgroundColor = "red";
                    }
                };
            }

function resetGame() {
                for (var i = 0; i < gameArea.children.length; i++) {
                    var cell = gameArea.children[i];
                    cell.innerText = "🌸";
                    cell.style.backgroundColor = "white";
                }
                targetCell = Math.floor(Math.random() * numCells * numCells);
            }
        };
    </script>

<div id="game-area"></div>

</body>

</html>
```

上記のコードでは、1つのHTMLファイル内にHTML、CSS、JavaScriptが含まれています。スクリプトタグで囲むことで、JavaScriptのコードを実行できます。

このゲームでは、`game-area`というIDを持つ要素に囲まれた300x300の領域がゲームエリアとなります。`game-cell`というクラスを持つ要素が配置され、それぞれのセルをクリックすることでゲームを進めます。

最初にランダムに選ばれたセルが、正解のセルとなります。プレイヤーはクリックしたセルが正解かどうかを判定し、正解の場合はおめでとうのメッセージが表示されます。プレイヤーが不正解の場合は、クリックしたセルの数字と色が変わります。

正解または不正解後、ゲームをリセットして新たな正解セルをランダムに選びます。

スマホでこのHTMLファイルを開いて、ゲームをお楽しみください！