/    Sign up×
Community /Pin to ProfileBookmark

match 3 game in Javascript

In the http://rembound.com/articles/how-to-make-a-match3-game-with-html5-canvas, i was able to follow the instructions and make the match 3 game tiles, i want to then make images appear on the tiles, having different images on different color tiles, i wanted to someting like
if (tilecolors==(255,128,128)){
display the images on the tiles
}
but i tried all the ways of displaying images and the code for the whole game crashes, i don’t know how, is there anyone that can help me with the code?
Thanks

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumDec 22.2019 — The author of the tutorial you link to references another Tutorial about loading and displaying images on a canvas. Did you read this? Didn't it help you?

the code for the whole game crashes[/quote]
Do you already know about the developer tools of your browser? It will help you to locate and fix errors in your code.
Copy linkTweet thisAlerts:
@zhanzhaoauthorDec 22.2019 — @Sempervivum#1612098 it works when done separately, but when I join it into the part where i want it on the tiles, nothing shows up. and there isn't any error message in console either, so i am not sure what went wrong.
Copy linkTweet thisAlerts:
@SempervivumDec 22.2019 — My own approach would be to draw the image in function drawTile(). And preload the image by creating an image object.

Please post your attempt. Not the complete javascript, only the sections you added or changed.
Copy linkTweet thisAlerts:
@zhanzhaoauthorDec 22.2019 — @Sempervivum#1612100

html

<img id="lhd" src="lhd.jpg" alt="lhd" width="304" height="228">

javascript
//there are code that sets the tiles color in array

<i> </i>var x = document.getElementById("lhd").src;
// Check if there is a tile present
if (level.tiles[i][j].type &gt;= 0) {
// Get the color of the tile
var col = tilecolors[level.tiles[i][j].type];
<br/>
<i> </i> // Draw the tile using the color
<i> </i> drawTile(coord.tilex, coord.tiley, col[0], col[1], col[2]);
<i> </i> if (tilecolors==(225,128,128)){
<i> </i> //notsure what to put here to show images
<i> </i> document.getElementById("lhd").innerHTML = x;

<i> </i> }
<i> </i> }

The image appears but because of the html so it's on the side, the tiles have nothing on it. Is there anything that i did wrong?

Edited by site staff: Inserted code tags `your code here`
Copy linkTweet thisAlerts:
@SempervivumDec 22.2019 — //notsure what to put here to show images[/quote]
You can draw images on the canvas by use of the function drawImage():

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

I recommend to create a new array that contains the URLs of the images:
// All of the different tile colors in RGB
var tilecolors = [[255, 128, 128],
[128, 255, 128],
[128, 128, 255],
[255, 255, 128],
[255, 128, 255],
[128, 255, 255],
[255, 255, 255]];
<br/>
// URLs of the tile images
var tileimgurls =[
'images/img-for-tile-0.jpg',
'images/img-for-tile-1.jpg',
'images/img-for-tile-2.jpg',
'images/img-for-tile-3.jpg',
'images/img-for-tile-4.jpg',
'images/img-for-tile-5.jpg',
'images/img-for-tile-6.jpg'
];
// Objects of the tile image
var tileimgobjs = [];

Then you can easily get the URL of the image in the code you posted:
if (level.tiles[i][j].type &gt;= 0) {
// Get the color of the tile
var col = tilecolors[level.tiles[i][j].type];
// Get the image of the tile
var img = tileimgobjs[level.tiles[i][j].type];
<br/>
<i> </i> // Draw the tile using the color and the image
<i> </i> drawTile(coord.tilex, coord.tiley, col[0], col[1], col[2], img);

Now you can easily draw the image on the canvas in function drawTile().
Copy linkTweet thisAlerts:
@SempervivumDec 22.2019 — PS: For drawing an image on the canvas an image object is necessary. Try to create these objects in the empty array tileimgobjs.
Copy linkTweet thisAlerts:
@zhanzhaoauthorDec 22.2019 — @Sempervivum#1612102 ok, i tried this, but is this the full code that i need casuse nothing is showing up. (sorry, i am kind of new to this so i might need the full qoute or insturctions )
Copy linkTweet thisAlerts:
@SempervivumDec 23.2019 — No, this is not the full code. As I mentioned you need to
  • 1. Create image objects

  • 2. Draw the images in function drawTile

    Both is clearly described in the link I posted.

    Till now I didn't mention that you have to wait until all images are loaded before drawing on the canvas. This procedure is described in the subsequent tutorial:

    http://rembound.com/articles/how-to-load-and-draw-images-with-html5-canvas
  • ×

    Success!

    Help @zhanzhao spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...