http://betamos.se/bloggen sv http://feedproxy.google.com/~r/betamos/~3/aV39v4nTQQk/spela-snake-med-html5 <div class="flattr-box"><script type="text/javascript"> var flattr_uid = 'betamos'; var flattr_tle = 'Spela Snake med HTML5'; var flattr_dsc = '&lt;p&gt;Under min julledighet har jag ägnat mig åt att &lt;strong&gt;utveckla ett spel&lt;/strong&gt; som jag kallar för &lt;strong&gt;Snake JS&lt;/strong&gt;. 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&amp;nbsp;&lt;strong&gt;direkt i webbläsaren&lt;/strong&gt;!&lt;/p&gt;&lt;p&gt;Visserligen har man kunnat spela spel på webben rätt länge, men det har varit med hjälp av Adobe&amp;nbsp;&lt;strong&gt;Flash Player&lt;/strong&gt;, 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 &lt;a href=&quot;http://diveintohtml5.org/&quot;&gt;HTML5&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Styr ormen med piltangenterna&lt;/strong&gt;. Det är bara att köra igång!&lt;/p&gt;&lt;div id=&quot;snake-js-parent&quot;&gt;&lt;/div&gt;&lt;br /&gt;&lt;h2&gt;Teknik&lt;/h2&gt;&lt;p&gt;Spelet är helt &lt;strong&gt;byggt i JavaScript&lt;/strong&gt;, med användning av den objekt-orienterade funktionaliteten som finns i språket. Spelet använder endast ett globalt variabelnamn — [javascript]SnakeJS()[/javascript]&amp;nbsp;— och all kod finns i en fil.&lt;/p&gt;&lt;p&gt;Ritning av spelplanen görs med hjälp av &lt;a href=&quot;http://diveintohtml5.org/canvas.html&quot;&gt;Canvas-elementet&lt;/a&gt;, som är en del av HTML5. Ormen ritas mycket enkelt med raka linjer av hög tjocklek.&amp;nbsp;Ormens runda svängar fås av [javascript]context.lineJoin = &quot;round&quot;[/javascript] och&amp;nbsp;[javascript]context.lineCap = &quot;round&quot;[/javascript].&lt;/p&gt;&lt;p&gt;För den som är mer intresserad ligger &lt;a href=&quot;http://github.com/betamos/Snake-JS&quot;&gt;koden på GitHub&lt;/a&gt;.&lt;/p&gt;&lt;h2&gt;Highscores&lt;/h2&gt;&lt;p&gt;&lt;?php $query = &quot;SELECT sid, data + 0 as scoreFROM {webform_submitted_data}WHERE nid = 118 AND cid = 2ORDER BY score DESC LIMIT 10&quot;;$res = db_query($query);$highscores = array();while ($row = db_fetch_object($res)) { $query = &quot;SELECT data FROM {webform_submitted_data} WHERE nid = 118 AND cid = 1 AND sid = %d&quot;; $name = db_result(db_query($query, $row-&gt;sid)); $highscores[] = $name . &#039;, &#039; . $row-&gt;score . &#039;p&#039;;}print theme_item_list($highscores, NULL, &#039;ol&#039;);?&gt;&lt;/p&gt;&lt;p style=&quot;margin-bottom: 0;&quot;&gt;&lt;strong&gt;Publicera dina egna poäng&lt;/strong&gt; på highscore-listan:&lt;/p&gt;&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[function SnakeJS(parentElement,config){var utilities=new Utilities();var defaultConfig={autoInit:true,gridWidth:30,gridHeight:20,frameInterval:150,pointSize:16,backgroundColor:&quot;white&quot;,snakeColor:&quot;#4b4312&quot;,snakeEyeColor:&quot;white&quot;,candyColor:&quot;#b11c1c&quot;,shrinkingCandyColor:&quot;#199C2C&quot;,scoreBoardColor:&quot;#c0c96b&quot;,scoreTextColor:&quot;#4b4312&quot;,collisionTolerance:1};var config=config?utilities.mergeObjects(defaultConfig,config):defaultConfig;var constants={DIRECTION_UP:1,DIRECTION_RIGHT:2,DIRECTION_DOWN:-1,DIRECTION_LEFT:-2,DEFAULT_DIRECTION:2,STATE_READY:1,STATE_PAUSED:2,STATE_PLAYING:3,STATE_GAME_OVER:4,INITIAL_SNAKE_GROWTH_LEFT:6,SCOREBOARD_HEIGHT:20,CANDY_REGULAR:1,CANDY_MASSIVE:2,CANDY_SHRINKING:3};var engine=new Engine(parentElement);this.init=function(){engine.initGame()};this.pause=function(){engine.pauseGame()};this.resume=function(){engine.resume()};this.getHighScore=function(){return engine.getHighScore()};function Engine(parentElement){var snake,candy,view,inputInterface,grid,currentState,frameIntervalId,score,highScore,collisionFramesLeft;this.initGame=function(){view=new View(parentElement,config.backgroundColor);inputInterface=new InputInterface(this.pauseGame,this.resumeGame,startMoving);snake=new Snake();grid=new Grid(config.gridWidth,config.gridHeight);score=0;highScore=score;snake.points.push(randomPoint(grid));snake.growthLeft=constants.INITIAL_SNAKE_GROWTH_LEFT;candy=randomCandy();view.initPlayField();drawCurrentScene();inputInterface.startListening();currentState=constants.STATE_READY};this.pauseGame=function(){if(currentState===constants.STATE_PLAYING){clearInterval(frameIntervalId);currentState=constants.STATE_PAUSED}};this.resumeGame=function(){if(currentState===constants.STATE_PAUSED){frameIntervalId=setInterval(nextFrame,config.frameInterval);currentState=constants.STATE_PLAYING}};this.getHighScore=function(){return highScore};var gameOver=function(){currentState=constants.STATE_GAME_OVER;clearInterval(frameIntervalId);var removeTail=function(){if(snake.points.length&gt;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&gt;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&gt;=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&lt;0.75)var newType=constants.CANDY_REGULAR;else if(probabilitySeed&lt;0.95)var newType=constants.CANDY_MASSIVE;else var newType=constants.CANDY_SHRINKING;return new Candy(newCandyPoint,newType)};var actualDirection=function(desiredDirection){if(snake.points.length===1)return desiredDirection;else if(utilities.oppositeDirections(snake.direction,desiredDirection)){return snake.direction}else{return desiredDirection}};var movePoint=function(oldPoint,direction){var newPoint;with(constants){switch(direction){case DIRECTION_LEFT:newPoint=new Point(oldPoint.left-1,oldPoint.top);break;case DIRECTION_UP:newPoint=new Point(oldPoint.left,oldPoint.top-1);break;case DIRECTION_RIGHT:newPoint=new Point(oldPoint.left+1,oldPoint.top);break;case DIRECTION_DOWN:newPoint=new Point(oldPoint.left,oldPoint.top+1);break}}return newPoint};var shiftPointIntoGrid=function(point,grid){point.left=shiftIntoRange(point.left,grid.width);point.top=shiftIntoRange(point.top,grid.height);return point};var shiftIntoRange=function(number,range){var shiftedNumber,steps;if(utilities.sign(number)==1){steps=Math.floor(number/range);shiftedNumber=number-(range*steps)}else if(utilities.sign(number)==-1){steps=Math.floor(Math.abs(number)/range)+1;shiftedNumber=number+(range*steps)}else{shiftedNumber=number}return shiftedNumber};var insideGrid=function(point,grid){if(point.left&lt;0||point.top&lt;0||point.left&gt;=grid.width||point.top&gt;=grid.height){return false}else{return true}};var randomPoint=function(grid){var left=utilities.randomInteger(0,grid.width-1);var top=utilities.randomInteger(0,grid.height-1);var point=new Point(left,top);return point}}function Grid(width,height){this.width=width;this.height=height}function Snake(){this.direction=constants.DEFAULT_DIRECTION;this.points=[];this.growthLeft=0;this.alive=true;this.collidesWith=function(point,simulateMovement){if(simulateMovement&amp;&amp;this.growthLeft===0)range=this.points.length-1;else range=this.points.length;for(var i=0;i&lt;range;i++){if(point.collidesWith(this.points[i]))return true}return false}}function Point(left,top){this.left=left;this.top=top;this.collidesWith=function(otherPoint){if(otherPoint.left==this.left&amp;&amp;otherPoint.top==this.top)return true;else return false}}function Candy(point,type){this.point=point,this.type=type,this.score,this.calories,this.radius,this.color,this.decrement,this.minRadius;switch(type){case constants.CANDY_REGULAR:this.score=5;this.calories=3;this.radius=0.3;this.color=config.candyColor;break;case constants.CANDY_MASSIVE:this.score=15;this.calories=5;this.radius=0.45;this.color=config.candyColor;break;case constants.CANDY_SHRINKING:this.score=50;this.calories=0;this.radius=0.45;this.color=config.shrinkingCandyColor;this.decrement=0.008;this.minRadius=0.05;break}this.age=function(){if(this.type===constants.CANDY_SHRINKING){this.radius-=this.decrement;if(this.radius&lt;this.minRadius)return false;else return true}else return true}};function Utilities(){this.sign=function(number){if(number&gt;0)return 1;else if(number&lt;0)return-1;else if(number===0)return 0;else return undefined};this.oppositeDirections=function(direction1,direction2){if(Math.abs(direction1)==Math.abs(direction2)&amp;&amp;this.sign(direction1*direction2)==-1){return true}else{return false}};this.mergeObjects=function mergeObjects(slave,master){var merged={};for(key in slave){if(typeof master[key]===&quot;undefined&quot;)merged[key]=slave[key];else merged[key]=master[key]}return merged};this.randomInteger=function(min,max){var randomNumber=min+Math.floor(Math.random()*(max+1));return randomNumber}}function View(parentElement,backgroundColor){var playField,ctx,snakeThickness;this.initPlayField=function(){snakeThickness=length(0.9);playField=document.createElement(&quot;canvas&quot;);playField.setAttribute(&quot;id&quot;,&quot;snake-js&quot;);playField.setAttribute(&quot;width&quot;,config.gridWidth*config.pointSize);playField.setAttribute(&quot;height&quot;,config.gridHeight*config.pointSize+constants.SCOREBOARD_HEIGHT);parentElement.appendChild(playField);ctx=playField.getContext(&quot;2d&quot;);ctx.translate(0,constants.SCOREBOARD_HEIGHT)};this.drawSnake=function(snake,color){if(snake.points.length===1){var position=getPointPivotPosition(snake.points[0]);ctx.fillStyle=color;ctx.beginPath();ctx.arc(position.left,position.top,snakeThickness/2,0,2*Math.PI,false);ctx.fill()}else{ctx.strokeStyle=color;ctx.lineWidth=snakeThickness;ctx.lineJoin=&quot;round&quot;;ctx.lineCap=&quot;round&quot;;ctx.beginPath();for(var i=0;i&lt;snake.points.length;i++){var currentPoint=snake.points[i];if(i===0){var currentPointPosition=getPointPivotPosition(currentPoint);ctx.moveTo(currentPointPosition.left,currentPointPosition.top)}else{var prevPoint=snake.points[i-1];if(Math.abs(prevPoint.left-currentPoint.left)&lt;=1&amp;&amp;Math.abs(prevPoint.top-currentPoint.top)&lt;=1){var currentPointPosition=getPointPivotPosition(currentPoint);ctx.lineTo(currentPointPosition.left,currentPointPosition.top)}else{connectWallPoints(prevPoint,currentPoint)}}}ctx.stroke()}drawEye(snake,snake.direction)};this.drawCandy=function(candy){ctx.fillStyle=candy.color;var position=getPointPivotPosition(candy.point);ctx.beginPath();ctx.arc(position.left,position.top,length(candy.radius),0,Math.PI*2,false);ctx.fill()};this.clear=function(color){ctx.fillStyle=color||backgroundColor;ctx.fillRect(0,0,config.gridWidth*config.pointSize,config.gridHeight*config.pointSize)};this.drawScore=function(score,highScore){ctx.translate(0,-1*constants.SCOREBOARD_HEIGHT);var bottomMargin=5;var horizontalMargin=4;ctx.fillStyle=config.scoreBoardColor;ctx.fillRect(0,0,config.gridWidth*config.pointSize,constants.SCOREBOARD_HEIGHT);ctx.fillStyle=config.scoreTextColor;ctx.font=&quot;bold 16px &#039;Courier new&#039;, monospace&quot;;ctx.textAlign=&quot;right&quot;;ctx.fillText(score,config.gridWidth*config.pointSize-horizontalMargin,constants.SCOREBOARD_HEIGHT-bottomMargin);ctx.textAlign=&quot;left&quot;;ctx.fillText(highScore,horizontalMargin,constants.SCOREBOARD_HEIGHT-bottomMargin);ctx.translate(0,constants.SCOREBOARD_HEIGHT)};var drawEye=function(snake){var head=snake.points[0];var headPosition=getPointPivotPosition(head);var offsetLeft=length(0.125);var offsetTop=length(0.15);switch(snake.direction){case constants.DIRECTION_LEFT:headPosition.left-=offsetLeft;headPosition.top-=offsetTop;break;case constants.DIRECTION_RIGHT:headPosition.left+=offsetLeft;headPosition.top-=offsetTop;break;case constants.DIRECTION_UP:headPosition.left-=offsetTop;headPosition.top-=offsetLeft;break;case constants.DIRECTION_DOWN:headPosition.left+=offsetTop;headPosition.top+=offsetLeft;break}if(snake.alive){ctx.beginPath();ctx.fillStyle=config.snakeEyeColor;ctx.arc(headPosition.left,headPosition.top,length(0.125),0,Math.PI*2,false);ctx.fill()}else{ctx.beginPath();ctx.strokeStyle=config.snakeEyeColor;ctx.lineWidth=2;ctx.moveTo(headPosition.left-length(0.1),headPosition.top-length(0.1));ctx.lineTo(headPosition.left+length(0.1),headPosition.top+length(0.1));ctx.moveTo(headPosition.left+length(0.1),headPosition.top-length(0.1));ctx.lineTo(headPosition.left-length(0.1),headPosition.top+length(0.1));ctx.stroke()}};var length=function(value){return value*config.pointSize};var getPointPivotPosition=function(point){var position={left:point.left*length(1)+length(.5),top:point.top*length(1)+length(.5)};return position};var connectWallPoints=function(p1,p2){var p2Position=getPointPivotPosition(p2);var leftOffset=utilities.sign(p2.left-p1.left);var topOffset=utilities.sign(p2.top-p1.top);var fakeEndPoint=new Point(p1.left-leftOffset,p1.top-topOffset);var fakeEndPointPosition=getPointPivotPosition(fakeEndPoint);ctx.lineTo(fakeEndPointPosition.left,fakeEndPointPosition.top);var fakeStartPoint=new Point(p2.left+leftOffset,p2.top+topOffset);var fakeStartPointPosition=getPointPivotPosition(fakeStartPoint);ctx.moveTo(fakeStartPointPosition.left,fakeStartPointPosition.top);ctx.lineTo(p2Position.left,p2Position.top)}}function InputInterface(pauseFn,resumeFn,autoPlayFn){var arrowKeys=[37,38,39,40],listening=false,lastDirection=null;this.lastDirection=function(){return lastDirection};this.startListening=function(){if(!listening){window.addEventListener(&quot;keydown&quot;,handleKeyDown,true);window.addEventListener(&quot;keypress&quot;,disableKeyPress,true);window.addEventListener(&quot;blur&quot;,pauseFn,true);window.addEventListener(&quot;focus&quot;,resumeFn,true);listening=true}};this.stopListening=function(){if(listening){window.removeEventListener(&quot;keydown&quot;,handleKeyDown,true);window.removeEventListener(&quot;keypress&quot;,disableKeyPress,true);window.removeEventListener(&quot;blur&quot;,pauseFn,true);window.removeEventListener(&quot;focus&quot;,resumeFn,true);listening=false}};var handleKeyDown=function(event){if(arrowKeys.indexOf(event.keyCode)&gt;=0){handleArrowKeyPress(event)}};var disableKeyPress=function(event){if(arrowKeys.indexOf(event.keyCode)&gt;=0){event.preventDefault()}};var handleArrowKeyPress=function(event){with(constants){switch(event.keyCode){case 37:lastDirection=DIRECTION_LEFT;break;case 38:lastDirection=DIRECTION_UP;break;case 39:lastDirection=DIRECTION_RIGHT;break;case 40:lastDirection=DIRECTION_DOWN;break}}event.preventDefault();autoPlayFn()}}if(config.autoInit){this.init()}};$(document).ready(function(){if(navigator.appName == &quot;Microsoft Internet Explorer&quot;) { var warning = &quot;Tyvärr fungerar inte Snake JS med Internet Explorer. Använd istället Chrome, Firefox eller Safari.&quot;; $(&#039;#snake-js-parent&#039;).addClass(&#039;messages error&#039;).text(warning);}else { var settings = { pointSize : 20, gridWidth : 27 }; var game = new SnakeJS(document.getElementById(&quot;snake-js-parent&quot;), settings); $(&#039;#webform-client-form-118&#039;).submit(function(){ $(&#039;#edit-submitted-score&#039;).val(game.getHighScore()); return true; });}});// ]]&gt;&lt;/script&gt;'; var flattr_tag = 'canvas,HTML5,JavaScript,spel'; var flattr_cat = 'software'; var flattr_url = 'http://betamos.se/bloggen/spela-snake-med-html5'; var flattr_lng = 'en_GB'</script> <script src="http://api.flattr.com/button/load.js" type="text/javascript"></script> </div><p>Under min julledighet har jag ägnat mig åt att <strong>utveckla ett spel</strong> som jag kallar för <strong>Snake JS</strong>. 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&nbsp;<strong>direkt i webbläsaren</strong>!</p><p>Visserligen har man kunnat spela spel på webben rätt länge, men det har varit med hjälp av Adobe&nbsp;<strong>Flash Player</strong>, 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 <a href="http://diveintohtml5.org/">HTML5</a>.</p><p><strong>Styr ormen med piltangenterna</strong>. Det är bara att köra igång!</p> <div id="snake-js-parent"></div> <br /> <h2>Teknik</h2><p>Spelet är helt <strong>byggt i JavaScript</strong>, med användning av den objekt-orienterade funktionaliteten som finns i språket. Spelet använder endast ett globalt variabelnamn — <span class="geshifilter"><code class="javascript geshifilter-javascript">SnakeJS<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></code></span>&nbsp;— och all kod finns i en fil.</p><p>Ritning av spelplanen görs med hjälp av <a href="http://diveintohtml5.org/canvas.html">Canvas-elementet</a>, som är en del av HTML5. Ormen ritas mycket enkelt med raka linjer av hög tjocklek.&nbsp;Ormens runda svängar fås av <span class="geshifilter"><code class="javascript geshifilter-javascript">context.<span style="color: #660066;">lineJoin</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;round&quot;</span></code></span> och&nbsp;<span class="geshifilter"><code class="javascript geshifilter-javascript">context.<span style="color: #660066;">lineCap</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;round&quot;</span></code></span>.</p><p>För den som är mer intresserad ligger <a href="http://github.com/betamos/Snake-JS">koden på GitHub</a>.</p> <h2>Highscores</h2> <p> <div class="item-list"><ol><li class="first">Thelbane, 11400p</li> <li>Thelbane, 1140p</li> <li>Sara, 1135p</li> <li>Therese, 1130p</li> <li>Therese, 1100p</li> <li>Betamos, 1055p</li> <li>Sara, 990p</li> <li>Therese, 980p</li> <li>Therese, 920p</li> <li class="last">Therese, 845p</li> </ol></div> </p> <p style="margin-bottom: 0;"> <strong>Publicera dina egna poäng</strong> på highscore-listan: </p> <script type="text/javascript">// <![CDATA[ function SnakeJS(parentElement,config){var utilities=new Utilities();var defaultConfig={autoInit:true,gridWidth:30,gridHeight:20,frameInterval:150,pointSize:16,backgroundColor:"white",snakeColor:"#4b4312",snakeEyeColor:"white",candyColor:"#b11c1c",shrinkingCandyColor:"#199C2C",scoreBoardColor:"#c0c96b",scoreTextColor:"#4b4312",collisionTolerance:1};var config=config?utilities.mergeObjects(defaultConfig,config):defaultConfig;var constants={DIRECTION_UP:1,DIRECTION_RIGHT:2,DIRECTION_DOWN:-1,DIRECTION_LEFT:-2,DEFAULT_DIRECTION:2,STATE_READY:1,STATE_PAUSED:2,STATE_PLAYING:3,STATE_GAME_OVER:4,INITIAL_SNAKE_GROWTH_LEFT:6,SCOREBOARD_HEIGHT:20,CANDY_REGULAR:1,CANDY_MASSIVE:2,CANDY_SHRINKING:3};var engine=new Engine(parentElement);this.init=function(){engine.initGame()};this.pause=function(){engine.pauseGame()};this.resume=function(){engine.resume()};this.getHighScore=function(){return engine.getHighScore()};function Engine(parentElement){var snake,candy,view,inputInterface,grid,currentState,frameIntervalId,score,highScore,collisionFramesLeft;this.initGame=function(){view=new View(parentElement,config.backgroundColor);inputInterface=new InputInterface(this.pauseGame,this.resumeGame,startMoving);snake=new Snake();grid=new Grid(config.gridWidth,config.gridHeight);score=0;highScore=score;snake.points.push(randomPoint(grid));snake.growthLeft=constants.INITIAL_SNAKE_GROWTH_LEFT;candy=randomCandy();view.initPlayField();drawCurrentScene();inputInterface.startListening();currentState=constants.STATE_READY};this.pauseGame=function(){if(currentState===constants.STATE_PLAYING){clearInterval(frameIntervalId);currentState=constants.STATE_PAUSED}};this.resumeGame=function(){if(currentState===constants.STATE_PAUSED){frameIntervalId=setInterval(nextFrame,config.frameInterval);currentState=constants.STATE_PLAYING}};this.getHighScore=function(){return highScore};var gameOver=function(){currentState=constants.STATE_GAME_OVER;clearInterval(frameIntervalId);var removeTail=function(){if(snake.points.length>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<0.75)var newType=constants.CANDY_REGULAR;else if(probabilitySeed<0.95)var newType=constants.CANDY_MASSIVE;else var newType=constants.CANDY_SHRINKING;return new Candy(newCandyPoint,newType)};var actualDirection=function(desiredDirection){if(snake.points.length===1)return desiredDirection;else if(utilities.oppositeDirections(snake.direction,desiredDirection)){return snake.direction}else{return desiredDirection}};var movePoint=function(oldPoint,direction){var newPoint;with(constants){switch(direction){case DIRECTION_LEFT:newPoint=new Point(oldPoint.left-1,oldPoint.top);break;case DIRECTION_UP:newPoint=new Point(oldPoint.left,oldPoint.top-1);break;case DIRECTION_RIGHT:newPoint=new Point(oldPoint.left+1,oldPoint.top);break;case DIRECTION_DOWN:newPoint=new Point(oldPoint.left,oldPoint.top+1);break}}return newPoint};var shiftPointIntoGrid=function(point,grid){point.left=shiftIntoRange(point.left,grid.width);point.top=shiftIntoRange(point.top,grid.height);return point};var shiftIntoRange=function(number,range){var shiftedNumber,steps;if(utilities.sign(number)==1){steps=Math.floor(number/range);shiftedNumber=number-(range*steps)}else if(utilities.sign(number)==-1){steps=Math.floor(Math.abs(number)/range)+1;shiftedNumber=number+(range*steps)}else{shiftedNumber=number}return shiftedNumber};var insideGrid=function(point,grid){if(point.left<0||point.top<0||point.left>=grid.width||point.top>=grid.height){return false}else{return true}};var randomPoint=function(grid){var left=utilities.randomInteger(0,grid.width-1);var top=utilities.randomInteger(0,grid.height-1);var point=new Point(left,top);return point}}function Grid(width,height){this.width=width;this.height=height}function Snake(){this.direction=constants.DEFAULT_DIRECTION;this.points=[];this.growthLeft=0;this.alive=true;this.collidesWith=function(point,simulateMovement){if(simulateMovement&&this.growthLeft===0)range=this.points.length-1;else range=this.points.length;for(var i=0;i<range;i++){if(point.collidesWith(this.points[i]))return true}return false}}function Point(left,top){this.left=left;this.top=top;this.collidesWith=function(otherPoint){if(otherPoint.left==this.left&&otherPoint.top==this.top)return true;else return false}}function Candy(point,type){this.point=point,this.type=type,this.score,this.calories,this.radius,this.color,this.decrement,this.minRadius;switch(type){case constants.CANDY_REGULAR:this.score=5;this.calories=3;this.radius=0.3;this.color=config.candyColor;break;case constants.CANDY_MASSIVE:this.score=15;this.calories=5;this.radius=0.45;this.color=config.candyColor;break;case constants.CANDY_SHRINKING:this.score=50;this.calories=0;this.radius=0.45;this.color=config.shrinkingCandyColor;this.decrement=0.008;this.minRadius=0.05;break}this.age=function(){if(this.type===constants.CANDY_SHRINKING){this.radius-=this.decrement;if(this.radius<this.minRadius)return false;else return true}else return true}};function Utilities(){this.sign=function(number){if(number>0)return 1;else if(number<0)return-1;else if(number===0)return 0;else return undefined};this.oppositeDirections=function(direction1,direction2){if(Math.abs(direction1)==Math.abs(direction2)&&this.sign(direction1*direction2)==-1){return true}else{return false}};this.mergeObjects=function mergeObjects(slave,master){var merged={};for(key in slave){if(typeof master[key]==="undefined")merged[key]=slave[key];else merged[key]=master[key]}return merged};this.randomInteger=function(min,max){var randomNumber=min+Math.floor(Math.random()*(max+1));return randomNumber}}function View(parentElement,backgroundColor){var playField,ctx,snakeThickness;this.initPlayField=function(){snakeThickness=length(0.9);playField=document.createElement("canvas");playField.setAttribute("id","snake-js");playField.setAttribute("width",config.gridWidth*config.pointSize);playField.setAttribute("height",config.gridHeight*config.pointSize+constants.SCOREBOARD_HEIGHT);parentElement.appendChild(playField);ctx=playField.getContext("2d");ctx.translate(0,constants.SCOREBOARD_HEIGHT)};this.drawSnake=function(snake,color){if(snake.points.length===1){var position=getPointPivotPosition(snake.points[0]);ctx.fillStyle=color;ctx.beginPath();ctx.arc(position.left,position.top,snakeThickness/2,0,2*Math.PI,false);ctx.fill()}else{ctx.strokeStyle=color;ctx.lineWidth=snakeThickness;ctx.lineJoin="round";ctx.lineCap="round";ctx.beginPath();for(var i=0;i<snake.points.length;i++){var currentPoint=snake.points[i];if(i===0){var currentPointPosition=getPointPivotPosition(currentPoint);ctx.moveTo(currentPointPosition.left,currentPointPosition.top)}else{var prevPoint=snake.points[i-1];if(Math.abs(prevPoint.left-currentPoint.left)<=1&&Math.abs(prevPoint.top-currentPoint.top)<=1){var currentPointPosition=getPointPivotPosition(currentPoint);ctx.lineTo(currentPointPosition.left,currentPointPosition.top)}else{connectWallPoints(prevPoint,currentPoint)}}}ctx.stroke()}drawEye(snake,snake.direction)};this.drawCandy=function(candy){ctx.fillStyle=candy.color;var position=getPointPivotPosition(candy.point);ctx.beginPath();ctx.arc(position.left,position.top,length(candy.radius),0,Math.PI*2,false);ctx.fill()};this.clear=function(color){ctx.fillStyle=color||backgroundColor;ctx.fillRect(0,0,config.gridWidth*config.pointSize,config.gridHeight*config.pointSize)};this.drawScore=function(score,highScore){ctx.translate(0,-1*constants.SCOREBOARD_HEIGHT);var bottomMargin=5;var horizontalMargin=4;ctx.fillStyle=config.scoreBoardColor;ctx.fillRect(0,0,config.gridWidth*config.pointSize,constants.SCOREBOARD_HEIGHT);ctx.fillStyle=config.scoreTextColor;ctx.font="bold 16px 'Courier new', monospace";ctx.textAlign="right";ctx.fillText(score,config.gridWidth*config.pointSize-horizontalMargin,constants.SCOREBOARD_HEIGHT-bottomMargin);ctx.textAlign="left";ctx.fillText(highScore,horizontalMargin,constants.SCOREBOARD_HEIGHT-bottomMargin);ctx.translate(0,constants.SCOREBOARD_HEIGHT)};var drawEye=function(snake){var head=snake.points[0];var headPosition=getPointPivotPosition(head);var offsetLeft=length(0.125);var offsetTop=length(0.15);switch(snake.direction){case constants.DIRECTION_LEFT:headPosition.left-=offsetLeft;headPosition.top-=offsetTop;break;case constants.DIRECTION_RIGHT:headPosition.left+=offsetLeft;headPosition.top-=offsetTop;break;case constants.DIRECTION_UP:headPosition.left-=offsetTop;headPosition.top-=offsetLeft;break;case constants.DIRECTION_DOWN:headPosition.left+=offsetTop;headPosition.top+=offsetLeft;break}if(snake.alive){ctx.beginPath();ctx.fillStyle=config.snakeEyeColor;ctx.arc(headPosition.left,headPosition.top,length(0.125),0,Math.PI*2,false);ctx.fill()}else{ctx.beginPath();ctx.strokeStyle=config.snakeEyeColor;ctx.lineWidth=2;ctx.moveTo(headPosition.left-length(0.1),headPosition.top-length(0.1));ctx.lineTo(headPosition.left+length(0.1),headPosition.top+length(0.1));ctx.moveTo(headPosition.left+length(0.1),headPosition.top-length(0.1));ctx.lineTo(headPosition.left-length(0.1),headPosition.top+length(0.1));ctx.stroke()}};var length=function(value){return value*config.pointSize};var getPointPivotPosition=function(point){var position={left:point.left*length(1)+length(.5),top:point.top*length(1)+length(.5)};return position};var connectWallPoints=function(p1,p2){var p2Position=getPointPivotPosition(p2);var leftOffset=utilities.sign(p2.left-p1.left);var topOffset=utilities.sign(p2.top-p1.top);var fakeEndPoint=new Point(p1.left-leftOffset,p1.top-topOffset);var fakeEndPointPosition=getPointPivotPosition(fakeEndPoint);ctx.lineTo(fakeEndPointPosition.left,fakeEndPointPosition.top);var fakeStartPoint=new Point(p2.left+leftOffset,p2.top+topOffset);var fakeStartPointPosition=getPointPivotPosition(fakeStartPoint);ctx.moveTo(fakeStartPointPosition.left,fakeStartPointPosition.top);ctx.lineTo(p2Position.left,p2Position.top)}}function InputInterface(pauseFn,resumeFn,autoPlayFn){var arrowKeys=[37,38,39,40],listening=false,lastDirection=null;this.lastDirection=function(){return lastDirection};this.startListening=function(){if(!listening){window.addEventListener("keydown",handleKeyDown,true);window.addEventListener("keypress",disableKeyPress,true);window.addEventListener("blur",pauseFn,true);window.addEventListener("focus",resumeFn,true);listening=true}};this.stopListening=function(){if(listening){window.removeEventListener("keydown",handleKeyDown,true);window.removeEventListener("keypress",disableKeyPress,true);window.removeEventListener("blur",pauseFn,true);window.removeEventListener("focus",resumeFn,true);listening=false}};var handleKeyDown=function(event){if(arrowKeys.indexOf(event.keyCode)>=0){handleArrowKeyPress(event)}};var disableKeyPress=function(event){if(arrowKeys.indexOf(event.keyCode)>=0){event.preventDefault()}};var handleArrowKeyPress=function(event){with(constants){switch(event.keyCode){case 37:lastDirection=DIRECTION_LEFT;break;case 38:lastDirection=DIRECTION_UP;break;case 39:lastDirection=DIRECTION_RIGHT;break;case 40:lastDirection=DIRECTION_DOWN;break}}event.preventDefault();autoPlayFn()}}if(config.autoInit){this.init()}}; $(document).ready(function(){ if(navigator.appName == "Microsoft Internet Explorer") { var warning = "Tyvärr fungerar inte Snake JS med Internet Explorer. Använd istället Chrome, Firefox eller Safari."; $('#snake-js-parent').addClass('messages error').text(warning); } else { var settings = { pointSize : 20, gridWidth : 27 }; var game = new SnakeJS(document.getElementById("snake-js-parent"), settings); $('#webform-client-form-118').submit(function(){ $('#edit-submitted-score').val(game.getHighScore()); return true; }); } }); // ]]></script><form action="/bloggen/spela-snake-med-html5" accept-charset="UTF-8" method="post" id="webform-client-form-118" class="webform-client-form" enctype="multipart/form-data"> <div><div class="webform-component webform-component-textfield" id="webform-component-name"><div class="form-item clear-block" id="edit-submitted-name-wrapper"> <label for="edit-submitted-name">Namn</label> <input type="text" maxlength="16" name="submitted[name]" id="edit-submitted-name" size="25" value="" class="form-text required" /> </div> </div><input type="hidden" name="submitted[score]" id="edit-submitted-score" value="0" /> <input type="hidden" name="details[sid]" id="edit-details-sid" value="" /> <input type="hidden" name="details[page_num]" id="edit-details-page-num" value="1" /> <input type="hidden" name="details[page_count]" id="edit-details-page-count" value="1" /> <input type="hidden" name="details[finished]" id="edit-details-finished" value="0" /> <input type="hidden" name="form_build_id" id="form-b3d79125de4746513b0be0e64ce80e3f" value="form-b3d79125de4746513b0be0e64ce80e3f" /> <input type="hidden" name="form_id" id="edit-webform-client-form-118" value="webform_client_form_118" /> <div id="edit-actions" class="form-actions form-wrapper"><input type="submit" name="op" id="edit-submit" value="Skicka" class="form-submit" /> </div> </div></form><img src="http://feeds.feedburner.com/~r/betamos/~4/aV39v4nTQQk" height="1" width="1"/> http://betamos.se/bloggen/spela-snake-med-html5#comments canvas HTML5 JavaScript spel Thu, 06 Jan 2011 21:21:23 +0000 betamos 118 at http://betamos.se http://betamos.se/bloggen/spela-snake-med-html5 http://feedproxy.google.com/~r/betamos/~3/DnUYPwKaIBs/betamos-gar-live-som-det-heter <div class="flattr-box"><script type="text/javascript"> var flattr_uid = 'betamos'; var flattr_tle = 'Betamos &quot;går live&quot;, som det heter'; var flattr_dsc = '&lt;p&gt;Drygt ett år efter att jag började fiffla med designen på min personliga blogg är den klar. Det kan låta illa, uselt eller till och med &lt;a href=&quot;http://www.smartie8.se/post/2010/02/02/Nej-vi-lagger-inte-ned-Internet-Explorer.aspx&quot;&gt;Internet Explorer&lt;/a&gt; (känsliga tittare varnas), men för mig är det ett &lt;strong&gt;stort framsteg&lt;/strong&gt;. Jag har nämligen åstadkommit ett &lt;strong&gt;färdigt resultat&lt;/strong&gt; för en gångs skull, som jag dessutom är nöjd med.'; var flattr_tag = 'lansering,webbdesign'; var flattr_cat = 'software'; var flattr_url = 'http://betamos.se/bloggen/betamos-gar-live-som-det-heter'; var flattr_lng = 'en_GB'</script> <script src="http://api.flattr.com/button/load.js" type="text/javascript"></script> </div><p>Drygt ett år efter att jag började fiffla med designen på min personliga blogg är den klar. Det kan låta illa, uselt eller till och med <a href="http://www.smartie8.se/post/2010/02/02/Nej-vi-lagger-inte-ned-Internet-Explorer.aspx">Internet Explorer</a> (känsliga tittare varnas), men för mig är det ett <strong>stort framsteg</strong>. Jag har nämligen åstadkommit ett <strong>färdigt resultat</strong> för en gångs skull, som jag dessutom är nöjd med. Normalt sett rinner sådana här projekt ut i sanden någonstans mellan när jag inser att jag vill "bygga<img class="left" src="/sites/default/files/pictures/betamos-design-1.png" alt="Första skissen av betamos.se" width="300" height="350" /> pyramider med en spade" och att jag egentligen har tröttnat och vill lära mig något helt annat, exempelvis hur man skriver en <strong>USB-drivrutin</strong>. (Ja, det har hänt. Senast jag låg hemma och var sjuk, för att vara exakt.)</p> <h2>Från grunge till minimal</h2> <p>Det är mycket spill nu när man är klar, i form av Photoshop-filer, strategiska texter och till och med <strong>en</strong><strong> röd tomte som h</strong><strong>öll i min </strong><strong>R</strong><strong>SS-ikon</strong>, haha. Jag ser själv hur jag har utvecklats det senaste året och nu när jag kan jämföra A med B förstår jag lite <strong>hur mina ideal har </strong><img class="right" src="/sites/default/files/pictures/betamos-design-2_0.png" alt="Skiss nummer två av betamos.se" width="300" height="377" /><strong>förändrats</strong>. I början var jag helt ny och hade helt galna idéer. Jag gjorde en grunge-aktig design. Jag var övertygad om att den skulle <strong>frälsa världen med sin skönhet</strong>. Det gjorde den inte. Den fick inte ens chansen.</p> <p>Jag började jobba på Kodamera, mitt första riktiga jobb. Heltid med webben förändrade mig. Jag är mycket mer <strong>sparsmakad med krimskrams</strong> nuförtiden. Jag tycker det är så mycket skit överallt. Informationen på nätet är fortfarande tyvärr ofta otillräcklig, irrelevant, otillgänglig, obefintlig eller överflödig. Framförallt är det medelstora och <strong>stora webbplatser som förvånar mig</strong>. För många <img class="left" src="/sites/default/files/pictures/betamos-design-3.png" alt="Nummer tre i serien av betamos.se" width="300" height="294" />kockar liksom. Alla har sin lilla sida som ingen hittar till eller bryr sig om. Jag vill vara <strong>en</strong><strong> mo</strong><strong>tp</strong><strong>o</strong><strong>l</strong> till det. Både i arbetslivet och privat.</p> <p>Så jag började skissa mer baklänges — ta bort linjer från gränssnittet, skippa borders och framförallt, inte stänga in webbplatsen i en låda, utan låta den löpa ut på kanterna åt höger och vänster. <strong>Landskapskänsla.</strong></p> <p>Det må låta glorifierande det här, och det är det också. Egentligen är det nog delvis att jag inte är tillräckligt säker för att kunna göra krumilurer och sånt. Det blir ofta fult, så jag skalar av istället. Jag har i alla fall smak nog att ogilla mina egna alster ibland.</p> <h2>Se upp för betamos.se</h2> <p>I framtiden kommer det ske en hel del saker här så bokmärk och <a href="http://feeds.feedburner.com/betamos">prenumerera</a> för fulla muggar. Planen lyder:</p> <ul> <li>Skapa en "om mig"-sida, för alla fans</li> <li>Implementera en riktigt schysst jQuery-feature i kommentarsfältet på blogginläggen. Jag avslöjar inget mer, men se till att ha en <a href="http://sv.gravatar.com/">Gravatar</a></li> <li>Blogga regelbundet om webben, det kommer bli mycket tekniskt men också en del annat</li> </ul> <p>På återseende mina vänner, ovänner, fiender och Internet Explorer!</p><img src="http://feeds.feedburner.com/~r/betamos/~4/DnUYPwKaIBs" height="1" width="1"/> http://betamos.se/bloggen/betamos-gar-live-som-det-heter#comments lansering webbdesign Tue, 02 Feb 2010 22:50:45 +0000 betamos 9 at http://betamos.se http://betamos.se/bloggen/betamos-gar-live-som-det-heter