Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>

<head>
  <title>Super Scratch</title>
</head>

<body>
  <canvas id="game" width="640" height="480"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById("game");
    var ctx = canvas.getContext("2d");
    var game = {
      timer: null,
      finished: false,
      controls: {
        left: false,
        right: false,
        up: false,
        down: false,
        mapping: {
          65: "left",
          68: "right",
          87: "up",
          83: "down"
        },
        buttonPress: function(keyInfo) {
          this[this.mapping[keyInfo.keyCode]] = true;
        },
        buttonRelease: function(keyInfo) {
          this[this.mapping[keyInfo.keyCode]] = false;
        },
        connect: function() {
          window.addEventListener("keydown", function(keyInfo) {
            game.controls.buttonPress(event);
          }, false);
          window.addEventListener("keyup", function(keyInfo) {
            game.controls.buttonRelease(event);
          }, false);
        }
      },
      sounds: {
        enabled: true,
        jump: function() {
          this.play("meow.wav");
        },
        backgroundMusic: function() {
          this.play("background.mp3");
        },
        play: function(filename) {
          if (this.enabled) {
            new Audio("sounds/" + filename).play();
          }
        }
      },
      loop: function() {
        if (this.finished) {
          return;
        }
        world.tick();
        player.tick();
        world.draw();
        player.draw();
        this.timer = window.setTimeout("game.loop()", 1000 / 60);
      },
      start: function() {
        this.controls.connect();
        this.sounds.backgroundMusic();
        this.loop();
      },
      stop: function(reason) {
        this.finished = true;
        window.clearTimeout(this.timer);
        alert(reason == "win" ? "You won!" : "You lost!");
      }
    };
    var world = {
      height: 480,
      width: 640,
      gravity: 10,
      distanceTravelled: 0,
      level: null,
      collisionMap: null,
      tickCount: 0,
      enemies: [],
      loadLevel: function() {
        this.level = new Image();
        this.level.src = "level.png";
        var collisionMapImage = new Image();
        collisionMapImage.onload = function(loadEvent) {
          var hiddenCanvas = document.createElement("CANVAS");
          hiddenCanvas.setAttribute("width", this.width);
          hiddenCanvas.setAttribute("height", this.height);
          world.collisionMap = hiddenCanvas.getContext("2d");
          world.collisionMap.drawImage(this, 0, 0);
        };
        collisionMapImage.src = "data:image/png;base64,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";
      },
      getFloorBelowY: function(x, y) {
        for (var tempY = y; tempY <= world.height; tempY++) {
          if (this.isSolidSurface(x, tempY)) {
            return tempY;
          }
        }
        return 0;
      },
      isSolidSurface: function(x, y) {
        return this.getPixelType(x, y) == "#";
      },
      getPixelType: function(x, y) {
        if (!this.collisionMap) {
          return ".";
        }
        var rawData = this.collisionMap.getImageData(x, y, 1, 1).data;
        var mask = rawData[0] + " " + rawData[1] + " " + rawData[2] + " " + rawData[3];
        if (mask == "255 0 0 255") return "pit";
        if (mask == "76 255 0 255") return "exit";
        if (mask == "255 255 255 255") return ".";
        if (mask == "0 0 0 255") return "#";
      },
      tick: function() {
        if (!this.level) {
          this.loadLevel();
          this.enemies.push(new enemy(500, 100));
          this.enemies.push(new enemy(2000, 100));
          this.enemies.push(new enemy(3700, 100));
          this.enemies.push(new enemy(4000, 100));
          this.enemies.push(new enemy(5600, 100));
          this.enemies.push(new enemy(6500, 100));
          this.enemies.push(new enemy(7600, 100));
        }
        this.distanceTravelled += player.character.speed;
        this.tickCount++;
        this.activateEnemies();
      },
      activateEnemies: function() {
        for (var i = 0; i < this.enemies.length; i++) {
          this.enemies[i].tick();
        }
      },
      levelEndOffset: function() {
        return this.level.width - this.width;
      },
      atLevelEnd: function() {
        return this.distanceTravelled >= this.levelEndOffset();
      },
      draw: function() {
        var drawAtX = this.distanceTravelled * -1;
        drawAtX = drawAtX > 0 ? 0 : drawAtX;
        drawAtX = this.atLevelEnd() ? this.levelEndOffset() * -1 : drawAtX;
        ctx.drawImage(this.level, drawAtX, 0);
        for (var i = 0; i < this.enemies.length; i++) {
          this.enemies[i].draw();
        }
      }
    };
    var player = {
      character: new character(160, 390, 25, 25, new animation("graphics/cat", 5), new animation("graphics/cat.backwards", 5)),
      tick: function() {
        var currentLocation = world.getPixelType(this.character.leadingEdge(), this.character.y);
        if (currentLocation == "exit" || currentLocation == "pit") {
          var state = currentLocation == "exit" ? "win" : "lose";
          game.stop(state);
          return;
        }
        this.processControls();
        this.character.tick();
      },
      processControls: function() {
        if (game.controls.right) {
          this.character.speed = 5;
        }
        if (game.controls.left) {
          this.character.speed = -5;
        }
        if (!game.controls.left && !game.controls.right) {
          this.character.speed = 0;
        }
        if (game.controls.up && this.character.standingOnAPlatform()) {
          this.character.downwardForce = -8;
          game.sounds.jump();
        }
      },
      draw: function() {
        this.character.draw();
      }
    };

    function character(x, y, width, height, runningSprite, reverseSprite) {
      this.x = x;
      this.y = y;
      this.height = height;
      this.width = width;
      this.speed = 0;
      this.downwardForce = 0;
      this.jumpHeight = 0;
      this.runningSprite = runningSprite;
      this.runningSpriteReversed = reverseSprite;
      this.tick = function() {
        this.applyGravity();
        this.applyMovement();
      }
      this.applyGravity = function() {
        if (this.isJumping()) {
          this.jumpHeight += (this.downwardForce * -1);
          if (this.jumpHeight >= this.height * 6) {
            this.downwardForce = world.gravity;
            this.jumpHeight = 0;
          }
        } else {
          if (this.standingOnAPlatform()) {
            this.downwardForce = 0;
          } else {
            this.downwardForce = world.gravity;
          }
        }
      }
      this.applyMovement = function() {
        var nextX = this.x + this.speed;
        var nextY = this.y + this.downwardForce;
        var nextLeadingX = this.leadingEdge() + this.speed;
        var walkingIntoSurface = world.isSolidSurface(nextLeadingX, this.y);
        if (this.isMoving() && walkingIntoSurface) {
          nextX = this.x;
          this.speed = 0;
        }
        var topLeftIsSolid = world.isSolidSurface(this.leadingEdge(), this.y);
        var topRightIsSolid = world.isSolidSurface(this.trailingEdge(), this.y);
        if ((topLeftIsSolid || topRightIsSolid) && this.isJumping()) {
          this.downwardForce = world.gravity;
          this.jumpHeight = 0;
        }
        this.x = nextX;
        this.y = nextY;
      }
      this.bottom = function() {
        return this.y + this.height;
      }
      this.isJumping = function() {
        return this.downwardForce < 0;
      }
      this.isFalling = function() {
        return this.downwardForce > 0;
      }
      this.isMoving = function() {
        return this.speed != 0;
      }
      this.leadingEdge = function() {
        return this.speed < 0 ? this.x : this.x + this.width;
      }
      this.trailingEdge = function() {
        return this.speed < 0 ? this.x + this.width : this.x;
      }
      this.standingOnAPlatform = function() {
        return world.isSolidSurface(this.leadingEdge(), this.bottom() + 1) ||
          world.isSolidSurface(this.trailingEdge(), this.bottom() + 1);
      }
      this.draw = function() {
        if (!this.runningSprite) {
          return;
        }
        var drawAtX = this.x - world.distanceTravelled;
        drawAtX = drawAtX > this.x ? this.x : drawAtX;
        if (world.atLevelEnd()) {
          drawAtX = (world.width - (world.level.width - world.distanceTravelled - (this.x - world.distanceTravelled)));
        }
        var sprite = this.speed < 0 ? this.runningSpriteReversed : this.runningSprite;
        if (this.isJumping() || this.isFalling()) {
          sprite.drawFrame(4, drawAtX, this.y, this.height, this.width);
        } else if (this.isMoving()) {
          sprite.draw(world.tickCount, drawAtX, this.y, this.height, this.width);
        } else {
          sprite.drawFrame(1, drawAtX, this.y, this.height, this.width);
        }
      }
      this.collidesWith = function(other) {
        if (this.x >= other.x &&
          this.x <= other.x + other.width &&
          this.y >= other.y &&
          this.y <= other.y + other.height) {
          return true;
        }
        return false;
      }
    }

    function animation(filename, frameCount) {
      this.frames = [];
      this.currentFrameId = 1;
      for (var frameId = 1; frameId <= frameCount; frameId++) {
        var frame = new Image();
        frame.src = filename + "." + frameId + ".png";
        this.frames[frameId] = frame;
      }
      this.draw = function(tickCount, x, y, height, width) {
        if (tickCount % 5 == 0) {
          this.currentFrameId++;
        }
        this.currentFrameId = this.currentFrameId >= this.frames.length ? 1 : this.currentFrameId;
        this.drawFrame(this.currentFrameId, x, y, height, width);
      }
      this.drawFrame = function(frameNumber, x, y, height, width) {
        ctx.drawImage(this.frames[frameNumber], x, y, width, height);
      }
    }

    function enemy(x, y) {
      this.character = new character(x, y, 25, 25, new animation("graphics/tiger", 5), new animation("graphics/tiger.backwards", 5))
      this.tick = function() {
        var distanceFromPlayer = Math.abs(player.character.x - this.character.x);
        if (distanceFromPlayer <= world.width * 2) {
          this.character.speed = 2;
          if (player.character.x < this.character.x) {
            this.character.speed *= -1;
          }
          if (this.character.collidesWith(player.character)) {
            game.stop();
          }
          this.character.tick();
        }
      }
      this.draw = function() {
        this.character.draw();
      }
    }
    game.start();
  </script>
</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console