0
\$\begingroup\$

I'm trying to make the Mario move, but somehow it leaves traces behind, can anybody help???

var canvas = document.getElementById("screen");
var ctx = canvas.getContext("2d");
var mario;
var marioSprite;
var tiles;
var speedX = 1;

//marioSprite Specification
mario = {
    //target picture specification X & Y, Width & Height
    px:276,
    py: 44,
    pwidth: 16,
    pheight: 16,
    //drawing on Canvas specification X & Y, Width & Height
    cx: 16,
    cy: 116,
    cwidth:16,
    cheight:16,
}


//draw Mario in Canvas
function drawMarioSprite(){
    marioSprite = new Image();
    marioSprite.src = 'file:///C:/Users/MASTONO ALI/Desktop/img/characters.gif';
    marioSprite.addEventListener('load', e => {
    ctx.drawImage(marioSprite, 
        mario.px, mario.py, mario.pwidth, mario.pheight, 
        mario.cx, mario.cy, mario.cwidth, mario.cheight);
    });
    this.position = function() {
        this.mario.cx += speedX;       
    }
    position();
}//drawMarioSprite() end

//drawTiles and tilesLoop
function drawTiles() {
    tiles = new Image();
    tiles.src = 'file:///C:/Users/MASTONO ALI/Desktop/img/tiles.png';
    tiles.addEventListener('load', e => {
        tilesLoop();
    });
}
function tilesLoop(){
    for (let x = 0; x < 25; x++){
        for (let y = 11; y < 13; y++){
            ctx.drawImage(tiles, 
                0, 0, 26, 26, 
                x*12, y*12, 20, 20);
        }
    }
}//drawTiles() end


function draw(){

    drawMarioSprite();
    drawTiles();
    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);

thank you

\$\endgroup\$
2
  • \$\begingroup\$ What do you mean you "can't clear"? What happens when you try to clear the canvas as has been demonstrated in existing Q&A? \$\endgroup\$
    – DMGregory
    May 31, 2020 at 12:14
  • \$\begingroup\$ @DMGregory, my mario keeps moving but it leaves a copy of mario behind him \$\endgroup\$
    – stanley355
    Jun 1, 2020 at 9:57

1 Answer 1

1
\$\begingroup\$

use ctx.clearRect(0,0,canvas.width,canvas.height);

var canvas = document.getElementById("screen");
var ctx = canvas.getContext("2d");
var mario;
var marioSprite;
var tiles;
var speedX = 1;

//marioSprite Specification
mario = {
    //target picture specification X & Y, Width & Height
    px:276,
    py: 44,
    pwidth: 16,
    pheight: 16,
    //drawing on Canvas specification X & Y, Width & Height
    cx: 16,
    cy: 116,
    cwidth:16,
    cheight:16,
}


//draw Mario in Canvas
function drawMarioSprite(){
    marioSprite = new Image();
    marioSprite.src = 'file:///C:/Users/MASTONO ALI/Desktop/img/characters.gif';
    marioSprite.addEventListener('load', e => {
    ctx.drawImage(marioSprite, 
        mario.px, mario.py, mario.pwidth, mario.pheight, 
        mario.cx, mario.cy, mario.cwidth, mario.cheight);
    });
    this.position = function() {
        this.mario.cx += speedX;       
    }
    position();
}//drawMarioSprite() end

//drawTiles and tilesLoop
function drawTiles() {
    tiles = new Image();
    tiles.src = 'file:///C:/Users/MASTONO ALI/Desktop/img/tiles.png';
    tiles.addEventListener('load', e => {
        tilesLoop();
    });
}
function tilesLoop(){
    for (let x = 0; x < 25; x++){
        for (let y = 11; y < 13; y++){
            ctx.drawImage(tiles, 
                0, 0, 26, 26, 
                x*12, y*12, 20, 20);
        }
    }
}//drawTiles() end


function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height); //HERE 
    drawMarioSprite();
    drawTiles();
    window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
<canvas id="screen"></canvas>

\$\endgroup\$
2
  • \$\begingroup\$ I tried it, but my Canvas went blank, with no image at all \$\endgroup\$
    – stanley355
    Jun 1, 2020 at 9:59
  • \$\begingroup\$ Fix your other issues first. I'm 99% sure that clearRect not working is related to my comment on your other question. gamedev.stackexchange.com/questions/182955/… \$\endgroup\$ Jun 2, 2020 at 5:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .