AI game creator

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

No:7265

1644

←

Prev Next

→

catapult
Developer User3996｜Date and time 23/7/6 18:15:35
Build time 22.079 sec｜Game capacity 3.794KB｜

Script

了解です。以下にカタパルトゲームの実装例を示します。

この実装例では、カタパルトをクリックしてドラッグすることで、石を放出することができます。放出された石がターゲットに当たった場合には「ゲームクリア！」とアラートが表示されます。ターゲットに当たらなかった場合には「ミス！」とアラートが表示されます。

←

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>
        #catapult {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: black;
            border-radius: 50%;
            bottom: 10px;
            left: calc(50% - 25px);
        }

#projectile {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            display: none;
            transition: all 0.5s ease-in-out;
        }

#target {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
<div id="catapult"></div>
<div id="projectile"></div>
<div id="target"></div>

let isDragging = false;
    let startX, startY;
    let endX, endY;
    let isLaunched = false;

catapult.addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
    });

catapult.addEventListener('mouseup', (e) => {
        if (!isLaunched) {
            isDragging = false;
            endX = e.clientX;
            endY = e.clientY;
            launchProjectile(startX, startY, endX, endY);
        }
    });

function launchProjectile(startX, startY, endX, endY) {
        isLaunched = true;
        projectile.style.display = 'block';
        projectile.style.left = startX + 'px';
        projectile.style.bottom = startY + 'px';

let distanceX = endX - startX;
        let distanceY = endY - startY;

let time = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)) / 5;
        let angle = Math.atan(distanceY / distanceX);

let verticalVelocity = (10 * time / 2) / time;
        let horizontalVelocity = (distanceX / time);

let initialTop = parseInt(projectile.style.bottom);
        let initialLeft = parseInt(projectile.style.left);

let interval = setInterval(() => {
            let currentTime = parseFloat(projectile.style.left) - initialLeft;
            let currentTop = initialTop + (verticalVelocity * currentTime - (0.5 * 10 * Math.pow(currentTime, 2))) * 5;
            let currentLeft = initialLeft + horizontalVelocity * currentTime;

projectile.style.bottom = currentTop + 'px';
            projectile.style.left = currentLeft + 'px';

if (currentTop <= 0 || currentLeft >= window.innerWidth) {
                clearInterval(interval);
                isLaunched = false;
                projectile.style.display = 'none';

checkCollision(currentLeft, currentTop);
            }
        }, 10);
    }