three-dimensional chess's game

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

No:7926

1585

←

Prev Next

→

three-dimensional chess
Developer User3997｜Date and time 23/7/11 0:34:55
Build time 14.506 sec｜Game capacity 3.47KB｜

Script

了解です。三次元チェスのゲームを作成します。以下が実装したHTMLファイルのコードです。

このゲームでは、三次元チェスのボードが表示されます。各マスはキューブとして表現され、6つの面があります。面には番号が表示されますが、ゲームのロジックはまだ実装されていません。ゲームのルールに基づいて、JavaScriptコードを追加することで遊べるゲームにすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

了解です。三次元チェスのゲームを作成します。以下が実装したHTMLファイルのコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>三次元チェス</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        
        #board {
            width: 400px;
            height: 400px;
            perspective: 600px;
        }
        
        .square {
            display: inline-block;
            width: 33.33%;
            height: 33.33%;
            position: relative;
        }
        
        .cube {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transform: rotateX(20deg) rotateY(-45deg);
        }
        
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
            opacity: 0.9;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }
        
        .top {
            transform: rotateX(90deg) translateZ(50%);
        }
        
        .front {
            transform: translateZ(50%);
        }
        
        .left {
            transform: rotateY(90deg) translateZ(50%);
        }
        
        .right {
            transform: rotateY(-90deg) translateZ(50%);
        }
        
        .bottom {
            transform: rotateX(270deg) translateZ(50%);
        }
        
        .back {
            transform: rotateY(180deg) translateZ(50%);
        }
    </style>
</head>
<body>
    <div id="board">
        <div class="square">
            <div class="cube">
                <div class="face top">1</div>
                <div class="face front">2</div>
                <div class="face left">3</div>
                <div class="face right">4</div>
                <div class="face bottom">5</div>
                <div class="face back">6</div>
            </div>
        </div>
        <div class="square">
            <div class="cube">
                <div class="face top">7</div>
                <div class="face front">8</div>
                <div class="face left">9</div>
                <div class="face right">10</div>
                <div class="face bottom">11</div>
                <div class="face back">12</div>
            </div>
        </div>
        <div class="square">
            <div class="cube">
                <div class="face top">13</div>
                <div class="face front">14</div>
                <div class="face left">15</div>
                <div class="face right">16</div>
                <div class="face bottom">17</div>
                <div class="face back">18</div>
            </div>
        </div>
    </div>