Alphabet to numbers + CODE

Put this on your page to encode, scramble, and decode strings! It's amazing! :D

Usage

When using this, you must give credit, as this is under a Creative Commons License (see sidebar for more information)

Notes

1. Does not retain capitalization or punctuation
2. Spaces are replaced with a '<space>' Sub-string after the initial encoding. You would have to replace this manually if you don't like it.

Try it out!

String:

Offset:

Code

1. /*
2.         ccccc ooooo dddd   eeeee
3.         C     O   O D   D  E
4.         C     O   O D    D Eee
5.         C     O   O D   D  E
6.         ccccc ooooo dddd   eeeee
7.        
8.         Copyright 2014 Conor O'Brien under a Creative Commons Attribution 4.0 International License.
9. */
10. var alphabet = {
11.         lower: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],
12.         upper: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
13.         number: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]
14. }
15. String.prototype.encode = function(){
16.         var str = this.valueOf();
17.         var returnStr = [];
18.         var notAny = false;
19.         str = str.toLowerCase()
20.         str = str.split("")
21.         for(i = 0; i < str.length; i++){
22.                 for(h = 0; h < alphabet.lower.length; h++){
23.                         if(str[i]==alphabet.lower[h]){                 
24.                                 returnStr.push(h+1)
25.                         } else {
26.                                 notAny = true;
27.                         }
28.                 }
29.                 if(str[i]==" "){
30.                         returnStr.push("<space>")
31.                 } else if(!notAny){
32.                         returnStr.push(str[i])
33.                 }
34.                 notAny = false;
35.         }
36.         returnStr = returnStr.toString();
37.         while (returnStr.search(",") !== -1){
38.                 returnStr = returnStr.replace(","," ");
39.         }
40.         return returnStr;
41. }
42.  
43. String.prototype.scramble = function(number){
44.         var str = this.valueOf();
45.         var returnStr = [];
46.         var notAny = false;
47.         str = str.toLowerCase()
48.         str = str.split(" ")
49.         for(i = 0; i < str.length; i++){
50.                 for(h = 0; h < alphabet.number.length; h++){
51.                         if(str[i]==alphabet.number[h]){                
52.                                 returnStr.push(alphabet.number[h] + number)
53.                         }
54.                 }
55.         }
56.         returnStr = returnStr.toString();
57.         while (returnStr.search(",") !== -1){
58.                 returnStr = returnStr.replace(","," ");
59.         }
60.         return returnStr;
61.        
62. }
63. String.prototype.decode = function(){
64.         var str = this.valueOf();
65.         var returnStr = [];
66.         str = str.toLowerCase()
67.         str = str.split(" ")
68.         for(i = 0; i < str.length; i++){
69.                 for(h = 0; h < alphabet.number.length; h++){
70.                         if(str[i]==alphabet.number[h]){                
71.                                 returnStr.push(alphabet.lower[h])
72.                         }
73.                 }
74.                 if (str[i]=="<space>"){
75.                         returnStr.push(" ");
76.                 }
77.         }
78.         returnStr = returnStr.toString();
79.         while (returnStr.search(",") !== -1){
80.                 returnStr = returnStr.replace(",","");
81.         }
82.         return returnStr;
83. }
84.  

The year is 2048!

First things first! I am, yes, apart of the 2048 craze. It's just one of those games that make you want to punch the living everything out of it, yes? After playing for WHO KNOWS HOW LONG, I decided to play around with the Javascript.

Observations

One: This Is a JavaScript Job

Fiddling with the CSS, I made a 'Night' Theme (which I use, as it's preferable to the default). Anyone who has made a texture for 2048 would know that the JS 'pushes' (like you would do for an array item) a class to the tile upon it's creation. The CSS identifiers for this are:

1. .tile-<value>
   • <value> is either 2, 4, 8, 16...1024, or 2048
2. .tile
   • Describes the animation of the tile.

If one changes a two-tile (.tile-2) to a 2048 tile (.tile-2048), it will change upon moving the board, and will not retain its style.

Two: The JavaScript code is Complicated

With 10 JS Game-related files, one may be overwhelmed. There are 7 non-pollyfil files, which are listed below:

1. application.js
2. game_manager.js
3. grid.js
4. html_actuator.js
5. keyboard_input_manager.js
6. local_storage.js
7. tile.js

Three: All of the tiles are powers of two

..And, as a friend tells me, most are Mojang's Most Popular Game's resolution for Resource/Texture packs. 2 = 2¹
4 = 2²
8 = 2³
16 = 2⁴
32 = 2⁵
64 = 2⁶
128 = 2⁷
256 = 2⁸
256 = 2⁸
512 = 2⁹
1024 = 2¹⁰
2048 = 2¹¹

What this does

This is a code that will add a tile whose value can be anything, not limited to the powers of 2.
Under application.js, one finds (on line 3) the program making a GameManager (found under game_manager.js), which takes the parameters of a grid size (4), an InputManager (KeyboardInputManager), an Actuator (HTMLActuator), and a StorageManager (LocalStorageManager). A new one is presumably created with each iteration of the loop (as it's found under "window.requestAnimationFrame"), but you can create one by simply typing into the console/command line on your 2048 page a variable as found here.
Of course, you have to create a prototype function (or a function that is applied to a certain object, like 'String.prototype.search = function(...' would be 'String.search(...')
Before doing what's stated above, you must do what is stated below (that is, here.)
And enjoy!

Codes

The Tile Manager Prototype

1. GameManager.prototype.addTile = function (value) {
2.   if (this.grid.cellsAvailable()) {
3.     var tile = new Tile(this.grid.randomAvailableCell(), value);
4.  
5.     this.grid.insertTile(tile);
6.   }
7. };

The New Game Manager

1. var Gamer = new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);

Syntax and Usage

All possible (legitimate) tiles.

1. Gamer.addTile(2);
2. Gamer.addTile(4);
3. Gamer.addTile(8);
4. Gamer.addTile(16);
5. Gamer.addTile(32);
6. Gamer.addTile(64);
7. Gamer.addTile(128);
8. Gamer.addTile(256);
9. Gamer.addTile(512);
10. Gamer.addTile(1024);
11. Gamer.addTile(2048);

A final note

This is not a developers tactic--it has many glitches, and is not guaranteed to be cross-browser. Glitches can also occur due to the separate Game Managers trying to manage the same game, and can result in two separate respective games going on at once. Use with caution, and, by using this, you accept the Terms and Conditions of Service listed below.

Terms and Conditions of Service

Article I - Definitions

1. The term 'Blog post' is defined herein as an article in which is written a paragraph or more.
2. The term '2048 Game' or '2048 puzzle' or '2048' is defined herein as the original game hosted on the url "https://gabrielecirulli.github.io/2048/" (Link: here)
3. The term 'Usage' is defined herein as taking the codes provided within this Blog Post and applying them to the 2048 game.
4. The term 'Code' or 'Codes' refers to any of the Ordered List Item Groups (<ol>) that contain(s) a programming language (of which could be JavaScript, CSS, or HTML on this page).
5. The term 'User' or 'The User' is defined as the person or persons using the Codes provided on this page.

Article II - Main Requirements

1. Usage of the contents within the Blog Post can only be used for testing or for gratification of beating the game. You may not claim any results of using this code as anything besides that of which it is (which is the results of an edit of the JavaScripting). All screenshots of a game edited with the code provided in this blog post (or any alterations of said code) are strictly prohibited. The code can and will be taken down if multiple persons fail to comply to the Terms and Conditions of Service.
2. These Terms of Service may and will be updated if necessary. Failure to comply with the alterations of the Terms of Service will be an infraction like any other. Ignorance of the Terms is the fault of the User
3. All Content on the page is under a Creative Commons Attribution 4.0 international license.

JavaScript Routines Part 2: Canvas (whole)

So what this is here is some things I've pieced together, including drawing prisms and cubes.

1. var canvas;
2. var ctx;
3. window.onload = function(){
4.     canvas = document.getElementById("canvas")
5.     ctx = canvas.getContext('2d')
6. }
7. function Circle(ctx,x,y,r){
8.     // x = top corner X      y = top corner Y
9.     // r = radius            ctx = canvas context
10.     ctx.fillStyle = "#000000"
11.     ctx.beginPath();
12.     ctx.arc(x+r,y+r,r,0,Math.PI*2,true);
13.     ctx.stroke();
14. }
15. function rectRound(ctx,x,y,width,height,radius){
16.     ctx.beginPath();
17.     ctx.moveTo(x,y+radius);
18.     ctx.lineTo(x,y+height-radius);
19.     ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
20.     ctx.lineTo(x+width-radius,y+height);
21.     ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
22.     ctx.lineTo(x+width,y+radius);
23.     ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
24.     ctx.lineTo(x+radius,y);
25.     ctx.quadraticCurveTo(x,y,x,y+radius);
26.     ctx.stroke();
27.     ctx.fill();
28. }
29. function prism(ctx,x,y,width,height,depth,lineWidth,fillStyle){
30.     // x = top corner X      y = top corner Y
31.     // ctx = canvas context  
32.     // example: prism(ctx,150,150,200,200,200,2,"rgba(22,0,22,.9)")
33.     depth /= 3;
34.     // COLORS
35.     ctx.strokeStyle = "rgba(0,0,0,0)";
36.     ctx.fillStyle = fillStyle;
37.     ctx.beginPath();
38.     ctx.moveTo(x,y);
39.     ctx.lineTo(x,y+width);
40.     ctx.lineTo(x+width,y+width);
41.     ctx.lineTo(x+width+depth,y+width-depth)
42.     ctx.lineTo(x+width+depth,y-depth)
43.     ctx.lineTo(x+depth,y-depth)
44.     ctx.fill();
45.     // LINES
46.     ctx.strokeStyle = "#000000"
47.     ctx.lineWidth = lineWidth;
48.     ctx.lineJoin = "miter";
49.     ctx.beginPath();
50.     ctx.moveTo(x,y);
51.     ctx.lineTo(x+width,y);
52.     ctx.lineTo(x+width,y+height);
53.     ctx.lineTo(x,y+height);
54.     ctx.lineTo(x,y);
55.     ctx.lineTo(x+width,y);
56.     // MOVING X AND Y DEFAULTLY
57.     x+=width;y+=height;
58.     ctx.moveTo(x,y);
59.     ctx.lineTo(x+depth,y-depth);
60.     ctx.lineTo(x+depth,y-height-depth);
61.     ctx.lineTo(x,y-height)
62.     ctx.moveTo(x+depth,y-height-depth);
63.     ctx.lineTo(x+depth-width,y-height-depth);
64.     ctx.lineTo(x-width,y-height);
65.     ctx.stroke();  
66. }
67. function cube(ctx,x,y,width,lineWidth,fillStyle){
68.     // x = top corner X      y = top corner Y
69.     // ctx = canvas context  
70.     // example: cube(ctx,150,150,20,2,"rgba(44,22,44,1)")
71.     depth = width / 3;
72.     height = width;
73.     // COLORS
74.     ctx.strokeStyle = "rgba(0,0,0,0)";
75.     ctx.fillStyle = fillStyle;
76.     ctx.beginPath();
77.     ctx.moveTo(x,y);
78.     ctx.lineTo(x,y+width);
79.     ctx.lineTo(x+width,y+width);
80.     ctx.lineTo(x+width+depth,y+width-depth)
81.     ctx.lineTo(x+width+depth,y-depth)
82.     ctx.lineTo(x+depth,y-depth)
83.     ctx.fill();
84.     // LINES
85.     ctx.strokeStyle = "#000000"
86.     ctx.lineWidth = lineWidth;
87.     ctx.lineJoin = "miter";
88.     ctx.beginPath();
89.     ctx.moveTo(x,y);
90.     ctx.lineTo(x+width,y);
91.     ctx.lineTo(x+width,y+height);
92.     ctx.lineTo(x,y+height);
93.     ctx.lineTo(x,y);
94.     ctx.lineTo(x+width,y);
95.     // MOVING X AND Y DEFAULTLY
96.     x+=width;y+=height;
97.     ctx.moveTo(x,y);
98.     ctx.lineTo(x+depth,y-depth);
99.     ctx.lineTo(x+depth,y-height-depth);
100.     ctx.lineTo(x,y-height)
101.     ctx.moveTo(x+depth,y-height-depth);
102.     ctx.lineTo(x+depth-width,y-height-depth);
103.     ctx.lineTo(x-width,y-height);
104.     ctx.stroke();  
105. }
106. function transPrism(ctx,x,y,width,height,depth,lineWidth,opacity,fillStyle){
107.     // x = top corner X      y = top corner Y
108.     // ctx = canvas context  
109.     // example: transPrism(ctx,150,150,200,200,200,2,.5)
110.     prism(ctx,x,y,width,height,depth,lineWidth,fillStyle);
111.     ctx.lineWidth = lineWidth;
112.     ctx.lineJoin = "miter";
113.     ctx.strokeStyle = "rgba(0,0,0," + opacity + ")"
114.     depth /= 3;
115.     ctx.moveTo(x+depth,y+height-depth);
116.     ctx.lineTo(x+depth,y-depth);
117.     ctx.moveTo(x+depth,y+height-depth);
118.     ctx.lineTo(x,y+height);
119.     ctx.moveTo(x+depth,y+height-depth);
120.     ctx.lineTo(x+width+depth,y+height-depth);
121.     ctx.stroke();
122. }

JavaScript Routines Part 1: CIRCLES!

1. function Circle(ctx,x,y,r,fillStyle){
2.      // x = top corner X      y = top corner Y
3.      // r = radius            ctx = canvas context
4.      ctx.fillStyle = (typeof fillStyle === "undefined") ? "rgb(0,0,0)" : fillStyle;
5.      ctx.beginPath();
6.      ctx.arc(x+r,y+r,r,0,Math.PI*2,true);
7.      ctx.stroke();
8. }