Portage HTML5 du jeu Yume Nikki avec commandes tactiles

408 Dylan.graves31

Ouvrir dans l'éditeur Publiez votre code

Portage HTML5 du jeu Yume Nikki avec commandes tactiles

Recommandé

11 February 2026

Jeux débloqués : Jouez gratuitement à des jeux en ligne à l’école

15 May 2025

DJ d'introduction

2 October 2025

Structure HTML du conteneur d'animation CSS

HTML

<!doctype html>
<html lang="en">

<head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@main/yume-nikki/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yume Nikki</title>
    <style>
        :root {
            --color-gray: hsl(0, 0%, 55%);
            --controls-size: 10vh;
        }

@media (orientation: landscape) {
            :root {
                --controls-size: 20vh;
            }
        }

html {
            touch-action: none;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            margin: 0;
            color: white;
            background: black;
        }

.unselectable {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

#status {
            font-size: 1.5rem;
            color: var(--color-gray);
            text-align: center;
        }

#controls {
            position: relative;
            text-align: right;
            z-index: 10;
        }

#controls button {
            -webkit-appearance: button;
            display: inline-flex;
            background: transparent;
            border: 0;
            color: white;
            font-family: inherit;
            font-size: 1em;
            line-height: inherit;
            cursor: pointer;
            padding: 0.5rem;
        }

#controls svg {
            pointer-events: none;
        }

#canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border: 0;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            transform: translate(-50%, -50%);
        }

img#canvas {
            object-fit: contain;
        }

#dpad,
        #apad {
            position: fixed;
            bottom: 1rem;
        }

#dpad {
            left: 1rem;
        }

#apad {
            right: 1rem;
        }

#dpad svg {
            width: calc(2 * var(--controls-size));
            height: calc(2 * var(--controls-size));
            fill: var(--color-gray);
        }

#dpad svg rect {
            opacity: 0.4;
        }

#apad>* {
            width: var(--controls-size);
            height: var(--controls-size);
            background-color: var(--color-gray);
            border-radius: 50%;
        }

#apad> :last-child {
            position: relative;
            right: var(--controls-size);
        }

#dpad path:not(.active),
        #apad>*:not(.active) {
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <div id="controls">
        <button id="controls-fullscreen" class="unselectable">
            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
                <path d="M13.5 13.5H10m3.5 0V10m0 3.5l-4-4m.5-8h3.5m0 0V5m0-3.5l-4 4M5 1.5H1.5m0 0V5m0-3.5l4 4m-4 4.5v3.5m0 0H5m-3.5 0l4-4" stroke="currentColor"></path>
            </svg>
        </button>
    </div>
    <div id="status"></div>
    <div id="viewport">
        <canvas id="canvas" tabindex="-1" class="unselectable"></canvas>
        <div id="dpad" class="unselectable">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
                <path id="dpad-up" data-key="ArrowUp" d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" />
                <path id="dpad-right" data-key="ArrowRight" d="M66.2,24H48v24h18.2c3.3,0,5.8-2.7,5.8-6V29.9C72,26.5,69.5,24,66.2,24z" />
                <path id="dpad-down" data-key="ArrowDown" d="M24,66.3c0,3.3,2.6,5.7,5.9,5.7H42c3.3,0,6-2.4,6-5.7V48H24V66.3z" />
                <path id="dpad-left" data-key="ArrowLeft" d="M5.7,24C2.4,24,0,26.5,0,29.9V42c0,3.3,2.3,6,5.7,6H24V24H5.7z" />
                <rect id="dpad-center" x="24" y="24" width="24" height="24" />
            </svg>
        </div>
        <div id="apad" class="unselectable">
            <div id="apad-escape" data-key="Escape"></div>
            <div id="apad-enter" data-key="Enter"></div>
        </div>
    </div>
    <script async type="text/javascript" src="index.js"></script>
    <script>
        const hasTouchscreen = window.matchMedia('(hover: none), (pointer: coarse)').matches;
        const preventNativeKeys = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', ' ', 'F12'];
        const keys = new Map();
        const keysDown = new Map();
        const canvas = document.getElementById('canvas');
        let easyrpgPlayer;
        let lastTouchedId;
        // Launch the Player and configure it
        window.addEventListener('load', (event) => {
            createEasyRpgPlayer({
                game: undefined,
                saveFs: undefined
            }).then(function (Module) {
                // Module is ready
                easyrpgPlayer = Module;
                easyrpgPlayer.initApi();
                canvas.focus();
                // Custom code here
            });
        });
        // Make EasyRPG player embeddable
        canvas.addEventListener('mouseenter', () => canvas.focus());
        canvas.addEventListener('click', () => canvas.focus());
        // Handle clicking on the fullscreen button
        document.querySelector('#controls-fullscreen').addEventListener('click', () => {
            const viewport = document.getElementById('viewport');
            if (viewport.requestFullscreen) {
                viewport.requestFullscreen();
            }
        });
        /**
         * Simulate a keyboard event on the emscripten canvas
         *
         * @param {string} eventType Type of the keyboard event
         * @param {string} key Key to simulate
         */
        function simulateKeyboardEvent(eventType, key) {
            const event = new Event(eventType, {
                bubbles: true
            });
            event.code = key;
            canvas.dispatchEvent(event);
        }
        /**
         * Simulate a keyboard input from `keydown` to `keyup`
         *
         * @param {string} key Key to simulate
         */
        function simulateKeyboardInput(key) {
            simulateKeyboardEvent('keydown', key);
            window.setTimeout(() => {
                simulateKeyboardEvent('keyup', key);
            }, 100);
        }
        /**
         * Bind a node by a specific key to simulate on touch
         *
         * @param {*} node The node to bind a key to
         * @param {string} key Key to simulate
         */
        function bindKey(node, key) {
            keys.set(node.id, key);
            node.addEventListener('touchstart', event => {
                event.preventDefault();
                simulateKeyboardEvent('keydown', key);
                keysDown.set(event.target.id, node.id);
                node.classList.add('active');
            });
            node.addEventListener('touchend', event => {
                event.preventDefault();
                const pressedKey = keysDown.get(event.target.id);
                if (pressedKey && keys.has(pressedKey)) {
                    const key = keys.get(pressedKey);
                    simulateKeyboardEvent('keyup', key);
                }
                keysDown.delete(event.target.id);
                node.classList.remove('active');
                if (lastTouchedId) {
                    document.getElementById(lastTouchedId).classList.remove('active');
                }
            });
            // Inspired by https://github.com/pulsejet/mkxp-web/blob/262a2254b684567311c9f0e135ee29f6e8c3613e/extra/js/dpad.js
            node.addEventListener('touchmove', event => {
                const {
                    target,
                    clientX,
                    clientY
                } = event.changedTouches[0];
                const origTargetId = keysDown.get(target.id);
                const nextTargetId = document.elementFromPoint(clientX, clientY).id;
                if (origTargetId === nextTargetId) return;
                if (origTargetId) {
                    const key = keys.get(origTargetId);
                    simulateKeyboardEvent('keyup', key);
                    keysDown.delete(target.id);
                    document.getElementById(origTargetId).classList.remove('active');
                }
                if (keys.has(nextTargetId)) {
                    const key = keys.get(nextTargetId);
                    simulateKeyboardEvent('keydown', key);
                    keysDown.set(target.id, nextTargetId);
                    lastTouchedId = nextTargetId;
                    document.getElementById(nextTargetId).classList.add('active');
                }
            })
        }
        /** @type {{[key: number]: Gamepad}} */
        let gamepads = {};
        const haveEvents = 'ongamepadconnected' in window;

function addGamepad(gamepad) {
            if (gamepad == undefined) {
                return;
            }
            gamepads[gamepad.index] = gamepad;
            updateTouchControlsVisibility();
        }

</html>

CSS