JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Snake!</title>
  </head>

  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      // Get the width and height from the canvas element
      var width = canvas.width;
      var height = canvas.height;
      // Work out the width and height in blocks
      var blockSize = 10;
      var widthInBlocks = width / blockSize;
      var heightInBlocks = height / blockSize;
      // Set score to 0
      var score = 0;
      // Draw the border
      var drawBorder = function() {
        ctx.fillStyle = "Gray";
        ctx.fillRect(0, 0, width, blockSize);
        ctx.fillRect(0, height - blockSize, width, blockSize);
        ctx.fillRect(0, 0, blockSize, height);
        ctx.fillRect(width - blockSize, 0, blockSize, height);
      };
      // Draw the score in the top-left corner
      var drawScore = function() {
        ctx.font = "20px Courier";
        ctx.fillStyle = "Black";
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        ctx.fillText("Score: " + score, blockSize, blockSize);
      };
      // Clear the interval and display Game Over text
      var gameOver = function() {
        playing = false;
        ctx.font = "60px Courier";
        ctx.fillStyle = "Black";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Game Over", width / 2, height / 2);
      };
      // Draw a circle (using the function from Chapter 14)
      var circle = function(x, y, radius, fillCircle) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        if (fillCircle) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      };
      // The Block constructor
      var Block = function(col, row) {
        this.col = col;
        this.row =...