Understanding Shake.js: Creating Multiple Shakes with a Single Script

Shake.js is a popular JavaScript library used for simulating phone shakes or vibrations on mobile devices. In this article, we will delve into the world of shake.js and explore how to create multiple shakes using a single script.

What is Shake.js?

Shake.js is a lightweight JavaScript library that allows developers to simulate phone shakes or vibrations on mobile devices. It achieves this by creating an accelerometer simulation, which mimics the movement of a phone when shaken.

The shake.js library provides several benefits over traditional vibration methods:

• Simulates phone shakes without requiring hardware acceleration
• Cross-platform compatibility (works on both Android and iOS)
• Can be easily integrated into web applications

Installing Shake.js

To use shake.js in your project, you need to include the JavaScript file in your HTML document. You can download the shake.js library from its official GitHub repository or include it via a CDN.

For this example, we will use the CDN link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/shake.js/1.2.1/shake.min.js"></script>

Basic Shake Example

Here is a basic shake example using shake.js:

window.onload = function() {
  var answer = document.getElementsByClassName('answerListener');
  var current = 1;

  for (i = 0; i < answer.length; i++) {
    answer[i].addEventListener('shake', function() {

      if (current == 1) {
        alert('shake1');
      }
      if (current == 2) {
        alert('shake2');
      }
      if (current == 3) {
        alert('shake3');
      }
      if (current == 4) {
        alert('shake4');
      }

      current = current + 1;
    }, false);
  }
};

In this example, we are creating multiple shake listeners for each element with the class “answerListener”. When a shake event occurs, it checks the current index and triggers an alert message accordingly.

However, as mentioned in the original Stack Overflow post, there is an error in the code due to an infinite loop. Let’s explore how to fix this issue.

Fixing the Infinite Loop

The problem with the original code lies in the for loop condition. The line answer.length; i++) will cause the loop to run indefinitely because once i exceeds answer.length, answer[i] becomes undefined, and attempting to call addEventListener on it results in a TypeError.

Here is the corrected version of the code:

window.onload = function() {
  var answer = document.getElementsByClassName('answerListener');
  var current = 1;

  for (i = 0; i < answer.length; i++) {
    answer[i].addEventListener('shake', function() {

      if (current == 1) {
        alert('shake1');
      }
      if (current == 2) {
        alert('shake2');
      }
      if (current == 3) {
        alert('shake3');
      }
      if (current == 4) {
        alert('shake4');
      }

      current = current + 1;
    }, false);
  }
};

In this corrected version, the for loop condition is changed to i < answer.length, ensuring that it only runs up to the length of the answer array.

Creating Multiple Shakes with Different Animations

To create multiple shakes with different animations, you can modify the shake.js script to trigger different events based on the type of shake. Here’s an example:

window.onload = function() {
  var answer = document.getElementsByClassName('answerListener');
  var shakeTypes = ['shake1', 'shake2', 'shake3', 'shake4'];
  var current = 0;

  for (i = 0; i < answer.length; i++) {
    answer[i].addEventListener('shake', function() {

      if (current == 0) {
        // Trigger shake1 animation
        animateShake(answer, shakeTypes[0]);
        current = 1;
      } else if (current == 1) {
        // Trigger shake2 animation
        animateShake(answer, shakeTypes[1]);
        current = 2;
      } else if (current == 2) {
        // Trigger shake3 animation
        animateShake(answer, shakeTypes[2]);
        current = 3;
      } else if (current == 3) {
        // Trigger shake4 animation
        animateShake(answer, shakeTypes[3]);
        current = 0;
      }
    }, false);
  }

  function animateShake(answer, shakeType) {
    // Implement your animation logic here
    console.log(`Triggering ${shakeType} animation...`);
  }
};

In this modified script, we create an array of shake types and use the current variable to keep track of which type of shake is currently being triggered. The animateShake function can be customized to implement different animations based on the specific shake type.

Conclusion:

Creating multiple shakes with shake.js requires careful consideration of the loop conditions and event handling to ensure that each shake is triggered correctly. By understanding how to fix infinite loops, create custom animation logic, and use the library’s built-in functionality, developers can create engaging mobile experiences for their users.

Last modified on 2025-02-27