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

Improve this question
\$\endgroup\$
  • \$\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 '20 at 12:14
  • \$\begingroup\$ @DMGregory, my mario keeps moving but it leaves a copy of mario behind him \$\endgroup\$ – spectre Jun 1 '20 at 9:57
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>

Improve this answer
\$\endgroup\$
  • \$\begingroup\$ I tried it, but my Canvas went blank, with no image at all \$\endgroup\$ – spectre Jun 1 '20 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\$ – vassildador Jun 2 '20 at 5:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.