A Snake Game
17 lines of valid javascrpt code
Add 25 lines of HTML code
Running Method chrome or Firefox
Test connection
Http://lufylegend.com/html5/lufylegend/tcs.html
The complete code is as follows:
<!DOCTYPE html>A few of my friends want to comment. I have added a simple description. Let's see the following:
<! Doctype HTML> <body> <canvas id = "mycanvas" width = "240" Height = "240" style = "border: 1px solid # d3d3d3; "> your browser does not support the HTML5 canvas tag. </canvas> <SCRIPT> // The R array indicates the snake. Co indicates the forward direction of the Snake. The default value is downward. e indicates the food var CTX = document. getelementbyid ("mycanvas "). getcontext ("2D"), r = [{X: 10, Y: 9}, {X: 10, Y: 8}], CO = 40, E = NULL; // Add the shadow effect CTX to the snake. shadowblur = 20, CTX. shadowcolor = "black"; // loop, with an interval of 100 milliseconds setinterval (function () {// game Whether the scene has ended. If (check (R [0], 0) | r [0]. x <0 | r [0]. x> = 24 | r [0]. Y <0 | r [0]. y> = 24) return; // if there is any food, determine whether the food has been eaten Based on the direction of the snake and change the last element in the snake array to header e! = NULL & (CO = 40 & R [0]. X = E. X & R [0]. Y + 1 = E. y) | (CO = 38 & R [0]. X = E. X & R [0]. y-1 = E. y) | (CO = 37 & R [0]. x-1 = E. X & R [0]. y = E. y) | (CO = 39 & R [0]. X + 1 = E. X & R [0]. y = E. Y ))? (R. unshift (E), E = NULL, R. unshift (R. pop () :( R. unshift (R. pop (); // Based on the direction, reset the coordinates of the first element of the snake array to move (CO = 40 | Co = 38 )? (R [0]. x = R [1]. X, R [0]. Y = R [1]. Y + (CO = 40? 1:-1) :( R [0]. x = R [1]. x + (CO = 39? 1:-1), R [0]. y = R [1]. y); // clear the screen CTX. clearrect (240,240,); // if there is food, draw the food if (e) CTX. fillrect (E. x * 10, E. y * 10, 10, 10); // draw a snake for (VAR I = 0; I <R. length; I ++) CTX. fillrect (R [I]. x * 10, R [I]. y * 10, 10, 10); // if there is no food, add a grain of food to the random position while (E = NULL | check (e )) E = {y :( math. random () * 24> 0), X :( math. random () * 24 >>> 0)}; // determines whether the game is over. If (check (R [0], 0) | r [0]. x <0 | r [0]. x> = 24 | r [0]. Y <0 | r [0]. y> = 24) Alert ("game over \ Nyou get [" + (R. Length-2) + "]") ;}, 100); // Add a keyboard event and use the arrow key to control the forward direction of the snake document. onkeyup = function (event) {Co = event. keycode> = 37 & event. keycode <= 40 & (math. ABS (event. keycode-Co )! = 2 )? Event. keycode: CO;} // checks whether the specified Position overlaps with the snake. Function check (E, j) {for (VAR I = 0; I <R. length; I ++) if (J! = I & R [I]. X = E. X & R [I]. y = E. y) return true; return false ;}</SCRIPT> </body>Some of my friends feel that the code is difficult to read. Next I will provide a code with the format adjusted. The functions of each part of the code above are identical, but the writing method is different.
<!DOCTYPE html>Reprinted Please note: transferred from lufy_legend's blog
Continue to follow my blog
Http://blog.csdn.net/lufy_legend
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
