Jump to content

making collectibles in canvas game


Thunderfist
 Share

Recommended Posts

I've gotten most of my game done, but I still have to make at least something that the player can do other that walk around the map and bump into things. I decided to add coins to collect, but I just have one problem: I've never added collectibles to a game before. Please help. I need to get this done in before next Friday.

 

EDIT:

 

I tried coding, but a coin wouldn't spawn anywhere other than the upper left corner.

I tried setting its draw setting to this.randomRange, so it would spawn randomly on the map.

Here's the code:

//establish variables


var canvasBg = document.getElementById("canvasBg"),
    ctxBg = canvasBg.getContext("2d"),
    canvasEntities = document.getElementById("canvasEntities"),
    ctxEntities = canvasEntities.getContext("2d"),
    canvasWidth = canvasBg.width,
    canvasHeight = canvasBg.height,
    player1 = new Player(),
    isPlaying = false,
    cash = new collectibles(),
    obstacles = [],
    //animation
    requestAnimFrame = window.requestAnimationFrame ||
                       window.webkitRequestAnimationFrame ||
                       window.mozRequestAnimationFrame ||
                       window.oRequestAnimationFrame ||
                       window.msRequestAnimationFrame ||
                       function (callback) {
            window.setTimeout(callback, 1000 / 60);
        },
    
    imgSprite = new Image();
    imgPlayer = new Image();
    imgMoney = new Image();
imgSprite.src = "img/testroomImage.png";
imgSprite.addEventListener("load", init, false);
imgPlayer.src = "img/temp.png";
imgPlayer.addEventListener("load", init, false);
imgMoney.src = "img/coin.png";
imgMoney.addEventListener("load", init, false);

function init() {
    document.addEventListener("keydown", function(e) {checkKey(e, true);}, false);
    document.addEventListener("keyup", function(e) {checkKey(e, false);}, false);
    defineObstacles();
    begin();
}
 
function begin() {
    ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
    isPlaying = true;
    requestAnimFrame(loop);
}

function update() {
    clearCtx(ctxEntities);
    player1.update();
    cash.update();
}

function draw() {
    player1.draw();
    cash.draw();
}

function loop() {
    if (isPlaying) {
        update();
        draw();
        requestAnimFrame(loop);
    }
}

function clearCtx(ctx) {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
}

function randomRange(min, max) {
    return Math.floor(Math.random() * (max + 1 - min)) + min;
}

function Player() {
    this.srcX = 48;
    this.srcY = 1;
    this.width = 31; //how wide the sprite is in pixels
    this.height = 35; //how tall the sprite is in pixels
    this.drawX = 125;
    this.drawY = 50;
    this.moveX = 31;
    this.moveY = 35;
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
    this.speed = .60;
    this.isUpKey = false;
    this.isRightKey = false;
    this.isDownKey = false;
    this.isLeftKey = false;
    

}

Player.prototype.update = function () {
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
    this.checkDirection();
};

Player.prototype.draw = function () {
    ctxEntities.drawImage(imgPlayer, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);
};

Player.prototype.checkDirection = function () {
    var newDrawX = this.drawX,
        newDrawY = this.drawY,//draw specific specific points on x and y coordinates
        //newMoveX = this.moveX,
        //newMoveY = this.moveY;
        obstacleCollision = false;
    if (this.isUpKey) {
        newDrawY -= this.speed;
        //newMoveY -= this.speed;
        //this.moveY -= 35;
        this.srcX = 48; //Facing North
        this.srcY = 72;
    } else if (this.isDownKey) {
        newDrawY += this.speed;
        //newMoveY += this.speed;
        //this.moveY += 35;
        this.srcX = 48; //Facing South
        this.srcY = 1;
    } else if (this.isRightKey) {
        newDrawX += this.speed;
        //newMoveX += this.speed;
        //this.moveX += 31;
        this.srcX = 48; //Facing East
        this.srcY = 36;
    } else if (this.isLeftKey) {
        newDrawX -= this.speed;
        //newMoveX -= this.speed;
        //this.moveX -= 31;
        this.srcX = 48; //Facing West
        this.srcY = 108;
    }
    
    obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY);
    
    if (!obstacleCollision) {
        this.drawX = newDrawX;
        this.drawY = newDrawY;
    }
};



Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) {
    var obstacleCounter = 0,
        newCenterX = newDrawX + (this.width / 2),
        newCenterY = newDrawY + (this.height / 2);
    for (var i = 0; i < obstacles.length; i++) {
        if (obstacles[i].leftX < newCenterX &&
            newCenterX < obstacles[i].rightX &&
           obstacles[i].topY -20 < newCenterY &&
           newCenterY < obstacles[i].bottomY - 20) {
            obstacleCounter = 0;
        } else {
            obstacleCounter++;
        }
    }

if (obstacleCounter === obstacles.length) {
    return false;
    } else {
    return true;
    }
};

function Obstacle(x, y, w, h) {
    this.drawX = x;
    this.drawY = y;
    this.width = w;
    this.height = h;
    this.leftX = this.drawX;
    this.rightX = this.drawX + this.width;
    this.topY = this.drawY;
    this.bottomY = this.drawY + this.height;
}

function defineObstacles() {
    var tEdgeWidth = 512,
    tEdgeHeight = 10;
    
    var bEdgeWidth = 512,
    bEdgeHeight = 10;
    
    var rEdgeWidth = 1,
    rEdgeHeight = 512;
        
    var lEdgeWidth = 1,
    lEdgeHeight = 512;
        
    var bigFenceLeftSideWidth = 20,
    bigFenceLeftSideHeight = 304;
        
    var bigFenceRightSideWidth = 22,
    bigFenceRightSideHeight = 304;
    
    var bigFenceUpperLeftWidth = 160,
    bigFenceUpperLeftHeight = 30,
    bigFenceUpperRightWidth = 140,
    bigFenceUpperRightHeight = 30;
        
    var bigFenceLowerLeftWidth = 100,
    bigFenceLowerLeftHeight = 20,
    bigFenceLowerRightWidth = 195,
    bigFenceLowerRightHeight = 20;
        
    var smallFenceSideWidth = 4,
    smallFenceSideHeight = 80;
        
    var rockWidth = 34,
    rockHeight = 32;
        
    var smallInclineWidth = 89,
    smallInclineHeight = 42;
        
    var largeInclineRWidth = 153,
    largeInclineRHeight = 55;
    
    var largeInclineLWidth = 176,
    largeInclineLHeight = 58;
        
    var leftHoleWidth = 64,
    leftHoleHeight = 48;
        
    var rightHoleLongWidth = 113,
    rightHoleLongHeight = 48;
        
    var rightHoleTallWidth = 43,
    rightHoleTallHeight = 99;
    
    
    
    obstacles = [new Obstacle(10, 25, tEdgeWidth, tEdgeHeight),
                 new Obstacle(10, 512, bEdgeWidth, bEdgeHeight),
                 new Obstacle(499, 1, rEdgeWidth, rEdgeHeight),
                 new Obstacle(14, 1, lEdgeWidth, lEdgeHeight),
                 new Obstacle(2, 229, bigFenceLeftSideWidth, bigFenceLeftSideHeight),
                 new Obstacle(320, 229, bigFenceRightSideWidth, bigFenceRightSideHeight),
                 new Obstacle(10, 212, bigFenceUpperLeftWidth, bigFenceUpperLeftHeight),
                 new Obstacle(200, 212, bigFenceUpperRightWidth, bigFenceUpperRightHeight),
                 new Obstacle(15, 499, bigFenceLowerLeftWidth, bigFenceLowerLeftHeight),
                 new Obstacle(144, 499, bigFenceLowerRightWidth, bigFenceLowerRightHeight),
                 new Obstacle(90, 403, rockWidth, rockHeight),
                 new Obstacle(184, 291, smallInclineWidth, smallInclineHeight),
                 new Obstacle(15, 165, leftHoleWidth, leftHoleHeight),
                 new Obstacle(258, 165, rightHoleLongWidth, rightHoleLongHeight),
                 new Obstacle(335, 162, rightHoleTallWidth, rightHoleTallHeight),
                 new Obstacle(97, 170, rockWidth, rockHeight),
                 new Obstacle(73, 195, rockWidth, rockHeight),
                 new Obstacle(0, 115, largeInclineLWidth, largeInclineLHeight),
                 new Obstacle(192, 115, largeInclineRWidth, largeInclineRHeight),
                 new Obstacle(120, 175, rockWidth, rockHeight),
                 new Obstacle(215, 170, rockWidth, rockHeight),
                 new Obstacle(233, 187, rockWidth, rockHeight),
                ];
}

function checkKey(e, value) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38) { //up arrow
        player1.isUpKey = value;
        e.preventDefault();
    }
    if (keyID === 39) { //right arrow
        player1.isRightKey = value;
        e.preventDefault();
    }
    if (keyID === 40) { //down arrow
        player1.isDownKey = value;
        e.preventDefault();
    }
    if (keyID === 37) { //left arrow
        player1.isLeftKey = value;
        e.preventDefault();
    }
    if (keyID === 32) { //spacebar
        player1.isSpacebar = value;
        e.preventDefault();
    }
};

function collectibles () {
    this.srcX = 0;
    this.srcY = 0;
    this.width = 20; //how wide the sprite is in pixels
    this.height = 20; //how tall the sprite is in pixels
    this.drawX = randomRange;
    this.drawY = randomRange;
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
}

collectibles.prototype.update = function () {
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
};

collectibles.prototype.draw = function () {
    ctxEntities.drawImage(imgMoney, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);
};

function outOfBounds(a, x, y) {
    var newBottomY = y + a.height,
        newTopY = y,
        newRightX = x + a.width,
        newLeftX = x,
        edgeTop = 512,
        edgeBottom = 0,
        edgeRight = 512,
        edgeLeft = 0;
    return newBottomY > edgeBottom ||
        newTopY < edgeTop ||
        newRightX > edgeRight ||
        newLeftX < edgeLeft;
}

What's wrong with it? just editing it in the slightest made the coin disappear when I refreshed the page.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...