Memory game in vanilla js

JavaScript
1

Hi,

I am doing memory game based on vanilla js. There is four columns and three rows.
This is my html code:

    <div class="marks">
        <div class="attempts">
            <h2 class="inp_title">attempts</h2>
            <input type="text" name="attempts" class="inp_attempts">
        </div>
        <div class="points">
            <h2 class="inp_title">points</h2>
            <input type="text" name="points" class="inp_points">
        </div>
    </div>
    <button class="restart_btn">restart</button>
</header>
<div class="container">
    <div id="game">
        <div class="col"> 
            <div class="game_square"></div>
            <div class="game_square"></div>
            <div class="game_square"></div>
        </div>
        <div class="col">
            <div class="game_square"></div>
            <div class="game_square"></div>
            <div class="game_square"></div>
        </div>
        <div class="col">
            <div class="game_square"></div>
            <div class="game_square"></div>
            <div class="game_square"></div>
        </div>
        <div class="col">
            <div class="game_square"></div>
            <div class="game_square"></div>
            <div class="game_square"></div>
        </div>
    </div>

This is my JS code:

(function() {
    const numOfSquere = 12;
    const rows = 3;
    let chargedSquares = [];
    let attempts = 0;
    let points = 0;

})


let pictures = [
    'pictures\1.jpg',
    'pictures\2.jpg',
    'pictures\3.jpg',
    'pictures\4.jpg',
    'pictures\5.jpg',
    'pictures\6.jpg'
]

let getSquares = document.getElementsByClassName('.game_square')[0];

getSquares.addEventListener('mouseenter', mouseEnter);
function changeIMG() {
    let randomIMG = Math.floor(Math.random() * pictures.length);
    getSquares.src = pictures[randomIMG];
}

I want to replace two of the “game_square” classes for another images from “pictures” array.
I got error, that addEventListener is not a function.

Additionally, I would like to add green border color when images are the same, and red border when these images don’t fit and hide them.

I used Math.floor(Math.random()) to build fundamental of the game. This is a good idea? Do you recommend smth different?

I will be thankful to get some hints.

2

That likely occurred because the scripting code is running before the HTML code even exists.
It’s a good practice to load your scripting code from the end of the body, just before the </body> tag.

A class name is a good way to show the right and wrong ones. I saw a match tile game someone did recently that used a nice CSS technique to animate the flipping of the tile.

So long as you multiply the random value before flooring, that will work well.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.