Comment: An HTML5 video intelligence game, the development process is very interesting, I like programming, but after implementing the game logic, I have an interesting idea: Why don’t you think of a way to hide the code
I recently developed my first web game: a HTML5 video game. The development process is very interesting, I like programming, but after implementing the game logic, I have an interesting idea: Why don't you think of a way to hide the code? At first I was thinking of some very simple practices, such as forbidding the context menu, in case you can view the page source code when you right-click. But this makes no sense. The right-click menu cannot be used. People can still view the source code through keyboard shortcuts or view source files in the menu bar.A picture can contain thousands of words
This depends on the volume of the picture. But I decided to encrypt the source code and store it in a picture. HTML5's canvas component is very suitable for this kind of thing because it supports operation for image pixels. A pixel is represented by four values (channels): red, green, blue and alpha channels. Their values are distributed from 0 to 255. My Javascript code is a character, each character has an ASCII corresponding value. The range of ASCII values is also 0-255, so what I want to do is to traverse each pixel on the canvas and set the ASCII value of 3 code characters for each pixel as its RGB value, you can easily get these characters through the charCodeAt function.
.charCodeAt(0)
What is generated is a colorful and small picture, which is my program code and let’s take a look:
When decoding, I just need to draw this picture on the canvas, traverse the pixel points, and take out the characters represented by the values r, g, and b:
String.fromCharCode(code)
Concatenate them into a large string, and that's your code - executable code.
Can you protect your source code this way?
Actually, it can't - an experienced (or even inexperienced) programmer can still know how to decode images and remove the code inside, but I think this is the first step to prevent those who have bad business purposes from stealing your code - and those programmers who can figure out how to decode (mostly) are not plagiarizing
The main drawbacks of this method
This technology can only be used in modern browsers that support HTML5 canvas technology, and it is definitely not possible in IE6 and IE8. Even some modern browsers have support issues with the encoding of the alpha channel of the picture, so you can only place 3 characters per pixel - a 100×100-sized image can store 30,000 text characters.
Do you have any other simple ways to prevent others from copying your code? Of course we can encrypt characters, but how can we ensure that your decryption steps can not be easily cracked? Tell me what you think!