class Main {
	public static void main(String[] args) {
        //JSRUN引擎2.0，支持多达30种语言在线运行，全仿真在线交互输入输出。
		System.out.println("Hello world!   - java.jsrun.net ");
	}
}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
            background-image: url('https://img.alicdn.com/tfs/TB1xWVqNXXXXXcSXXXXXXXXXXXX-1920-1080.jpg'); /* Example background image */
            background-size: cover;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div style="text-align: center; margin-top: 10px;">
        <label for="resourceType">Select Resource Type:</label>
        <select id="resourceType">
            <option value="Herb">Herb</option>
            <option value="Mineral">Mineral</option>
            <option value="Fish">Fish</option>
            <option value="Cangyu">Cangyu</option>
        </select>
        <button onclick="startCollecting()">Start Collecting</button>
    </div>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Player properties
        let player = {
            x: 100,
            y: 100,
            speed: 5,
            collecting: false,
            collectedItems: 0,
            targetResource: null
        };

        // Item properties
        let item = {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: 15,
            type: getRandomResourceType()
        };

        function drawPlayer() {
            ctx.fillStyle = '#FFD700'; // Gold color for the player
            ctx.beginPath();
            ctx.arc(player.x, player.y, 15, 0, Math.PI * 2);
            ctx.fill();
        }

        function drawItem() {
            ctx.fillStyle = getResourceColor(item.type); // Color based on resource type
            ctx.beginPath();
            ctx.arc(item.x, item.y, item.radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = 'black';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(item.type, item.x, item.y + item.radius + 15);
        }

        function updateGame() {
            if (player.collecting) {
                collectItem();
            }
            movePlayer();
            checkCollision();
            render();
        }

        function movePlayer() {
            // Simple movement logic for demonstration purposes
            player.x += player.speed;
            if (player.x > canvas.width) {
                player.x = 0;
            }
        }

        function collectItem() {
            if (Math.abs(player.x - item.x) < 30 && Math.abs(player.y - item.y) < 30) {
                if (item.type === player.targetResource || player.targetResource === "Cangyu") {
                    player.collectedItems++;
                    if (player.targetResource !== "Cangyu") {
                        respawnItem();
                    }
                } else {
                    respawnItem();
                }
            }
        }

        function respawnItem() {
            item.x = Math.random() * canvas.width;
            item.y = Math.random() * canvas.height;
            item.type = getRandomResourceType();
        }

        function checkCollision() {
            if (Math.sqrt((player.x - item.x) ** 2 + (player.y - item.y) ** 2) <= 30 + item.radius) {
                player.collecting = true;
            } else {
                player.collecting = false;
            }
        }

        function render() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawItem();
            ctx.fillStyle = 'white';
            ctx.font = '16px Arial';
            ctx.fillText(`Collected Items: ${player.collectedItems}`, 10, 20);
        }

        function startCollecting() {
            const selectElement = document.getElementById('resourceType');
            player.targetResource = selectElement.value;
            player.collecting = true;
        }

        function getRandomResourceType() {
            return ['Herb', 'Mineral', 'Fish', 'Cangyu'][Math.floor(Math.random() * 4)];
        }

        function getResourceColor(type) {
            switch (type) {
                case 'Herb':
                    return '#228B22'; // Forest green for herbs
                case 'Mineral':
                    return '#8B4513'; // Saddle brown for minerals
                case 'Fish':
                    return '#ADD8E6'; // Light blue for fish
                case 'Cangyu':
                    return '#A9A9A9'; // Dark gray for Cangyu
                default:
                    return 'gray';
            }
        }

        setInterval(updateGame, 100);

        // Start the game loop
        updateGame();
    </script>
</body>
</html>