<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

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

    <script src="main.js"></script>

</body>

</html>
* {
    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;
}
const canvas = document.getElementById('crashCanvas')
const ctx = canvas.getContext('2d')

let multiplierCrash
let multiplier
let randomNumber

function repeat() {
    multiplierCrash = false
    multiplier = 1
    randomNumber = Math.round((Math.random() * (30 - 1 + 1) + 1) * 100) / 100
    crashTimer()
}

repeat()

function crashTimer() {

    let crashTimerCount = 3
    let crashTimerCounter = setInterval(crashTimerInner, 1000)

    function crashTimerInner() {

        if (crashTimerCount < 1) {
            clearInterval(crashTimerCounter)
            crashStart(0)
            return crashTimerCount
        }
        crashTimerCount = crashTimerCount - 1

        // Canvas Text

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

    }
}

function crashStart(t) {

    ctx.clearRect(0, 0, 500, 300)

    calculateMultiplier()

    let arrDots = []

    for (let i = 0; i <= t; i += .001) {
        arrDots.push(calculateBezierPoint(i, { x: 0, y: 300 }, { x: 300, y: 275 }, { x: 400, y: 300 }, { x: 500, y: 0 }))
    }

    if (arrDots.length > 10) {
        ctx.lineWidth = 2
        ctx.strokeStyle = "black"
        if (multiplierCrash) {
            ctx.strokeStyle = "red"
        }
        ctx.beginPath();
        ctx.moveTo(arrDots[0].x, arrDots[0].y)
        for (let i = 1; i < arrDots.length; i++) {
            ctx.lineTo(arrDots[i].x, arrDots[i].y)
        }
        ctx.stroke()
    }

    t += .0005

    if (!multiplierCrash) {
        setTimeout(() => { crashStart(t) }, 1000 / 60)
    }

}

function calculateBezierPoint(t, p0, p1, p2, p3) {
    let u = 1 - t
    let tt = t * t
    let uu = u * u
    let uuu = uu * u
    let ttt = tt * t

    let p = { x: uuu * p0.x, y: uuu * p0.y } // first term   

    p.x += 3 * uu * t * p1.x // second term
    p.y += 3 * uu * t * p1.y

    p.x += 3 * u * tt * p2.x // third term    
    p.y += 3 * u * tt * p2.y

    p.x += ttt * p3.x // fourth term
    p.y += ttt * p3.y

    return p
}

function calculateMultiplier() {

    let a = 1
    let k = .0009

    multiplier += multiplier / 1250

    let finallyMultiplier = Math.round((multiplier) * 100) / 100

    if (finallyMultiplier >= randomNumber) {

        multiplierCrash = true
        ctx.fillStyle = "red"

        setTimeout(() => {
            repeat()
        }, 2000)
    }

    ctx.fillText(`${finallyMultiplier}x`, canvas.width / 2.3, canvas.height / 1.9)

    console.log(randomNumber)

    return finallyMultiplier
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.