postspilll.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="148mm"
   height="105mm"
   viewBox="0 0 148 155"
   version="1.1"
   id="svg8">
  <style type="text/css">
    .active { --maincolor: #000000ff; }
    .passive { --maincolor: #00000022; }
     /* todo: get web-compatible font
    @font-face {
        font-family: 'DigitalDisplay';
        src: url("digital display") format("truetype");
    }
    text { font-family: 'DigitalDisplay';}
     */
  </style>
  <script type="text/javascript">
  <![CDATA[
            var playerPos = 1;
            var letters = [0,0,0,0];
            var speed = 12;
            var letterDelay = 15;
            var letterTimer = 0;
            var framelength = 16;
            var score = 0;
            var dead = 0;
            var playerright = false;
            var playerleft = false;
            var column = 4;
            var level = 1;
            var keyframe = 0;

            function playerRight() {
                tplayerPos = playerPos << 1;
                tplayerPos &= 15;
                if (tplayerPos) playerPos = tplayerPos;
                playerright = false;
            }

            function playerLeft() {
                tplayerPos = playerPos >> 1;
                tplayerPos &= 15;
                if (tplayerPos) playerPos = tplayerPos;
                playerleft = false;
            }

            function checkScore() {
                if (score > (level+1)*level) {
                    level++;
                    speed--;
                }
            }

            window.onload = () => {
                // TODO: onclick her for knapper når de er lagt til
                document.onkeydown = (k) => {
                    if (k.keyCode == 97 || k.keyCode == 37) {
                                playerleft = true;
                    }
                    if (k.keyCode == 100 || k.keyCode == 39) {
                                playerright = true;
                    }
                };
            };

            function randInt(max) {
                return Math.floor(Math.random()* max);
            }

            function setState(id, state) {
                document.getElementById(id).className.baseVal = state ? "active" : "passive";
            }

            function render () {
                setState("a1", letters[0] & 1);
                setState("b1", letters[1] & 1);
                setState("c1", letters[2] & 1);
                setState("d1", letters[3] & 1);

                setState("a2", letters[0] & 2);
                setState("b2", letters[1] & 2);
                setState("c2", letters[2] & 2);
                setState("d2", letters[3] & 2);

                setState("a3", letters[0] & 4);
                setState("b3", letters[1] & 4);
                setState("c3", letters[2] & 4);
                setState("d3", letters[3] & 4);

                setState("a4", letters[0] & 8);
                setState("b4", letters[1] & 8);
                setState("c4", letters[2] & 8);
                setState("d4", letters[3] & 8);

                setState("a5", playerPos & 1 );
                setState("b5", playerPos & 2 );
                setState("c5", playerPos & 4 );
                setState("d5", playerPos & 8 );

                document.getElementById("score").innerHTML = score;
                document.getElementById("level").innerHTML = level;

                if (dead)
                    document.getElementById("status").style = "fill:#000000";

                setTimeout(render, framelength);
            }

            function doGame() {
                if (playerright) playerRight();
                if (playerleft) playerLeft();

                if (keyframe == 0) {
                    keyframe = speed;
                    if (letterTimer & 3) {
                        letterTimer <<= 1;
                        letterTimer &= 3;
                    } else {
                        letterTimer = 1;
                        if (column < 2) {
                            column ++;
                        } else {
                            column = 0;
                        }
                        if (letters[column] & 7) {
                            letters[column] <<= 1;
                        } else if (letters[column] & 8) {
                            if ((playerPos >> column) & 1) {
                                score = score + 1;
                                letters[column] = 0;
                            } else {
                                dead = 1;
                            }
                        } else {
                            var res = randInt(letterDelay);
                            letters[column] = res == 1 ? 1 : 0;
                        }
                        checkScore();
                    }
                } else {
                    keyframe--;
                }
                if (!dead) {
                    setTimeout(doGame, framelength);
                } 
            }

            setTimeout(render, framelength);
            doGame();


  ]]>
  </script>
  <defs>
    <path
       d="m 345,165 v 0 L 570,270 795,165 V 375 H 345 Z m 0,-30 v 0 H 795 L 570,240 Z"
       style="fill:var(--maincolor);stroke:var(--maincolor);stroke-width:15;stroke-linecap:round;stroke-linejoin:round"
       id="path-brev" />

    <path
       d="m 330,225 a 90,90 0 0 1 90,90 m -90,-90 a 90,90 0 1 0 90,90 M 255,255 a 15,45 0 0 1 -15,-45 120,30 0 0 1 120,-30 15,45 0 0 1 15,45 75,15 0 0 1 75,-15 m 15,240 v 0 a 45,150 0 0 0 45,150 15,180 0 0 0 15,180 v 0 h 120 a 105,15 0 0 0 105,-15 q 45,-165 15,-345 m -420,30 a 15,150 0 0 1 15,150 45,225 0 0 1 -45,225 z M 150,870 a 60,30 0 0 1 60,-30 45,30 0 0 1 45,30 z m 210,0 a 60,30 0 0 1 60,-30 45,30 0 0 1 45,30 z"
       style="fill:var(--maincolor);stroke:none;stroke-width:24;stroke-linecap:round;stroke-linejoin:round"
       id="path-postmann" />
   </defs>

  <g
     
     id="a4"
     transform="matrix(-0.02365327,-0.02329191,0.02329191,-0.02365327,40.794117,80.019714)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="a3"
     transform="matrix(0.00181653,-0.03014773,0.03014773,0.00181653,26.313802,58.691849)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="a2"
     transform="matrix(0.01630794,-0.02048372,0.02048372,0.01630794,23.964793,32.757763)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="a1"
     transform="matrix(0.02067491,0.00107583,-0.00107583,0.02067491,33.752204,6.1720913)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="b4"
     transform="matrix(0.01562354,-0.02928985,0.02928985,0.01562354,47.10848,73.036921)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="b3"
     transform="matrix(-0.02884233,0.00896134,-0.00896134,-0.02884233,83.993753,43.761474)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="b2"
     transform="matrix(0.02375696,0.01100629,-0.01100629,0.02375696,56.118162,12.621981)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="b1"
     transform="matrix(0.02070282,4.8086899e-5,-4.8086899e-5,0.02070282,57.27241,6.8024098)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="c4"
     transform="matrix(0.02532393,0.02146366,-0.02146366,0.02532393,81.1017,42.23067)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="c3"
     transform="matrix(0.00181653,-0.03014773,0.03014773,0.00181653,83.053231,57.564634)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="c2"
     transform="matrix(0.01630794,-0.02048372,0.02048372,0.01630794,77.760255,31.286741)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="c1"
     transform="matrix(0.02005954,0.00512095,-0.00512095,0.02005954,82.12688,4.0749227)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="d4"
     transform="matrix(0.02028266,-0.02627934,0.02627934,0.02028266,104.30646,70.251129)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="d3"
     transform="matrix(0.02946863,0.00661705,-0.00661705,0.02946863,107.55178,29.043305)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="d2"
     transform="matrix(0.0257741,-0.00460733,0.00460733,0.0257741,104.31667,19.822266)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="d1"
     transform="matrix(0.01431446,-0.01495679,0.01495679,0.01431446,101.95225,16.645603)">
     <use xlink:href="#path-brev" />
  </g>
  <g
     
     id="a5"
     transform="matrix(0.03783357,0,0,0.03783357,10.345376,65.09861)">
     <use xlink:href="#path-postmann" />
  </g>
  <g
     
     id="b5"
     transform="matrix(0.03783357,0,0,0.03783357,42.247465,65.09861)">
     <use xlink:href="#path-postmann" />
  </g>
  <g
     
     id="c5"
     transform="matrix(0.03783357,0,0,0.03783357,69.542208,65.09861)">
     <use xlink:href="#path-postmann" />
  </g>
  <g
     
     id="d5"
     transform="matrix(0.03783357,0,0,0.03783357,102.58321,65.09861)">
     <use xlink:href="#path-postmann" />
  </g>
  <text x="10" y="120">Score: </text><text x="55" y="120" id="score">0</text>
  <text x="10" y="140">Level: </text><text x="55" y="140" id="level">0</text>
  <text x="75" y="140" style="fill:none" id="status">Game over</text>

  <!-- TODO knapper for touch-kompatibilitet -->
</svg>