generic image
Processing...
  • Games
  • Catalog
  • Develop
  • Robux
  • Search in Players
  • Search in Games
  • Search in Catalog
  • Search in Groups
  • Search in Library
  • Log In
  • Sign Up
  • Games
  • Catalog
  • Develop
  • Robux
   
ROBLOX Forum » Game Creation and Development » Scripters
Home Search
 

Re: CSS3 Pong, yay.

Previous Thread :: Next Thread 
Cintheus is not online. Cintheus
Joined: 06 Feb 2013
Total Posts: 892
29 Aug 2013 01:11 PM
Yay.

/**
* Playable Pong *
*/

$speed: 1; /* 1=fast 10=slow*/
$updown-speed:(1.9s*$speed);
$leftright-speed:(2.7s*$speed);

body {
overflow: hidden;
font-family: 'Arial Narrow', sans-serif;
background: #000;
margin: 0;
padding: 0;
color: #0f0;
text-align: center;
text-transform: uppercase;
}

body:before { /* scanline effect */
content: "";
position: absolute;
margin: 0;
padding: 0;
background-image: linear-gradient(transparent 50%, rgba(0, 40, 40, 0.25) 50%);
background-size: 100% 4px;
width: 100%;
height: 100%;
z-index: 999;
pointer-events: none;
top: 0;
left: 0; }

body * { /* blur glow */
text-shadow: 0px 0px 3px rgba(90, 255, 90, 0.9), 0px 0px 3px rgba(90, 255, 90, 0.9), 0px 0px 7px rgba(90, 255, 90, 0.9); }

h1 {
text-align: center;
font: 400 60px 'Impact';
letter-spacing: 5px;
font-family: Impact, 'Helvetica Neue', Helvetica, sans-serif;
line-height: 1em;
color: #0afa0a;
font-weight: bold;
font-size: 70px;
text-shadow: 0px 0px 0 #35bb35, 0px 1px 0 #47a947, 0px 2px 0 #589858, 0px 3px 0 #6a866a, 0px 4px 0 #7b757b, 0px 5px 0 #8c648c, 0px 6px 5px rgba(0, 0, 0, 0.25), 0px 6px 1px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.2); }

p {
text-align: center;
font: 400 24px''; }

footer p {
font-size: 12px; }

#court {
margin: 29px auto;
width: 600px;
height: 301px;
position: relative;
border: 4px dotted #3f3;
text-shadow: 0px 0px 7px rgba(90, 255, 90, 0.9), 0px 0px 7px rgba(90, 255, 90, 0.9);
cursor: url({{link}}), text;}

#court:before { /* net */
left: 50%;
content: "";
width: 10px;
height: 300px;
position: absolute;
border-left: 4px dashed #3f3;
}

/* ------ components ------- */
#ball {
position: absolute;
width: 20px;
height: 20px;
display: block;
background: #3f3;
border-radius: 50%;
cursor: url(), text;
box-shadow: 0px 0px 7px rgba(90, 255, 90, 0.9), 0px 0px 7px rgba(90, 255, 90, 0.9);
animation: fadein 2s 1 linear;
transform: translate3d(10px, 0, 0); }

#horizontal {
position: absolute;
width: 100%;
height: 20px;
top: 45%;
cursor: url(), text;}

#player2 {
/* player 2 */
background: #3f3;
position: absolute;
width: 7px;
height: 44px;
right: 4px;
margin-top: -12px; }

/* ------ ball animation ------- */
input:checked + input:hover ~ #horizontal #ball {
/* ready: pulse ball */
animation: pulse 0.5s infinite; }

input:hover:checked ~ #horizontal {
animation: updown $updown-speed infinite linear; }

input:hover:checked ~ #horizontal #ball {
animation: leftright $leftright-speed infinite linear;
background: cyan; }

input:hover:checked ~ #horizontal #player2 {
animation: twitchy $leftright-speed infinite linear; }

/* ------ The Scoring System------- */
ul {
position: absolute;
right: 30%;
list-style: none;
height: 40px;
width: 80px;
overflow: hidden;
font-size: 40px;
padding: 0;
margin: 0;
top: 20px;
text-align: center; }

ul li {
position: absolute;
top: -50px;
width: 80px; }

/* position score lists */
ul#pl1 {
left: 25%; }

ul#pl2 {
left: 64%;
width: 180px;
text-align: left; }

ul#pl1 li:nth-of-type(1) {
top: 0px; }

input:nth-of-type(1):checked ~ ul#pl2 li:nth-of-type(1),
input:nth-of-type(2):checked ~ ul#pl2 li:nth-of-type(2),
input:nth-of-type(3):checked ~ ul#pl2 li:nth-of-type(3),
input:nth-of-type(4):checked ~ ul#pl2 li:nth-of-type(4),
input:nth-of-type(5):checked ~ ul#pl2 li:nth-of-type(5),
input:nth-of-type(6):checked ~ ul#pl2 li:nth-of-type(6),
input:nth-of-type(2):hover:checked ~ ul#pl2 li:nth-of-type(1),
input:nth-of-type(3):hover:checked ~ ul#pl2 li:nth-of-type(2),
input:nth-of-type(4):hover:checked ~ ul#pl2 li:nth-of-type(3),
input:nth-of-type(5):hover:checked ~ ul#pl2 li:nth-of-type(4),
input:nth-of-type(6):hover:checked ~ ul#pl2 li:nth-of-type(5) {
top: 0px;

/* show the score (LI) associated with each input */
transition: top 0.75s; }

input:nth-of-type(1):hover:checked ~ ul#pl2 li:nth-of-type(1), input:nth-of-type(2):hover:checked ~ ul#pl2 li:nth-of-type(2), input:nth-of-type(3):hover:checked ~ ul#pl2 li:nth-of-type(3), input:nth-of-type(4):hover:checked ~ ul#pl2 li:nth-of-type(4), input:nth-of-type(5):hover:checked ~ ul#pl2 li:nth-of-type(5), input:nth-of-type(6):hover:checked ~ ul#pl2 li:nth-of-type(6) {
top: -50px;
/* delay the next score offscreen WHILE the hover is active */ }

/* ------ Scoring switches ------- */
input {
/* hide all */
width: 0px;
height: 0px;
overflow: hidden;
appearance: none;
position: absolute;
top: -100px;
left: -10px;
cursor: url({{link}}, text; }

input:checked + input {
left: -20px;
top: 36%;
width: 70px;
height: 50px;
z-index: 99; }

input:hover:checked {
/* uncomment the next line to get an idea how we're faking collision detection with CSS hover - yes it's a huge hack ;) */
/*background: rgba(0, 0, 200, 0.3);*/
left: -20px;
top: 36%;
width: 100px;
height: 100px;
animation:
updown $updown-speed infinite linear,
targetzone $leftright-speed infinite linear;
z-index: 99;
}

input:hover:checked + input {
/* keep the NEXT targetzone hidden till previous hover state ends */
left: 0px;
top: -100px;
width: 50px;
height: 50px; }

/* ------ reset score button ------- */
input#rd0 {
/* reset scores*/
left: 550px;
appearance: normal;
width: 50px;
height: 50px; }

input#rd0:hover:checked {
animation: none; }

input#rd0:before {
/* reset scores*/
content: "Reset";
color: white;
font-size: 12px;
height: 25px; }

/* ------ The Animations ------- */

@keyframes updown {
0%, 50%, 100% {
/* the middle */
transform: translate3d(0, 0, 0); }

25% {
/* the top */
transform: translate3d(0, 142px, 0); }

75% {
/* the bottom */
transform: translate3d(0, -136px, 0); } }

@keyframes leftright {
0%, 100% {
/* left side */
transform: translate3d(10px, 0, 0);
width: 10px;
/*squash ball*/
height: 25px; }

5%, 48%, 55%, 99% {
/* unsquash ball */
width: 20px;
height: 20px; }

50% {
/* right side */
transform: translate3d(580px, 0, 0);
width: 10px;
/*squash ball*/
height: 35px; } }

@keyframes targetzone {
/* ball in general play */
0%, 96% {
width: 800px;
height: 600px;
margin: -50% 0 0 -50%; }

/* ball about to pass player 1's baseline */
96.1%, 100% {
width: 150px;
height: 100px;
top:0;
left:0;
margin: 10% 0 0 -50px;}
}

@keyframes pulse {
/* pulse the ball -- 'READY!' */
0%, 100% {
opacity: .2; }

90% {
opacity: 1; } }

@keyframes fadein {
/* fades new ball in after each point */
0% {
height: 0; }

90% {
height: 0; }

100% {
height: 20px; } }

@keyframes twitchy {
/* make player twitch like a real player */
0%,
100% {
transform: translate3d(0, 40px, 0); }



20% {
transform: translate3d(0, -25px, 0); }

44% {
transform: translate3d(0, 25px, 0); }
46% {
transform: translate3d(0, -15px, 0); }

48% {
transform: translate3d(0, 15px, 0); }

50% {
transform: translate3d(0, 0, 0); }

70% {
transform: translate3d(0, 60px, 0); }

85% {
transform: translate3d(0, -30px, 0); }
}
Report Abuse
blocco is not online. blocco
Joined: 14 Aug 2008
Total Posts: 29474
29 Aug 2013 01:14 PM
why do you insist on doing this
without a demo
in css3
why

its not even Lua
I can't accept this
Report Abuse
Cintheus is not online. Cintheus
Joined: 06 Feb 2013
Total Posts: 892
29 Aug 2013 01:15 PM
Lua is terrible and ugly.
Report Abuse
blocco is not online. blocco
Joined: 14 Aug 2008
Total Posts: 29474
29 Aug 2013 01:16 PM
You're not authorized to say that on this forum

can i get a censor censor
Report Abuse
NXTBoy is not online. NXTBoy
Joined: 25 Aug 2008
Total Posts: 4533
29 Aug 2013 02:07 PM
> without a demo

Just google one of the lines at the top of the code, and you'll find a demo
Report Abuse
129K is not online. 129K
Joined: 23 Aug 2011
Total Posts: 19010
29 Aug 2013 02:09 PM
lol

"terrible and ugly"
Report Abuse
NXTBoy is not online. NXTBoy
Joined: 25 Aug 2008
Total Posts: 4533
29 Aug 2013 02:12 PM
Actually, there's a very nice explanation of this - google "css3-pong-insane-things-to-do-with-css"

@OP: Great find, bad post.
Report Abuse
mew903 is not online. mew903
Joined: 03 Aug 2008
Total Posts: 22071
29 Aug 2013 02:13 PM
@nxt
I think OP wants us to think he made it
Report Abuse
Oysi is not online. Oysi
Joined: 06 Jul 2009
Total Posts: 9058
29 Aug 2013 02:41 PM
[ Content Deleted ]
Report Abuse
Previous Thread :: Next Thread 
Page 1 of 1
 
 
ROBLOX Forum » Game Creation and Development » Scripters
   
 
   
  • About Us
  • Jobs
  • Blog
  • Parents
  • Help
  • Terms
  • Privacy

©2017 Roblox Corporation. Roblox, the Roblox logo, Robux, Bloxy, and Powering Imagination are among our registered and unregistered trademarks in the U.S. and other countries.



Progress
Starting Roblox...
Connecting to Players...
R R

Roblox is now loading. Get ready to play!

R R

You're moments away from getting into the game!

Click here for help

Check Remember my choice and click Launch Application in the dialog box above to join games faster in the future!

Gameplay sponsored by:
Loading 0% - Starting game...
Get more with Builders Club! Join Builders Club
Choose Your Avatar
I have an account
generic image