Super Mario Bros.

811 argghh

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 March 2026

Jeu Mario en CSS : Animation de défilement et pixel art

18 December 2025

Jeu Mario HTML5 jouable en ligne

8 November 2023

Barre supérieure simple

HTML

</style><style type="text/css">#button {
  display:none;
}
.imgb_vis {
  animation: imgb-animation 7s linear;
}
@keyframes imgb-animation {
  10% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(100px);
  }
  90% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}</style><style type="text/css">.FullScreenMario { 
  color: white;
}
@font-face { 
  font-family: 'Press Start';
  src: url('https://57264959-967300405472742195.preview.editmysite.com/uploads/b/11886820-385538800742658772/files/Fonts/pressstart2p-webfont.eot?#iefix') format('embedded-opentype'), url('https://57264959-967300405472742195.preview.editmysite.com/uploads/b/11886820-385538800742658772/files/Fonts/pressstart2p-webfont.woff') format('woff'), url('https://57264959-967300405472742195.preview.editmysite.com/uploads/b/11886820-385538800742658772/files/Fonts/pressstart2p-webfont.ttf') format('truetype'), url('https://57264959-967300405472742195.preview.editmysite.com/uploads/b/11886820-385538800742658772/files/Fonts/pressstart2p-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
</style></head><body dir="ltr">
<section id="game"><div class="EightBitter FullScreenMario" style="position: relative; width: 972px; height: 464px; font-family: "Press Start";"><canvas width="972" height="464" style="width: 972px; height: 464px;"></canvas><div class="touch-passer-container" style="position: absolute; inset: 0px; display: none;"><div class="control" style="position: absolute; width: 0px; height: 0px; box-sizing: border-box; opacity: 0.84; left: 0px; bottom: 0px;"><div class="control-inner" style="position: absolute; box-sizing: border-box; text-align: center; width: 3.5cm; height: 3.5cm; margin-left: 0px; margin-top: -3.5cm; border-radius: 100%;"><div class="control-inner control-joystick-circle" style="position: absolute; background: rgb(175, 175, 175); border-radius: 100%; inset: 21%; box-shadow: rgb(238, 238, 238) 0px 0px 1px 4px; cursor: pointer;"><div class="control-joystick-tick" style="position: absolute; left: 100%; top: 50%; margin-left: -10px; margin-top: -1px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(0deg);"></div><div class="control-joystick-tick" style="position: absolute; left: 85.3553%; top: 85.3553%; margin-left: -8.53553px; margin-top: -2.41421px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(45deg);"></div><div class="control-joystick-tick" style="position: absolute; left: 50%; top: 100%; margin-left: -5px; margin-top: -3px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(90deg);"></div><div class="control-joystick-tick" style="position: absolute; left: 14.6447%; top: 85.3553%; margin-left: -1.46447px; margin-top: -2.41421px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(135deg);"></div><div class="control-joystick-tick" style="position: absolute; left: 0%; top: 50%; margin-left: 0px; margin-top: -1px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(180deg);"></div><div class="control-joystick-tick" style="position: absolute; left: 14.6447%; top: 14.6447%; margin-left: -1.46447px; margin-top: 0.414214px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(225deg);"></div><div class="control-joystick-tick" style="position: absolute; left: 50%; top: 0%; margin-left: -5px; margin-top: 1px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(270deg);"></div><div class="control-joystick-tick" style="position: absolute; left: 85.3553%; top: 14.6447%; margin-left: -8.53553px; margin-top: 0.414214px; width: 0.28cm; height: 4px; background: rgb(238, 238, 238); transform: rotate(315deg);"></div><div class="control-joystick-drag-line" style="position: absolute; opacity: 0; top: 0.77cm; left: 0.77cm; width: 0.49cm; height: 4px; background: rgb(210, 210, 210); transition: opacity 117ms ease 0s;"></div><div class="control-joystick-drag-shadow" style="position: absolute; opacity: 1; inset: 14%; margin-left: 0px; margin-top: 0px; border-radius: 100%; background: rgba(231, 231, 231, 0.84); box-shadow: rgba(175, 175, 175, 0.7) 0px 0px 7px 3px; transition: all 117ms ease 0s;"></div></div></div></div><div class="control" style="position: absolute; width: 0px; height: 0px; box-sizing: border-box; opacity: 0.84; right: 0px; bottom: 0px;"><div class="control-inner" style="position: absolute; box-sizing: border-box; text-align: center; padding: 0.385cm; width: 1.4cm; height: 1.4cm; border: 4px solid rgb(238, 238, 238); border-radius: 100%; background: rgb(175, 175, 175); cursor: pointer; margin-left: -1.56cm; margin-top: -2.8cm;">A</div></div><div class="control" style="position: absolute; width: 0px; height: 0px; box-sizing: border-box; opacity: 0.84; right: 0px; bottom: 0px;"><div class="control-inner" style="position: absolute; box-sizing: border-box; text-align: center; padding: 0.385cm; width: 1.4cm; height: 1.4cm; border: 4px solid rgb(238, 238, 238); border-radius: 100%; background: rgb(175, 175, 175); cursor: pointer; margin-left: -2.8cm; margin-top: -1.56cm;">B</div></div><div class="control" style="position: absolute; width: 0px; height: 0px; box-sizing: border-box; opacity: 0.84; left: 50%; bottom: 0px;"><div class="control-inner" style="position: absolute; box-sizing: border-box; text-align: center; padding: 0.21cm; width: 7em; height: auto; border: 4px solid rgb(238, 238, 238); border-radius: 7px; background: rgb(175, 175, 175); cursor: pointer; font-size: 77%; margin-top: -1.12cm; left: 0px;">Start</div></div></div><table id="dataDisplay" style="position: absolute; top: 0px; width: 972px; color: white; font-size: 21px; text-transform: uppercase;"><tr style="padding: 7px 14px 0px; text-align: center;"><td class="FullScreenMario_value score"><div>score</div><div>0</div></td><td class="FullScreenMario_value time"><div>time</div><div>397</div></td><td class="FullScreenMario_value world"><div>world</div><div>1-1</div></td><td class="FullScreenMario_value coins"><div>coins</div><div>0</div></td><td class="FullScreenMario_value lives"><div>lives</div><div>3</div></td></tr></table></div></section>
<section id="controls" class="length-5"><div class="control" id="control-Options"><h4>Options</h4><div class="control-inner"><div class="select-options select-options-table"><table><tr><td class="options-label-Number">Volume</td><td class="options-cell-Number"><input type="number" min="0" max="100"></td></tr><tr><td class="options-label-Boolean">Mute</td><td class="select-option options-button-option option-disabled">off</td></tr><tr><td class="options-label-Select">Speed</td><td class="options-cell-Select"><select localstoragekey="Options::Speed"><option>.25x</option><option>.5x</option><option>1x</option><option>2x</option><option>5x</option></select></td></tr><tr><td class="options-label-ScreenSize">View Mode</td><td class="options-cell-ScreenSize"><select><option>NES</option><option>Wide</option><option>Large</option><option>Full!</option></select></td></tr><tr><td class="options-label-Select">Framerate</td><td class="options-cell-Select"><select localstoragekey="Options::Framerate"><option>60fps</option><option>30fps</option></select></td></tr><tr><td class="options-label-Boolean">Touch Controls</td><td class="select-option options-button-option option-disabled" localstoragekey="Options::Touch Controls">off</td></tr><tr><td class="options-label-Boolean">Tilt Controls</td><td class="select-option options-button-option option-disabled" localstoragekey="Options::Tilt Controls">off</td></tr></table><div class="select-option options-button-option">Screenshot</div></div></div></div><div class="control" id="control-Controls"><h4>Controls</h4><div class="control-inner"><div class="select-options select-options-table"><table><tr><td class="options-label-Keys">Left</td><td class="options-cell-Keys"><select class="options-key-option" localstoragekey="Controls::Left::0"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select><select class="options-key-option" localstoragekey="Controls::Left::1"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select></td></tr><tr><td class="options-label-Keys">Right</td><td class="options-cell-Keys"><select class="options-key-option" localstoragekey="Controls::Right::0"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select><select class="options-key-option" localstoragekey="Controls::Right::1"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select></td></tr><tr><td class="options-label-Keys">Up</td><td class="options-cell-Keys"><select class="options-key-option" localstoragekey="Controls::Up::0"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select><select class="options-key-option" localstoragekey="Controls::Up::1"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select><select class="options-key-option" localstoragekey="Controls::Up::2"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select></td></tr><tr><td class="options-label-Keys">Down</td><td class="options-cell-Keys"><select class="options-key-option" localstoragekey="Controls::Down::0"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select><select class="options-key-option" localstoragekey="Controls::Down::1"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select></td></tr><tr><td class="options-label-Keys">Sprint</td><td class="options-cell-Keys"><select class="options-key-option" localstoragekey="Controls::Sprint::0"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select><select class="options-key-option" localstoragekey="Controls::Sprint::1"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select></td></tr><tr><td class="options-label-Keys">Pause</td><td class="options-cell-Keys"><select class="options-key-option" localstoragekey="Controls::Pause::0"><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option><option>q</option><option>r</option><option>s</option><option>t</option><option>u</option><option>v</option><option>w</option><option>x</option><option>y</option><option>z</option><option>up</option><option>right</option><option>down</option><option>left</option><option>space</option><option>shift</option><option>ctrl</option></select></td></tr></table></div></div></div><div class="control" id="control-Mods!"><h4>Mods!</h4><div class="control-inner"><div class="select-options select-options-buttons"><div class="select-option options-button-option option-disabled" option-enabled="false">Bouncy Bounce</div><div class="select-option options-button-option option-disabled" option-enabled="false">Dark is the Night</div><div class="select-option options-button-option option-disabled" option-enabled="false">Earthquake!</div><div class="select-option options-button-option option-disabled" option-enabled="false">Gradient Skies</div><div class="select-option options-button-option option-disabled" option-enabled="false">Hard Mode</div><div class="select-option options-button-option option-disabled" option-enabled="false">High Speed</div><div class="select-option options-button-option option-disabled" option-enabled="false">Infinite Lives</div><div class="select-option options-button-option option-disabled" option-enabled="false">Invincibility</div><div class="select-option options-button-option option-disabled" option-enabled="false">Parallax Clouds</div><div class="select-option options-button-option option-disabled" option-enabled="false">Low Gravity</div><div class="select-option options-button-option option-disabled" option-enabled="false">Luigi</div><div class="select-option options-button-option option-disabled" option-enabled="false">Tilt Gravity</div><div class="select-option options-button-option option-disabled" option-enabled="false">Palette Swap</div><div class="select-option options-button-option option-disabled" option-enabled="false">QCount</div><div class="select-option options-button-option option-disabled" option-enabled="false">Super Fireballs</div><div class="select-option options-button-option option-disabled" option-enabled="false">Trip of Acid</div></div></div></div><div class="control" id="control-Editor"><h4>Editor</h4><div class="control-inner"><div class="select-options select-options-level-editor"><div class="select-option-title">Create your own custom levels:</div><div class="select-option select-option-large options-button-option">Start the <br> Level Editor!</div><div class="select-option-title"><em>- or -</em><br></div><div class="select-option select-option-large options-button-option" textold="Click to upload and continue your editor files!">Click to upload and continue your editor files!<input type="file" class="select-upload-input"></div></div></div></div><div class="control" id="control-Maps"><h4>Maps</h4><div class="control-inner"><div class="select-options select-options-maps-grid"><table><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">1-1</td><td class="select-option maps-grid-option maps-grid-option-range">1-2</td><td class="select-option maps-grid-option maps-grid-option-range">1-3</td><td class="select-option maps-grid-option maps-grid-option-range">1-4</td></tr><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">2-1</td><td class="select-option maps-grid-option maps-grid-option-range">2-2</td><td class="select-option maps-grid-option maps-grid-option-range">2-3</td><td class="select-option maps-grid-option maps-grid-option-range">2-4</td></tr><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">3-1</td><td class="select-option maps-grid-option maps-grid-option-range">3-2</td><td class="select-option maps-grid-option maps-grid-option-range">3-3</td><td class="select-option maps-grid-option maps-grid-option-range">3-4</td></tr><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">4-1</td><td class="select-option maps-grid-option maps-grid-option-range">4-2</td><td class="select-option maps-grid-option maps-grid-option-range">4-3</td><td class="select-option maps-grid-option maps-grid-option-range">4-4</td></tr><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">5-1</td><td class="select-option maps-grid-option maps-grid-option-range">5-2</td><td class="select-option maps-grid-option maps-grid-option-range">5-3</td><td class="select-option maps-grid-option maps-grid-option-range">5-4</td></tr><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">6-1</td><td class="select-option maps-grid-option maps-grid-option-range">6-2</td><td class="select-option maps-grid-option maps-grid-option-range">6-3</td><td class="select-option maps-grid-option maps-grid-option-range">6-4</td></tr><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">7-1</td><td class="select-option maps-grid-option maps-grid-option-range">7-2</td><td class="select-option maps-grid-option maps-grid-option-range">7-3</td><td class="select-option maps-grid-option maps-grid-option-range">7-4</td></tr><tr class="maps-grid-row"><td class="select-option maps-grid-option maps-grid-option-range">8-1</td><td class="select-option maps-grid-option maps-grid-option-range">8-2</td><td class="select-option maps-grid-option maps-grid-option-range">8-3</td><td class="select-option maps-grid-option maps-grid-option-range">8-4</td></tr></table><div class="select-option maps-grid-option maps-grid-option-extra" value="Map Generator!">Map Generator!</div><input class="randomInput maps-grid-input" type="text"></div></div></div></section>
<script src="https://57264959-967300405472742195.preview.editmysite.com/uploads/b/11886820-385538800742658772/files/FullScreenMario-0.10.2.min.js"></script>
<script src="https://57264959-967300405472742195.preview.editmysite.com/uploads/b/11886820-385538800742658772/files/index.min.js"></script>
<script src=""></script>

CSS