3
\$\begingroup\$

I am coding a game, and I need to detect the color of a rectangles on a canvas, by moving a character and touching them, so that a message will be displayed "this is magenta" and so on. Please find below the game and my coding, so that you will better understand me:

jsFiddle

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");


/*moving grey character*/
var xPos = 0;
var yPos = 0;

var bucketWidth = 100;
var bucketHeight = 10;

context.fillStyle = "grey";
context.fillRect(xPos, yPos, bucketWidth, bucketHeight);
context.strokeRect(xPos, yPos, bucketWidth, bucketHeight);

/*static red character*/
var xPos2 =  canvas.width / 2;
var yPos2 =  canvas.height / 2;

var bucketWidth2 = 100;
var bucketHeight2 = 10;

context.fillStyle = "red";
context.fillRect(xPos2, yPos2, bucketWidth2, bucketHeight2);

/*static magenta character*/

var bucketWidth3 = 100;
var bucketHeight3 = 10;

var xPos3 =  canvas.width / 2;
var yPos3 =  - bucketHeight3 - bucketHeight3 + canvas.height / 2;

context.fillStyle = "magenta";
context.fillRect(xPos3, yPos3, bucketWidth3, bucketHeight3);

/*Function to move the grey character from left to right and from top to button*/

function move(e){

if (e.keyCode === 37 && xPos > 0 && xPos <= canvas.width-bucketWidth){
    xPos -= bucketWidth;
} else if (e.keyCode === 39 && xPos >= 0 && xPos < canvas.width-bucketWidth){
    xPos += bucketWidth;
}  else if (e.keyCode === 40 && yPos >= 0 && yPos < canvas.height-bucketHeight){/*down arrow*/
    yPos += bucketHeight;
}  else if (e.keyCode === 38 && yPos > 0 && yPos <= canvas.height-bucketHeight){ /*up arrow*/
    yPos -= bucketHeight;
}



canvas.width= canvas.width;


context.fillStyle = "grey";
context.fillRect(xPos, yPos, bucketWidth, bucketHeight);
context.strokeRect(xPos, yPos, bucketWidth, bucketHeight);


context.fillStyle = "red";
context.fillRect(xPos2, yPos2, bucketWidth2, bucketHeight2);


context.fillStyle = "magenta";
context.fillRect(xPos3, yPos3, bucketWidth3, bucketHeight3);



}

document.onkeydown = move;

By the way, I was told to use the function getImageData(), but I could not apply the function by moving the character. Somebody send me an example, but it is working by using the mouse and jQuery was used, but I am not allowed to use jQuery. Please see this link.

\$\endgroup\$
1
\$\begingroup\$

Reading the color on the canvas is not the right way to proceed, for several reasons :

  1. You want the color string (expl : 'red'), not the r,g,b values provided by getImageData (expl : 255, 0, 0) .
  2. You can't draw the buckets with gradient or color animation with such a method.

Anyway you are the one handling the buckets, so what about keeping them all within a nice Object ?
And what about going Object for the buckets also ? You'll have great flexibility to change anything to your buckets later.

Below I define a BucketGrid class that will handle the buckets, and a Bucket class that holds data relative to a bucket.

http://jsfiddle.net/gamealchemist/ydtkbzoc/6/

BucketGrid Class :

function BucketGrid(columnCount, rowCount, bucketWidth, bucketHeight) {
    var buckets = [];
    this.columnCount = columnCount;
    this.rowCount = rowCount;
    this.bucketWidth = bucketWidth;
    this.bucketHeight = bucketHeight;

    this.getBucket = function (column, row) {
        return buckets[column + row * columnCount];
    }

    this.setBucket = function (column, row, bucket) {
        bucket.column = column;
        bucket.row = row;
        buckets[column + row * columnCount] = bucket;
    }

    this.insertNewBucket = function (column, row, color) {
        this.setBucket(column, row, new Bucket(this, color));
    }

    this.isValidPosition = function (column, row) {
        return ((column >= 0) && (column < this.columnCount) && (row >= 0) && (row < this.rowCount));
    }

    this.draw = function (context) {
        for (var i = 0; i < buckets.length; i++) {
            var thisBucket = buckets[i];
            if (thisBucket) thisBucket.draw(context);
        }
    }

}

Bucket Class :

function Bucket(owner, color) {
    this.owner = owner;
    this.column = 0;
    this.row = 0;
    this.color = color;

    this.draw = function (context) {
        var owner = this.owner,  bw = owner.bucketWidth,  bh = owner.bucketHeight;
        context.fillStyle = this.color;
        context.strokeStyle = '#000';
        context.save();
        context.translate(this.column * bw, this.row * bh);
        context.fillRect(0, 0, bw, bh);
        context.strokeRect(0, 0, bw, bh);
        context.restore();
    }
}

Setup :

var buckets = new BucketGrid(4, 38, 100, 10);

buckets.insertNewBucket(2, 20, 'red');
buckets.insertNewBucket(2, 21, 'magenta');

/*moving grey character*/
var hero = new Bucket(buckets, 'grey');

Handlers :

/*Function to move the grey character from left to right and from top to button*/
function move(e) {
    var keyCode = e.keyCode;
    switch (keyCode) {
        case 37:
            if (buckets.isValidPosition(hero.column - 1, hero.row)) hero.column--;
            break;
        case 39:
            if (buckets.isValidPosition(hero.column + 1, hero.row)) hero.column++;
            break;
        case 40:
            /*down arrow*/
            if (buckets.isValidPosition(hero.column, hero.row + 1)) hero.row++;
            break;
        case 38:
            /*up arrow*/
            if (buckets.isValidPosition(hero.column, hero.row - 1)) hero.row--;
            break;
    }
    var hovered = buckets.getBucket(hero.column, hero.row);
    colorDiv.innerHTML = hovered ? hovered.color : 'none';

    drawScene();
}

function drawScene() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    buckets.draw(context);
    hero.draw(context);
}

launch the game :

var canvas = document.getElementById("canvas");
var colorDiv = document.getElementById('whichColor');
var context = canvas.getContext("2d");

document.onkeydown = move;
drawScene();
\$\endgroup\$
  • \$\begingroup\$ You're welcome ! (and might upvote/accept). \$\endgroup\$ – GameAlchemist Dec 26 '14 at 16:10

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.