JSFiddle - React, Tailwind, and code Playground

by johan Space

HTML

<canvas id="canvas"> </canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 800;
canvas.height = 600;

var mySprite = {
	x: 200,
	y: 200,
	width: 64,
	height: 64,
	speed: 200,
	color: 'red',
	score: 0
};

var item = {
	x: Math.random() * canvas.width,
	y: Math.random() * canvas.height,
	width: 20,
	height: 20,
	color: '#fff'
};

var collied = false;

var keysDown = {};

window.addEventListener('keydown', function(e){
	keysDown[e.keyCode] = true;
});

window.addEventListener('keyup', function(e){
	delete keysDown[e.keyCode];
});

function update(mod){


	if (37 in keysDown) {
		mySprite.x -= mySprite.speed * mod;
	}
	if (38 in keysDown) {
		mySprite.y -= mySprite.speed * mod;
	}
	if (39 in keysDown) {
		mySprite.x += mySprite.speed * mod;
	}
	if (40 in keysDown) {
		mySprite.y += mySprite.speed * mod;
	}
    
    if(collision(mySprite,item)){
        mySprite.color = "green";   
    }else{
        mySprite.color = "red";   
    }
       
		
	
}

function render(){

	ctx.fillStyle = '#000';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	ctx.font = '12pt Arial';
    ctx.fillStyle = '#fff';
    ctx.textBaseline = 'top';
    ctx.fillText(mySprite.score, 10, 10);

    ctx.fillStyle = mySprite.color;
    ctx.fillRect(mySprite.x, mySprite.y, mySprite.width, mySprite.height);
    
	ctx.fillStyle = item.color;
	ctx.fillRect(item.x, item.y, item.width, item.height);
}

function collision(a, b)
    {
        if (a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y) return true;
    }

function run(){
	update((Date.now() - time) / 1000);
	render();
	time = Date.now();
}

var time = Date.now();
setInterval(run,10);