Comments: Major functions of a snake: 1. Move a snake 2. Change the direction of a snake 3. place food 4. Increase the body of a snake 5. How to hide it? The specific implementation is as follows, simple and practical: There are 60 lines. If you are interested, please refer to the following. I hope to help you and seldom pay attention to html5 in the past. I feel that html has gradually become a trend and I want to know more. I found a game to learn. After writing this game, I feel that html5 and js are very closely integrated. if Javascript is not very good. It is estimated that you need to study js first. This is just a personal suggestion and is not necessarily accurate. Another is that the thinking and logic should be very clear, otherwise it may be very painful to write a game.
The main functions of a snake are as follows: 1. Move the snake 2. change the direction of the snake 3. Place the Food 4. increase the length of the snake 5.
The first time I wrote a game, I felt very hard to write html5 for the first time. After writing it, I will share it with you. Communicate with each other ...... if you do not understand or have suggestions, you can leave a message to me... The code is very short. There are 60 lines.
However, this is a semi-finished product. Update again
The Code is as follows:
<! Doctype html>
<Html>
<Body>
<Canvas id = "myCanvas" width = "400" height = "400" style = "border: 1px solid # c3c3c3;"> </canvas>
<Script type = "text/javascript">
Var c = document. getElementById ("myCanvas ");
Var time = 160; // snake speed
Var cxt = c. getContext ("2d ");
Var x = y = 8;
Var a = 0; // food Coordinate
Var t = 20; // Length
Var map = []; // record the running path of a snake
Var size = 8; // the size of the snake body
Var direction = 2; // 1 up 2 right 0 left 3 bottom
Interval = window. setInterval (set_game_speed, time); // move the snake
Function set_game_speed () {// mobile snake
Switch (direction ){
Case 1: y = y-size; break;
Case 2: x = x + size; break;
Case 0: x = x-size; break;
Case 3: y = y + size; break;
}
If (x> 400 | y> 400 | x <0 | y <0 ){
Alert ("You are down, continue to work! Cause of failure: hitting the wall... "); window. location. reload ();
}
For (var I = 0; I <map. length; I ++ ){
If (parseInt (map [I]. x) = x & parseInt (map [I]. y) = y ){
Alert ("You are down, continue to work! Cause of failure: Hit yourself... "); window. location. reload ();
}
}
If (map. length> t) {// keep the length
Var cl = map. shift (); // Delete the first entry of the array and return the original element.
Cxt. clearRect (cl ['X'], cl ['y'], size, size );
};
Map. push ({'X': x, 'y': y}); // Add the data to the end of the original array.
Cxt. fillStyle = "#006699"; // internal fill color
Cxt. strokeStyle = "#006699"; // border color
Cxt. fillRect (x, y, size, size); // draw a rectangle
If (a * 8) = x & (a * 8) = y) {// eat food
Rand_frog (); t ++;
}
}
Document. onkeydown = function (e) {// change the snake direction
Var code = e. keyCode-37;
Switch (code ){
Case 1: direction = 1; break; // upper
Case 2: direction = 2; break; // right
Case 3: direction = 3; break; // bottom
Case 0: direction = 0; break; // left
}
}
// Random food placement
Function rand_frog (){
A = Math. ceil (Math. random () * 50 );
Cxt. fillStyle = "#000000"; // internal fill color
Cxt. strokeStyle = "#000000"; // border color
Cxt. fillRect (a * 8, a * 8, 8, 8); // draw a rectangle
}
// Random food placement
Rand_frog ();
</Script>
</Body>
</Html>
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
