cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="game">
  <a id="start" href="javascript:start()">START</a>
    <div id="one" style="bottom: 0px; left: 180px;">
      <div  id="opal-up"></div>
      <div  id="opal-down"></div>
      <div id="opal-right"></div>
      <div id="opal-left"></div>
    </div> 
      
    </div>
            
          
!
            
              * {
   box-sizing: border-box;
 } 
 
 html, body {
   height: 100%;
   width: 100%;}

body{ 
/*     background: #FF69B4; */
    background:linear-gradient(#37F7FF, #3081FF);
    background-repeat: no-repeat; 
}
#one{
  position:absolute;
  width: 40px;
  height: 40px;  
}
#opal-up { 
  height: 40px;
  position: absolute;
  width: 40px;
  background-image: url('https://static.tumblr.com/ebzd90g/34Lon8lxj/opal2_up.svg');
  background-size: 100% 100%;  
}
 
#opal-down {
  visibility: hidden;
  height: 40px;
  position: absolute;
  width: 40px;
  background-image: url('https://static.tumblr.com/ebzd90g/qu1on8zb8/opal2_down.svg');
  background-size: 100% 100%;  
}
#opal-right {
  visibility: hidden;
  height: 40px;
  position: absolute;
  width: 40px;
  background-image: url('https://static.tumblr.com/ebzd90g/C3Aon8m1o/opal2_right.svg');
  background-size: 100% 100%;  
}
#opal-left {
  visibility: hidden;
  height: 40px;
  position: absolute;
  width: 40px;
  background-image: url('https://static.tumblr.com/ebzd90g/20won8r4j/opal2_left.svg');
  background-size: 100% 100%;  
}

#game {
  background:linear-gradient(#37F7FF, #3081FF);
  border: 1px solid #fff;
  border-radius: 10px; 
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 400px;
  height: 400px;
}  
 

#start {
  color: white;
  font-size: 4rem;
  position: relative;
  text-decoration: none;
  top: 4rem;
}

.jellyfish {
  width: 40px;
  height: 40px; 
  position: absolute;
  background-image: url('https://static.tumblr.com/ebzd90g/X4xon8m1a/jellyjell.svg');
  background-size: 100% 100%; 
}
/* 
.rock:before {
  content: "";
  border-bottom: 6px solid tan;
  border-left: 6px solid #111;
  border-right: 6px solid #111;
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 9px;
}

.rock:after {
  content: "";
  border-left: 6px solid #111;
  border-right: 6px solid #111;
  border-top: 6px solid tan;
  bottom: 0;
  height: 0;
  left: 0;
  position: absolute;
  width: 9px;
} */
            
          
!
            
              /*  
 * Don't change these constants!
 */

const ONE = document.getElementById('one');
const OPAL_RIGHT = document.getElementById('opal-right');
const OPAL_LEFT = document.getElementById('opal-left');
const OPAL_UP = document.getElementById('opal-up');
const OPAL_DOWN = document.getElementById('opal-down');
const GAME = document.getElementById('game');
const GAME_HEIGHT = 400;
const GAME_WIDTH = 400;
const LEFT_ARROW = 37; // use e.which!
const RIGHT_ARROW = 39; // use e.which!
const UP_ARROW = 38; // use e.which!
const DOWN_ARROW = 40; // use e.which!
const JELLYFISH = [];
const START = document.getElementById('start');
const STAND = document.addEventListener('mouseup');
// i wish i was able to mess around it more but have to abide by the test.
var gameInterval = null;

/**
 * Be aware of what's above this line,
 * but all of your work should happen below.
 */

function checkCollision(jellyfish) {
  const top = positionToInteger(jellyfish.style.top)

  // jellyfish are 40px high
  // Opal is 40px high
  // GAME_HEIGHT - 40 - 40 = 320px;
  if (top > 320) {
    const opalLeftEdge = positionToInteger(ONE.style.left);

    const opalRightEdge = opalLeftEdge + 40;

    const jellyfishLeftEdge = positionToInteger(jellyfish.style.left);

    const jellyfishRightEdge = jellyfishLeftEdge + 40;

    return (
      (jellyfishLeftEdge <= opalLeftEdge && jellyfishRightEdge >= opalLeftEdge) ||
      (jellyfishLeftEdge >= opalLeftEdge && jellyfishRightEdge <= opalRightEdge) ||
      (jellyfishLeftEdge <= opalRightEdge && jellyfishRightEdge >= opalRightEdge)
    )
  }
}

function createJellyfish(x) {
  const jellyfish = document.createElement('div');
  jellyfish.className = 'jellyfish';
  jellyfish.style.left = `${x}px`;
  var top = jellyfish.style.top = 0;

  /**
   * Now that we have a rock, we'll need to append
   * it to GAME and move it downwards.
   */
  //appends rock to game.
  GAME.appendChild(jellyfish);

  /**
   * This function moves the rock. (2 pixels at a time
   * seems like a good pace.)
   */
  function moveJellyfish() {

    jellyfish.style.top = `${top += 2}px`;
    //if a rock collides with the dodger, call end game function.
    if (checkCollision(jellyfish) === true) {
      return endGame();
    }
    //if the rock is not at the bottom, move the rock.
    if (top < GAME_HEIGHT) {
      window.requestAnimationFrame(moveJellyfish);
    }
    //if rock is at the bottom of the game, remove the rock.
    else {
      jellyfish.remove();
    }
  }

  // We should kick of the animation of the rock around here
  window.requestAnimationFrame(moveJellyfish)
    // Add the rock to ROCKS so that we can remove all rocks
    // when there's a collision
  JELLYFISH.push(jellyfish);

  // Finally, return the rock element you've created
  return jellyfish;
}

/**
 * End the game by clearing `gameInterval`,
 * removing all JELLYFISH from the DOM,
 * and removing the `moveOpal` event listener.
 * Finally, alert "YOU LOSE!" to the player.
 */
function endGame() {
  clearInterval(gameInterval)

  // ROCKS.forEach(function(rock) { rock.remove() });

  for (var i = 0; i < JELLYFISH.length; i++) {
    JELLYFISH[i].remove();
  }
  document.getElementById("one").style.bottom = "0px"; 
  window.removeEventListener('keydown', moveOpal);
  START.innerHTML = 'You Lost. <br> Play again?';

  START.style.display = 'inline';

}

function moveOpal(e) {
  // implement me!
  /**
   * This function should call `moveDodgerLeft()`
   * if the left arrow is pressed and `moveDodgerRight()`
   * if the right arrow is pressed. (Check the constants
   * we've declared for you above.)
   * And be sure to use the functions declared below!
   */

  if (e.which === LEFT_ARROW) {
    e.stopPropagation();
    e.preventDefault();
    moveOpalLeft();
} else if (e.which === RIGHT_ARROW) {
    e.stopPropagation();
    e.preventDefault();
    moveOpalRight();
} else if (e.which === UP_ARROW) {
    e.stopPropagation();
    e.preventDefault();
    moveOpalUp();
} else if (e.which === DOWN_ARROW) {
    e.stopPropagation();
    e.preventDefault();
    moveOpalDown();
}

}

function moveOpalLeft() {
  // implement me!
  /**
   * This function should move DODGER to the left
   * (mabye 4 pixels?). Use window.requestAnimationFrame()!
   */
  window.requestAnimationFrame(function() {
    const left = positionToInteger(ONE.style.left);
    document.getElementById("opal-left").style.visibility = "visible";
    document.getElementById("opal-right").style.visibility = "hidden";
    document.getElementById("opal-up").style.visibility = "hidden";
    document.getElementById("opal-down").style.visibility = "hidden";

    if (left > 0) {
      ONE.style.left = `${left - 8}px`;
    }
  });
}

function moveOpalRight() {
  // implement me!
  /**
   * This function should move DODGER to the right
   * (mabye 4 pixels?). Use window.requestAnimationFrame()!
   */
  window.requestAnimationFrame(function() {
    const left = positionToInteger(ONE.style.left);
    document.getElementById("opal-right").style.visibility = "visible";
    document.getElementById("opal-left").style.visibility = "hidden";
    document.getElementById("opal-up").style.visibility = "hidden";
    document.getElementById("opal-down").style.visibility = "hidden";
    if (left < 320) {
      ONE.style.left = `${left + 8}px`;
    }
  });
}

function moveOpalUp() {

  window.requestAnimationFrame(function() {
    const bottom = positionToInteger(ONE.style.bottom);
    document.getElementById("opal-up").style.visibility = "visible";
    document.getElementById("opal-left").style.visibility = "hidden";
    document.getElementById("opal-right").style.visibility = "hidden";
    document.getElementById("opal-down").style.visibility = "hidden";

    if (bottom <= 320) {
      ONE.style.bottom = `${bottom + 8}px`;
    }

  });
}

function moveOpalDown() {

  window.requestAnimationFrame(function() {
    const bottom = positionToInteger(ONE.style.bottom);
    document.getElementById("opal-up").style.visibility = "hidden";
    document.getElementById("opal-left").style.visibility = "hidden";
    document.getElementById("opal-right").style.visibility = "hidden";
    document.getElementById("opal-down").style.visibility = "visible";

    if (bottom <= 320) {
      ONE.style.bottom = `${bottom - 8}px`;
    }

  });
}

/**
 * @param {string} p The position property
 * @returns {number} The position as an integer (without 'px')
 */
function positionToInteger(p) {
  return parseInt(p.split('px')[0]) || 0
}

function start() {

  window.addEventListener('keydown', moveOpal);

  START.style.display = 'none';

  gameInterval = setInterval(function() {

    createJellyfish(Math.floor(Math.random() * (GAME_WIDTH - 40)))
  }, 800)
}
 
            
          
!
999px
Loading ..................

Console