Portage HTML5 du jeu Yume Nikki avec commandes tactiles

31 Dylan.graves31

Ouvrir dans l'éditeur Video Publiez votre code

Portage HTML5 du jeu Yume Nikki avec commandes tactiles

Recommandé

13 August 2023

Formulaire de connexion avec connexion sociale

11 August 2025

Animation CSS : chargement d'un blob avec Pulse

27 January 2026

Jeu HTML Elastic Face : L'art interactif de David Li

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>

Recommandé

Formulaire de connexion avec connexion sociale

Animation CSS : chargement d'un blob avec Pulse

Jeu HTML Elastic Face : L'art interactif de David Li

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS