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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              .game-screen
	%input#is_start.is_start{type: "checkbox", name: "start"}
	.start-screen
		.start-screen__logo
			%h1.start-screen__title <span>Q</span><span>o</span><span>r</span><span>x</span><span>o</span><span>n</span>
			%h2.start-screen__sub-title <span>Cruise</span><br /><span>Control</span>
		%p.instructions <strong>Hover</strong> your cursor to the sides of the game screen to control your cruiser. <strong>Cruise for 30&nbsp;seconds and enjoy&nbsp;the&nbsp;ride.</strong>
		%label.btn{for: "is_start"} <span>Cruise!<span>
	.game-over-screen
		.game-over-bob
			%h1.game-over__text <span>Nice</span><br /><span>Cruisin'<strong>!</strong></span>
		%a.btn{href: "index.html"} Cruise Again?
	.controls__dir--left
	.controls__dir--right
	.interface
		.interface__score
	.stars
		- (1...45).each do |i|
			.star
	.ship
		- ["main", "shadow"].each do |ship_dupe|
			.ship-frame{class: ship_dupe}
				.ship-beak
				
		.ship-nose
            
          
!
            
              @import bourbon
@import url(https://fonts.googleapis.com/css?family=Pacifico|Righteous)

// Colors
$background: linear-gradient(#4e2799, #5939d8)
$space: #A200C1
$star-color: yellow
$ship-side: #2B406B
$ship-primary-1: #85E0FF
$ship-primary-2: #5D9DB2
$text-pink: #FF66FF

// game params 
$move-speed: 1s
$rotate: -45deg
$play-length: 30s

//fonts
$title: 'Righteous', san-serif
$cursive: 'Pacifico', cursive

=block($w, $h)
	display: block
	width: $w
	height: $h
	
body
	background: $background


// -------- game screen
$screen-width: 56vh
.game-screen
	+block(56vh, 100vh)
	background: linear-gradient(90deg, adjust-hue($space, 15%), $space, $space, adjust-hue($space, 15%))
	margin: 0 auto
	position: relative
	padding: 0 50px
	outline: 4px solid $star-color
	box-shadow: 0px 0px 140px 0px $ship-side

// -------- start screen
.start-screen
	+block(100%, 100vh)
	position: absolute
	top: 0
	left: 0
	background: rgba(150,30,160,.8)
	z-index: 12
	opacity: 1
	+transition(all .25s)

	#is_start:checked ~ &
		visibility: hidden
		opacity: 0

.is_start
	display: none

.start-screen__logo
	display: block
	+animation(bob 2.0s ease-in-out)
	+animation-iteration-count(infinite)
	+clearfix()

.start-screen__title
	text-align: center
	font-family: $title
	color: $text-pink
	font-size: $screen-width/3.5
	-webkit-text-stroke: $screen-width/60 $ship-primary-1
	letter-spacing: $screen-width/110
	+transform(rotate(-12deg))
	text-shadow: $screen-width/65 $screen-width/65 $star-color
	margin: 0 auto
	margin-top: $screen-width/5
	text-indent: $screen-width/55 * -1

	span
		display: inline-block
		margin: 0 $screen-width/110

	span+span:after
		content: ''
		+block(120%, $screen-width/55)
		background: $text-pink
		box-shadow: $screen-width/75 $screen-width/75 $ship-primary-1
	
	span:last-child:after
		width: 100%

.start-screen__sub-title
	display: block
	float: left
	font-family: $cursive
	font-size: $screen-width/6
	position: relative
	left: 50%
	top: $screen-width/14 * -1

	span:first-child
		position: relative
		z-index: 2
		color: $star-color
		text-shadow: $screen-width/65 $screen-width/65 rgba( $text-pink, .7 )
	
	span:last-child
		display: inline-block
		margin-left: $screen-width/7 * -1
		color: $ship-primary-1
		position: relative
		top: ($screen-width/16) * -1
		z-index: 1
		text-shadow: $screen-width/65 $screen-width/65 rgba( $text-pink, .7 )
	
.instructions
	font-family: $title
	font-size: $screen-width/25
	line-height: $screen-width/18
	width: $screen-width*.8
	margin: 13% auto 22%
	text-align: center
	color: white
	letter-spacing: .17em
	font-weight: normal
	text-shadow: $screen-width/100 $screen-width/150 rgba( $text-pink, .3 )

	strong
		color: $star-color
		

.btn
	cursor: pointer
	display: block
	float: left
	position: relative
	top: 0
	left: 50%
	+transform(translateX(-50%))
	font-size: $screen-width/15
	font-family: $cursive
	padding: $screen-width/45 $screen-width/30
	text-align: center
	color: $star-color
	letter-spacing: .1em
	border-bottom: $screen-width/100 solid $text-pink
	text-decoration: none

	&:after
		content: '>'
		margin-left: $screen-width/50
		+transition(margin-left 0.2s)
		font-family: $title
		color: $ship-primary-1
		
	&:hover:after
		margin-left: $screen-width/30

.game-over-screen
	@extend .start-screen
	visibility: hidden
	opacity: 0
	
	#is_start:checked ~ &
		+animation(show-end $play-length linear)
		+animation-fill-mode(forwards)

.game-over-bob
	+animation(bob 2s ease-in-out)
	+animation-iteration-count(infinite)
		
.game-over__text
	font-family: $cursive
	font-size: $screen-width/5
	text-align: center
	color: $text-pink
	+transform(rotate(-15deg) translateX($screen-width/16 * -1))
	margin: $screen-width/2 0 $screen-width/5
	text-shadow: $screen-width/65 $screen-width/65 rgba( $text-pink, .7 )
	
	span
		display: inline-block
		color: $star-color
		
	span+br+span
		position: relative
		top: ($screen-width/15) * -1
		color: $ship-primary-1
	
	strong
		display: inline-block
		width: 0
		color: $star-color
		position: relative
		left: ($screen-width/20) * -1

// -------- interface
.interface__score
	&:before
		content: "0 Light Years"
		position: absolute
		top: 1em
		right: 1em
		color: $ship-primary-1
		font-family: $title
		
	#is_start:checked ~ .interface &:before
		+animation(score $play-length linear)
		+animation-fill-mode(forwards)
	
		
// ---------- control hit areas for game
%controls__dir
	+block(33.3%, 100%)
	position: absolute
	top: 0
	z-index: 10

.controls__dir--left
	@extend %controls__dir
	left: 0
	
.controls__dir--right
	@extend %controls__dir
	right: 0

//------ ship
$ship-width:  70px
$ship-height: 90px
.ship
	+block($ship-width, $ship-height)
	position: absolute
	left: 50%
	bottom: 20px
	margin-left: $ship-width * -.5
	+transition(transform $move-speed)
	perspective: 500px

	#is_start:checked ~ &
		+animation(ship-distance $play-length ease-out)
		+animation-fill-mode(forwards)

	$edge-limit: ($screen-width/2)
	.controls__dir--left:hover ~ &
		+transform(translateX($edge-limit*-1) )

	.controls__dir--right:hover ~ &
		+transform(translateX($edge-limit))

.ship-frame
	+block(100%, 100%)
	position: absolute
	top: 0
	left: 0
	+transition(transform $move-speed)
	+transform-style(preserve-3d)
	z-index: 2

	&.shadow
		z-index: 1
	
	.controls__dir--left:hover ~ .ship &
		+transform(rotateY($rotate*-1))
		&.shadow
			+transform(translateX(6px) rotateY($rotate*-1))
		
	.controls__dir--right:hover ~ .ship &
		+transform(rotateY($rotate))
		&.shadow
			+transform(translateX(-6px) rotateY($rotate))

// -------- ship design
.ship-beak
	display: block
	width: 50%
	height: 100%
	position: absolute
	top: 0
	left: $ship-width*.25
	+transform-style(preserve-3d)
	perspective: 25px
	z-index: 3
	
	&:before, &:after
		content: ''
		display: block
		position: absolute
		top: 0
		+transition(border-color $move-speed)
		z-index: 2

	&:before
		+triangle($ship-width*.25 $ship-height*.6, $ship-primary-1, down-right)
		+transform(rotateY(25deg))
		left: 1px
		.controls__dir--left:hover ~ .ship &
			border-color: transparent darken($ship-primary-1, 14%) darken($ship-primary-1, 10%) transparent
		.shadow &
			border-color: transparent $ship-side $ship-side transparent !important
	
	&:after
		+triangle($ship-width*.25 $ship-height*.6, $ship-primary-2, down-left)
		+transform(rotateY(-25deg))
		right: 1px
		.controls__dir--right:hover ~ .ship &
			border-color: transparent transparent darken($ship-primary-2, 14%) darken($ship-primary-2, 10%)
		.shadow &
			border-color: transparent transparent $ship-side $ship-side !important
	
.ship-nose
	+block(0, 14px)
	background-color: $ship-side
	position: absolute
	left: 50%
	top: 6px
	+transition(all $move-speed)
	+transform(translateX(-50%))
	.controls__dir--right:hover ~ .ship &
		width: 5px
		margin-left: -1.5px
	.controls__dir--left:hover ~ .ship &
		width: 5px
		margin-left: 1.5px
	
// ------ starry sky
.stars
	+block(100%, 100vh)
	position: absolute
	top: 0
	left: 0
	overflow: hidden

.star
	+block(4px, 4px)
	background-color: $star-color
	position: absolute
	top: -5vh
	+animation(star 1.0s linear)
	+animation-iteration-count(infinite)
	border-radius: 50%
	
@for $i from 1 through 45
	.star:nth-child(#{$i})
		left: $i * 100/45 - 2%
		$distance: random(100)
		$distance-noise: ($distance/100+.25)
		width: 10px - (7px*$distance-noise)
		height: 10px - (7px*$distance-noise)
		+animation-duration(4s * $distance-noise)
		opacity: (100-$distance)/100
	
// ------ keyframe animations
+keyframes(star)
	0%
		top: 100vh
	0.01%
		top: -5vh
	99.99%
		top: 100vh

+keyframes(score)
	@for $i from 1 through 200
		#{$i/2}%
			content: '#{$i}0 Light Years'

+keyframes(ship-distance)
	0%
		bottom: 20px
	94.5%
		bottom: 20px
	96.5%
		bottom: -35px
	100%
		bottom: 100vh

+keyframes(bob)
	0%
		+transform(translateY(-5%))
	50%
		+transform(translateY(5%))
	100%
		+transform(translateY(-5%))

+keyframes(show-end)
	0%, 97%
		opacity: 0
		visibility: hidden
	100%
		opacity: 1
		visibility: visible
		
            
          
!
            
              # Works best in chrome
###
Yup! This game is CSS only with 3 different states, a score counter, a timer, and a ship that follows your mouse. CSS is amazing, I love it.

Follow me on twitter: @THEWAAnderson
or read my blog: http://williamanderson.io
###
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console