How to stop the drum of the draw machine

Question

I have very simple slot casino game with five rolls and three rows.

I am stuck with a problem that I have not been able to solve for several hours. It's about the roll animation. I have the following assumption:

The roll has at least 10 symbols, only 3 are displayed on the screen (the rest is above the screen - invisible)
When you click on the space, the drawing starts (I managed to do it)
If the last symbol is just above the roller, the position is reset and so on and on - I did the spinning effect of the roller. Let's say it works

The problem that I encountered is that I don't know how to stop the reel after e.g. 3 seconds.

As you can see I tried to use Reel.stop () but it doesn't work.

By the way - is this code correct? Can something be improved in it?

#edit 1

i change method move_reel, but

#edit 2

adding setTimeout to Reel:stop method

/*var FPS = 60;
setInterval(function() {
    render();
}, 1000/FPS);
*/

var tile_1 = new Image();
var tile_1_loaded = false;
tile_1.src = "https://i.ibb.co/tsC6G4R/tile-1.png";

var tile_2 = new Image();
var tile_2_loaded = false;
tile_2.src = "https://i.ibb.co/Ns1ZKg2/tile-2.png";

// GAME SETTINGS

var reels = [];

// REEL

function Reel(x, y, tiles) {
    
    this.x = x;
    this.y = y;
    this.tiles = tiles;
        var start = 0;
    
    this.draw = function(){
        
        for(var i = 0; i < this.tiles.length; i++) {
            if (this.tiles[i] == 1) {
                tile_name = tile_1;
            }
            else {
                tile_name = tile_2;
            }
            y_offset = this.y + 100 * i + 19;
            ctx.drawImage(tile_name, x, y_offset, 100, 100);
        }
        
    }
    
    this.update = function(){
        if (this.y < 0) {
            this.y += 15;
        }
        else {
            this.y = -715;
        }
        
    }
    
    this.stop = function(){
        setTimeout(() => {
            this.y = y;
        }, 2000);
    }
    
}

function drawReels() {
    
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, 300);
    ctx.clip();
    
    reels.push(new Reel(0, -715, [1,2,2,1,1,2,2,2,1,2,1,1,2,2,1]));
    reels.push(new Reel(100, -715, [1,2,1,2,1,2,1,2,1,2,2,1,2,1,1]));
    reels.push(new Reel(200, -715, [2,2,1,1,1,1,1,1,2,2,2,1,1,2,1]));
    reels.push(new Reel(300, -715, [1,2,1,2,1,2,1,2,1,2,2,1,2,1,1]));
    reels.push(new Reel(400, -715, [1,2,1,2,1,2,1,2,1,2,2,1,2,1,1]));
    
    for(var i = 0; i < reels.length; i++) {
        reels[i].draw();
    }
    
}

function spin() {
    
    let animate_reel;
    animate_reel = requestAnimationFrame(spin);
    
    for(i = 0; i < reels.length; i++) {
        move_reel(i);
    }
}

var move_reel = function(index) {
    
    reels[index].update();
    reels[index].draw();
    reels[index].stop();

}

function handleKey(evt) {
    if (evt.keyCode == 32) {
        spin();
    }
}

function init() {
    
    canvas = document.getElementById("slots"); 
    ctx = canvas.getContext("2d");;
    
    window.addEventListener('keydown', handleKey, true);
    
    tile_1.onload = function() {
        tile_1_loaded = true;
        if (tile_1_loaded && tile_2_loaded) drawReels();
    };

    tile_2.onload = function() {
        tile_2_loaded = true;
        if (tile_1_loaded && tile_2_loaded) drawReels();
    };

}

init()

* {
  margin: 0;
  padding: 0;
}

body {
  background: #0d012c;
  color: #fff;
  text-transform: uppercase;
  overflow: hidden;
}

canvas {
  display: block;
  margin: 0;
  padding: 0;
}

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

<head>
  <meta charset="utf-8">
  <title>Slots</title>
</head>

<body>

  <div id="game">
    <canvas id="slots" width="1500" height="640"></canvas>
  </div>

</body>

</html>

Please revise your post title to ask a clear, specific question. Don't add tags. See [ask]. — isherwood, Jun 03 '22 at 14:26
I corrected it, forgive me. One more note - pictures don't load at first, but this seems to be a workaround. I will try to fix it and post info here, but this thread is not the problem. — progrtoo, Jun 03 '22 at 14:48

score 0 · Answer 1 · answered Jun 03 '22 at 14:52

0

I suggest you use the global setTimeout() method. It sets a timer which executes a function or specified piece of code once the timer expires.

setTimeout(() => {
  console.log("This message was Delayed for 3 seconds.");
}, 3000)

answered Jun 03 '22 at 14:52

Hugobop

125
10

Ok, I added this function to the move_reel () method, and inside it I put reels [index] .stop (); and it actually stops it, but it always keeps me in the starting position (the one at the very beginning). How can I stop it in the Y position right before it stops? – progrtoo Jun 03 '22 at 15:07
Can you set that implicitly in your stop() method? – Hugobop Jun 03 '22 at 15:24
I added, but still the same. It always stops in the same position, not where it left off. Also, even after stopping, the graphic still makes some slight movement (shakes), why yes? Look update code. – progrtoo Jun 03 '22 at 16:02
Should I draw these rolls over and over in the move_reel method? – progrtoo Jun 03 '22 at 16:10

How to stop the drum of the draw machine

1 Answers1