JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div id="grid">
    
    <span id="food"></span>
<span id="snake"></span>
</div>

<div id="output">
    <div style="float: left;">
    Snake X: <span id="snakeX"></span><br />
    Snake Y: <span id="snakeY"></span><br />
    Snake Position: <span id="snakePosition"></span>
    </div>
    <div style="float:right;">
    Food X: <span id="foodX"></span><br />
    Food Y: <span id="foodY"></span><br />
        Food Position: <span id="foodPosition"></span>
    </div>
</div>

CSS

#grid {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
  position: relative;
}

#output {
    width: 200px;
}

#food {
    visibility: hidden;
    background: red;
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
}

#snake {
  background: #000;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50px;
  left: 50px;
}

JavaScript

$(function() {
    snakeWidth = $('#snake').width();
    var randomDimension = function() {
        var min = 0;
        var max = 300;

        return Math.floor(Math.random() * (max - min + 1)) + min;
    };

    var randomPosition = function() {
        var x = randomDimension();
        var y = randomDimension();
        return [x, y];
    };

    var foodPos = randomPosition();

    var positionFood = function(foodPos) {
        $('#food').css('top', foodPos[0] - 5).css('left', foodPos[1] - 5).css('visibility', 'visible');
    }

    positionFood(foodPos);

    $(document).keydown(function(e) {
        var snakePosition = $('#snake').position();
        var snakeX = snakePosition.left;
        var snakeY = snakePosition.top;

        // print to our output container
        // for testing!
        $('#snakeX').text(snakeX);
        $('#snakeY').text(snakeY);
        $('#snakePosition').text(snakePosition);


        // check if snake ate food
        var checkCollision = function(foodPos, snakeX, snakeY) {
            var snakeXOffset = snakeX + $('#snake').width();
            var snakeYOffset = snakeY + $('#snake').height();
            var foodPos = $('#food').position();
            var foodX = foodPos.left;
            var foodY = foodPos.top;
            $('#foodX').text(foodX);
            $('#foodY').text(foodY);
            
            var xCol = false;
            var yCol = false;

            if (snakeX > foodX && foodX < snakeXOffset) {
                xCol = true;
            }
            if (snakeY > foodY && foodY < snakeYOffset) {
                yCol = true;
            }

            if (xCol && yCol) {
                alert('hit');
            }

        };

        checkCollision(snakeX, snakeY);

        // Move the snake up
        if (e.keyCode == 38 && (snakeY > 0)) {

            $('#snake').css('top', '-=10');
        }

        // Move snake down
        if (e.keyCode == 40 && (snakeY < 300 - snakeWidth)) {
           ...