JavaScript实现贪食蛇小游戏并打包成可执行程序

效果图

 

 部分源码:

JavaScript 实现

$(function(){
    //初始化数据
    var body = [[11,23],[11,22],[11,21],[11,20],[11,19]];
    var tail = null;
    var $tr = $("td");
    var towards = "right";
    var food = null;
    var haveGo = "true";
    var haveEat = "true";
    var bodyColor = "rgb(245, 145, 161)";
    var start = "false";
    var score = 0;

    //初始化
    $("#playGame")[0].onclick = function(){
        start = "true";
        $(".buttons")[0].style.display = "none";
    }
    $("#operation")[0].onclick = function(){
        $(".operation")[0].style.display = "block";
        $("#close")[0].onclick = function(){
            $(".operation")[0].style.display = "none";
        }
    }

    var gameInterval = setInterval(function(){
        //游戏开始
        if(start == "true"){
            //食物生成
            if(haveEat == "true"){
                food = createFood(body,$tr);
                haveEat = "flase";
            }

            //按键检测
            document.onkeydown = function(event){
                if(event.keyCode == 87 && towards != "down" && haveGo == "true"){
                    towards = "up";
                    haveGo = "false";
                }
                else if(event.keyCode == 83 && towards != "up" && haveGo == "true"){
                    towards = "down";
                    haveGo = "false"
                }
                else if(event.keyCode == 65 && towards != "right" && haveGo == "true"){
                    towards = "left";
                    haveGo = "false"
                }
                else if(event.keyCode == 68 && towards != "left" && haveGo == "true"){
                    towards = "right";
                    haveGo = "false"
                }
            }

            //碰撞检测
            collisionScan(body);

            //蛇行走
            walk(body,towards);

            //绘制蛇
            writeSneak(body,$tr);
        }
    },150);
    
    //绘制身体
    function writeSneak(body,$tr){
        var x,y;
        for(i=0;i<body.length;i++){
            x = body[i][1];
            y = body[i][0];
            $tr[y*45 + x].style.backgroundColor = bodyColor;
        }
        if(tail != null){
            x = tail[1];
            y = tail[0];
            $tr[y*45 + x].style.backgroundColor = "black";
        }
    }

    //绘制食物
    function createFood(body,$tr){
        var random = Math.random();
        var R = parseInt(random*1080);
        food = [parseInt(R/45),parseInt(R%45)];
        //食物不与蛇重合
        for(i=0;i<body.length;i++){
            var x = body[i][1];
            var y = body[i][0];
            if( R == (y*45+x) || food[0]==0 || food[0]>=24 || food[1]== 0 || food[1] >= 43){
                createFood($tr);
            }
        }
        $tr[R].style.backgroundColor = "blue";
        return food;
    }

    //蛇行走
    function walk(body,towards){
        var x = body[0][1];
        var y = body[0][0];
        tail = body[body.length-1];
        for(i=body.length-1;i>0;i--){
            body[i] = body[i-1];
        }
        switch(towards){
            case("up"):y--;break;
            case("down"):y++;break;
            case("left"):x--;break;
            case("right"):x++;break;
        }
        body[0] = [y,x];
        haveGo = "true";
        return tail;
    }

    //碰撞检测
    function collisionScan(body){
        //食物检测
        if(food[0] == body[0][0] && food[1]==body[0][1]){
            var x = food[1];
            var y = food[0];
            haveEat = "true";
            score++;
            for(i=body.length;i>0;i--){
                body[i] = body[i-1];
            }
            body[0] = [y,x];
        }
        else{
            for(i=1;i<body.length;i++){
                if(body[0][0]==body[i][0] && body[0][1]==body[i][1]){
                    gameOver($tr,bodyColor);
                }
            }
            if(body[0][0]==0 || body[0][0]==24 || body[0][1]== 0 || body[0][1] == 43){
                gameOver($tr,bodyColor);
            }
        }
    }

    //GameOver
    function gameOver($tr,bodyColor){
        var array_R = [300,1047,618,380,283,1138,985,189,658,657,132,227,984,698,1142,122,754,250,443,707,506,492,211,311,26,890,1008,436,124,550,1008,703,388,
            94,203,633,247,888,176,106,364,90,487,520,59,1176,1130,466,649,1033,644,943,882,285,502,1131,417,561,722,481,577,1132,1077,241,531,36,973,421,186,
            397,238,273,44,476,436,563,321,1110,728,1191,593,378,172,670,658,265,269,825,1048,1150,275,828,447,109,178,172,42,901,726,420,889,997,626,5,493,720,
            177,596,831,393,802,615,12,640,750,474,615,583,60,704,608,1055,869,57,534,702,301,1004,947,1019,746,67,53,898,922,257,1065,223,934,95,586,318,508,632,
            435,146,538,522,326,951,216,1091,396,915,124,1030,1015,141,933,815,311,668,768,87,251,473,513,660,579,627,1096,278,42,814,638,1025,254,592,777,620,811,
            676,762,712,275,878,344,505,531,635,150,900,729,689,812,915,518,349,496,1189,620,509,1037,731,1048,367,96,868,1193,840,1021,1081,445,22,674,582,1061,307,
            251,415,674,485,379,266,334,535,1096,30,116,391,619,408,970,805,249,646,93,198,477,846,239,770,379,1138,524,849,826,137,887,1145,478,1044,116,494,434,402,
            919,540,745,865,595,876,1181,1030,241,118,892,535,946,755,1065,935,872,1190,717,784,598,1009,347,1068,291,320,398,752,728,1128,832,871,406,1061,989,82,0,60,
            1063,52,1103,1166,65,366,839,444,935,537,440,885,475,227,846,575,912,203,964,984,45,1081,291,1085,730,371,1174,496,364,258,331,917,1132,1133,643,1151,326,
            776,381,315,1035,720,689,744,860,325,1138,493,1011,947,777,144,966,161,970,1163,1160,1059,305,1115,275,560,341,1163,695,1172,1119,313,777,716,857,876,338,
            1185,737,498,1067,8,870,474,66,1036,1138,179,589,1189,150,758,893,1102,213,781,758,838,550,397,1199,728,46,1088,596,968,1043,522,1024,503,638,128,450,391,
            427,977,1134,1188,1130,1137,81,480,320,909,1146,498,1041,957,1089,2,719,1189,214,297,123,638,260,880,1058,419,556,646,319,498,272,317,157,807,195,428,4,513,
            622,887,511,1181,85,532,1199,597,766,1153,261,21,561,278,819,785,1005,715,728,593,939,415,444,305,1140,285,156,87,1029,344,1038,390,138,282,605,934,1162,50,
            49,701,647,183,674,756,627,664,122,451,199,582,143,376,343,131,411,128,1000,441,1140,84,1031,688,711,1011,376,438,40,472,199,158,71,467,308,829,1080,925,102,
            261,1092,1040,1017,1152,748,532,1096,439,557,1102,958,267,1135,545,987,1067,1028,3,531,737,596,661,704,942,657,593,168,77,517,339,414,647,1193,783,853,450,39,
            295,676,228,98,24,761,144,531,441,347,938,776,729,633,376,301,437,539,175,1092,245,570,37,961,1005,527,75,1133,233,232,581,629,971,517,462,274,242,674,18,249,
            1008,1076,25,750,282,659,175,591,1028,455,512,963,1146,975,939,1033,389,649,742,575,1114,221,1132,292,1187,271,1170,596,344,822,726,693,186,43,1136,931,939,
            1022,1139,684,92,1123,610,1105,163,1051,286,756,156,950,500,1151,187,1192,923,340,1055,471,13,454,552,445,668,916,1076,395,487,761,466,964,359,718,1147,426,
            625,257,945,702,1058,491,1133,291,272,925,383,530,660,1166,360,387,157,40,316,1150,218,670,75,409,472,195,341,436,1070,505,776,1097,576,102,443,1158,84,965,
            459,1035,47,935,762,182,1023,1184,1072,89,455,291,745,389,641,613,485,1123,703,537,459,785,499,782,650,857,93,501,264,78,734,743,135,208,551,1192,288,835,
            488,104,342,278,192,48,610,8,871,1040,351,660,754,24,139,1104,264,135,1118,840,81,1122,292,1172,225,296,508,944,222,390,170,49,1099,1007,953,77,1171,514,
            725,95,89,739,778,400,329,708,204,77,472,24,490,124,590,685,481,1108,435,762,590,965,961,636,713,270,315,414,221,636,666,163,167,607,116,629,475,1036,489,
            942,223,1149,279,569,634,947,468,828,278,126,132,82,785,565,197,486,1149,1017,197,610,924,137,430,466,6,480,463,1107,1116,307,1139,1000,11,17,53,343,1193,
            1126,376,212,468,741,1089,83,713,792,1096,972,307,430,831,1077,258,673,291,152,369,472,557,149,231,274,605,992,1058,807,19,43,1186,735,1125,87,27,1142,847];
        start = "false";
        var num = 0;
        var initInterval = setInterval(function(){
            $tr[array_R[num++]].style.backgroundColor = bodyColor;
            if(num == 900){
                clearInterval(initInterval);
                clearInterval(gameInterval);
                $(".gameover")[0].style.display = "block";
                $("#score")[0].innerHTML = "Score: " + score +"<button id='playagain'>再玩一次</button>";
                $("#playagain")[0].onclick = function(){
                    location.replace("eatSneak.html");
                }
            }
        },1);
    }
})

 HTML 与 CSS 略

PS : 140左右使用的不是真的随机数，而是预先生成一次随机数后将其存储在数组内，可以提升代码的执行效率，也算得上一种 “伪随机数” 吧。（因为我要用到的是不重复的随机数）