AI game creator

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

No:2872

2609

←

Prev Next

→

3D Dungeon RPG
Developer もちきなこ｜Date and time 23/6/23 0:36:52
Build time 76.109 sec｜Game capacity 8.605KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3DダンジョンRPG</title>
<style>
    canvas {
        width: 100%;
        height: 90vh;
        display: block;
    }
    button {
        display: block;
        margin: 10px auto;
        font-size: 24px;
        padding: 10px;
        border-radius: 10px;
        background-color: #ff6600;
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
    }
    #score {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 32px;
        color: #fff;
        text-shadow: 2px 2px #000;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<button id="startBtn">スタート</button>
<div id="score"></div>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const startBtn = document.getElementById('startBtn');
    const scoreEl = document.getElementById('score');
    const emoji = ["🗡️", "🏹", "🛡️", "🧪", "💊", "👹", "👻", "🐉", "🎁"];

// プレイヤーの情報
    const player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        speed: 5,
        weapon: emoji[0],
        attack: 10,
        shield: emoji[2],
        defense: 5,
        hp: 100,
        maxHp: 100,
        level: 1,
        xp: 0,
        neededXp: 10
    };

// モンスターの情報
    const monsters = [
        {
            name: "スライム",
            emoji: emoji[5],
            attack: 5,
            defense: 1,
            hp: 10,
            xp: 5
        },
        {
            name: "ゴブリン",
            emoji: emoji[6],
            attack: 10,
            defense: 3,
            hp: 20,
            xp: 10
        },
        {
            name: "ドラゴン",
            emoji: emoji[7],
            attack: 20,
            defense: 5,
            hp: 50,
            xp: 20
        }
    ];

// アイテムの情報
    const items = [
        {
            name: "薬草",
            emoji: emoji[4],
            effect: {
                hp: 20
            }
        },
        {
            name: "宝箱",
            emoji: emoji[8],
            effect: {
                xp: 10
            }
        }
    ];

// 初期化
    let isPlaying = false;
    let score = 0;
    let xp = 0;
    let mapSize = 1000;
    let tileSize = 50;
    let tiles = [];
    let monstersInMap = [];

// ゲームスタート時の処理
    startBtn.addEventListener('click', () => {
        isPlaying = true;
        startBtn.style.display = 'none';
        createMap();
        spawnPlayer();
        spawnMonsters();
        draw();
    });

// マップ作成
    function createMap() {
        const tileCount = mapSize / tileSize;
        for (let y = 0; y < tileCount; y++) {
            for (let x = 0; x < tileCount; x++) {
                tiles.push({
                    x: x * tileSize,
                    y: y * tileSize,
                    type: Math.random() < 0.8 ? 'floor' : 'wall'
                });
            }
        }
    }

// プレイヤー出現
    function spawnPlayer() {
        player.x = Math.floor(Math.random() * (mapSize - tileSize)) + tileSize / 2;
        player.y = Math.floor(Math.random() * (mapSize - tileSize)) + tileSize / 2;
    }

// モンスター出現
    function spawnMonsters() {
        monstersInMap = [];
        for (let i = 0; i < player.level * 5; i++) {
            const monster = monsters[Math.floor(Math.random() * monsters.length)];
            const x = Math.floor(Math.random() * (mapSize - tileSize)) + tileSize / 2;
            const y = Math.floor(Math.random() * (mapSize - tileSize)) + tileSize / 2;
            monstersInMap.push({
                x: x,
                y: y,
                name: monster.name,
                emoji: monster.emoji,
                attack: monster.attack,
                defense: monster.defense,
                hp: monster.hp,
                maxHp: monster.hp,
                xp: monster.xp
            });
        }
    }

// 描画処理
    function draw() {
        // 背景
        ctx.fillStyle = '#ccc';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// タイル
        tiles.forEach(tile => {
            ctx.fillStyle = tile.type === 'floor' ? '#c2b280' : '#333';
            ctx.fillRect(tile.x, tile.y, tileSize, tileSize);
        });

// プレイヤー
        ctx.fillStyle = '#f00';
        ctx.font = '40px sans-serif';
        ctx.fillText(emoji[0], player.x - 20, player.y + 15);

// モンスター
        monstersInMap.forEach(monster => {
            ctx.fillStyle = '#080';
            ctx.font = '30px sans-serif';
            ctx.fillText(monster.emoji, monster.x - 20, monster.y + 15);
        });

// スコア表示
        scoreEl.textContent = `スコア: ${score}`;

// ゲームオーバー
        if (player.hp <= 0) {
            isPlaying = false;
            startBtn.style.display = 'block';
            startBtn.textContent = 'もう一度遊ぶ';
            score = 0;
            xp = 0;
            player.weapon = emoji[0];
            player.attack = 10;
            player.shield = emoji[2];
            player.defense = 5;
            player.hp = 100;
            player.maxHp = 100;
            player.level = 1;
            player.xp = 0;
            player.neededXp = 10;
            monstersInMap = [];
        }

// ゲームクリア
        if (player.xp >= player.neededXp) {
            player.level++;
            player.xp -= player.neededXp;
            player.neededXp += 10;
            player.maxHp += 10;
            player.hp = player.maxHp;
            player.attack += 5;
            player.defense += 2;
            score += 100;
            spawnMonsters();
        }

if (isPlaying) {
            // プレイヤー操作
            window.addEventListener('keydown', e => {
                switch (e.key) {
                    case 'ArrowUp':
                        player.y -= player.speed;
                        break;
                    case 'ArrowDown':
                        player.y += player.speed;
                        break;
                    case 'ArrowLeft':
                        player.x -= player.speed;
                        break;
                    case 'ArrowRight':
                        player.x += player.speed;
                        break;
                }
                // プレイヤーがマップの外に出た場合
                if (player.x < 0) player.x = 0;
                if (player.y < 0) player.y = 0;
                if (player.x > mapSize) player.x = mapSize;
                if (player.y > mapSize) player.y = mapSize;

// プレイヤーがモンスターに接触した場合
                monstersInMap.forEach(monster => {
                    if (Math.abs(player.x - monster.x) < tileSize && Math.abs(player.y - monster.y) < tileSize) {
                        attack(monster);
                    }
                });

// アイテムがある場合、アイテムと接触した場合
                items.forEach(item => {
                    const dist = Math.sqrt(Math.pow(player.x - item.x, 2) + Math.pow(player.y - item.y, 2));
                    if (dist < tileSize) {
                        getItem(item);
                    }
                });
            });
        }

requestAnimationFrame(draw);
    }

// 攻撃する
    function attack(monster) {
        // プレイヤーがモンスターを一撃で倒す
        if (player.attack >= monster.hp) {
            player.xp += monster.xp;
            score += monster.xp * 10;
            monstersInMap.splice(monstersInMap.indexOf(monster), 1);
        } else {
            const damage = player.attack - monster.defense > 0 ? player.attack - monster.defense : 0;
            monster.hp -= damage;
            if (monster.hp <= 0) {
                player.xp += monster.xp;
                score += monster.xp * 10;
                monstersInMap.splice(monstersInMap.indexOf(monster), 1);
            }
        }
    }

// アイテムを取得する
    function getItem(item) {
        player.hp += item.effect.hp ? item.effect.hp : 0;
        player.xp += item.effect.xp ? item.effect.xp : 0;
        if (player.hp > player.maxHp) player.hp = player.maxHp;
        items.splice(items.indexOf(item), 1);
    }
</script>
</body>
</html>