Prism Laser Large Rotation's game

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

No:6308

4453

←

Prev Next

→

Prism Laser Large Rotation
Developer User3881｜Date and time 23/7/2 1:46:27
Build time 23.675 sec｜Game capacity 2.121KB｜

Script

了解します。以下は、プリズムレーザー大回転という部分的なゲームの実装例です。このゲームでは、プレイヤーがプリズムを回転させてレーザービームを当てることを目指します。

▲

このゲームでは、プリズムをクリックすると、プリズムとレーザービームが45度ずつ回転します。プレイヤーはレーザービームを特定の位置に合わせることを目指します。この実装例では、スマートフォンでも遊べるようにしています。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>プリズムレーザー大回転</title>
    <style>
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
        }
        #prism {
            width: 200px;
            height: 200px;
            background-color: aqua;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 100px;
            color: white;
            cursor: pointer;
        }
        #beam {
            position: absolute;
            background-color: red;
            height: 100%;
            width: 2px;
            transition: transform 0.5s;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="prism">▲</div>
        <div id="beam"></div>
    </div>

let beamAngle = 0;

function rotatePrism() {
            prism.style.transform = `rotate(${beamAngle}deg)`;
            beam.style.transform = `rotate(${beamAngle}deg)`;
        }

function rotateBeam() {
            beamAngle += 45;
            if (beamAngle === 360) {
                beamAngle = 0;
            }
            rotatePrism();
        }

prism.addEventListener('click', rotateBeam);

rotatePrism();
    </script>
</body>
</html>
```