JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<br />
<br />
<div id='wrapper'>
    <div id='container'>
        <div class='obs1 obstacle'></div>
        <div id='cube' class='circleBase type1'></div>
    </div>div co-ordinates: || x: <span class='coordx'>-</span> || y: <span class='coordy'>-</span> ||
<span class='announce' style='font-size: 20px;float: right;'>-----</span>

</div>
<br />
<div>
    <button id='sweets'>Sweets</button>
</div>

CSS

#wrapper {
    position: relative;
    width: 800px;
    background-color: #ffDCED;
}
#container {
    position: relative;
    background-color: #D6DCED;
    width: 600px;
    height: 500px;
}
#cube {
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    position: absolute;
}
#move {
    margin-top: 20px;
    z-index: 100;
}
.circleBase {
    border-radius: 50%;
}
.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid pink;
    z-index: 100;
}
.type2 {
    background: yellow;
    border: 3px solid pink;
}
.sweets {
    position: absolute;
}
.obs1 {
    position: absolute;
    top: 300px;
    left: 400px;
    width: 60px;
    height: 60px;
    background-color: red;
}

JavaScript

//var position_x = 0;
//var position_y = 0;
//$("#cube").css({top: '100', left: '100', position:'absolute'});
//var cubepos = '';
$('#sweets').on('click', function () {
       makeSweets(4);
});

var playerSize_x = 50;
var playerSize_y = 50;
var player_center;


var boundary_left_x = 0;
var boundary_right_x = 594;
var boundary_top_y = 0;
var boundary_bottom_y = 492;
var outOfBounds = 0;

var sweetSize_a_x = 20;
var sweetSize_a_y = 20;
var numberSweetsInit = 5;

function getRandomArbitary (min, max) {
    return Math.random() * (max - min) + min;
}


function makeSweets(number) {
 
        sweetCount=0;
        while (sweetCount < number) {
            random_x = getRandomArbitary(boundary_left_x , boundary_right_x)-(sweetSize_a_x/2);
        	random_y = getRandomArbitary(boundary_top_y, boundary_bottom_y)-(sweetSize_a_x/2);
            $( "#container" ).append( "<div class='circleBase type2 sweets' style='top: "+random_y+"px;left: "+random_x+"px;width: "+ sweetSize_a_x +"px; height: "+ sweetSize_a_y +"px;'></div>" );
        	sweetCount++;
        }
      //  $('#container').append("<div class='circleBase' style='width: "+ sweetSize_a_x +";height:"+ sweetSize_a_y +";'></div>");
        
}

function checkCollisions() {

}

function coords() {
    position = $('#cube').position();
    $('.coordx').text(position.left+24);
    $('.coordy').text(position.top+24);
}

$(document).ready(function(){
    $("#cube").css({width: playerSize_x, height: playerSize_y });
    coords();
});

function updateCoords() {
    position = $('#cube').position();

    if (position.left+24 < !boundary_left_x) {
        announce(" ");
        checkCollisions();
        outOfBounds = 0;
    }
    if (position.left+24 > !boundary_right_x) {
        announce(" ");
        checkCollisions();
        outOfBounds = 0;
    }
    if (position.top+24 < !boundary_top_y) {
        announce(" ");
        checkCollisions();
        outOfBounds = 0;
    }
    if (position.top+24 > !boundary_bottom_y) {
  ...