javascript - puntos - ¿Cómo puedo crear una función para dibujar un sprite en el lienzo?

figuras en canvas html5

Question

Necesito crear la función sprite() con canvas en javascript Tengo 2 códigos para crear un sprite:

var width = 40,
    height = 28,
    frames = 2,

    currentFrame = 0,

    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    image = new Image()
    image.src = ''http://s28.postimg.org/k90gybbtl/bird_Sprite.png'';

var draw = function(){
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height);

    if (currentFrame == frames) {
      currentFrame = 0;
    } else {
      currentFrame++;
    }
}

setInterval(draw, 120);

Tengo otro código para el juego simple:

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myUpBtn = new component(canvasWidth, canvasHeight, "rgba(0, 0, 0, 0)", 0, 0); 
    myGameArea.start();
}

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
      this.image = new Image();
      this.image.src = color;
    }
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
                if (type == "image") {
                    ctx.drawImage(this.image, 
                    this.x, 
                    this.y,
                    this.width, this.height);
                } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }
    }
        this.clicked = function() {
        var mytop = this.y;

        var clicked = true;
        if (mytop > myGameArea.y) {
            clicked = false;
        }
        return clicked;
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
} // https://www.w3schools.com/graphics/game_images.asp

etc ... ahora el problema es ...

No puedo hacer los 2 códigos juntos

¿Alguien puede ayudarme?

gracias :)

Answer 1

El siguiente código agrega tu sprite al código del juego de W3 Schools:

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(40, 28, "red", 10, 120, "sprite");
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;

    if (type === "sprite") {
        this.currentFrame = 0;
        this.frames = 2;
        this.tickCount = 0;
        this.ticksPerFrame = 4;
        this.image = new Image();
        this.image.src = ''http://s28.postimg.org/k90gybbtl/bird_Sprite.png'';
    }

    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else if (this.type == "sprite") {
            if (this.tickCount > this.ticksPerFrame) {
                ctx.drawImage(this.image, 0, this.height * this.currentFrame, this.width, this.height, this.x, this.y, this.width, this.height);

                this.tickCount = 0;

                if (this.currentFrame == this.frames) {
                    this.currentFrame = 0;
                } else {
                    this.currentFrame++;
                }
            } else {
                ctx.drawImage(this.image, 0, this.height * this.currentFrame, this.width, this.height, this.x, this.y, this.width, this.height);
                this.tickCount++;
            }
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function accelerate(n) {
    myGamePiece.gravity = n;
}

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

<body onload="startGame()">
  <br>
  <button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
  <p>Use the ACCELERATE button to stay in the air</p>
  <p>How long can you stay alive?</p>
</body>

En resumen:

• Dentro de la función component inicializamos variables para manejar la animación de sprite si el parámetro de type está configurado para sprite
• Dentro de la función de update solo dibujamos el siguiente fotograma de la animación de sprite cada 4ta vez que se llama a la update . Esto asegura que la animación del sprite no se reproduce rápidamente
• A continuación, incrementamos o restablecemos el recuento de currentFrame del mismo modo que antes en su código original
• Si no estamos listos para mostrar el siguiente fotograma en la animación de sprite, solo mostramos el fotograma existente nuevamente.

Para llevarlo más lejos, es posible que desee considerar la refacturación de mi solución para que el sprite sea una "clase" separada que herede su funcionalidad principal del component .