Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--btw - note for @MatthewKJamison (I've already replied enough to your tweets and probably am some over-energetic person who's trying to help at the point of annoyance), click the cog above and copy the line of html that goes in the head so scaling is better on retina devices-->

<div id="game">
   <div id="board">
      <!--<div class="row"> 
         <div class="number"></div>
         <div class="symbol"></div>
         <div class="gap"></div>
         <div class="result wrong" actual="39">40</div>
      </div>-->
   </div>
   <div id="keyboard">
      <div class="key" key="1">1</div>
      <div class="key" key="2">2</div>
      <div class="key" key="3">3</div>
      <div class="key" key="4">4</div>
      <div class="key" key="5">5</div>
      <div class="key" key="6">6</div>
      <div class="key" key="7">7</div>
      <div class="key" key="8">8</div>
      <div class="key" key="9">9</div>
      <div class="key" key="0">&nbsp;</div>
   </div>
   
   <div id="winner">
      <div class="header">Congratulations!</div>
      <div id="new">Play again?</div>
      <div id="close">×</div> <!-- Sneaky multiplication -->
   </div>
</div>

<div id="hidden"> <!-- Keeps cursor images loaded -->
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_default.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_1.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_2.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_3.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_4.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_5.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_6.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_7.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_8.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_9.png" alt="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_clear.png" alt="">
</div>

              
            
!

CSS

              
                body {
   --background: #1F204C;
   --number-background: #5F61BB;
   --number-shadow: #434596;
   --symbol-background: #424392;
   --symbol-shadow: #313378;
   --text: #F6F6F6;
   --text-fade: #CCCCCC;
   --text-green: #2ECC71;
   --text-red: #D8334A;
   --selected-background: #DDDDDD;
   --selected-shadow: #C8C8C8;
   
   background-color:var(--background);
   color:var(--text);
   margin:0;
   font-family: 'Baloo', cursive;
   overflow-x:hidden;
   #hidden {
      display:none;
   }
   #game { //Adding cursors to body seems a bit tempremental and so #game takes up the whole window and cursors work fine
      width:100vw;
      min-height:100vh;
      cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_default.png), auto;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:space-between; //with the minimum height being the full screen height the keyboard will be at the bottom of the screen and game at the top - for mobile mainly
      &[cursor] { //This is just so I can collapse all of these together. Also feel free to use these
         &[cursor="default"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_default.png), auto;
         }
         &[cursor="1"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_1.png), auto;
         }
         &[cursor="2"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_2.png), auto;
         }
         &[cursor="3"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_3.png), auto;
         }
         &[cursor="4"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_4.png), auto;
         }
         &[cursor="5"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_5.png), auto;
         }
         &[cursor="6"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_6.png), auto;
         }
         &[cursor="7"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_7.png), auto;
         }
         &[cursor="8"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_8.png), auto;
         }
         &[cursor="9"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_9.png), auto;
         }
         &[cursor="0"] {
            cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_clear.png), auto;
         }
      }
      #board {
         display:flex;
         flex-direction:column;
         transform:translateX(50px);
         min-width:600px; //I kinda
         min-height:600px;//Really want
         max-width:600px; //It to be
         max-height:600px;//600×600
         margin-top:10px;
         .row {
            display:flex;
            flex-direction:row;
            >div {
               width:80px;
               height:80px;
               margin:10px;
               &.number, &.symbol, &.result {
                  user-select: none;
                  line-height:80px;
                  text-align:center;
                  font-size:60px;
               }
               &.number, &.symbol {
                  border-radius:8px;
               }
               &.number {
                  background-color:var(--number-background);
                  box-shadow:0 8px 0 0 var(--number-shadow);
                  transition:all .25s -.1s; //Negative delay makes a pop, I added a longer comment on line 142
                  &:active {
                        transform:translateY(8px);
                        box-shadow:0 0px 0 0 #434596;
                  }
               }
               &.symbol {
                  background-color:var(--symbol-background);
                  box-shadow:0 8px 0 0 var(--symbol-shadow);
               }
               &.result {
                  position: relative;
                  font-size:40px;
                  &.correct {
                     color:var(--text-green);
                  }
                  &.wrong {
                     color:var(--text-red);
                  }
               }
            }
         }
      }
      #keyboard {
         width:500px;
         display:flex;
         flex-direction:row;
         justify-content:center;
         flex-wrap:wrap;
         margin-bottom:20px;
         .key {
            width:80px;
            height:80px;
            line-height:80px;
            margin:10px;
            font-size:52px;
            border-radius:8px;
            text-align:center;
            user-select: none;
            background-color:var(--number-background);
            box-shadow:0 8px 0 0 var(--number-shadow);
            transition:all .25s -.1s; //This is the secret to the energy, negative delay skips the beginning of the transition making it pop as soon as there is an action; it will pop in when you click, pop out when you release
            &.used {
               background-color:var(--symbol-background);
               box-shadow:0 8px 0 0 var(--symbol-shadow);
               &:active {
                  transform:translateY(8px);
                  box-shadow:0 0px 0 0 var(--symbol-shadow);
               }
               &.selected {
                  color:var(--symbol-background);
                  background-color:var(--selected-background);
                  box-shadow:0 16px 0 0 var(--selected-shadow);
                  transform:translateY(-8px);
                  &:active {
                     transform:translateY(8px);
                     box-shadow:0 0px 0 0 var(--selected-shadow);
                  }
               }
            }
            &:not(.used) {
               &:active {
                  transform:translateY(8px);
                  box-shadow:0 0px 0 0 var(--number-shadow);
               }
               &.selected {
                  color:var(--number-background);
                  background-color:var(--text);
                  box-shadow:0 16px 0 0 var(--text-fade);
                  transform:translateY(-8px);
                  &:active {
                     transform:translateY(8px);
                     box-shadow:0 0px 0 0 var(--text-fade);
                  }
               }
            }
         }
      }
   }
   #winner {
      position: fixed;
      top:50%;
      left:0px;
      right:0px;
      transform:translateY(-50%);
      background-color:#2ABA66;
      text-align:center;
      .header {
         margin:40px 0;
         font-size:60px;
         margin-bottom:-20px;
      }
      #new {
         margin-bottom:30px;
      }
      #close {
         position: absolute;
         top:0px;
         right:0px;
         padding:0 14px;
         font-size:32px;
      }
      &:not(.show) {
         display:none;
      }
   }
}
              
            
!

JS

              
                /*
I saw this game on paper and fell in love with it instantly.
[Answer to the puzzle is in the console, but do give it a go]
*/

var Previous = -1; //Currently selected number
var Used = [-10,0,0,0,0,0,0,0,0,0]; //How many times a number is used on the board purely for the `used` class on the keys
var Capture = "click"; //Used for doing the correct input depending on device because things apparently can't just be simple
var NumberOrder, Symbols, Results; //Used for grid generation, you have the correct order of numbers, the order of the symbols, and the order of the results
const Pattern = [0,1,0,1,0,3,1,2,1,2,1,2,0,1,0,1,0,3,1,2,1,2,1,2,0,1,0,1,0,3,3,2,3,2,3,2]; //Used for grid drawing (0: number, 1: symbol, 2:blank space, 3:result) - I was initially going to do a mathematical approach like a 5x5 grid where 2n+1 is numbers except for 4 spaces and the others are symbols but this turns out to be the easiest to implement
var Counter = [0,0,0]; //Used for grid drawing, as a tile is placed the counter increments and so the correct ID is given
var Board = [0,0,0,0,0,0,0,0,0]; //Used to store the board
const Checking = [[0,1,2,0,1],[3,4,5,5,6],[6,7,8,10,11],[0,3,6,2,7],[1,4,7,3,8],[2,5,8,4,9]]; //Used as blueprints to check the board (the first 3 numbers signify the `Board` entries and using the indexes you get the values which have been inputted in order left to right, or top to bottom. The last 2 numbers are basically the same but are symbols which are fetched from `Symbols`)
const CheckingPlan = [[0,3],[0,4],[0,5],[1,3],[1,4],[1,5],[2,3],[2,4],[2,5]]; //With a given cell number you are given the row and column, this is then used for `Checking` for each value; also the row and column values gathered from here are the same as the result IDs in the coresponding row or column.
var Matches = [false, false, false, false, false, false]; //Tracks which answers have been matched. Also I used Capitalised variable names to signify global variables while local variables will have a lowercase first letter so I can spot if the variable was defined where I'm working or up here in a glance, still deciding if I like it or not - easy change if I or anyone else doesn't.

if(!!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator)) { //https://stackoverflow.com/a/13470899
   Capture = "touchend"; //touchscreens require this rather than click, because things can't be simple.
}

function Generate() {
   //Generate number and symbol orders
   NumberOrder = ArrayShuffle(Array.apply(null, {length: 10}).map(Number.call, Number).slice(1)); //https://stackoverflow.com/a/20066663
   Symbols = Array.apply(null, {length: 12}).map(Function.call, Math.random).map(function(x){return Math.floor(x * 3)}); //0:+, 1:-, 2:×
   Results = []; //Will contain the 6 answers going top to bottom 0-2 then left to right 3-5
   //Validate results are positive 
   /*across - run before you ...*/
   for(var i = 0; i < 3; i++) {
      //This does nested Actions to do the left or topmost action first then the right or bottom most action
      Results.push(Action(Action(NumberOrder[0 + i*3], NumberOrder[1 + i*3], Symbols[0 + i*5]), NumberOrder[2 + i*3], Symbols[1 + i*5]));
   }
   /*down - ...fall*/
   for(var i = 0; i < 3; i++) {
      Results.push(Action(Action(NumberOrder[0 + i], NumberOrder[3 + i], Symbols[2 + i]), NumberOrder[6 + i], Symbols[7 + i]));
   }
   
   //console.log(NumberOrder);
   //console.log(Symbols);
   //console.log(Results);

   //This draws out the final solution in the console (if you want to cheat), this was originally how I had the tile generation set out and I was going to delete this after I was done but I've kept it in - but everything to line 109 can be ignored
   for(var j = 0; j < 7; j++) {
      var l = "";
      for(var i = 0; i < 7; i++) {
         if(j%2 == 0 && j <5) {
               switch(i) {
                  case 0:
                     l += NumberOrder[0 + (j/2)*3];
                     break;
                  case 1:
                     l += SymbolToChar(Symbols[0 + (j/2)*5]);
                     break;
                  case 2:
                     l += NumberOrder[1 + (j/2)*3];
                     break;
                  case 3:
                     l += SymbolToChar(Symbols[1 + (j/2)*5]);
                     break;
                  case 4:
                     l += NumberOrder[2 + (j/2)*3];
                     break;
                  case 5:
                     l += "=";
                     break;
                  case 6:
                     l += Results[0+(j/2)];
                     break;
               }
         } else if (j < 5) {
            switch(i) {
                  case 0:
                     l += SymbolToChar(Symbols[2 + ((j-1)/2)*5]);
                     break;
                  case 1:
                     l += " ";
                     break;
                  case 2:
                     l += SymbolToChar(Symbols[3 + ((j-1)/2)*5]);
                     break;
                  case 3:
                     l += " ";
                     break;
                  case 4:
                     l += SymbolToChar(Symbols[4 + ((j-1)/2)*5]);
                     break;
                  case 5:
                     l += " ";
                     break;
                  case 6:
                     l += " ";
                     break;
               }
         } else if (j == 5) {
            l = "=     =     =";
            break;
         } else if (j == 6) {
            l += Results[3];
            l += Array(7 - (Results[3] + "").length).join(" ");
            l += Results[4];
            l += Array(7 - (Results[4] + "").length).join(" ");
            l += Results[5];
            break;
         }
         l += "  ";
      }
      console.log(l);
   } /**/
   
   if (
      Math.min.apply(Math, Results) < 0 || 
      Math.max.apply(Math, Results) > 50 || 
      Symbols.filter(function(x){return x == 0}).length < 2 || 
      Symbols.filter(function(x){return x == 1}).length < 2 || 
      Symbols.filter(function(x){return x == 2}).length < 2) {
      /*
      I want the minimum result to be positive, maximum to be no bigger than 50, and each symbol is used at least twice; games will be more interesting and more do-able.
      */
      console.clear();
      Generate(); //Let's do that again
   } else {
      DrawGrid(); //Let's go 🎉👇
   }
}
function DrawGrid() {
   var c = 0;
   var html = ""; //build html first and don't append html which isn't valid, otherwise browsers will auto-correct your code and weirdness happens
   for(var j = 0; j < 6; j++) { //columns
      html += `<div class="row">`;
      for(var i = 0; i < 6; i++) { //rows
         switch (Pattern[c]) { //using the Pattern we can print a cell one by one just incrementing the number once
            case 0:
              html += '<div class="number" cell="'+Counter[0]+'"></div>';
              Counter[0]++;
              break;
            case 1:
              html += '<div class="symbol">'+SymbolToChar(Symbols[Counter[1]])+'</div>';
              Counter[1]++;
              break;
            case 2:
              html += '<div class="gap"></div>'; 
              break;
            case 3:
              html += '<div class="result" result="'+Counter[2]+'">'+Results[Counter[2]]+'</div>';
              Counter[2]++; //I could have just switched result and gap with each other then just increment on [c] if c < 3 but this is actually a worse idea if you want the full power and lightning fast generation time for a puzzle that takes a few minutes to solve and actually people don't notice the difference between a milisecond or not when it is added onto the already slightly random length of time it takes for the page to load.
              break;
         }
         c++; //One increment coming up
      }
      html += `</div>`;
   }
   $("#board").html(html); //All html together
}
function CheckEntry(cell) { //Check to see if the row and column containing the cell is valid or not
   for(var p = 0; p < 2; p++) {
      var c = Checking[CheckingPlan[cell][p]]; //Inputting the cell ID then p (0: horizontal, 1: vertical) we can then get a template for the data, the first 3 numbers are the inputted values and the last 2 are the symbols
      c=c.map(function (x,i) {
         return i < 3 ? Board[x] : Symbols[x]; //Convert the template to data
      });
      if(c.slice(0,3).filter(function(x){return x == 0}).length > 0) { //If there is a gap
         $(`.result[result=${CheckingPlan[cell][p]}]`).removeClass("correct").removeClass("wrong");
         Matches[CheckingPlan[cell][p]] = false; //If the row is not filled it is not complete
      }
      else if(Action(Action(c[0],c[1],c[3]), c[2],c[4]) == Results[CheckingPlan[cell][p]]){ //If they match the result, result ID goes from 0-2 as horizontal increments, then 3-5 as vertical increments
         $(`.result[result=${CheckingPlan[cell][p]}]`).addClass("correct").removeClass("wrong");
         Matches[CheckingPlan[cell][p]] = true; //If the row is complete it is complete
      }
      else { //if it doesn't
         $(`.result[result=${CheckingPlan[cell][p]}]`).removeClass("correct").addClass("wrong");
         Matches[CheckingPlan[cell][p]] = false; //Or maybe you could re-write the rules of mathematics?
      }
      //console.log(c);
   }
   //console.log(Matches.filter(function(x) {return x}));
   console.log(Used.filter(function(x) {return x == 1}).length);
   if(Matches.filter(function(x) {return x}).length == 6 && Used.filter(function(x) {return x == 1}).length == 9) { //filters and mapping are incredible and are a powerful tool and open you up to being confused why things are failing because I keep forgetting to add the return because I'm too familiar with linq `x => x` (or as my brain interprets it `function(x){x})` so I sometimes autopilot just `x`) rather than `return x`
      $("#winner").addClass("show"); //🎉 they deserved it, or they cheated and get a slap on the wrists - I was going to check for people opening the console then geo-locate them and turn up at their doors to slap their wrists but there's probably legal issues and effort.
   }
}

function SymbolToChar(s) {
   switch (s) {
      case 0:
         return "+";
      case 1:
         return "-";
      case 2:
         return "×"; //Fun fact: Alt+158, one of the very few codes I remember
   }
}

function Action(a, b, f) { //Related but kinda completely unrelated: https://en.wikipedia.org/wiki/Reverse_Polish_notation
   switch(f) {
      case 0:
         return a+b;
      case 1:
         return a-b;
      case 2:
         return a*b;
      //You can add more but it just gets annoying to solve
   }
}
function ArrayShuffle(a) { //https://stackoverflow.com/a/6274381
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

$(document).on(Capture, ".number", function() {
   if (Previous >= 0) { //if a key is selected, if none are selected `Previous` is `-1`
      if ($(this).attr("value") != Previous) {
         Used[$(this).attr("value")]--; //Decrement the number that was there (might enable the button)
         Used[Previous]++; //Increment the new number (might disable the button, well - it will disable it)
         Board[$(this).attr("cell")] = parseInt(Previous); //Set the value of the tile to the array
         if(Used[$(this).attr("value")] <= 0) { //Enable the button if the value is 0
            $(`.key[key=${$(this).attr("value")}]`).removeClass("used");
         }
         if(Used[Previous] > 0 && Previous != 0) { //Disable the button if the new value is more than 0 and if the key id is not 0 (delete), which it should always but yeah
            $(`.key[key=${Previous}]`).addClass("used");
         }
      }
      $(this).attr("value", Previous); //Set the value attribute, although I will (Edit: I'm re-reading this and I don't understand it but it might make sense?)
      $(this).html(Previous <= 0 ? "" : Previous); //inline statements make things look cool, because they are
      CheckEntry($(this).attr("cell")); //Check to see if a line has been solved, if there is an error, or more numbers are needed
   }
});
$(document).on(Capture, "#keyboard .key", function(){
   $("#keyboard .key").removeClass("selected");
   if($(this).attr("key") != Previous) {  //If you have not clicked the same number in the on-screen keyboard twice in a row
      $(this).addClass("selected");
      Previous = $(this).attr("key");
   } else { //If you have clicked the same number twice in a row
      Previous = -1;
   }
   $("#game").attr("cursor", Previous);
})
$(document).on(Capture, "#close", function() {
   $("#winner").removeClass("show");
});
$(document).on(Capture, "#new", function() {
   window.location.reload(false); 
});

Generate();
              
            
!
999px

Console