JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div class="container">
        <div class="crash">
            <canvas id="crashCanvas" width="500" height="300"></canvas>
        </div>
    </div>

CSS

* {
    box-sizing: border-box;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.crash {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

#crashCanvas {
    border: 1px solid black;
}

JavaScript

const canvas = document.getElementById('crashCanvas')
const ctx = canvas.getContext('2d')

let multiplierCrash = 5.41

function crashTimer() {

    // let crashTimerCount = 11 ( Default )
    let crashTimerCount = 4
    let crashTimerCounter = setInterval(crashTimerInner, 1000);

    function crashTimerInner() {

        if (crashTimerCount < 1) {
            clearInterval(crashTimerCounter)
            crashStart(300,0,.2);
            return crashTimerCount
        }
        crashTimerCount = crashTimerCount - 1;

        // Canvas Text
        ctx.fillStyle = "green"
        ctx.font = "36px serif";
        ctx.clearRect(0, 0, 500, 300);
        ctx.fillText(`Place your bets... ${crashTimerCount}`, canvas.width / 5, canvas.height / 2);

    }
}

crashTimer();

function crashStart(curY,toY,step) {

    curY += curY > toY?-step:step;
    if(Math.abs(curY-toY) <= step)
    	curY = toY;
      
    ctx.clearRect(0, 0, 500, 300);
    ctx.fillText(`${multiplierCrash}x`, canvas.width / 2.3, canvas.height / 1.9);

    // Crash Line canvas
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = "red";
    ctx.moveTo(0, 300);
    ctx.bezierCurveTo(300, 300, 400, curY, 500, curY);
    ctx.stroke();
	if(curY != toY)
  	setTimeout(()=>{
    	crashStart(curY,toY,step,1000/60);
    })
  
}