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

No:27956

←

Prev Next

→

Minecraft
Developer User13950｜Date and time 23/12/10 7:28:18
Build time 19.723 sec｜Game capacity 2.876KB｜

Script

Minecraft Game

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Minecraft Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #canvas {
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 20px auto;
            background-color: #3b3b3b;
        }
        
        .button {
            padding: 10px;
            margin: 10px;
            border: 2px solid #3b3b3b;
            border-radius: 4px;
            background-color: #e0e0e0;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .button:hover {
            background-color: #c0c0c0;
        }
    </style>
</head>
<body>
    <h1>Minecraft Game</h1>
    <canvas id="canvas"></canvas>
    <button class="button" id="up">↑</button>
    <button class="button" id="left">←</button>
    <button class="button" id="right">→</button>
    <button class="button" id="down">↓</button>
    
    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        
        const player = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            size: 20,
            color: '#33adff'
        };
        
        function drawPlayer() {
            context.fillStyle = player.color;
            context.fillRect(player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);
        }
        
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
        
        function update() {
            clearCanvas();
            drawPlayer();
        }
        
        function movePlayer(direction) {
            const stepSize = 10;
            switch (direction) {
                case 'up':
                    player.y -= stepSize;
                    break;
                case 'left':
                    player.x -= stepSize;
                    break;
                case 'right':
                    player.x += stepSize;
                    break;
                case 'down':
                    player.y += stepSize;
                    break;
            }
            update();
        }
        
        document.getElementById('up').addEventListener('click', function() {
            movePlayer('up');
        });
        
        document.getElementById('left').addEventListener('click', function() {
            movePlayer('left');
        });
        
        document.getElementById('right').addEventListener('click', function() {
            movePlayer('right');
        });
        
        document.getElementById('down').addEventListener('click', function() {
            movePlayer('down');
        });
        
        update();
    </script>
</body>
</html>