Comment: Snake eating, the main functions: 1. The movement of the snake 2. Change the direction of the snake 3. Place food 4. Increase the sacrifice of oneself 5. How to hang it, the specific implementation is as follows. It is simple and practical in 60 lines. Interested friends can refer to it. I hope it will be helpful to everyone.
I rarely paid attention to html5 in the past. I feel that choosing html has gradually become a trend, so I want to know about it. I found a game to learn it. After writing this game, I felt that html5 and js were very closely integrated, if js was not particularly good. I guess I need to take a tutoring js first. This is just my personal advice and may not be accurate. Another thing is that you must be particularly clear about your thinking and logic, otherwise writing games may be painful.The main functions of greedy snakes: 1. The snake moves 2. Change the direction of the snake 3. Place food 4. Increase sacrificing 5. How to hang it.
The first time I wrote a game, the first time I wrote html5, it felt very difficult. I've finished writing and I'll share it with you. Communication with each other...If you don't understand or have any suggestions, please leave me a message. . . The code is very short, just 60 lines.
But this is a semi-finished product, and it's finished. Update again
<!DOCTYPE HTML>
<html>
<body>
<canvas></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var time = 160 ; //Snake's speed
var cxt=c.getContext("2d");
var x = y = 8;
var a = 0; //Food coordinates
var t = 20; //Sacrifice your life
var map = []; //Record the snake running path
var size = 8; //Snake body unit size
var direction = 2; // 1 Up 2 Right 0 Left 3 Down
interval = window.setInterval(set_game_speed, time); // Move snake
function set_game_speed(){ // Move 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 dead, keep working hard! Reason for failure: I'm hitting a 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're dead, keep working hard! The reason for failure: I bumped into myself..."); window.location.reload();
}
}
if (map.length>t) { //Keep your sacrificial length
var cl = map.shift(); //Delete the first item of the array and return the original element
cxt.clearRect(cl['x'], cl['y'], size, size);
};
map.push({'x':x,'y':y}); //Add 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 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;//On
case 2 : direction = 2;break;//right
case 3 : direction = 3;break;//Next
case 0 : direction = 0;break;//Left
}
}
// Randomly place food
function rand_frog(){
a = Math.ceil(Math.random()*50);
cxt.fillStyle = "#00000";//Internal fill color
cxt.strokeStyle = "#00000";//Border color
cxt.fillRect(a*8, a*8, 8, 8);//Draw the rectangle
}
// Randomly place food
rand_frog();
</script>
</body>
</html>