in the future of the past the uploaded consciousnesses of two long-dead world warriors fight for processor cycles inside some sort of christmas computer program???

controls:
arrow keys to move
wasd to aim
space to attack

edit:
updated to (hopefully) make things quicker and more challenging. my inclination is to keep tweaking this forever. (i hope you enjoy!)

Amazing girl is the indestructible women who protect soldier from being killed !
ZQSD for moving, Echap to escape and A to try again

drnodsorijpordn fhipe ehipe ehipnrlknlkrnkl

You are tasked with creating a game in two hours that uses both of these sprites in a prominent role:

Ground rules: Minor sprite edits are fine, as long as you don't try to change the identity of the sprites. Also be sure you work both sprites into major roles, preferably on the same frame/screen together at some point in your game. Outside of that, go nuts!

Do it this Saturday on the 22nd, same time as Klik of the Month Klub!

Do eeeet!

You'll probably want to upload the game here when you're done with it.

Attachment	Size
0-Page-Walking-0.gif	4.66 KB
0-Giraffe-Walking-0.gif	12.98 KB

---

Games made for Klipart Konundrum!

A different take on the 60 second theme! Thanks gevaudan for choosing music for me

Update: The Javascript on this page is now built into Twine 1.4! It is no longer necessary to install it.

This script causes every single character in passages to be wrapped in a <span class="char"> element. This enables a number of mildly interesting CSS effects.

Obsolete script removed: use Twine 1.4

These characters have the class of "char", and also a class equal to themselves ("a" for the letter "a", "2" for "2", etc.) It's recommended that you use the :nth-child pseudo-class to select them. Some potential CSS effects that can be performed include the following (examples only):

Horizontally spin characters on mouseover:
(works best with large text)

.char:not(.space):hover {
  transform: rotateY(1440deg);
  -webkit-transform: rotateY(1440deg);
}
.char:not(.space) {
  display: inline-block;
  transition: transform 2s ease-out;
  -webkit-transition: -webkit-transform 2s ease-out;
}

Wavy text:

 .char{ position:relative; }
.char:nth-child(8n) { top:0px; }
.char:nth-child(8n+1) { top:-1px; }
.char:nth-child(8n+2) { top:-1.5px; }
.char:nth-child(8n+3) { top:-1px; }
.char:nth-child(8n+4) { top:-0px; }
.char:nth-child(8n+5) { top: 1px; }
.char:nth-child(8n+6) { top: 1.5px; }
.char:nth-child(8n+7) { top: 1px; }

Animated wavy text:

.passage {
  font-size: 3em;
}
.char { 
  position:relative;
}
.char:nth-child(8n) { 
  animation: wavetext 4s 0s infinite;
  -webkit-animation: wavetext 4s 0s infinite;
}
.char:nth-child(8n+1) { 
  animation: wavetext 4s -0.5s infinite;
  -webkit-animation: wavetext 4s -0.5s infinite;
}
.char:nth-child(8n+2) { 
  animation: wavetext 4s -1s infinite;
  -webkit-animation: wavetext 4s -1s infinite;
}
.char:nth-child(8n+3) { 
  animation: wavetext 4s -1.5s infinite;
  -webkit-animation: wavetext 4s -1.5s infinite;
}
.char:nth-child(8n+4) { 
  animation: wavetext 4s -2s infinite;
  -webkit-animation: wavetext 4s -2s infinite;
}
.char:nth-child(8n+5) { 
  animation: wavetext 4s -2.5s infinite;
  -webkit-animation: wavetext 4s -2.5s infinite;
}
.char:nth-child(8n+6) { 
  animation: wavetext 4s -3s infinite;
  -webkit-animation: wavetext 4s -3s infinite;
}
.char:nth-child(8n+7) { 
  animation: wavetext 4s -3.5s infinite;
  -webkit-animation: wavetext 4s -3.5s infinite;
}
@keyframes wavetext {
  0%, 100% { top: 0em; } 50% { top: 0.5em; }
}
@-webkit-keyframes wavetext {
  0%, 100% { top: 0em; } 50% { top: 0.5em; }
}

Rapid rainbow text:

.char:nth-child(8n) { color:hsl(45,100%,75%); }
.char:nth-child(8n+1) {color:hsl(90,100%,75%); }
.char:nth-child(8n+2) {color:hsl(135,100%,75%); }
.char:nth-child(8n+3) {color:hsl(180,100%,75%); }
.char:nth-child(8n+4) {color:hsl(225,100%,75%); }
.char:nth-child(8n+5) {color:hsl(270,100%,75%); }
.char:nth-child(8n+6) {color:hsl(315,100%,75%); }
.char:nth-child(8n+7) {color:hsl(0,100%,75%); }

Illuminate letters on mouseover

.char { 
  transition: all 5s; -webkit-transition: all 5s;
  opacity: 0.4;
}
.char:hover {
  transition: all 0.1s; -webkit-transition: all 0.1s;
  opacity:1;
  text-shadow: 0 0 1em white;
}

Erase text on mouseover

.char { 
  transition: opacity 999s step-end; -webkit-transition: opacity 999s step-end;
}
.char:hover {
  opacity:0;
  transition: opacity 1ms; -webkit-transition: opacity 1ms;
}

Remove all the T's in the passage text:

.char.t {
  display:none;
}

Change "u" to "U":

.char.u {
  visibility:hidden;
}
.char.u::before {
  content: "U";
  position:absolute;
  visibility:visible;
}

These are to be considered basic examples - prompts for more practical uses.

This code also enables some particularly interesting Javascript visual effects to be performed, which I shall explore in a future blog post.

_{Feel free to report any bugs to @webbedspace.}

Attachment	Size
Myriad-lighttouch.html	100.42 KB
TwineCSS-colourwave.html	101.5 KB
Myriad-wavytext.html	101.33 KB
Myriad-crumbletext.html	103.48 KB

Welcome to the nighttime custodial shift!

I know cleaning carpets doesn’t sound like the most exciting thing, but this is seriously best job! You’ll see. Life and school and things is stressful, so it’s really nice to come to work, listen to music and just vacuum.

We got all kinds of machines you’ll get to use. There’s the iCapsol for agitating the carpet. That’s after it been sprayed down with soap of course. And then there’s the Prowler, which sucks all the soap and water out of the carpet after we’ve scrubbed it. When you empty the water out of the Prowler, is the most digesting and satisfying color you’ll ever see. Trust me.

My favorite though is the Tennant. You’ll use it at the end of the shift. There are two speeds on the dial – turtle or rabbit. If the floor is extra dirty you’ll use turtle but for the most part rabbit is the way to go. But even on rabbit, it moves slower than you’ve ever walked in your whole life. Walk the slowest you can possibly walk, and then go even slower. That’s the Tennant on rabbit. I normally prop a book up on it and read while it goes. I read most of The Picture of Dorian Gray this way!

We’re lucky here because we have the best boss. Alvan. FYI he loves Pepsi, makes knives and will always remembers your birthday. And twice a year he throws a waffle party!

So, here’s your keys. You can hook them onto your belt loop. These will get you into most of the rooms in this building except for the super cool air duct room in the basement. But I’ll show you how to get into there later.

Ok, let’s go take a look at the scariest room in the building now, that way you’ll know where to be nervous while locking up alone.

-Natalie Wood

Use the W A S D keys for movement, and the mouse to look around. I'll make a video how to use these controls soon :)

Included below is a video walkthrough in case you aren't able to access this, or if the controls are too difficult, or for whatever reason.

https://www.youtube.com/watch?v=riKl0hnDaps

A little explanation. I (quasiotter) am doing a monthly gallery show, and this is my friend Natalie's show. I think virtual spaces are super cool and I'm learning how to make them as "games." Okay.

The <<hoverrevise>> macro is an extension of the <<revision>> / <<revise>> macros. It lets you make a span of passage text briefly appear or disappear whenever you mouseover another span of text in the same passage.

Code

Just install the latest version of <<revision>> (1.1.0 or later). It's included already.

CSS

You may want a "dissolve" type of transition to be applied to the text that appears or disappears. For that, give the <<insertion>> or <<removal>> macro a name that, say, contains "hover", and then use this CSS to exclusively target it:

.revision-span-in[class*=hover] {
	opacity: 0;
}
.revision-span[class*=hover] {
	transition: 1s;
	-webkit-transition: 1s;
}
.revision-span-out[class*=hover] {
	position:absolute;
	opacity: 0;
}

If you aren't using any normal <<revise>> macros, you could omit "[class*=hover]" to make every <<revision>> span have this transition.

Usage examples

Use this in conjunction with <<revision>>, <<insertion>> or <<removal>> spans, as you would with <<revise>>. The <<hoverrevise>> macro covers a full span of text, ending with <<endhoverrevise>>

To make the text "Aah! A ghost!" appear when you mouseover a span:

<<insertion hoverghost>>Aah! A ghost!<<endinsertion>>
<<hoverrevise hoverghost>>You'd better [[go to the chapel|chapel]]<<endhoverrevise>>

To make the text "Don't leave me" disappear when you mouseover a span:

<<removal words>>"Don't leave me"<<endremoval>>
<<hoverrevise words>>[[Go to the beach|beach]]<<endhoverrevise>>

To make the text "Cold" change to "Warm" when you mouseover a span:

<<revision hovermetal>>Cold<<becomes>>Warm<<endrevision>>
<<hoverrevise hovermetal>>[img[gold.png]]<<endhoverrevise>>

These are just a few of the possibilities allowed by this macro.

Notes:
This wraps the contained text in a <span> with the class "hoverrevise" as well as "hoverrevise_" suffixed with the identifier you use (for instance, "hoverrevise_boo" for <<hoverrevise boo>>").
_{Feel free to report any bugs to @webbedspace.}

with enemy placement help by resoudrelamour

From the creator of Hide The Hot Dog 2 comes the the most realistic look-at-a-dog simulator mankind will ever know.