JSFiddle - React, Tailwind, and code Playground

by kukicvladimir

HTML

<body>
<canvas id="canvas" height="768px" width="1366px"/>
</body>

JavaScript

var wolves = {
  wolf0: {
    x: 10,
    y: 10,
    w: 10,
    h: 10,
    up: false,
    down: false,
    left: false,
    right: false
  }
};
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var body = document.getElementsByTagName("body");
var movement = ["up", "down", "left", "right"];

//styles
canvas.style.backgroundColor = "black";
body[0].style.overflow = "hidden";
body[0].style.margin = "0px";

//update
var update = setInterval(function(){
  //clear anything left over from https://jsfiddle.net/#runthe last frame;
  context.clearRect(0, 0, canvas.width, canvas.height);
  //loop through wolves object and update each key
  for(i = 0; i < Object.keys(wolves).length; i++){
    var wolf = wolves["wolf" + i];
    console.log(wolf);
    move(wolf);
    //then draw to the canvas
    draw(wolf.x, wolf.y, wolf.w, wolf.h, "blue");
  }
}, 1000);

function draw(x, y, w, h, color){
  context.fillStyle = color;
  context.fillRect(x, y, w, h);
  context.fill();
}

function move(wolf){
	var ran = Math.floor(Math.random() * 4) + 0;
	up = wolf.up;
	down = wolf.down;
	left = wolf.left;
	right = wolf.right;
	x = wolf.x;
	y = wolf.y;
	up = false;
	down = false;
	left = false;
	right = false;
	switch(movement[ran]){
		case "up":
			up = true;
			console.log("going up");
		break;
		case "down":
			down = true;
			console.log("going down");
		break;
		case "left":
			left = true;
			console.log("going left");
		break;
		case "right":
			right = true;
			console.log("going right");
		break;
		default:
			console.log("movement hasn't happend, the ran number is: " + ran);
		break;
	}
	if(up){
		y--;
		console.log("y--;");
	}
	if(down){
		y++;
		console.log("y++;");
	}
	if(left){
		x--;
		console.log("x--;");
	}
	if(right){
		x++;
		console.log("x++;");
	}
	console.log("x " + this.x);
	console.log("y " + this.y);
}