JSFiddle - React, Tailwind, and code Playground

by Luis Martin

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mover imagen</title>
    <link rel="stylesheet" href="coche.css">
</head>
<body>
    <div id="panel">
        <!-- <button id="arrancar">Arrancar</button>
        <div id="actual" class="ventana"></div>
            <div id="destino" class="ventana">
            Punto destino:
                X <input type="number" id="x">
                Y <input type="number" id="y">
        </div>
        <div id="combustible" class="ventana"></div>            
        <div id="kilometros" class="ventana"></div>         
        <button>¡Acelera!</button> -->
    </div>

    <div id="circuito">
        <img src="imgs/red_racer.png" alt="coche">
    </div>
        

</body>
</html>

CSS

@font-face{
    font-family: machine;
    src: url("ModernMachineItalic.otf");
}

*{
    margin: 0 0;
    padding: 0 0;
    font-family: machine;
    font-size: 16px;
}
body{
    background-image: url("imgs/asfalto.jpg");
    height: 90vh;
}

img{
    width: 100px;
    position: relative;
    transition-property: all;
    transition-duration: 2s;
}

#panel{
    width: 20%;
    height: 100vh;
    background-color: rgb(255, 230, 149);
    float: left;
}

input[type="number"]{
    width: 55px;
    display: inline-block;
    border: 0;
    border-bottom: 1px solid black;
    background-color: rgba(255, 178, 34, 0.3);
}

#circuito{
    width: 70%;
    height: 98vh;
    float: left;
}

.ventana{
    border: 1px solid black;
    height: 1.5em;
    width: 90%;
    margin: 10px 0;
    background-color: rgba(255,255,255,34%);
}

.rotar{
    transition-property: all;
    transition-duration: 2s;
    /* transform: rotate(180deg); */
}

JavaScript

class Coche{
    constructor(x,y,combustible, km){
        this.x=x;
        this.y=y;
        this.capacidad = 45;
        //el combustible no debe sobrepasar la cantidad del tanque
        (combustible>this.capacidad || combustible<0) ? 
        this.combustible=this.capacidad : this.combustible = combustible;
        this.km = km;
    }

    //arranca el vehiculo
    arrancar(){
        //si hay combustible, arranca el coche
        //en otro caso, retorna falso
        return (this.combustible>0) ? true : false;
    }

    //avanza en el plano
    acelerar(xDestino, yDestino){
        let distanciaX, distanciaY;
        distanciaX = Math.abs(this.x - xDestino);
        distanciaY = Math.abs(this.y - yDestino);
        this.consumir(distanciaX, distanciaY);
        this.cuentaKm(distanciaX, distanciaY);

        this.x = xDestino;
        this.y = yDestino;
    }

    /* //rota en el plano
    cambiarDireccion(direccion){
        switch(direccion.toLowerCase()){
            case "arriba": case "up":
                return 270;

            case "izquierda": case "left":
                return 0;

            case "abajo": case "down":
                return 90;

            case "derecha": case "right":
                return 180;
        }
    } */

    
    calcularDireccion(xDistancia, yDistancia){
        let tangente = Math.tan((yDistancia/xDistancia));
        let arcotangente = Math.atan(tangente);
        return Math.floor(((arcotangente*180)/Math.PI));
        /* return Math.floor(arcotangente); */
    }

    //llena el tanque de combustible
    repostar(litros){
        //si los litros a repostar sobrepasan la capacidad del tanque
        //la cantidad de litros se iguala a la máxima capacidad
        if(litros>this.capacidad){
           this.combustible = this.capacidad;
           return this.combustible;
        //si los litros a repostar se encuentran en una medida lógica,
        //se rellena el tanque con los litros dados
        } else...