RPG game where you find your friend in a crowd of people, you can walk around and talk to other people who tells you a hint of where your friend is.'s game

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

No:50615

←

Prev Next

→

RPG game where you find your friend in a crowd of ..ALL
Developer User21371｜Date and time 24/3/9 9:24:55
Build time 12.798 sec｜Game capacity 3.829KB｜

Script

This code creates a simple RPG game where the player has to find their friend in a crowd of people. The player can walk around using the arrow keys on their smartphone and talk to other people who give hints about the friend's whereabouts. The player wins the game when they find their friend.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Your Friend Game</title>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: Arial, sans-serif;
    }

canvas {
        border: 2px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        width: 20,
        height: 20,
        color: 'blue',
        speed: 5
    };

const friend = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: 10,
        color: 'green'
    };

const people = [
        { x: 50, y: 100, hint: 'I saw your friend near the fountain.' },
        { x: 200, y: 300, hint: 'Your friend is wearing a red hat.' },
        { x: 400, y: 150, hint: 'I think your friend is near the food stalls.' },
        { x: 300, y: 400, hint: 'I heard your friend talking near the stage.' }
    ];

function drawPlayer() {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawFriend() {
        ctx.fillStyle = friend.color;
        ctx.beginPath();
        ctx.arc(friend.x, friend.y, friend.radius, 0, Math.PI * 2);
        ctx.fill();
    }

function drawPeople() {
        people.forEach(person => {
            ctx.fillStyle = 'black';
            ctx.fillRect(person.x, person.y, 10, 10);
        });
    }

function update() {
        canvas.width = canvas.width;

drawPlayer();
        drawFriend();
        drawPeople();
    }

function movePlayer(direction) {
        switch (direction) {
            case 'up':
                player.y -= player.speed;
                break;
            case 'down':
                player.y += player.speed;
                break;
            case 'left':
                player.x -= player.speed;
                break;
            case 'right':
                player.x += player.speed;
                break;
        }
    }

function checkCollision() {
        if (player.x < friend.x + friend.radius &&
            player.x + player.width > friend.x &&
            player.y < friend.y + friend.radius &&
            player.y + player.height > friend.y) {
            alert('You found your friend! Great job!');
        }
    }

function checkHint() {
        people.forEach(person => {
            if (player.x < person.x + 10 &&
                player.x + player.width > person.x &&
                player.y < person.y + 10 &&
                player.y + player.height > person.y) {
                alert(person.hint);
            }
        });
    }

document.addEventListener('keydown', event => {
        switch (event.key) {
            case 'ArrowUp':
                movePlayer('up');
                break;
            case 'ArrowDown':
                movePlayer('down');
                break;
            case 'ArrowLeft':
                movePlayer('left');
                break;
            case 'ArrowRight':
                movePlayer('right');
                break;
        }
        checkCollision();
        checkHint();
        update();
    });
</script>
</body>
</html>
```
This code creates a simple RPG game where the player has to find their friend in a crowd of people. The player can walk around using the arrow keys on their smartphone and talk to other people who give hints about the friend's whereabouts. The player wins the game when they find their friend.