Random posts

Pedro Paiva's picture

I Hate Cars

screenshot odeio carros.png

I Hate Cars is a puzzle inspired by Tricky Kick, with the same mechanics but with the additive "worm-holes" like the ones in Pac-Man. It's a short game, with five levels, and a rewarding ending.

The audiovisual and design was made by me, and the friend Bruno Ferreira programmed the game (much better than I would make, certainly).

Controls: Z to shoot, R to reset, arrow keys to move, Z or Enter to skip title.

________________________

Odeio Carros é um puzzle inspirado em Tricky Kick, com a mesma mecânica mas com o acréscimo dos "buracos de minhoca" estilo Pac-Man. É um jogo curto, com cinco fases, e um final recompensador.

O jogo é de minha autoria, mas foi o amigo Bruno Ferreira que programou (muito melhor do que eu faria, diga-se de passagem).

Controles: Z para chutar, R para reiniciar partida, teclas direcionais para mover o personagem, Z ou Enter para pular o título.

Made For: 
An event

Twine: apply CSS to individual characters

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.

AttachmentSize
Myriad-lighttouch.html100.42 KB
TwineCSS-colourwave.html101.5 KB
Myriad-wavytext.html101.33 KB
Myriad-crumbletext.html103.48 KB
sergiocornaga's picture

One Button / Accessibility Mini-Jam

Sat, Sep 22 2018 01:00 AM
09/22/2018 - 08:00
10/08/2018 - 23:59
Etc/GMT


Above: an image of the Xbox Adaptive Controller.

I'm a bit elated by having one of my games featured in this Xbox Adaptive Controller showcase. I'm channelling that enthusiasm into a small event!

I find designing simple one-button games extremely satisfying and would encourage others to try it, but I'm not setting any requirements on what should qualify for this event. Focus on different kinds of accessibility if you want!

Thanks to gisbrecht for suggesting I mention Game Accessibility Guidelines, an incredible resource. Particularly relevant are the suggestion to avoid button mashing and offer an alternative to holding down buttons.


Games made for One Button / Accessibility Mini-Jam

The Castle of The Worm Legends

cwl.jpg
Game File: 

This is the first game I made using Twine so it doesn't use any fancy customization or scripts. After thinking for a little while about the videogamena.me title "The Castle of the Worm Legends", I thought I would make something about stories invented by kids. As I wrote it, it assumed a grim tone that wasn't quite planned.

The .zip file includes the twine source and the generated HTML to play.

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

Pretty cool NES stop-motion animation

So I found this video on youtube where a guy recreated NES scenes with stop-motion. Check it out!

rubenmg's picture

Kill the Ninjas 64

cover.png

Inspired to make the game thanks to Emilie Reed's The Iron Hand in the Velvet Glove.

Thanks to Eclipse for the leaks. You can read about them here. You can read more here, or check the sources by yourself here.
If there is more relevant information that you think should be listed here feel free to tell me. 


I'll upload a sort of making of/tutorial in the near future about the game, it will be posted here. I'll also upload the whole Unity project.


Credits:
Game Engine: Unity
Graphics: Paint and Gimp
Sound Effects: bfxr
Music: MIDIs generated with Guitar Pro 5 (an old pirated version, don't know where to find that lol) and MIDIs converted with GXSCC

Author: 
RubenMG
Made For: 
testing

Penguin Lost

PenguinLost.png
Game File: 

Take control of a lost penguin in this exciting lost penguin simulator, Penguin Lost. Walk through the vast tundra of the south pole and experience a day-night cycle, but don't lose hope! That's the point. There is always hope of finding your family, penguin.

(Made with Game Maker.)

Author: 
Max Weinberg
Made For: 
An event
wibi's picture

JumperTwoJam

Mon, Sep 25 2017 03:00 PM
09/25/2017 - 15:00
12/25/2017 - 15:00
Etc/GMT-7


Just make a sector in the vastly underused Jumper Two Editor. Maybe play the main game a bit to familiarize yourself with the physics/mechanics.

NOTE: Pressing "save" instead of "save as" will just save your sector as "New Sector.j2e". If "New Sector.j2e" already exists, it WILL be overwritten. For that reason I suggest you always "save as" so that you don't save all your data to an easily overwritable file.


Games made for JumperTwoJam

everythingstaken's picture

Chess Simulation

Screen Shot 2020-02-21 at 12.56.30 AM.png
Game File: 

it's a chess board and pieces
it's based on a chess board i found at a thrift store once
i bought it only for a couple dollars
the pieces look pretty well sculpted or something
i found on ebay that there are others, but the paint is a tiny bit different

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

An Extremley bad Defender clone!

A really bad defender screenshot!.PNG

I made a REALLY BAD DEFENDER CLONE!
Just save all of the Yellow runners to win.

Made For: 
An event
Syndicate content