Skip to content

Instantly share code, notes, and snippets.

@ehgoodenough

ehgoodenough/pong.css

Created January 19, 2018 18:44
Show Gist options
  • Save ehgoodenough/095db8d30cab896bc44a621e7b5b82be to your computer and use it in GitHub Desktop.
Save ehgoodenough/095db8d30cab896bc44a621e7b5b82be to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ehgoodenough created this gist Jan 19, 2018.
    100 changes: 100 additions & 0 deletions pong.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    * {
    cursor: default;
    user-select: none;
    image-rendering: pixelated;
    }

    body {
    background-color: #111;
    }

    #frame {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    position: fixed;
    overflow: hidden;
    background-color: #222;
    }

    @media(min-aspect-ratio: 16/9) {
    #frame {
    font-size: 11.111vh;
    width: 177.778vh;
    height: 100vh;
    }
    }

    @media(max-aspect-ratio: 16/9) {
    #frame {
    font-size: 6.25vw;
    height: 56.25vw;
    width: 100vw;
    }
    }

    .score {
    font-size: 1em;
    font-family: Righteous;
    text-align: center;
    line-height: 1em;
    color: #EEEEEE;

    width: 50%;
    position: absolute;
    padding: 0.3em 0.4em;
    box-sizing: border-box;
    }

    .left.score {
    left: 0px;
    }

    .right.score {
    right: 0px;
    }

    .net {
    border-left-width: 3px;
    border-left-style: dashed;
    border-left-color: #EEEEEE;

    top: 1em;
    left: 8em;
    bottom: 1em;
    position: absolute;
    }

    .paddle {
    width: 1em;
    height: 4em;
    top: 4.5em;
    margin-top: -2em;
    position: absolute;

    background-color: #EEEEEE;
    }

    .left.paddle {
    left: 1em;
    margin-left: -0.5em;
    }

    .right.paddle {
    right: 1em;
    margin-right: -0.5em;
    }

    .ball {
    width: 1em;
    height: 1em;
    background-color: #EEEEEE;

    left: 8em;
    top: 4.5em;
    margin-top: -0.5em;
    margin-left: -0.5em;
    position: absolute;
    }
    20 changes: 20 additions & 0 deletions pong.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <!doctype html>

    <html>
    <head>
    <link href="pong.css" rel="stylesheet" type="text/css"/>
    <link href="//fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
    <title>Pong</title>
    </head>
    <body>
    <div id="frame">
    <div class="left score">0</div>
    <div class="right score">0</div>
    <div class="left paddle"></div>
    <div class="right paddle"></div>
    <div class="ball"></div>
    <div class="net"></div>
    </div>
    <script src="pong.js"></script>
    </body>
    </html>
    17 changes: 17 additions & 0 deletions pong.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    var ball = document.querySelector(".ball")
    var leftPaddle = document.querySelector(".left.paddle")
    var rightPaddle = document.querySelector(".right.paddle")
    var leftScore = document.querySelector(".left.score")
    var rightScore = document.querySelector(".right.score")

    leftPaddle.addEventListener("mousemove", function(event) {
    leftPaddle.style.top = event.pageY + "px"
    })

    rightPaddle.addEventListener("mousemove", function(event) {
    rightPaddle.style.top = event.pageY + "px"
    })

    // window.setInterval(function() {
    // // ball.style.left += ...
    // }, 1000 / 60)