Black Octopus Cartoons

blackoctopuscartoons.com

WRITTEN FONT

HTML Development Environment

Copy and Paste HTML Game


<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: black;
      color: lime;
      font-family: monospace;
    }
    .box {
      width: 50px;
      height: 50px;
      background: lime;
      position: absolute;
      cursor: pointer;
    }
    #score {
      position: fixed;
      top: 10px;
      left: 10px;
      font-size: 18px;
      z-index: 100;
    }
  </style>
</head>
<body>
  <div id="score">Score: 0</div>
  <script>
    let score = 0;

    function createBox() {
      const box = document.createElement("div");
      box.className = "box";
      box.style.top = Math.random() * (window.innerHeight - 50) + "px";
      box.style.left = Math.random() * (window.innerWidth - 50) + "px";

      box.onclick = () => {
        score++;
        document.getElementById("score").textContent = "Score: " + score;
        box.remove();
        createBox();
      };

      document.body.appendChild(box);
    }

    createBox();
  </script>
</body>
</html>

Copy and Paste HTML Game


<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      background: black;
      font-family: sans-serif;
      color: lime;
      text-align: center;
      overflow: hidden;
    }
    #score {
      position: fixed;
      top: 10px;
      left: 10px;
      font-size: 24px;
      z-index: 100;
    }
    .target {
      position: absolute;
      background: lime;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      transition: transform 1s linear;
    }
  </style>
</head>
<body>
  <div id="score">Score: 0</div>
  <script>
    let score = 0;

    function spawnTarget() {
      const target = document.createElement("div");
      target.className = "target";

      const x = Math.random() * (window.innerWidth - 80);
      const y = Math.random() * (window.innerHeight - 80);
      target.style.left = `${x}px`;
      target.style.top = `${y}px`;

      setTimeout(() => {
        target.style.transform = "scale(0)";
      }, 100);

      setTimeout(() => {
        target.remove();
        spawnTarget();
      }, 1000);

      target.addEventListener("touchstart", () => {
        score++;
        document.getElementById("score").textContent = "Score: " + score;
        target.remove();
        spawnTarget();
      });

      document.body.appendChild(target);
    }

    spawnTarget();
  </script>
</body>
</html>

Typing

rabbit.html

.glb model-viewer

BlackOctopusOreo.glb

HTML Babylon JavaScript Box


<!DOCTYPE html>
<html>
<head>
  <title>.glb box</title>
  <style>
    #fullScreen {
      position: fixed;
      z-index: 100;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color: black;
      color: lime;
      opacity: 1;
      text-align: left;
      width: 100%;
      height: 100%;
      border: 1px solid #00ff00;
    }
  </style>
  <script src="https://cdn.babylonjs.com/babylon.js"></script>
  <script src="https://cdn.babylonjs.com/serializers/babylon.glTF2Serializer.js"></script>
</head>

<body>
  <div id="fullScreen" style="background-color: black; border-color: rgba(0,0,0,0);">
    <br />
    <canvas id="renderCanvas" touch-action="true" style="width:availWidth; height:availHeight"></canvas>
  </div>
  <script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    var createScene = function() {
      var scene = new BABYLON.Scene(engine);
      var camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 20, BABYLON.Vector3.Zero(), scene);
      camera.attachControl(canvas, true);

      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
      light.diffuse = new BABYLON.Color3(1, 1, 1);
      light.intensity = 0.66;

      var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(-1, -1, -1), scene);
      light1.diffuse = new BABYLON.Color3(1, 1, 1);
      light1.intensity = 0.33;

      var light2 = new BABYLON.HemisphericLight("light2", new BABYLON.Vector3(0, -1, -1), scene);
      light2.diffuse = new BABYLON.Color3(1, 1, 1);
      light2.intensity = 0.1;

      var material = new BABYLON.StandardMaterial("material", scene);
      material.diffuseColor = new BABYLON.Color3(1, 1, 1);
      material.specularColor = new BABYLON.Color3(1, 1, 1);
      material.specularPower = 64;

      var box = BABYLON.MeshBuilder.CreateBox("box", {size: 5}, scene);
      box.material = material;

      return scene;
    };

    var scene = createScene();

    engine.runRenderLoop(function() {
      scene.render();
    });

    window.addEventListener("resize", function() {
      engine.resize();
    });
  </script>
</body>
</html>

COPY and PASTE HTML TRON


<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      background: black;
      font-family: monospace;
      color: lime;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #game-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      border: ;
    }
    #scoreboard {
      position: absolute;
      top: 5px;
      left: 5px;
      font-size: 14px;
      z-index: 10;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <div id="game-wrapper">
    <div id="scoreboard">Blue: 0 | Red: 0</div>
    <canvas id="tron" style="width:100%; height:100%"></canvas>
  </div>
  <script>
    const canvas = document.getElementById("tron");
    const ctx = canvas.getContext("2d");

    const players = [
      { x: 50, y: 50, dir: 0, color: "blue", trail: [], score: 0 },
      { x: 400, y: 200, dir: 2, color: "red", trail: [], score: 0 }
    ];

    function drawTrail(p) {
      ctx.fillStyle = p.color;
      p.trail.forEach(([x, y]) => ctx.fillRect(x, y, 3, 3));
    }

    function movePlayer(p) {
      if (Math.random() < 0.05) p.dir = Math.floor(Math.random() * 4);
      const speed = 1;
      switch (p.dir) {
        case 0: p.y -= speed; break;
        case 1: p.x += speed; break;
        case 2: p.y += speed; break;
        case 3: p.x -= speed; break;
      }
      // Stay inside bounds
      p.x = Math.max(0, Math.min(canvas.width, p.x));
      p.y = Math.max(0, Math.min(canvas.height, p.y));
      p.trail.push([p.x, p.y]);
      if (p.trail.length > 500) p.trail.shift();
      p.score++;
    }

    function updateScoreboard() {
      document.getElementById("scoreboard").textContent =
        `Blue: ${players[0].score} | Red: ${players[1].score}`;
    }

    function gameLoop() {
      ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      players.forEach(p => {
        movePlayer(p);
        drawTrail(p);
      });
      updateScoreboard();
      requestAnimationFrame(gameLoop);
    }

    gameLoop();
  </script>
</body>
</html>

.glb button



<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Phillip Macias">
<meta name="description" content="blackoctopuscartoons.com box.glb">
<title>.glb box</title>
<style>
 #fullScreen {
    position: fixed;
    z-index: 100;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    color: lime;
    opacity: 1;
    text-align: left;
    width: 100%;
    height: 100%;
    border: 1px solid #00ff00;
  }
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylon.glTF2Serializer.js"></script>
</head>
<body>
  <div style="background-color: black; border-color: rgba(0,0,0,0);" id="fullScreen" style="text-align: ;">
    <button onclick="downloadScene()">Download .glb box</button>
    <br />
    <canvas id="renderCanvas" touch-action="true" style="width:availWidth; height:availHeight"></canvas>
  </div>

  <script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    var createScene = function() {
      var scene = new BABYLON.Scene(engine);
      var camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 20, BABYLON.Vector3.Zero(), scene);
      camera.attachControl(canvas, true);

      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
      light.diffuse = new BABYLON.Color3(1, 1, 1); 
      light.intensity = .66;

      var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(-1, -1, -1), scene);
      light1.diffuse = new BABYLON.Color3(1, 1, 1);
      light1.intensity = .33;

      var light2 = new BABYLON.HemisphericLight("light2", new BABYLON.Vector3(0, -1, -1), scene);
      light2.diffuse = new BABYLON.Color3(1, 1, 1);
      light2.intensity = .1;

      var material = new BABYLON.StandardMaterial("material", scene);
      material.diffuseColor = new BABYLON.Color3(1, 1, 1);
      material.specularColor = new BABYLON.Color3(1, 1, 1);
      material.specularPower = 64;

      var box = BABYLON.MeshBuilder.CreateBox("box", {size: 5}, scene);
      box.material = material;
      return scene;
    };

    var scene = createScene();
    engine.runRenderLoop(function() {
      scene.render();
    });

    window.addEventListener("resize", function() {
      engine.resize();
    });
  </script>

  <script>
    function downloadScene() {
      BABYLON.GLTF2Export.GLBAsync(scene, "blackoctopuscombox").then((glb) => {
        glb.downloadFiles();
      });
    }
  </script>
 
</body>
</html>

HTML HYPERLINK


<!DOCTYPE html>
<html>
<body>
<a href="https://example.com">
example.com
</a>
</body>
</html>

This Site Uses Cookies
Click the button and/or visit again to see how many times you have clicked and visited.

100%

TIME:TIME:TIME:TIME
00:00:00:000

Avail Height Width Window

Worm Control

MOVIE

Coordinates

Message Window

Network_