Help with HTML5/JavaScript interactive score

HTML & CSS
1

Hi all, I’m a composer who is a novice programmer and I’m trying to make a sort of interactive score work. It would be a webpage on Wix that hosts HTML5 code and works with JavaScript. Right now, I have the code needed to make a simple quiz like game where you would select certain aspects of the score that you’d like there, as well as the code for a drag and drop type of game in order to arrange a certain set of measures of music in whatever order the “player” would like.

My question is split into two parts. The first is how I would go about making it so the graphics of the score are saved into the background, and if there is a way to export it as a printable image at the end of the game. The second would be if there would be a way to generate a playable audio file at the end of the game, based on that image. I was thinking that a Max patch could do the job, but am unsure how to implement it exactly. Any help with either of these questions would be greatly appreciated!

2

This might save you lots of agony:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
<style>
#gate {
  cursor: pointer;
  margin-bottom: 100px;
  width: 83px;
  height: 46px;
}

#ball {
  cursor: pointer;
  width: 40px;
  height: 40px;
}
</style>
</head>

<body>

  <p>Drag the ball.</p>

  <img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">

  <img src="https://en.js.cx/clipart/ball.svg" id="ball">

  <script>
    let currentDroppable = null;

    ball.onmousedown = function(event) {

      let shiftX = event.clientX - ball.getBoundingClientRect().left;
      let shiftY = event.clientY - ball.getBoundingClientRect().top;

      ball.style.position = 'absolute';
      ball.style.zIndex = 1000;
      document.body.append(ball);

      moveAt(event.pageX, event.pageY);

      function moveAt(pageX, pageY) {
        ball.style.left = pageX - shiftX + 'px';
        ball.style.top = pageY - shiftY + 'px';
      }

      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        ball.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        ball.hidden = false;

        if (!elemBelow) return;

        let droppableBelow = elemBelow.closest('.droppable');
        if (currentDroppable != droppableBelow) {
          if (currentDroppable) { // null when we were not over a droppable before this event
            leaveDroppable(currentDroppable);
          }
          currentDroppable = droppableBelow;
          if (currentDroppable) { // null if we're not coming over a droppable now
            // (maybe just left the droppable)
            enterDroppable(currentDroppable);
          }
        }
      }

      document.addEventListener('mousemove', onMouseMove);

      ball.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        ball.onmouseup = null;
      };

    };

    function enterDroppable(elem) {
      elem.style.background = 'pink';
    }

    function leaveDroppable(elem) {
      elem.style.background = '';
    }

    ball.ondragstart = function() {
      return false;
    };
  </script>


</body>
</html>

Plz show your end result ,
Thanks

4

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