Spela Snake med HTML5

Under min julledighet har jag ägnat mig åt att utveckla ett spel som jag kallar för Snake JS. Spelidén bygger på det gamla spelet Snake, som man kunde spela på Nokia-mobiler från 90-talet. Snake JS, till skillnad från många andra spel, spelar man direkt i webbläsaren!Visserligen har man kunnat spela spel på webben rätt länge, men det har varit med hjälp av Adobe Flash Player, som visserligen är kraftfullt för multimedia, men det är inte en öppen webbstandard och det kostar pengar att använda utvecklingsverktyget. Snake JS är delvis konstruerat med en av de tekniker som i framtiden kommer att ersätta Flash, nämligen HTML5.Styr ormen med piltangenterna. Det är bara att köra igång!TeknikSpelet är helt byggt i JavaScript, med användning av den objekt-orienterade funktionaliteten som finns i språket. Spelet använder endast ett globalt variabelnamn — [javascript]SnakeJS()[/javascript] — och all kod finns i en fil.Ritning av spelplanen görs med hjälp av Canvas-elementet, som är en del av HTML5. Ormen ritas mycket enkelt med raka linjer av hög tjocklek. Ormens runda svängar fås av [javascript]context.lineJoin = "round"[/javascript] och [javascript]context.lineCap = "round"[/javascript].För den som är mer intresserad ligger koden på GitHub.HighscoresPublicera dina egna poäng på highscore-listan:// 1){snake.points.pop();drawCurrentScene();setTimeout(removeTail,config.frameInterval/4)}else setTimeout(resurrect,config.frameInterval*10)};var resurrect=function(){score=0;snake.growthLeft=constants.INITIAL_SNAKE_GROWTH_LEFT;snake.alive=true;drawCurrentScene();currentState=constants.STATE_READY};setTimeout(removeTail,config.frameInterval*10)};var startMoving=function(){if(currentState===constants.STATE_READY){frameIntervalId=setInterval(nextFrame,config.frameInterval);currentState=constants.STATE_PLAYING}};var nextFrame=function(){if(!moveSnake(inputInterface.lastDirection())){if(collisionFramesLeft>0){collisionFramesLeft--;return}else{snake.alive=false;drawCurrentScene();gameOver();return}}else collisionFramesLeft=config.collisionTolerance;if(!candy.age())candy=randomCandy();if(candy.point.collidesWith(snake.points[0])){eatCandy();candy=randomCandy()}drawCurrentScene()};var drawCurrentScene=function(){view.clear();view.drawSnake(snake,config.snakeColor);view.drawCandy(candy);view.drawScore(score,highScore)};var moveSnake=function(desiredDirection){var head=snake.points[0];var newDirection=actualDirection(desiredDirection||constants.DEFAULT_DIRECTION);var newHead=movePoint(head,newDirection);if(!insideGrid(newHead,grid))shiftPointIntoGrid(newHead,grid);if(snake.collidesWith(newHead,true)){return false}snake.direction=newDirection;snake.points.unshift(newHead);if(snake.growthLeft>=1)snake.growthLeft--;else snake.points.pop();return true};var eatCandy=function(){score+=candy.score;highScore=Math.max(score,highScore);snake.growthLeft+=candy.calories};var randomCandy=function(){do{var newCandyPoint=randomPoint(grid)}while(snake.collidesWith(newCandyPoint));var probabilitySeed=Math.random();if(probabilitySeed

Under min julledighet har jag ägnat mig åt att utveckla ett spel som jag kallar för Snake JS. Spelidén bygger på det gamla spelet Snake, som man kunde spela på Nokia-mobiler från 90-talet. Snake JS, till skillnad från många andra spel, spelar man direkt i webbläsaren!

Visserligen har man kunnat spela spel på webben rätt länge, men det har varit med hjälp av Adobe Flash Player, som visserligen är kraftfullt för multimedia, men det är inte en öppen webbstandard och det kostar pengar att använda utvecklingsverktyget. Snake JS är delvis konstruerat med en av de tekniker som i framtiden kommer att ersätta Flash, nämligen HTML5.

Styr ormen med piltangenterna. Det är bara att köra igång!


Teknik

Spelet är helt byggt i JavaScript, med användning av den objekt-orienterade funktionaliteten som finns i språket. Spelet använder endast ett globalt variabelnamn — SnakeJS() — och all kod finns i en fil.

Ritning av spelplanen görs med hjälp av Canvas-elementet, som är en del av HTML5. Ormen ritas mycket enkelt med raka linjer av hög tjocklek. Ormens runda svängar fås av context.lineJoin = "round" och context.lineCap = "round".

För den som är mer intresserad ligger koden på GitHub.

Highscores

  1. Sara, 1135p
  2. Therese, 1130p
  3. Therese, 1100p
  4. Betamos, 1055p
  5. Sara, 990p
  6. Therese, 980p
  7. Therese, 920p
  8. Therese, 845p
  9. Sara, 785p
  10. Therese, 760p

Publicera dina egna poäng på highscore-listan:

6 jan 2011
  • spel
  • JavaScript
  • HTML5
  • canvas

10 kommentarer

Dregan's Gravatar

1. Dregan

Ordningsfråga: Är det en bugg eller feature att poängen visas både till höger och vänster? :P

Didrik Nordström's Gravatar

2. Didrik Nordström

@Dregan Det är en feature, men du har missuppfattat. Poängen till höger, tillfällig highscore till vänster.

Emil's Gravatar

3. Emil

Så jävla underbart att se!! Riktigt bra flow i det också.

Dock är jag tveksam till Highscore-listan.. 13371337. hmm, luktar fake

's Gravatar

4. Gäst

Patchade in en autoplay funktion som gav mig 1050p innan masken blev större än spelplan. Lite fler poäng per äpple eller större chans för gröna tycker jag!

Sara's Gravatar

5. Sara

Varför är den fina färgen på planen borta? och den går lååååååååångsamt.

Didrik Nordström's Gravatar

6. Didrik Nordström

@Emil Tack! Jag fick rensa bort fusket manuellt. Funderade på att göra det någorlunda svårare att fuska med kryptering och kontroll av spelplanens värden, men highscore-grunkan tillhör inte direkt själva spelet, så det blev inte av. Blev en fullösning med webform och PHP-kod istället.

@Gäst Tack för feedbacken! Om du är hajpad på programmering får du gärna vara med och samarbeta på github.

@Sara Den går långsamt för att det ska passa även dom som inte är lika bra som du :)

Emil's Gravatar

7. Emil

Kollade koden nu, ser riktigt bra ut. DOMprogrammering är 1337. Läser du det nu eller hur kommer det sig att du skippat vår gemensamme vän jQuery?

Didrik Nordström's Gravatar

8. Didrik Nordström

Näe, jag läser inget sånt ännu tyvärr. Det är väldigt lite DOM, behövs i princip bara för att skapa canvas-elementet. Kändes onödigt att köra jQuery bara för det. Däremot funkar ju inte addEventListener() i IE, vilket det hade gjort med $(...).bind(). Men IE får anpassa sig. Det verkar komma i IE9 :)

Puj's Gravatar

9. Puj

I didnt get into the top 10 ?!?! Really?

Ryan's Gravatar

10. Ryan

hey was wondering if you could share your code/help with building that high score section.Thanks!

Kommentera