JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JavaScript实现经典贪吃蛇游戏

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript实现经典贪吃蛇游戏，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了JavaScript实现经典贪吃蛇游戏的具体代码，供大家参考，具体内容如下

主要使用单例模式，所有元素动态创建；

1.创建地图

VAR Map;
    function map(){
        this.mapp=null;
        this.makemap=function(){
            this.mapp=document.createElement ("div");
            this.mapp.classname ="mymap";
            document.body.apPEndChild(this.mapp );
        }
    }

2.创建贪吃蛇模型

创建一个集合，存放蛇的前三节，遍历集合，创建蛇的大小和颜色，设置每个小节的宽高为30px;初始化蛇头方向向右 

var Snack;
    function snack(){
        this.snackk=[["red",3,1,null],["pink",2,1,null],["pink",1,1,null]];
        this.direct="right";
        this.makesnack=function(){
             for(var i=0;i<this.snackk.length;i++){
                 if(this.snackk[i][3]==null){
                     this.snackk[i][3]=document.createElement ("div");
                     this.snackk[i][3].className ="eatsnack";
                     this.snackk[i][3].style.backgroundColor =this.snackk[i][0];
                     Map.mapp.appendChild(this.snackk[i][3]);
                 }
                 this.snackk[i][3].style.left=this.snackk[i][1]*30+"px";
                 this.snackk[i][3].style.top=this.snackk[i][2]*30+"px";
             }
        };

3.动态蛇，从后向前遍历存放蛇的每一节的集合snackk，将每小节的属性从后想前传递，并且设置蛇头移动方向，方向改变蛇的左边距和上边距也会跟着改变，再设置一个计时器，每100ms让蛇动起来一次；

this.movesnack=function(){
            var long=this.snackk.length-1;
            for(var i=long; i>0; i--){
                this.snackk[i][1]=this.snackk[i-1][1];
                this.snackk[i][2]=this.snackk [i-1][2];
            }
            swITch(this.direct){
                case "right":  //向右
                        this.snackk[0][1] +=1;
                    break;
                case "left":  //向左
                    this.snackk[0][1] -=1;
                    break;
                case "down": //向下
                    this.snackk[0][2] +=1;
                     break;
                case "up":  //向上
                    this.snackk[0][2] -=1;
                     break;
            }

4.创建食物。

在地图上随机产生食物，食物的大小和每一小节蛇的大小一样

var Guoguo;
    function guozi(){
        this.guoo=null;
        this.x;
        this.y;
        this.makeguozi=function(){
            this.x=Math.floor( Math.random() * 30);  //0-29
            this.y=Math.floor( Math.random() * 20);  //0-19
            if(this.guoo==null){
                this.guoo=document.createElement ("div");
                this.guoo.className ="guozi";
                Map.mapp.appendChild(this.guoo);
            }
            this.guoo.style.left=this.x * 30+"px";
            this.guoo.style.top =this.y * 30+"px";
        }
    }

5.设置键盘事件，上下左右键控制蛇头的变化方向

document.body.onkeyup=function(e){
           // console.LOG(e);
            switch(e.keyCode){
                case 37:  //左
                        if(Snack.direct!="right"){
                            Snack.direct ="left";
                        }
                    break;
                case 39:// 右
                    if(Snack.direct!="left"){
                        Snack.direct ="right";
                    }
                    break;
                case 38: //上
                    if(Snack.direct!="down"){
                        Snack.direct ="up";
                    }
                    break;
                case 40:   //下
                    if(Snack.direct!="up"){
                       Snack.direct ="down";
                    }
                    break;
                case 87:
                    if (Snack.direct != "down") {
                        Snack.direct = "up";
                    }
                    break;
                case 65:
                    if (Snack.direct != "right") {
                        Snack.direct = "left";
                    }
                    break;
                case 68:
                    if (Snack.direct != "left") {
                        Snack.direct = "right";
                    }
                    break;
                case  83:
                    if (Snack.direct != "up") {
                        Snack.direct = "down";
                    }
                    break;
            }
        };

6.检测蛇头和食物的位置，蛇头吃到食物，蛇的长度变长，给snackk集合追加元素，接着在随机创建食物，再检测食物位置，再吃到食物；

if(this.snackk[0][1]==Guoguo.x && this.snackk[0][2]==Guoguo.y ){
                 this.snackk.push([
                         "pink",
                         this.snackk[this.snackk.length-1][1],
                         this.snackk[this.snackk.length-1][2],
                         null
                 ]);
                 Guoguo.makeguozi ();
                 }

7.设置蛇身可以穿墙而过，如果蛇头的上下左右边距等于0时，改变边距到最大值；

if(this.snackk[0][1]>29){
                this.snackk[0][1]=0 ;  //从右边穿墙
            }
            if(this.snackk[0][1]<0){
                this.snackk[0][1]=29 ;  //从右边穿墙
            }
            if(this.snackk[0][2]>19){
                this.snackk[0][2]=0 ;  //从右边穿墙
            }
            if(this.snackk[0][2]<0){
                this.snackk[0][2]=19 ;  //从右边穿墙
            }
            this.makesnack();
            this.stopsnack();

        };

8.设计游戏结束，贪吃蛇撞在自己的身体就死了，游戏结束，关闭计时器
当蛇头的上边距，左边距等于蛇身体某一块的上编剧和左边距时，游戏结束，弹出游戏结束的提示图片

this.stopsnack=function(){
            for(var k=this.snackk.length-1;k>0;k--){
                if(this.snackk[0][1]==this.snackk [k][1] && this.snackk[0][2]==this.snackk [k][2]){
                    clearInterval(time);
                    var gameover=document.createElement ("div");
                    gameover.className ="over";
                    gameover.style.display ="block";
                    Map.mapp.appendChild (gameover);
                }
            }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript实现经典贪吃蛇游戏全部内容，希望文章能够帮你解决JavaScript实现经典贪吃蛇游戏所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：jsjs
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程