JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="field">
<div class="snakeUnit"></div>
</div>

CSS

.field {
    height: 300px;
    width: 600px;
    border: 1px solid black;
}

.snakeUnit {
    background: #000;
    height: 8px;
    width: 8px;
}

JavaScript

var snake_unit = $('<div>').addClass('snakeUnit'),
    speed = 400,
    current_direction = "right",

    field = $('.field'),
    field_width = field.width(),
    field_height = field.height(),
    snake_unit_width = $('.snakeUnit').width(),
    excess_field_height = field_height % snake_unit_width,
    excess_field_width = field_width % snake_unit_width;

if ( excess_field_width ) {
    if (excess_field_width > snake_unit_width / 2) {
        field.css('width', (field_width - excess_field_width + snake_unit_width) + "px");
    } else {
        field.css('width', (field_width - excess_field_width) + "px");
    }
}

if ( excess_field_height ) {
    if (excess_field_height > snake_unit_width / 2) {
        field.css('height', (field_height - excess_field_height + snake_unit_width) + "px");
    } else {
        field.css('height', (field_height - excess_field_height) + "px");
    }
}



var add_snake_unit = function() {
    //get coords of last snake_unit
    //get direction
    //append snake_unit
};

var init = function() {

};


function intersection(coords, new_direction) {
    this.coords = coords;
    this.new_direction = new_direction;
}