COMP4021 Assignment 2 Disappearing Platforms

Overview

• This web page explains how you can add disappearing platforms to your SVG platform game
• This is part of the requirements for your assignment

2. Create Disappearing Platforms in Your Game

• Here is an example of a disappearing platform:

  

• The basic idea is to gradually change the opacity value of the platform when the player is standing on a disappearing platform
• When the opacity value becomes zero the disappearing platform will be deleted from the DOM structure
• The code to create a disappearing platform may have to be run each time the game is restarted
• This is because the platform may have disappeared and have been deleted from the DOM structure when the game was previously run
• In the function gameStart(), you can create a disappearing platform using createElementNS():

  var platforms = svgdoc.getElementById("platforms");
  
  // Create a new line element
  var newPlatform = svgdoc.createElementNS("http://www.w3.org/2000/svg", "line");
  
  // Set the various attributes of the line
  newPlatform.setAttribute("x1", 0);
  newPlatform.setAttribute("y1", 50);
  newPlatform.setAttribute("x2", 100);
  newPlatform.setAttribute("y2", 50);
  newPlatform.setAttribute("type", "disappearing");
  newPlatform.style.setProperty("opacity", 1, null);
  newPlatform.style.setProperty("stroke", "black", null);
  newPlatform.style.setProperty("stroke-width", 10, null);
  
  // Add the new platform to the end of the group
  platforms.appendChild(newPlatform);

• After running the above JavaScript code a line element will be created in the DOM structure as follows:

  <line x1="0" y1="50" x2="100" y2="50" type="disappearing"
        style="opacity:1;stroke:black;stroke-width:10"/>

• That means the DOM structure will become this:

  

• Then in the function gamePlay() you need to do these:
  1. Search for disappearing platforms:

     var platforms = svgdoc.getElementById("platforms");
     
     for (var i = 0; i < platforms.childNodes.length; i++) {
         var platform = platforms.childNodes.item(i);
         if (platform.getAttribute("type") == "disappearing") {
             ...
         }
     }

  2. Get the opacity value from the platform:

     var platformOpacity = parseFloat(platform.style.getPropertyValue("opacity"));

  3. If the distance between the player and the platform is 0, update the opacity value:

     platformOpacity -= 0.1;
     platform.style.setProperty("opacity", platformOpacity, null);

  4. If the opacity value becomes zero, delete the SVG element from the DOM structure:

     platforms.removeChild(platform);