Pong

Developer
Tim Guo
Size
3,901 Kb
Views
6,072
  1. Pong Previews
  2. Pong HTML Codes
  3. Pong CSS Codes
  4. Pong JS Codes

How do I make an pong?

Pong Game with CSS. 🏓 Two weeks ago, I gave a presentation on CSS animation. This is a demo using some of the concept I mentioned.. What is a pong? How do you make a pong? This script and codes were developed by Tim Guo on 18 January 2023, Wednesday.

Pong Previews
IQ Test

Pong - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pong</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<label class="control control" for="pause" name="control">PAUSE</label>
<input type="radio" id="pause" name="control"/>
<label class="control" for="resume" name="control">RESUME</label>
<input type="radio" id="resume" name="control"/>
<div class="board"> <div class="paddle left animated"></div> <div class="paddle right animated"></div> <div class="ball animated"></div> <div class="ball-bounce animated"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pong - Script Codes CSS Codes

/* SCSS Vars * * 1. Modify $speed for different sppeds * 2. Colors, $primary-color(paddle / ball), $secondary-color(background) * 3. Modify paddle size for different paddle sizes * 4. Modify $court-size for different court sizes */
/* 1 */
/* 2 */
/* 2 */
/* 3 */
/* 3 */
/* 4 */
/* Scaffolding */
body { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #222;
}
/* Controls */
.control { font-family: 'Roboto', sans-serif; background-color: #222; color: #fff; width: 100px; padding: 10px; margin: 10px; text-align: center; border: 1px solid; cursor: pointer; -webkit-transition: background-color .35s; transition: background-color .35s;
}
.control:hover { background-color: #555555;
}
input { display: none;
}
#pause:checked ~ * .animated { -webkit-animation-play-state: paused; animation-play-state: paused;
}
#resume:checked ~ * .animated { -webkit-animation-play-state: running; animation-play-state: running;
}
/* Pong Game Components */
.animated { will-change: all;
}
.board { height: 350px; width: 350px; position: relative; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; justify-self: center; top: -200px;
}
.paddle { height: 80px; width: 10px; border-radius: 5px; background: #fff; position: absolute; -webkit-animation: paddle 3s linear infinite; animation: paddle 3s linear infinite;
}
.paddle.left { left: 0;
}
.paddle.right { right: 0; -webkit-animation-delay: -1.5s; animation-delay: -1.5s;
}
.ball,
.ball-bounce { width: 10px; height: 10px; border-radius: 50%; position: absolute; background: #fff; -webkit-animation: ball 3s linear infinite; animation: ball 3s linear infinite;
}
.ball-bounce { padding: 4px; margin: 0 0 -6px -6px; border: 2px #fff solid; background: transparent; -webkit-animation: ball 3s linear infinite, ball-bounce 3s linear infinite; animation: ball 3s linear infinite, ball-bounce 3s linear infinite;
}
/* Animation */
@-webkit-keyframes paddle { 0% { bottom: -175px; } 50% { bottom: 0; } 100% { bottom: -175px; }
}
@keyframes paddle { 0% { bottom: -175px; } 50% { bottom: 0; } 100% { bottom: -175px; }
}
@-webkit-keyframes ball { 0% { bottom: -135px; left: 10px; } 25% { bottom: -47.5px; left: 330px; } 50% { bottom: 40px; left: 10px; } 75% { bottom: -47.5px; left: 330px; } 100% { bottom: -135px; left: 10px; }
}
@keyframes ball { 0% { bottom: -135px; left: 10px; } 25% { bottom: -47.5px; left: 330px; } 50% { bottom: 40px; left: 10px; } 75% { bottom: -47.5px; left: 330px; } 100% { bottom: -135px; left: 10px; }
}
@-webkit-keyframes ball-bounce { 0% { border-color: #fff; } 24% { border-color: #222; } 25% { border-color: #fff; } 49% { border-color: #222; } 50% { border-color: #fff; } 74% { border-color: #222; } 75% { border-color: #fff; } 99% { border-color: #222; } 100% { border-color: #fff; }
}
@keyframes ball-bounce { 0% { border-color: #fff; } 24% { border-color: #222; } 25% { border-color: #fff; } 49% { border-color: #222; } 50% { border-color: #fff; } 74% { border-color: #222; } 75% { border-color: #fff; } 99% { border-color: #222; } 100% { border-color: #fff; }
}

Pong - Script Codes JS Codes

/* Nothing to see here...
Pong - Script Codes
Pong - Script Codes
Home Page Home
Developer Tim Guo
Username timothyguo
Uploaded January 18, 2023
Rating 3.5
Size 3,901 Kb
Views 6,072
Do you need developer help for Pong?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Guo (timothyguo) Script Codes
Name
Pumpkin Animation on one Div
CSS Quantity Queries Demo
Responsive Alert Settings
Responsive Merge Identities Flyout
Responsive holy grail layout with Flexbox
Checkbox Table with Tree Structure
Three Pane App Layout
Css Transition
Bat Pixel Art Animation on one Div
Angular Template
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!