{"id":1379,"date":"2026-09-11T07:00:00","date_gmt":"2026-09-11T05:00:00","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=1379"},"modified":"2026-08-13T16:01:32","modified_gmt":"2026-08-13T14:01:32","slug":"game-boy-man","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/09\/11\/game-boy-man\/","title":{"rendered":"Game #boy #man"},"content":{"rendered":"\n<!--\n  gameboy4men \u2013 jouet HTML personnalis\u00e9\n  \u2192 Coller TOUT ce code dans un bloc \u00ab HTML personnalis\u00e9 \u00bb (Gutenberg)\n  iconoclaste.net \u2013 2026-08-13\n\n  Comportement :\n  - Game Boy 100 % largeur article, responsive, sans bordure\n  - Pr\u00e9chargement barre rose #ff33ff\n  - Bip d\u2019allumage + menu vert imm\u00e9diat (A \/ B)\n  - A \u2192 GIF Super Mario Land (reste affich\u00e9)\n  - B \u2192 glitch SYSTEM ERROR (reste affich\u00e9)\n  - Zone START de la console \u2192 retour au d\u00e9but\n-->\n<div id=\"iconoclaste-gameboy4men\">\n  <div class=\"gb-wrap\">\n    <img fetchpriority=\"high\" decoding=\"async\" class=\"gb-body\" id=\"gb-body\"\n         src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/gameboy.webp\"\n         alt=\"Game Boy\" width=\"700\" height=\"1100\" draggable=\"false\" loading=\"eager\">\n\n    <!-- Zone START (retour au d\u00e9but) -->\n    <div class=\"gb-start\" id=\"gb-start\" title=\"START\"><\/div>\n\n    <div class=\"gb-screen\" id=\"gb-screen\">\n      <div class=\"gb-menu\" id=\"gb-menu\">\n        <div class=\"gb-choice\" data-c=\"A\">A. Game for boy?<\/div>\n        <div class=\"gb-choice\" data-c=\"B\">B. Game for man?<\/div>\n      <\/div>\n\n      <div class=\"gb-game\" id=\"gb-game\">\n        <img decoding=\"async\" id=\"gb-mario\"\n             src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/supermarionland_boucle.gif\"\n             alt=\"Super Mario Land\" draggable=\"false\">\n      <\/div>\n\n      <div class=\"gb-noise\" id=\"gb-noise\"><\/div>\n      <div class=\"gb-glitch\" id=\"gb-glitch\">\n        <div class=\"gb-err\">SYSTEM ERROR<\/div>\n        <div class=\"gb-code\">0xDEAD<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Pr\u00e9chargement -->\n    <div class=\"gb-preload\" id=\"gb-preload\">\n      <div class=\"gb-preload-box\">\n        <span>chargement<\/span>\n        <div class=\"gb-bar\"><div class=\"gb-fill\" id=\"gb-fill\"><\/div><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  #iconoclaste-gameboy4men {\n    --s-l: 27.7142857%;\n    --s-w: 45.57142857%;\n    --s-t: 13.454545%;\n    --s-h: 27%;\n    --st-l: 37%;\n    --st-w: 26%;\n    --st-t: 77.5%;\n    --st-h: 7.5%;\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto 1.5em;\n    line-height: 0;\n    user-select: none;\n    -webkit-user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  #iconoclaste-gameboy4men * { box-sizing: border-box; }\n\n  #iconoclaste-gameboy4men .gb-wrap {\n    position: relative;\n    width: 100%;\n  }\n\n  #iconoclaste-gameboy4men .gb-body {\n    display: block;\n    width: 100%;\n    height: auto;\n    margin: 0;\n    padding: 0;\n    border: none !important;\n    outline: none !important;\n    box-shadow: none !important;\n    vertical-align: top;\n    pointer-events: none;\n    background: transparent;\n  }\n\n  \/* \u00c9cran LCD *\/\n  #iconoclaste-gameboy4men .gb-screen {\n    position: absolute;\n    left: var(--s-l);\n    top: var(--s-t);\n    width: var(--s-w);\n    height: var(--s-h);\n    overflow: hidden;\n    background: #1a1a1a;\n    border-radius: 2px;\n    z-index: 2;\n  }\n\n  #iconoclaste-gameboy4men .gb-screen.menu {\n    background: #9bbc0f;\n  }\n\n  \/* Menu A\/B *\/\n  #iconoclaste-gameboy4men .gb-menu {\n    display: none;\n    position: absolute;\n    inset: 0;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1.35em;\n    padding: 6% 5%;\n    text-align: center;\n    z-index: 2;\n  }\n  #iconoclaste-gameboy4men .gb-menu.on {\n    display: flex;\n  }\n\n  #iconoclaste-gameboy4men .gb-choice {\n    font-family: \"Courier New\", Courier, monospace;\n    font-size: clamp(8px, 2.9vw, 14px);\n    font-weight: 700;\n    color: #0f380f;\n    line-height: 1.5;\n    letter-spacing: 0.02em;\n    cursor: pointer;\n    padding: 0.3em 0.4em;\n    transition: color 0.12s, transform 0.1s;\n  }\n  #iconoclaste-gameboy4men .gb-choice:hover {\n    color: #306230;\n    transform: scale(1.06);\n  }\n  #iconoclaste-gameboy4men .gb-choice:active {\n    transform: scale(0.97);\n  }\n\n  \/* Jeu Mario *\/\n  #iconoclaste-gameboy4men .gb-game {\n    display: none;\n    position: absolute;\n    inset: 0;\n    background: #000;\n    z-index: 3;\n  }\n  #iconoclaste-gameboy4men .gb-game.on { display: block; }\n  #iconoclaste-gameboy4men .gb-game img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    object-position: center;\n    image-rendering: pixelated;\n    display: block;\n    border: none !important;\n  }\n\n  \/* Glitch *\/\n  #iconoclaste-gameboy4men .gb-screen.crash {\n    background: #000 !important;\n    animation: gb-shake 0.08s infinite linear;\n  }\n  #iconoclaste-gameboy4men .gb-glitch {\n    display: none;\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    pointer-events: none;\n    font-family: \"Courier New\", Courier, monospace;\n    font-size: clamp(9px, 3.2vw, 16px);\n    font-weight: 700;\n    color: #9bbc0f;\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    gap: 0.8em;\n    background: #000;\n  }\n  #iconoclaste-gameboy4men .gb-glitch.on { display: flex; }\n  #iconoclaste-gameboy4men .gb-err {\n    color: #0f380f;\n    text-shadow: 2px 0 #f00, -2px 0 #0ff;\n    animation: gb-glitch 0.12s infinite steps(2);\n  }\n  #iconoclaste-gameboy4men .gb-code {\n    font-size: 0.7em;\n    opacity: 0.85;\n  }\n\n  @keyframes gb-shake {\n    0%   { transform: translate(0,0); }\n    25%  { transform: translate(-2px,1px); }\n    50%  { transform: translate(2px,-1px); }\n    75%  { transform: translate(-1px,-2px); }\n    100% { transform: translate(1px,1px); }\n  }\n  @keyframes gb-glitch {\n    0%   { transform: translate(0,0); text-shadow: 2px 0 #f00, -2px 0 #0ff; }\n    25%  { transform: translate(-3px,1px); text-shadow: -2px 0 #f00, 2px 0 #0ff; }\n    50%  { transform: translate(3px,-1px); text-shadow: 2px 0 #0ff, -2px 0 #f00; }\n    100% { transform: translate(0,0); }\n  }\n\n  #iconoclaste-gameboy4men .gb-noise {\n    display: none;\n    position: absolute;\n    inset: -10%;\n    z-index: 9;\n    pointer-events: none;\n    opacity: 0.35;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n    animation: gb-noise 0.15s steps(3) infinite;\n  }\n  #iconoclaste-gameboy4men .gb-noise.on { display: block; }\n  @keyframes gb-noise {\n    0%   { transform: translate(0,0); }\n    100% { transform: translate(-5%,5%); }\n  }\n\n  \/* Zone START *\/\n  #iconoclaste-gameboy4men .gb-start {\n    position: absolute;\n    left: var(--st-l);\n    top: var(--st-t);\n    width: var(--st-w);\n    height: var(--st-h);\n    z-index: 20;\n    cursor: pointer;\n    border-radius: 4px;\n  }\n  #iconoclaste-gameboy4men .gb-start:hover {\n    background: rgba(255,51,255,0.12);\n  }\n  #iconoclaste-gameboy4men .gb-start:active {\n    background: rgba(255,51,255,0.22);\n  }\n\n  \/* Pr\u00e9chargement *\/\n  #iconoclaste-gameboy4men .gb-preload {\n    position: absolute;\n    left: 0; right: 0;\n    bottom: 4%;\n    display: flex;\n    justify-content: center;\n    pointer-events: none;\n    z-index: 30;\n  }\n  #iconoclaste-gameboy4men .gb-preload-box {\n    background: rgba(0,0,0,0.75);\n    color: #fff;\n    padding: 7px 16px 9px;\n    border-radius: 4px;\n    font-family: \"Courier New\", Courier, monospace;\n    font-size: 12px;\n    text-align: center;\n    white-space: nowrap;\n    line-height: 1.3;\n  }\n  #iconoclaste-gameboy4men .gb-bar {\n    width: 150px;\n    height: 4px;\n    background: #333;\n    margin: 6px auto 0;\n    border-radius: 2px;\n    overflow: hidden;\n  }\n  #iconoclaste-gameboy4men .gb-fill {\n    height: 100%;\n    width: 0%;\n    background: #ff33ff;\n    transition: width 0.15s linear;\n  }\n  #iconoclaste-gameboy4men.ready .gb-preload { display: none; }\n\n  @media (max-width: 420px) {\n    #iconoclaste-gameboy4men .gb-choice { font-size: clamp(7px, 2.7vw, 11px); }\n  }\n<\/style>\n\n<script>\n(function () {\n  const root   = document.getElementById('iconoclaste-gameboy4men');\n  if (!root) return;\n\n  const screen = document.getElementById('gb-screen');\n  const menu   = document.getElementById('gb-menu');\n  const game   = document.getElementById('gb-game');\n  const glitch = document.getElementById('gb-glitch');\n  const noise  = document.getElementById('gb-noise');\n  const startZ = document.getElementById('gb-start');\n  const fill   = document.getElementById('gb-fill');\n  const body   = document.getElementById('gb-body');\n  const mario  = document.getElementById('gb-mario');\n  const choices = menu.querySelectorAll('.gb-choice');\n\n  let locked = false, ready = false, audioCtx = null;\n\n  function beep() {\n    try {\n      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n      if (audioCtx.state === 'suspended') audioCtx.resume();\n      const t = audioCtx.currentTime;\n      const o1 = audioCtx.createOscillator(), g1 = audioCtx.createGain();\n      o1.type = 'square'; o1.frequency.setValueAtTime(523.25, t);\n      g1.gain.setValueAtTime(0.0001, t);\n      g1.gain.exponentialRampToValueAtTime(0.22, t + 0.02);\n      g1.gain.exponentialRampToValueAtTime(0.0001, t + 0.18);\n      o1.connect(g1); g1.connect(audioCtx.destination);\n      o1.start(t); o1.stop(t + 0.2);\n      const o2 = audioCtx.createOscillator(), g2 = audioCtx.createGain();\n      o2.type = 'square'; o2.frequency.setValueAtTime(784, t + 0.14);\n      g2.gain.setValueAtTime(0.0001, t + 0.14);\n      g2.gain.exponentialRampToValueAtTime(0.28, t + 0.16);\n      g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.42);\n      o2.connect(g2); g2.connect(audioCtx.destination);\n      o2.start(t + 0.14); o2.stop(t + 0.45);\n    } catch (e) {}\n  }\n\n  function crashSound() {\n    try {\n      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n      if (audioCtx.state === 'suspended') audioCtx.resume();\n      const t = audioCtx.currentTime;\n      const o = audioCtx.createOscillator(), g = audioCtx.createGain();\n      o.type = 'sawtooth';\n      o.frequency.setValueAtTime(180, t);\n      o.frequency.exponentialRampToValueAtTime(40, t + 0.6);\n      g.gain.setValueAtTime(0.0001, t);\n      g.gain.exponentialRampToValueAtTime(0.25, t + 0.03);\n      g.gain.exponentialRampToValueAtTime(0.0001, t + 0.7);\n      o.connect(g); g.connect(audioCtx.destination);\n      o.start(t); o.stop(t + 0.75);\n    } catch (e) {}\n  }\n\n  function hideAll() {\n    menu.classList.remove('on');\n    game.classList.remove('on');\n    glitch.classList.remove('on');\n    noise.classList.remove('on');\n    screen.classList.remove('menu', 'crash');\n    screen.style.background = '';\n  }\n\n  function goMenu() {\n    if (locked) return;\n    locked = true;\n    hideAll();\n    beep();\n    screen.classList.add('menu');\n    menu.classList.add('on');\n    locked = false;\n  }\n\n  function chooseA() {\n    if (locked) return;\n    locked = true;\n    menu.classList.remove('on');\n    screen.classList.remove('menu');\n    screen.style.background = '#000';\n    game.classList.add('on');\n    locked = false;\n  }\n\n  function chooseB() {\n    if (locked) return;\n    locked = true;\n    menu.classList.remove('on');\n    screen.classList.remove('menu');\n    screen.classList.add('crash');\n    noise.classList.add('on');\n    glitch.classList.add('on');\n    crashSound();\n    locked = false;\n  }\n\n  choices.forEach(el => {\n    el.addEventListener('click', e => {\n      e.stopPropagation();\n      if (el.getAttribute('data-c') === 'A') chooseA();\n      else chooseB();\n    });\n  });\n\n  startZ.addEventListener('click', e => {\n    e.stopPropagation();\n    if (!ready) return;\n    goMenu();\n  });\n\n  \/* Pr\u00e9chargement *\/\n  let loaded = 0;\n  const total = 2;\n  function tick() {\n    loaded++;\n    fill.style.width = Math.round(loaded \/ total * 100) + '%';\n    if (loaded >= total) {\n      setTimeout(() => {\n        root.classList.add('ready');\n        ready = true;\n        goMenu();\n      }, 250);\n    }\n  }\n  [body.src, mario.src].forEach(src => {\n    const i = new Image();\n    i.onload = i.onerror = tick;\n    i.src = src;\n  });\n  if (body.complete) tick();\n  if (mario.complete) tick();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>A. Game for boy? B. Game for man? SYSTEM ERROR 0xDEAD chargement<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[269],"tags":[81,310,280,309],"class_list":["post-1379","post","type-post","status-publish","format-standard","hentry","category-experiences","tag-fuzzout","tag-gameboy","tag-inutile","tag-nintendo"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/comments?post=1379"}],"version-history":[{"count":4,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1379\/revisions"}],"predecessor-version":[{"id":1385,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1379\/revisions\/1385"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=1379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=1379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=1379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}