Spillutvikling i HTML5

Jeg fikk et spørsmål her om hvordan man kan utvikle spill i HTML5. Det nye CANVAS elementet i HTML gjør at du kan lage avansert grafikk uten bruk av Flash. Jeg har ikke fått prøvd dette så mye selv ennå, bortsett fra å programmere noen enkle todimensjonale grafer. Men mer kommer!!

Her er en oppskrift på hvordan du kan lage «ditt første spill» med HTML5: http://net.tutsplus.com/tutorials/html-css-techniques/build-your-first-game-with-html5/

På denne siden finnes en oversikt over spillmotorer.

http://html5gameengines.com/

I første omgang kan du ta en titt på dette rammeverket.
http://impactjs.com/

Orddeling i HTML5

<wbr> elementet er nytt i HTML5. Det står for WordBReak. <wbr> spesifiserer hvor i teksten det er ok å legge inn et linjeskift.

Hvis du har et langt ord som kan føre til at enten designet blir forskjøvet, eller at linjeskift kommer på galt sted, så kan du bruke <wbr> elementet.

<code>&lt;p&gt; Læren om å dele ord kalles ord&lt;wbr&gt;deling. &lt;/p&gt;</code>

Så enkelt kan det være!

Content Editable med HTML5

Foruten mange nye semantiske elementer i HTML5 standarden, er ContentEditable er et av de nye semantiske attributtene. Contenteditable attributtet muliggjør inline redigering av innhold.

Som standard arver underelementer dette attributtet fra sin foreldre, dersom ikke noe annet er spesifisert. I praksis betyr dette at du kan ha inline redigerering overalt på en HTML5 side.

Attributtet har 3 tilstander:

  • true – betyr at elementet er redigerbart
  • false – elementet kan ikke redigeres
  • inherit – elementet er redigerbart dersom foreldreelementet er redigerbart.

Eksempel:
Dette avsnittet er redigerbart

<p contenteditable=»true»>Dette innholdet er redigerbart!</p>

Det første elementet i listen er redigerbart, mens det andre kan ikke redigeres.

<ul contenteditable=»true»>
<li>Dette innholdet kan redigeres</li>
<li contenteditable=»false»>Dette innholdet kan ikke redigeres.</li>
</ul>

Vis og skjul elementer med HTML5

Ofte benyttes JavaScript for å vise og skjule elementer. I HTML5 kan elementene <details> og <summary> kan benyttes for å skjule og vise elementer på en webside. Da slipper man unødig bruk av JavaScript!

<details>
<summary>Informasjon</summary>
<p>Hvis nettleseren din støtter dette elementet
kan du skjule og vise dette avsnittet.</p>
</details>

Ønsker du for eksempel at et element skal vises som standard, kan du legge til attributtet open i details-elementet.

<!– Denne er åpen som standard –>
<details open=’open’>
<summary>Informasjon</summary>
<p>Hvis nettleseren din støtter dette elementet kan du skjule og vise dette avsnittet.</p>
</details>

<!– Denne er lukket som standard –>
<details>
<summary>Mer informasjon</summary>
<p>Dette avsnittet er lukket som standard.</p>
</details>