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
@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.
@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.
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 >= 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`
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 >= 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().
@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.
@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 )
@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: