How about incorporating a cool card flip animation into this JavaScript card game?

I've been experimenting with a card game and I'm interested in adding a card flip animation to it.

I searched online for solutions, but most of them involve jquery (which I'd rather not use for just one animation) or CSS3 (I found this example interesting). Unfortunately, I didn't have much success with these options.

The javascript game includes the following code (from cardgamecore.js):

playingCard.redrawCardImage() - Forces a card to redraw

playingCard.showFace(bool: face) - Sets the card to be either face up or face down, and redraws if necessary. true = face up, false = face down.

playingCard.prototype.redrawCardImage = function () {
    // Set or change the image showing on the card face
    if( !this.faceImage || !this.cardSet.backImage ) { return; }
    // Bug in Firefox - alt attributes do not change unless they are made _before_ an SRC change
    this.cardImage.setAttribute('alt',this.wayup?(this.cardSet.cardNames[this.number-1]+' '+this.suit):this.cardSet.cardWord);
    this.cardImage.src = this.wayup ? this.faceImage : this.cardSet.backImage;
};

playingCard.prototype.showFace = function (oWhich) {
    // Used to flip a card over
    if( this.redrawNewImage != oWhich ) {
        this.wayup = oWhich;
        this.redrawCardImage();
    }
};

So when a card is facing down, then playingCard.showFace = false. When you click on it, playingCard.showFace = trueand the image gets redrawn. At this point, I want to add a smooth flip animation to the card.

But how can I achieve this effect?

javascriptcssanimationcss-animations

Answer №2

While working on a card game, I came across this interesting way to design the cards:

To create a card, you can use the following HTML code:

<div class='card' >
   <div class='faces'>
       <div class='face front'> Hello</div>
       <div class='face back'>Goodbye</div>
   </div>
</div>

In your CSS styling, ensure that both faces are defined, but only one will be displayed at a time:

.card {
  -webkit-perspective: 800;
   width: 50%;
   height: 300px;
   position: relative;
   margin: 3px;
   float:left; /*if you want more than one card in a line*/
}
.card .faces.flipped {
  -webkit-transform: rotatey(-180deg); /* This enables the card flip effect */
}
/* Additional CSS styles for the card faces and their behavior */

To implement the functionality of flipping the card, simply add a 'flipped' class using jQuery:

$(".card").on('click',function(){
      $(this).children('.faces').toggleClass('flipped');
  });

For a live demonstration, check out this FIDDLE link.

Answer №3

I reached out to the script's creator and was informed that achieving this task would require a significant rewrite of the existing code. As a result, we can consider this question resolved. Thank you to everyone who attempted to assist me with this issue.

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

Navigating through the DOM using JavaScript or regular expressions

I have a DOM string called innerHTML and I am looking to extract or display the node value using either JavaScript's DOM API or JavaScript RegEx. "<nobr> <label class="datatable-header-sortable-child" onmousedown="javascript:giveFeedback(&ap ...

javascriptregex

Establishing verification of a client-side application to a REST API through CORS using a local strategy

The Challenge: Providing a secure API for a client-side application using only local authentication methods. The missing piece of the puzzle is represented by the red arrows. Situation: In this scenario, client.example.com sends a POST request to a ...

javascriptnode.jsangularjs

AngularJS: How to automatically scroll to the bottom of a div

I cannot seem to scroll to the last message in my chat window. var app=angular.module('myApp', ['ngMaterial'] ); app.controller('ChatCtrl', function($window, $anchorScroll){ var self = this; self.messageWindowHeight = p ...

javascriptcssangularjsscrollangular-material

Troubleshooting issue with JavaScript promise not functioning properly using resolve() method

I encountered an issue with promise usage in JavaScript. My objective was to retrieve data from firebase, store the results in an array, and then perform sorting on that array. Below is my code snippet: let promise = new Promise((resolve, reject) => ...

javascriptarraysfor-loopasynchronouspromise

Is there a way to import TypeScript modules from node_modules using browserify?

After successfully running tsc, I am facing difficulty understanding how to import TypeScript modules from node modules. The crucial section of my gulp file is as follows: gulp.task('compile-ts', ['clean'], function(){ var sourceTsF ...

javascriptnode.jstypescriptgulptsify

Issues arise when attempting to make a SOAP request in NodeJS, as opposed to PHP where it functions seamlessly

As I work on integrating a SOAP-API to access data, I encounter an error when trying to implement it in my ExpressJS-Service using NodeJS. The API documentation provides examples in PHP, which is not my preferred language. My PHP implementation works flawl ...

javascriptphpnode.jsexpresssoap

How to transfer data using props through the ":to" attribute of a router link in Vue.js

I am facing an issue with creating a router-link in Vue and passing a route name as a prop. What I am trying to achieve is the following: <template> <div> <router-link :to="myProps">Login</router-link> </div> </tem ...

javascriptvue.jsvue-routervue-props

Obtaining Relative Values within Every Iteration using jQuery

I'm currently facing an issue with retrieving relative values within a .each() loop using jQuery. I have a set of table rows that contain a text input and a radio button each. My objective is to iterate through each row and save the value of the text ...

javascriptjqueryloopsforeach

Using a combination of Javascript and PHP to dynamically update the innerHTML of multiple elements

I am working on updating the innerHTML of a webpage using Javascript after an onclick event. In my java.js file, I am utilizing this code to access a PHP page that echoes back the text for updating the innerHTML. The issue arises when attempting to update ...

phpjavascriptajax

The clash between mototools and JavaScript is causing both to be non-operational

I am currently facing a conflict between JavaScript and Mototools in my project. I have heard about the NoConflict script, but I'm not sure how to implement it properly. I will provide the code for both dependencies so that someone can explain it to m ...

javascriptjqueryshared-librariesmootoolsconflict

What sets minifying CSS apart from compressing CSS?

Recently, I was focused on enhancing my website's performance and decided to run a google developer performance test. The results were positive overall, but the google analyzer recommended compressing the CSS files for even better performance. Up unt ...

htmlcssperformanceperformance-testing

What is the proper technique for inserting a variable into the header portion of a v-data-table from a JavaScript file?

I'm currently developing an application using Vue.js with datatables. I need to display the headers of a v-data-table component, and ideally, I would like to pass a variable that can be dynamic based on the language selected on the page. Below is the ...

javascriptvue.jsdatatablefrontendvuetify.js

What are the best practices for managing NVM in a live production setting?

Currently, I am developing a Sails web application using NVM. I have successfully installed node v0.12.7 through NVM and use this particular version to power the website. nvm use 0.12.7 sails lift Sails typically runs on port 1337, but for production pur ...

javascriptnode.jssails.jsiptablesports

Could the `<script src="show.js"></script>` code pose a threat?

Upon delivering a webpage, a software engineer included the subsequent line of code towards the end: <script src="show.js"></script> We are uncertain if adding this code to our webpage poses any risks. What could be the legitimate reason behi ...

javascriptjqueryhtml

"Oops! Looks like there is an issue with the configuration of the builder. Try running `npm run storybook

Encountering an error when attempting to execute npm run storybook following what seems like a smooth installation of Alpha 7. Any suggestions on where to begin troubleshooting this issue? https://i.sstatic.net/EEFx4.png ...

javascriptnpmstorybook

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

javascripthtmlioscssmobile

Creating a tree-view in Vue.js that includes clickable components which trigger a Vue.js modal to open up

I have a unique requirement to implement a tree-view feature in Vue-JS for displaying JSON data. However, I need to enhance this by triggering a VueJS modal when any of the data fields in the JSON view are clicked. I have explored various npm modules that ...

javascriptnpmvue.js

Error: The function subscribe in _store_js__WEBPACK_IMPORTED_MODULE_12__.default is not supported

In my main App component, I am subscribing to the store in a normal manner: class App extends Component { constructor(props) { super(props) this.state = {} this.unsubscribe = store.subscribe(() => { console.log(store.getState()); ...

javascriptreactjsnpmreact-reduxredux-saga

Resizing a div dynamically based on its parent's position using JavaScript

I've been working on a code to dynamically resize multiple divs. The original code only resized one element, but I modified it to handle multiple div resizers. However, I'm facing an issue where there is a gap between the mouse and the div while ...

javascripthtmlcssresize

Unable to access the function this.context.getStore in ReactJS Stores due to an error

I currently have the following code: import React from 'react'; import FilterButton from './FilterButton'; import FilterJobsScreen from '../../actions/jobs-screen/FilterJobsScreen'; import JobStore from '../../stores/Jo ...

javascriptreactjs