Random posts

XenosNS's picture

Regret

screenshot112.png
Game File: 

A little bit of Pac-man, Dig Dug, Zelda, and Pet Cemetery.

Undo what you've done before time runs out.

Use arrow keys to move. Point and hold to reverse what you've done. Hit enter to pause. Hit F12 to toggle music off/on.

Made For: 
An event
PedalMagic's picture

Out of Space

Image 083.png

You took too much [DRUG] and missed the shuttle launch. Or maybe you're too early? It's really hard to tell. Maybe you shouldn't have taken all of that [DRUG].

Meander about the valley with [WASD]

Observe the perfect harmony of the world with [MOUSE]

Contemplate the meaning of existence with [ENTER]

Download standalone win/mac here for full screen experience

http://www.mediafire.com/?zflweai85pmq0q6

or play sad tiny shrimpy web embed version above

Event Created For: 
Made For: 
An event
SpindleyQ's picture

Yep

I'm writing a telnet server for realtime online multiplayer ANSI gaming and game-creation. Realtime collaboration is so much easier when everything happens on the server, and it's so much easier for everything to happen on the server when it only has to worry about spitting out 80x25 character images. I'm almost done with the plumbing (parsing ANSI escape codes from a telnet stream, an internal representation of an ANSI screen, diffing two ANSI screens to minimize the amount of shit sent over the wire), and it should be pretty straightforward to port my Stackless Python game engine to use this new framework. Might this mean a textmode port of Hax0r?

Anyone want to contribute some sweet ANSI?

Ideas for scripting are welcome. I don't really think ZZT-OOP is the way to go (Goto-based programming! Brillant!); a more Klik & Play-style if-this-happens-then-do-this approach is probably better. I can expand on this if anyone is interested.

ihavefivehat's picture

tofu thumbs up!

title screen.jpg
Game File: 

the plot generator thing was something like "a hero eats tofu to save the world"

that's what you do in this game, except I don't know if you actually save the world. ...maybe?

Event Created For: 
Made For: 
An event

Dolphobia

dolphobia.png
Game File: 

for GDC 2010!
This is my first Klik n Play gaem.

Made For: 
Glorious GDC Gameboree 2010
Zecks's picture

Post Apocalyptic Beautiful Experience IV: Forest S.T.A.L.K.E.R. Monkey Bananas

beauti4.png
Game File: 

KNP import didn't like green.

I'm also not responsible for any impossible scenarios.

Made For: 
An event
Zecks's picture

Over halfway there.

Just a progress report. I think I'll finally pick the pace up on this instead doing maybe two or three things in a week. Stay tuned for the next blog post though.

AttachmentSize
thisistheshit.PNG19.21 KB

A breakdown of the CSS in my Twine game Capri Toot

This is the inline CSS I used in my Twine game, Capri Toot. Of course, I had to write some other CSS for my special horizontal hacked variant of Jonah, but this below is where almost all of the visual style of Capri Toot comes from.
----------------
#passages {
background-color: #000;
overflow:hidden;
}

----------------
"overflow: hidden" hides the horizontal scrollbar in the passages DIV, which is useful because backtracking isn't possible in Capri Toot.
----------------

@keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }
50% {box-shadow: 0 0 0.5em 0.5em }
100% {box-shadow: 0 0 2.5em 2.5em }
}

@-moz-keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }

50% {box-shadow: 0 0 0.5em 0.5em }

100% {box-shadow: 0 0 2.5em 2.5em }

}

@-webkit-keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }

50% {box-shadow: 0 0 0.5em 0.5em }

100% {box-shadow: 0 0 2.5em 2.5em }

}

@-o-keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }

50% {box-shadow: 0 0 0.5em 0.5em }

100% {box-shadow: 0 0 2.5em 2.5em }

}
----------------
CSS Keyframes: These define the animated pulsing glow behind the passages. There are four definitions because each browser has its own syntax (except IE, which doesn't support this). These define some timeline events which the browser tries to smoothly interpolate between. When the animation is 50% complete, the box-shadow is retracted to a size of 0.5em. When the animation starts and finishes, it's at its full size of 2.5em. Defining both a 0% and 100% point ensures that it loops smoothly, if an element uses it as a looping animation.
----------------

.passage:nth-child(8n+7) {
text-shadow: 0 0 0.6em hsl(0,100%,60%);

color: hsl(0,100%,50%);

background-color: hsl(0,100%,5%);

}

.passage:nth-child(8n) {
text-shadow: 0 0 0.6em hsl(45,100%,60%);

color: hsl(45,100%,50%);

background-color: hsl(45,100%,5%);

}

.passage:nth-child(8n+1) {
text-shadow: 0 0 0.6em hsl(90,100%,60%);

color: hsl(90,100%,50%);

background-color: hsl(90,100%,5%);

}

.passage:nth-child(8n+2) {
text-shadow: 0 0 0.6em hsl(135,100%,60%);

color: hsl(135,100%,50%);

background-color: hsl(135,100%,5%);

}

.passage:nth-child(8n+3) {
text-shadow: 0 0 0.6em hsl(180,100%,60%);

color: hsl(180,100%,50%);

background-color: hsl(180,100%,5%);

}

.passage:nth-child(8n+4) {
text-shadow: 0 0 0.6em hsl(225,100%,60%);

color: hsl(225,100%,50%);

background-color: hsl(225,100%,5%);

}

.passage:nth-child(8n+5) {
text-shadow: 0 0 0.6em hsl(270,100%,60%);

color: hsl(270,100%,50%);

background-color: hsl(270,100%,5%);

}

.passage:nth-child(8n+6) {
text-shadow: 0 0 0.6em hsl(315,100%,60%);

color: hsl(315,100%,50%);

background-color: hsl(315,100%,5%);

}

----------------
These are used to colour each of the zone tiers differently. When you click on a link in Jonah (as compared to Sugarcane) a new passage div is added to the end of the #passages div as a new child node. The nth-child() selector allows you to apply specific styles to an element depending on which child it is. nth-child(8n) means that every eighth child should have this style (starting with the first). nth-child(8n+1) means that every eighth child, plus 1 position over, gets this style. So, with these eight definitions, a looping cycle of eight colours is produced. This is kind of overkill for Capri Toot since you can only ever go 8 passages deep, but w/e.

Also, a note: if you don't specify a colour for box-shadow, then it falls back to using the text colour. Hence, we use a colour style here to change the animated shadow's colour without having to set up eight different keyframes (x 4 browsers).
----------------

.passage {
margin-left: 33%;

margin-right: 33%;

min-width: 33%;

margin-top: 3em;

margin-bottom: 3em;

border-radius: 8em;

border-color: white;

border-width: 2px;

box-shadow: 0 0 2.5em 2.5em;

animation: borderkeyframe 3s infinite;

-moz-animation: borderkeyframe 3s infinite;

-webkit-animation: borderkeyframe 3s infinite;

-o-animation: borderkeyframe 3s infinite;

}
----------------
The margin and min-width definitions mean that only one passage is ever visible at one time. The border-radius definition produces the delightful rounded rectangle edges. The animation definitions bind the aforementioned keyframe to this element, give it a speed (3 seconds) and tell it how many times to loop (infinite). Again, 4 definitions because each browser (except IE) has different syntax.
----------------

.passage .body .internalLink {

font-style: italic;

font-size: 1.5em;

color: white;

text-shadow: 0 0 0.6em silver;

}
.passage .body {

color: white;

text-shadow: inherit;

}
.passage .title {

margin-top: 0.2em;

font-style: italic;

font-size: 2em;

color: white;

text-align: center;

}
----------------
Fairly straightforward. Setting .body's text colour to white overrides the previous colour definition for .passage (which as I mentioned is being used for the box shadow).
----------------

.toolbar {

display:none;

}
----------------
This single-handedly hides the Jonah "rewind / bookmark" prompts for each passage. Quite convenient.

Brainmotron VS Hypermoth

brain1.png

YOU ARE BRAINMOTRON! HE BRAIN! MOTH EVIL!

Author: 
Adrian Gordon
Made For: 
An event
Syndicate content
pensive-mosquitoes