SoFunction
Updated on 2025-03-02

JavaScript Snake Full Version (Source Code)


<html>
<head>
<title>Snake v2.4</title>
<style>
    body{
        font-size:9pt;
    }
    table{
        border-collapse: collapse;
        border:solid #333 1px;
    }
    td{
        height: 10px;
        width: 10px;
        font-size: 0px;
    }
    .filled{
        background-color:blue;
    }
</style>
</head>
<script>
    function $(id){return (id);}
/**************************************************************
* javascript gluttonous snake v2.4 <br />
* v2.4 Fixed the snake body color to move as the snake moves forward
**************************************************************/
//Greedy snakes
    var Snake = {
        tbl: null,
        /**
* body: snake body, array of snakes,
* Data structure {x:x0, y:y0, color:color0},
* x,y represents coordinates, color represents color
        **/
        body: [],
//The current direction of movement, the values ​​0, 1, 2, 3, represent up, right, down, left, press the keyboard direction key to change it
        direction: 0,
//Timer
        timer: null,
//speed
        speed: 250,
//Is it suspended
        paused: true,
//Line count
        rowCount: 30,
//Number of columns
        colCount: 30,
//Initialization
        init: function(){
            var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
            = $("main");
            var x = 0;
            var y = 0;
            var colorIndex = 0;
//Create initial movement direction
            = (()*4);
//Construct the table
            for(var row=0;row<;row++){
                var tr=(-1);
                for(var col=0;col<;col++) {
                    var td=(-1);
                }
            }
//Create 20 loose nodes
            for(var i=0; i<10; i++){
                x = (()*);
                y = (()*);
                colorIndex = (()*7);
                if(!(x,y)){
                    [y].cells[x]. = colors[colorIndex];
                }
            }
//Generate snake head
            while(true){
                x = (()*);
                y = (()*);
                if(!(x,y)){
                    [y].cells[x]. = "black";
                    ({x:x,y:y,color:'black'});
                    break;
                }
            }
            = true;
//Add keyboard event
            = function(e){
                if (!e)e=;
                switch( | | ){
                  case 13: {
                    if(){
                      ();
                       = false;
                    }
                    else{
//If there is no pause, stop moving
                      ();
                       = true;
                    }
                    break;
                  }
                }
            }
        },
//move
        move: function(){
            = setInterval(function(){
                ();
                ();
                ();
            }, );
        },
//Move a body
        moveOneStep: function(){
            if(()==-1){
                clearInterval();
                alert("Game over!/nPress Restart to continue.");
                return;
            }
            if(()==1){
                var _point = ();
                var _x = _point.x;
                var _y = _point.y;
                var _color = (_x,_y);
                ({x:_x,y:_y,color:_color});
//Because I ate one food, I produce another food
                ();
                return;
            }
            // = ();
            var point = ();
//Retain the color of the first section
            var color = [0].color;
//The color moves forward
            for(var i=0; i<-1; i++){
              [i].color = [i+1].color;
            }
//Snake tail is subtracted by one section, add one section to the snake tail, presenting the effect of snake progressing
            ();
            ({x:,y:,color:color});
            // = ();
        },
//Explore where you will go next
        pause: function(){
          clearInterval();
          ();
        },
        getNextPos: function(){
            var x = [0].x;
            var y = [0].y;
            var color = [0].color;
//Up
            if(==0){
                y--;
            }
//To the right
            else if(==1){
                x++;
            }
//Downward
            else if(==2){
                y++;
            }
//To the left
            else{
                x--;
            }
//Return a coordinate
            return {x:x,y:y};
        },
//Check what is the next step you are going to
        checkNextStep: function(){
            var point = ();
            var x = ;
            var y = ;
            if(x<0||x>=||y<0||y>=){
return -1;//Touch the boundary, the game ends
            }
            for(var i=0; i<; i++){
                if([i].x==x&&[i].y==y){
return -1;//When you touch your body, the game ends
                }
            }
            if((x,y)){
return 1;//There is something
            }
return 0;//Empty land
        },
//Erase the snake body
        erase: function(){
            for(var i=0; i<; i++){
                ([i].x, [i].y);
            }
        },
//Draw the snake body
        paint: function(){
            for(var i=0; i<; i++){
                ([i].x, [i].y,[i].color);
            }
        },
//Erase a section
        eraseDot: function(x,y){
            [y].cells[x]. = "";
        },
        paintDot: function(x,y,color){
            [y].cells[x]. = color;
        },
//Get the color on a coordinate
        getColor: function(x,y){
            return [y].cells[x].;
        },
//For debugging
        toString: function(){
            var str = "";
            for(var i=0; i<; i++){
                str += "x:" + [i].x + " y:" + [i].y + " color:" + [i].color + " - ";
            }
            return str;
        },
//Check whether a coordinate point is filled
        isCellFilled: function(x,y){
            if([y].cells[x]. == ""){
                return false;
            }
            return true;
        },
//restart
        restart: function(){
            if(){
                clearInterval();
            }
            for(var i=0; i<;i++){
              (0);
            }
            = [];
            ();
            = 250;
        },
//Accelerate
        speedUp: function(time){
          if(!){
            if(+time<10||+time>2000){
              return;
            }
             +=time;
            ();
            ();
          }
        },
//Produce food.
        generateDood: function(){
          var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
        var x = (()*);
            var y = (()*);
            var colorIndex = (()*7);
            if(!(x,y)){
                [y].cells[x]. = colors[colorIndex];
            }
        }
    };
</script>
<body onload="();">
/*************************************************************<br />
* javascript gluttonous snake v2.4<br />
**************************************************************/<br />
<table border="1" cellspacing="0" cellpadding="0"></table>
<input type="button" value="Start/Pause" /> Click the left button or press Enter to start/Pause the game<br />
<input type="button" value="Start again" /><br />
<input type="button" value="acceleration" /> Click the left button or press Ctrl + ↑acceleration<br />
<input type="button" value="reduce" /> Click the left button or press Ctrl + ↓ to decelerate
<script>
  $('btn').onclick = function(){
    if(){
      ();
       = false;
    }
    else{
      ();
       = true;
    }
  };
  $("reset").onclick = function(){
    ();
    ();
  };
  $("upSpeed").onclick = function(){
    (-20);
  };
  $("downSpeed").onclick = function(){
    (20);
  };
</script>
</body>
</html>