Play a matching game using CSS3 to match and check tiles

Currently in the process of creating a game using HTML5 and CSS3.

I'm working with several divs that have hover-activated CSS3 animations. The game itself is a simple matching tiles/cars game, optimized for Chrome as it currently only supports -webkit-. Here's a sneak peek at what I've got so far:

I'm now looking to add game logic, but I'm unsure of the best approach to take.

Is it feasible to simply assign additional ids to the DIVs and use JavaScript to check them?

Any suggestions on how to make the animations trigger on click events? Or perhaps even better, on tap events for iPad users?

Appreciate any advice you can provide!

htmlcsswebkit

Answer №1

If you want to manipulate CSS3 animations with Javascript, the most effective approach is usually to define the animation style within a class and then apply that class in the onClick event handler.

You can utilize animation events to recognize when the animation has finished and remove the class accordingly, allowing the animation to restart with subsequent events. Alternatively, you could simply check in each onClick event whether the class has already been applied, and if so, remove it before reapplying.

Even if you are using a Webkit-based browser, don't forget that the Mozilla Developer Reference CSS Animations Page remains a valuable resource - just remember to switch out the -moz- vendor prefix for -webkit- ;-)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unusual scroll functionality in Internet Explorer when checkboxes are within a scrollable container

I am working with a "multiselect" control that is being dynamically generated by a custom tag, resulting in long id names: <div class="default-skin-outer" id="myMapSelect_multiSelectOuterDiv"> <div class="default-control" id="myMapSelect_mult ...

cssinternet-explorerinternet-explorer-8scrollvertical-scrolling

Python tutorial: Executing onclick values with a click

I'm currently working on writing some Selenium Python code and I have a question. The website I am testing has multiple time slots available, and I am attempting to simulate a mouse click specifically geared towards the 8:30-11:30 timeslot. Below is ...

pythonhtmlpython-3.xseleniumselenium-webdriver

Flask Modal fails to function properly in the absence of table data

I'm currently troubleshooting an issue with my modal on a Flask web app that utilizes a SQLite database. When trying to add new rows to the table using some JavaScript code, everything works perfectly unless the table is empty. In that case, I am unab ...

javascriptpythonhtmlcssflask

Having trouble extracting data from Moz Bar through selenium using Python?

Having trouble retrieving the spam score from Moz bar using Selenium WebDriver? I've attempted various methods such as XPath, class, and tag name without success. Any assistance would be greatly appreciated: from selenium.webdriver.common.by import By ...

pythonhtmlcssselenium-webdriverselenium-chromedriver

A guide on configuring Flexbox to consistently display three columns

For the website I'm working on, I've utilized Flexbox to properly align the items. Within the div .main, I have organized the content in separate divs. These are the CSS properties that I've applied: .main{ margin: 0 auto; /*max-height: ...

cssflexbox

A step-by-step guide on using Jquery to fade out a single button

My array of options is laid out in a row of buttons: <div class="console_row1"> <button class="button">TOFU</button> <button class="button">BEANS</button> <button class="button">RIC ...

javascriptjqueryhtmlcssfadeout

What is the method for creating a hover line that perfectly mirrors the length of text above it?

I'm interested in creating a hover effect where a line appears above my text when hovering over it. The twist is, I want the hover line to match the length of each individual text. This effect will be applied to the navigation section of my HTML. Her ...

htmlcss

Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

I'm attempting to create a numbered order list with a circular border around it. The goal is to have the number of the list item centered within the circular border and the entire circle centered within the paragraph. Currently, both the number and th ...

htmlcss

Move the Form to the Top of the Window and Highlight the First Input Field

There's a link in the header that says "Let's chat": <div class="letstalk"> <a href="javascript:scrollForm();"> Let's chat <img src="/wp-content/uploads/link-icon.png"> </a> </div> ...

javascripthtml

Tips for linking a CSS file in a Wordpress child theme stored in a separate directory with a unique filename

I'm seeking clarification on a common WordPress practice. When working with child themes, the style.css file is typically located in the root folder of the theme. In my functions.php file, I have been using the following code: <?php add_action( & ...

phpcsswordpressthemes

Enhancing Visuals within XSL+XML Documents

Currently, I am working on a project for one of my classes that involves showcasing film information loaded from an XML document. While researching similar questions, I found the answers to be confusing and the solutions did not yield any results. My goal ...

htmlxmlimagexslt

Ensuring that a header one remains on a single line

Within this div, I have set the width and height to be 250px. Specifically, the h1 element inside the div has a height of 50px. Users who are updating content on my website can input any text they desire within this box. However, when the text within the ...

htmlcss

Could anyone provide some insight into the reason behind this occurrence?

I just came across the most peculiar situation I've ever experienced. Check out this unique test page: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script language=javascript> fun ...

javascripthtml

Retrieve selected value from HTML input with datalist and use it as an argument in a method

I have a datalist in my HTML input where I need to pass the selected value into JavaScript / Angular. It must be passed because the datalist is being used in an HTML table with multiple entries. Most examples I've come across show how to grab the valu ...

javascripthtmlangularjs

How can I limit the displayed content of a div to just the initial lines (clamping)?

I have a collection of divs that showcase previews of lengthy documents. These documents utilize various font styles, resulting in inconsistent line heights. An example can be seen here: http://jsfiddle.net/z56vn/ My goal is to display only the initial fe ...

javascriptjqueryhtmlcss

Ways to Create a Webpage with a Single Color Palette

Struggling to update the background color on my webpage and hitting a wall. Even with content, the black background only extends as far as the content does. I've experimented with extending the content, using the body selector, and universal selector ...

htmlcss

Stencil - React Integration Does Not Support Global CSS Styling

As per the guidance provided in the Stencil docshere, I have established some global CSS variables within src/global/variables.css. This file is currently the sole CSS resource in this particular directory. Upon attempting to incorporate my components int ...

javascriptcssreactjsstenciljsstencil-component

Modify a section of an HTML text's formatting

function changeEveryCharColor(id) { var part; var whole = ""; var cool1 = document.getElementById(id).innerHTML; console.log(cool1); for(var i = 0; i < cool1.length; i++) { color1 = getRandomInt(255); ...

javascripthtmlcss

What is the syntax for using escape characters in Vue?

Looking to create a website similar to CodePen? I have developed a library of assets including buttons, cards, and effects, all built using vue.js. Each asset includes HTML, CSS, and sometimes JS code. In my vanilla JS version, I formatted the code using e ...

htmlvue.jswebescaping

What causes my animation to “reset” upon adding a new element using innerHTML?

One of the functionalities on my webpage involves a script that inserts a div called "doge" using innerHTML when a button is clicked. Additionally, there is a CSS keyframes animation applied to another div on the same page. However, whenever the button is ...

javascripthtmlcssinnerhtml