Exemple d'éditeur de code Scratch Nickelodeon Edition

549 NickelodeonShockwaveFlashpointNostalgiaChannel

Ouvrir dans l'éditeur Publiez votre code

Exemple d'éditeur de code Scratch Nickelodeon Edition

Recommandé

12 May 2026

Bouton de jeu plein écran HTML/JS

12 December 2025

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

5 October 2025

Extrait d'animation de chargement CSS

HTML

<!doctype html><html><head><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';
            f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-NBMRDKQ');</script><meta charset="UTF-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="format-detection" content="telephone=no"><title>Scratch - Imagine, Program, Share</title><meta name="description" content="Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations."/><meta name="google-site-verification" content="m_3TAXDreGTFyoYnEmU9mcKB4Xtw5mw6yRkuJtXRKxM"/><meta property="og:url" content="https://scratch.mit.edu/"/><meta property="og:type" content="website"/><meta property="og:title" content="Scratch - Imagine, Program, Share"/><meta property="og:description" content="Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations."/><meta property="og:image" content="https://scratch.mit.edu/images/scratch-og.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="986"/><meta property="og:image:height" content="860"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="stylesheet" href="/css/lib/normalize.min.css"/><link rel="stylesheet" href="/common.css"/><link rel="stylesheet" href="/splash.css"/><script src="/js/polyfill.min.js"></script></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NBMRDKQ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><noscript><p>Your browser has Javascript disabled. Please go to your browser preferences and enable Javascript in order to use Scratch.</p></noscript><div id="app"></div><script src="/js/common.bundle.js"></script><script src="/js/splash.intl.js"></script><script src="/js/splash.bundle.js"></script><script>var loc = window._locale || 'en';
                if (typeof window._messages !== 'undefined' && loc !== 'en') {
                    if (typeof window._messages[loc] === 'undefined') {
                        loc = loc.split('-')[0];
                    }
                    if (typeof window._messages[loc] !== 'undefined') {
                        var localizedTitle = window._messages[loc]['general.' + 'Imagine, Program, Share'.toLowerCase()] || '';
                        if (localizedTitle.length > 0) {
                            document.title = 'Scratch - ' + localizedTitle;
                        }
                    }
                }</script></body></html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scratch 4.0: Nickelodeon Edition</title>
    <style>
        :root {
            --nick-orange: #FF6700;
            --nick-white: #FFFFFF;
            --slime-green: #91BE3F;
            --scratch-purple: #855CD6;
            --ui-bg: #f9f9f9;
            --block-motion: #4C97FF;
            --block-looks: #9966FF;
            --block-sound: #CF63CF;
        }

body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #e5e5e5;
            overflow: hidden;
        }

/* Nickelodeon Header */
        header {
            background-color: var(--nick-orange);
            height: 50px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 4px 0 rgba(0,0,0,0.1);
            z-index: 100;
            position: relative;
        }

.logo {
            font-weight: 900;
            color: white;
            font-style: italic;
            font-size: 24px;
            letter-spacing: -1px;
            margin-right: 30px;
            text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
        }

.controls {
            display: flex;
            gap: 10px;
            background: rgba(255,255,255,0.2);
            padding: 5px 15px;
            border-radius: 25px;
        }

.go-btn { color: #4CAF50; cursor: pointer; font-size: 20px; }
        .stop-btn { color: #FF0000; cursor: pointer; font-size: 20px; }

/* Main Layout */
        .editor-container {
            display: grid;
            grid-template-columns: 60px 250px 1fr 350px;
            height: calc(100vh - 50px);
        }

/* Category Sidebar */
        .sidebar {
            background: white;
            border-right: 1px solid #dddddd;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
            gap: 15px;
        }

.dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.05);
            cursor: pointer;
        }

/* Block Palette */
        .palette {
            background: #fdfdfd;
            border-right: 1px solid #dddddd;
            padding: 10px;
        }

.block {
            height: 40px;
            width: 180px;
            background: var(--block-motion);
            margin-bottom: 8px;
            border-radius: 8px 20px 20px 8px;
            color: white;
            display: flex;
            align-items: center;
            padding-left: 15px;
            font-size: 13px;
            font-weight: bold;
            box-shadow: 0 3px 0 rgba(0,0,0,0.1);
            cursor: grab;
            position: relative;
        }

.block::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 20px;
            width: 30px;
            height: 10px;
            background: inherit;
            border-radius: 5px 5px 0 0;
        }

/* Workspace */
        .workspace {
            background-color: white;
            background-image: radial-gradient(#d7d7d7 1px, transparent 1px);
            background-size: 25px 25px;
            position: relative;
            overflow: auto;
        }

.slime-splat {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 150px;
            opacity: 0.2;
            pointer-events: none;
        }

/* Stage Area */
        .stage-area {
            background: #f0f0f0;
            border-left: 1px solid #dddddd;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }

.stage {
            width: 330px;
            height: 250px;
            background: white;
            border: 4px solid var(--nick-orange);
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
        }

.sprite {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
        }

.sprite-pane {
            margin-top: 10px;
            background: white;
            flex-grow: 1;
            border-radius: 15px;
            padding: 10px;
            border: 1px solid #ddd;
        }

.nick-tab {
            background: var(--slime-green);
            color: white;
            padding: 5px 15px;
            border-radius: 10px 10px 0 0;
            display: inline-block;
            font-size: 12px;
            font-weight: bold;
        }

</style>
</head>
<body>

<header>
        <div class="logo">NICKELODEON</div>
        <div class="controls">
            <span class="go-btn">▶</span>
            <span class="stop-btn">●</span>
        </div>
        <div style="margin-left: auto; color: white; font-weight: bold; font-size: 14px;">
            Scratch 4.0 Nick Edition
        </div>
    </header>

<div class="palette">
            <h3 style="color: #555; font-size: 14px;">Motion</h3>
            <div class="block">move 10 steps</div>
            <div class="block">turn ↻ 15 degrees</div>
            <div class="block">turn ↺ 15 degrees</div>
            <div class="block" style="background: var(--block-looks); margin-top: 20px;">say "SpongeBob!"</div>
            <div class="block" style="background: var(--block-looks);">switch costume to slime</div>
        </div>

<div class="workspace">
            <div class="block" style="position: absolute; top: 100px; left: 100px; background: #FFAB19; border-radius: 20px 20px 8px 8px;">
                when green flag clicked
            </div>
            <div class="block" style="position: absolute; top: 143px; left: 100px;">
                move 50 steps
            </div>
            <div class="block" style="position: absolute; top: 186px; left: 100px; background: var(--block-sound);">
                play sound "Slime Splat"
            </div>
            
            
            <svg class="slime-splat" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path fill="#91BE3F" d="M30,-34.5C41.7,-28.2,55.8,-22.1,60.1,-12.3C64.4,-2.5,58.9,11,51.8,22.9C44.7,34.8,36,45.2,25.1,49.2C14.1,53.2,0.9,50.8,-11.2,46.1C-23.2,41.4,-34.1,34.4,-42.6,24.4C-51.1,14.4,-57.2,1.3,-55.4,-10.8C-53.6,-22.9,-43.8,-34.1,-32.7,-40.5C-21.6,-46.9,-9.2,-48.5,0.7,-49.3C10.5,-50.1,21,-50.1,30,-34.5Z" transform="translate(50 50)" />
            </svg>
        </div>

<div class="stage-area">
            <div class="stage">
                <img src="https://cdn2.scratch.mit.edu/get_image/user/default_90x90.png" class="sprite" alt="Sprite">
            </div>
            
            <div class="sprite-pane">
                <div class="nick-tab">SPRITES</div>
                <div style="display: flex; gap: 10px; margin-top: 10px;">
                    <div style="width: 60px; height: 60px; border: 2px solid var(--nick-orange); border-radius: 10px; background: #eee; display: flex; align-items: center; justify-content: center;">
                         <img src="https://cdn2.scratch.mit.edu/get_image/user/default_90x90.png" width="40" alt="Sprite thumb">
                    </div>
                    <div style="width: 60px; height: 60px; border: 1px solid #ccc; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #ccc;">
                        +
                    </div>
                </div>
                <div style="margin-top: 15px; font-size: 12px; color: #666;">
                    <strong>Sprite1</strong><br>
                    x: 0   y: 0   Size: 100
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS