123

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              .sw
  .so
  .vhr
  .so
.g
  - 2.times do
    .p
  .b
.s 
  Start
  .in Hover the bar on the bottom left for settings.
.sb
  %p 0
  %p 0
.op
  .st Announcer
  .st Sound
  .st Reset
  .st CodePen Ball
%audio{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/455279/bounce.wav", type: "audio/wav", class: "bounce"}
%audio{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/455279/pattle.wav", type: "audio/wav", class: "pattle"}
%audio{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/455279/ply1.mp3", type: "audio/mp3", class: "ply1s"}
%audio{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/455279/ply2.mp3", type: "audio/mp3", class: "ply2s"}
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Press+Start+2P')
html
  background-color: black
  user-select: none
  body
    margin: 0
    overflow: hidden

.sw
  display: flex
  position: absolute
  top: 0
  left: 0
  height: 100%
  width: 100%
  z-index: 1
  .so
    top: 0
    left: 0
    width: 50%
    height: 100%
  .vhr
    height: 100%
    width: 1px
    background-color: rgba(255,255,255,0.1)
.g
  .p
    height: 21vh
    width: 8px
    position: absolute
    border-radius: 90px
    &:nth-child(1)
      background-color: #00ccff
      -webkit-animation-name: rainbow-bg
      -webkit-animation-duration: 4s
      -webkit-animation-iteration-count: infinite
    &:nth-child(2)
      background-color: #00ff00
      -webkit-animation-name: rainbow-bg
      -webkit-animation-duration: 6s
      -webkit-animation-iteration-count: infinite
  .b
    display: none
    height: 1.3vh
    width: 1.3vh
    position: absolute
    border-radius: 90px
    -webkit-animation-name: rainbow-bg
    -webkit-animation-duration: 4s
    -webkit-animation-iteration-count: infinite
    
.s
  padding: 2vh 3vh 2vh 3vh
  font-family: "Press Start 2P"
  font-size: 6vh
  text-align: center
  color: lime
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  transition: font-size 0.2s
  cursor: pointer
  -webkit-animation-name: rainbow-txt
  -webkit-animation-duration: 2s
  -webkit-animation-iteration-count: infinite
  z-index: 2
  &:hover
    transition: font-size 0.2s
    font-size: 5vh
  .in
    margin: 2vh auto 0 auto
    width: 25vh
    font-size: 1vh
    line-height: 2vh
  
.sb
  position: absolute
  left: 50%
  bottom: 1vh
  width: 15vh
  transform: translateX(-50%)
  padding: 2vh
  display: flex
  justify-content: space-between
  p
    color: black
    font-size: 3vh
    margin-top: 0
    margin-bottom: 0
    font-family: "Press Start 2P"
    -webkit-animation-name: rainbow-txt
    -webkit-animation-duration: 4s
    -webkit-animation-iteration-count: infinite
    
.op
  height: 11vh
  width: 20vh
  position: absolute
  bottom: -15vh
  left: 0
  z-index: 1
  border-top: 0.8vh solid rgba(255,255,255,0.1)
  padding: 2vh
  background-color: black
  transition: bottom 0.2s
  &:hover
    bottom: 0
    transition: bottom 0.2s
  .st
    font-family: "Press Start 2P"
    -webkit-animation-name: rainbow-txt
    -webkit-animation-duration: 4s
    -webkit-animation-iteration-count: infinite
    font-size: 1.5vh
    text-align: center
    margin: 0 0 1em 0
    cursor: pointer
    transition: font-size 0.2s
    &:nth-last-child(1)
      margin: 0
    &:hover
      font-size: 1.4vh
      transition: font-size 0.2s
  
@-webkit-keyframes rainbow-bg
  0% 
    background-color: red
    box-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red, 0 0 50px red, 0 0 60px red, 0 0 70px red
  16%
    background-color: #FF7F00
    box-shadow: 0 0 10px #FF7F00, 0 0 20px #FF7F00, 0 0 30px #FF7F00, 0 0 40px #FF7F00, 0 0 50px #FF7F00, 0 0 60px #FF7F00, 0 0 70px #FF7F00
  32%
    background-color: yellow
    box-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 60px yellow, 0 0 70px yellow
  48%
    background-color: lime
    box-shadow: 0 0 10px lime, 0 0 20px lime, 0 0 30px lime, 0 0 40px lime, 0 0 50px lime, 0 0 60px lime, 0 0 70px lime
  64%
    background-color: blue
    box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue, 0 0 40px blue, 0 0 50px blue, 0 0 60px blue, 0 0 70px blue
  84%
    background-color: #8B00FF
    box-shadow: 0 0 10px #8B00FF, 0 0 20px #8B00FF, 0 0 30px #8B00FF, 0 0 40px #8B00FF, 0 0 50px #8B00FF, 0 0 60px #8B00FF, 0 0 70px #8B00FF
  100%
    background-color: red
    box-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red, 0 0 50px red, 0 0 60px red, 0 0 70px red
  100%
  
@-webkit-keyframes rainbow-txt
  0% 
    color: red
  16%
    color: #FF7F00
  32%
    color: yellow
  48%
    color: lime
  64%
    color: blue
  84%
    color: #8B00FF
  100%
    color: red
  
.cpb
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/455279/Button-Black-Large.png)
  background-repeat: no-repeat
  background-size: 100% auto
  background-position: center
  filter: invert(100%)
  height: 30px !important
  width: 30px !important
            
          
!
            
              ply = $(".p:nth-child(1)")
ply_2 = $(".p:nth-child(2)")
ball = $(".b")
score = [0,0]
state = false
gameSound = 0.2

init = () => {
  size()
  gBall()
  placeP()
  $(".ply1s").prop("volume", gameSound)
  $(".ply2s").prop("volume", gameSound)
  $(".bounce").prop("volume", gameSound)
  $(".pattle").prop("volume", gameSound)
  announcer = true
  sound = true
  scoreLock = false
  resetScore = false
  cpb = false
}

placeP = () => {
  if (state == false) {
    ply.css("top", $(".s").offset().top + $(".s").height()/2 - ply.height()/2)
    ply_2.css("top", $(".s").offset().top + $(".s").height()/2 - ply_2.height()/2)
  }
}

size = () => {
  w = $(window)
  dO = w.offset
  dH = w.height()
  dW = w.width()
  $(".g").css({
    height: dH,
    width: dW
  })
  gPos()
  sBall()
}

gPos = () => {
  ply.css({
    left: dW - 100
  })
  ply_2.css({
    left: 100
  })
}

$(window).on("resize", () => {
  scoreLock = true
  size()
  placeP()
})

sBall = () => {
  var baseSpeed = 1000
  speed = (dW / 1000 + .8).toFixed(1)
}

gBall = () => {
  ball.css({
    top: Math.floor(Math.random() * dH),
    left: Math.floor(Math.random() * dW)
  })
}

scores = () => {
  for (i=0;i<score.length;i++) {
    if (score[i] >= 99 || resetScore == true) {
      score = [0,0]
      $(".sb p:nth-child(1)").text(score[0])
      $(".sb p:nth-child(2)").text(score[1])
      resetScore = false
    }
  }
  if (scoreLock == false) {
    if (ball.offset().left >= dW) {
      score[0]++
      $(".sb p:nth-child(1)").text(score[0])
      if (announcer == true && sound == true) {$(".ply1s").get(0).play()}
    }
    if (ball.offset().left <= 0) {
      score[1]++
      $(".sb p:nth-child(2)").text(score[1])
      if (announcer == true && sound == true) {$(".ply2s").get(0).play()}
    }
  }
}

ani_ball = () => {
  setInterval(() => {
    
    var o = ball.offset()
    var p1 = ply.offset()
    var p2 = ply_2.offset()
    
    if (o.left <= 0) {
      hor = speed * -1
      if (sound == true) {$(".bounce").get(0).play()}
    } 
    if (o.left >= dW) {
      hor = speed
      if (sound == true) {$(".bounce").get(0).play()}
    }
    if (o.top <= 0) {
      vert = speed * -1
      if (sound == true) {$(".bounce").get(0).play()}
    } 
    if (o.top >= dH) {
      vert = speed
      if (sound == true) {$(".bounce").get(0).play()}
    }
    
    if (o.left + ball.width()/2 >= p1.left && o.left + ball.width()/2 <= p1.left + ply.width()) {
      if (o.top + ball.height()/2 >= p1.top && o.top + ball.height()/2  <= p1.top + ply.height()) {
        if (sound == true) {$(".pattle").get(0).play()}
        hor = speed
      }
    }
    if (o.left - ball.width()/2 >= p2.left && o.left - ball.width()/2 <= p2.left + ply_2.width()) {
      if (o.top - ball.height()/2 >= p2.top && o.top - ball.height()/2 <= p2.top + ply_2.height()) {
        if (sound == true) {$(".pattle").get(0).play()}
        hor = speed * -1
      }
    }
      
    ball.css({
      left: o.left - hor,
      top: o.top - vert
    })
    
    scores()
    
  }, 1)
}

$(".sw .so:nth-child(1)").mousemove((e) => {
  if (state == true) {
    ply_2.css({
      top: e.pageY - ply_2.height()/2
    })
    scoreLock = false
  }
})

$(".sw .so:nth-child(3)").mousemove((e) => {
  if (state == true) {
    ply.css({
      top: e.pageY - ply.height()/2
    })
    scoreLock = false
  }
})

$(".s").on("click", () => {
  ball.fadeIn(100)
  hor = speed
  vert = speed
  state = true
  $(".s").fadeOut(300)
  ani_ball()
})

$(".st:nth-child(1)").on("click", () => {
  if (announcer == true) {
    $(".st:nth-child(1)").css("opacity", "0.1")
    announcer = false
  } else {
    announcer = true
    $(".st:nth-child(1)").css("opacity", "1")
  }
})

$(".st:nth-child(2)").on("click", () => {
  if (sound == true) {
    $(".st:nth-child(2)").css("opacity", "0.1")
    sound = false
  } else {
    sound = true
    $(".st:nth-child(2)").css("opacity", "1")
  }
})

$(".st:nth-child(3)").on("click", () => {
  resetScore = true
})

$(".st:nth-child(4)").on("click", () => {
  if (cpb == false) {
    $(".b").addClass("cpb")
    $(".st:nth-child(4)").css("opacity", "0.1")
    cpb = true
  } else {
    $(".b").removeClass("cpb")
    $(".st:nth-child(4)").css("opacity", "1")
    cpb = false
  }
})

init()
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console