二十七、JS经典贪吃蛇demo

最新推荐文章于 2022-11-10 15:02:25 发布
最新推荐文章于 2022-11-10 15:02:25 发布
阅读量280 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40976555/article/details/80613453
版权

一、首先 创建地图

1.封装一个地图的类；

function Map(){
    //设置地图的相关属性
    this.width=1200;
    this.height=600;
    this.position="relative";
    this.backgroundColor="black";
    this.margin="0 auto";
    //封装接受地图对象的属性
    this.Mapr=null;
    //构造创建地图方法
    this.CreateMap=function(){
        if(this.Mapr==null){
            //创建dom元素
            this.Mapr=document.createElement("div");
            this.Mapr.style.width=this.width+"px";
            this.Mapr.style.height=this.height+"px";
            this.Mapr.style.position=this.position;
            this.Mapr.style.backgroundColor=this.backgroundColor;
            this.Mapr.style.margin=this.margin;
            //将创建到的dom元素添加到body
            document.body.appendChild(this.Mapr);
        }
    }
}

2.通过实例化调用类的属性和方法创建地图；

//实例化地图 调用创建方法
 map=new Map();
 map.CreateMap();

 

二、创建蛇并构造相应的运动方法

1.创建蛇 封装一个蛇的类 及其创建方法

 分析：经典款贪吃蛇由若干个小方块组成身体，蛇头与蛇身的颜色不一致，但大小相同，即蛇是由很多属性一致的方块组成，要存储一系列类型一致的数据第一时间考虑数组，并且数组有push()追加方法，也解决了后面吃豆豆后身体增长的问题；默认蛇开始为3个小方块长度；(30x30的小方块)

注意：数组存储蛇的每一节，首个位置设置为蛇头；

  数组中存储null,left,top,颜色四个值；(left ,top值是小方块宽高x对应个数值)

var snack;
function Snack(){
    this.width=30;
    this.height=30;
    this.position="absolute";
    this.border="1px solid #ffffff";
    this.Snackbody=[[null,3,1,"red"],[null,2,1,"silver"],[null,1,1,"silver"]];
    //构造创建蛇方法
    this.CreatSnack=function(){
        for(var key in this.Snackbody){
            if(this.Snackbody[key][0]==null){
                this.Snackbody[key][0]=document.createElement("div");
                this.Snackbody[key][0].style.width=this.width+"px";
                this.Snackbody[key][0].style.height=this.height+"px";
                this.Snackbody[key][0].style.position=this.position;
                this.Snackbody[key][0].style.border=this.border;
                this.Snackbody[key][0].style.backgroundColor=this.Snackbody[key][3];
                map.Mapr.appendChild(this.Snackbody[key][0]);
            }
            this.Snackbody[key][0].style.left=this.Snackbody[key][1]*this.width+"px";
            this.Snackbody[key][0].style.top=this.Snackbody[key][2]*this.height+"px";
        }
    }
}

实例化蛇 调用创建方法

//实例化蛇 调用创建方法
snack=new Snack();
snack.CreatSnack();

 

2.封装蛇移动方法

 分析：

(1)贪吃蛇运动其实是属性(left,top)的传递，即蛇头移动后，其后那节身体移动到蛇头移动前的位置，再后面的身体依次移动到前一节移动前的位置；

注意：需增加一个蛇头默认方向属性

  控制蛇头在不同方向上的运动，带动蛇身体的移动；

  在改变每节属性改变之后需再次调用蛇的创建方法，相当于每次移动后在新的位置创建蛇；

//封装蛇移动的方法
this.SnackMove=function(){
    //通过传递蛇的left top值完成蛇的运动
    for(var i=this.Snackbody.length-1;i>0;i--){
        this.Snackbody[i][1]=this.Snackbody[i-1][1];
        this.Snackbody[i][2]=this.Snackbody[i-1][2];
    }
    //设置蛇头在不同方向的移动 带动蛇的移动 需增加一个默认方向属性
    switch(this.direct){
        case "right":this.Snackbody[0][1]+=1;break;
        case "left":this.Snackbody[0][1]-=1;break;
        case "up":this.Snackbody[0][2]-=1;break;
        case "down":this.Snackbody[0][2]+=1;break;
    }
    //调用蛇的创建方法
    this.CreatSnack();
}

 

(2)通过按键上下左右控制蛇的移动

e.keyCode 获取按键码的方法 利用获取到的按键码控制上下左右移动；

注意：当蛇朝着一个方向正在运动的时候，按相反键时不能使蛇反向移动，需要处理这个bug；(在执行按键操作之前对现在的方向进行判断)

//通过按键事件控制蛇头改变方向
document.onkeydown=function(e){
   /* e.keyCode; 获取按键码的方法*/
   switch(e.keyCode){
       case 37:if(snack.direct!="right")snack.direct="left";break;
       case 38:if(snack.direct!="down")snack.direct="up";break;
       case 39:if(snack.direct!="left")snack.direct="right";break;
       case 40:if(snack.direct!="up")snack.direct="down";break;
    }
}

 

(3)封装蛇的穿墙方法 即当蛇运到到边界令其从相反方向的边间穿出；

 分析:利用蛇头的坐标值(left top)与边界做比较，相等时设置蛇头坐标为相反方向边界值；

 注意：

需要判断上下左右方向，只需改变这个方向上对应的坐标值；

需要蛇的运动方法内调用该方法，且放置在调用创建方法之前；

判断时使用方块个数值判断；(地图宽=40个小方块 高=20个小方块)

从左(上)方向穿出去另一半出来时，需要对之进行-1处理，让其在地图内侧出现；

穿出去时left是以蛇头的右边线(下边线)，所以判断条件是< 和 >=;

 

Ps:也可以将这里写为撞墙后游戏结束，同理需要比较，在相同时停止计时器，弹出游戏停止的字幕；

//封装蛇的穿墙方法
this.Snackback=function(){
    if(this.Snackbody[0][1]>=40){
        this.Snackbody[0][1]=0;
    }
    if(this.Snackbody[0][1]<0){
        this.Snackbody[0][1]=39;
    }
    if(this.Snackbody[0][2]>=20){
        this.Snackbody[0][2]=0;
    }
    if(this.Snackbody[0][2]<0){
        this.Snackbody[0][2]=20;
    }
}

 

二、创建豆豆

1.封装豆豆的类 随机位置创建豆豆

 利用Math的随机数方法控制随机位置产生豆豆 注意 对生成的随机数要进行向下取整处理，保证每个豆豆都在 40x20的地图网格里；

/*第三步：封装一个豆豆类*/
 var food;
 function Food(){
     this.width=30;
     this.height=30;
     this.backgroundColor="yellow";
     this.position="absolute";
     this.foodr=null;
     this.x;//x轴 left
     this.y;//y轴 top
     //封装豆豆创建方法
     this.CreatFood=function(){
         this.x=Math.floor(Math.random()*40);
         this.y=Math.floor(Math.random()*20);
         if(this.foodr==null){
             this.foodr=document.createElement("div");
             this.foodr.style.width=this.width+"px";
             this.foodr.style.height=this.height+"px";
             this.foodr.style.backgroundColor=this.backgroundColor;
             this.foodr.style.position=this.position;
             map.Mapr.appendChild(this.foodr);
         }
         this.foodr.style.left=this.x*this.width+"px";
         this.foodr.style.top=this.y*this.height+"px";
     }
 }

实例化豆豆 调用创建方法

//实例化豆豆 调用创建方法
food=new Food();
food.CreatFood();

 

三、补充蛇运动方法代码

1.补充蛇吃豆豆  在蛇移动方法中补充

     分析：判断蛇的left top与豆豆的left top是否一致，一致时，重新创建随机豆豆，同时蛇身体数组追加一节；

 

//判断蛇是否吃到豆豆
if(this.Snackbody[0][1]==food.x&&this.Snackbody[0][2]==food.y){
    this.Snackbody.push([
        null,
        this.Snackbody[this.Snackbody.length-1][0],
        this.Snackbody[this.Snackbody.length-1][1],
        "silver"
    ])
    //食物换位置
    food.CreatFood();

}

 

 

2.补充蛇头撞到蛇身，弹出游戏结束，清除定时器；

  分析：循环判断蛇头是否和每节蛇身坐标一致，若出现一致，撞死。

 从第一节蛇身开始比较，

     注意：无论alert();在清除定时器之前或者之后，弹框之后还会执行一次运 动代码，因为alert()高于其他代码；

由于是在蛇运动过程中判断是否撞到，所以应该在蛇移动方法中调用该方法；

//封装蛇撞死方法
this.SnackDie=function(){
    for(var i=1;i<this.Snackbody.length;i++){
        if(this.Snackbody[0][1]==this.Snackbody[i][1]&&this.Snackbody[0][2]==this.Snackbody[i][2]){
            alert("撞死了");
            clearInterval(time);
        }
    }
}

 

四、完善整合代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style>
        body,html{
            width: 100%;
            height: 100%;
            overflow: hidden;/* 消除窗体抖动*/
        }
    </style>
</head>
<body>
<script>
   /* 第一步：封装一个地图类*/
   var map;
   function Map(){
       //设置地图的相关属性
       this.width=1200;
       this.height=600;
       this.position="relative";
       this.backgroundColor="black";
       this.margin="0 auto";
       //封装接受地图对象的属性
       this.Mapr=null;
       //构造创建地图方法
       this.CreateMap=function(){
           if(this.Mapr==null){
               //创建dom元素
               this.Mapr=document.createElement("div");
               this.Mapr.style.width=this.width+"px";
               this.Mapr.style.height=this.height+"px";
               this.Mapr.style.position=this.position;
               this.Mapr.style.backgroundColor=this.backgroundColor;
               this.Mapr.style.margin=this.margin;
               //将创建到的dom元素添加到body
               document.body.appendChild(this.Mapr);
           }
       }
   }
    /*第二步：封装一个蛇类*/
    var snack;
    function Snack(){
        this.width=30;
        this.height=30;
        this.position="absolute";
        this.border="1px solid #ffffff";
        this.Snackbody=[[null,3,1,"red"],[null,2,1,"silver"],[null,1,1,"silver"]];
        this.direct="right";//增加默认方向属性
        //构造创建蛇方法
        this.CreatSnack=function(){
            for(var key in this.Snackbody){
                if(this.Snackbody[key][0]==null){
                    this.Snackbody[key][0]=document.createElement("div");
                    this.Snackbody[key][0].style.width=this.width+"px";
                    this.Snackbody[key][0].style.height=this.height+"px";
                    this.Snackbody[key][0].style.position=this.position;
                    this.Snackbody[key][0].style.border=this.border;
                    this.Snackbody[key][0].style.backgroundColor=this.Snackbody[key][3];
                    map.Mapr.appendChild(this.Snackbody[key][0]);
                }
                this.Snackbody[key][0].style.left=this.Snackbody[key][1]*this.width+"px";
                this.Snackbody[key][0].style.top=this.Snackbody[key][2]*this.height+"px";
            }
        }
        //封装蛇移动的方法
        this.SnackMove=function(){
            //通过传递蛇的left top值完成蛇的运动
            for(var i=this.Snackbody.length-1;i>0;i--){
                this.Snackbody[i][1]=this.Snackbody[i-1][1];
                this.Snackbody[i][2]=this.Snackbody[i-1][2];
            }
            //设置蛇头在不同方向的移动 带动蛇的移动 需增加一个默认方向属性
            switch(this.direct){
                case "right":this.Snackbody[0][1]+=1;break;
                case "left":this.Snackbody[0][1]-=1;break;
                case "up":this.Snackbody[0][2]-=1;break;
                case "down":this.Snackbody[0][2]+=1;break;
            }
            //调用蛇的穿墙方法
            this.Snackback();
            //判断蛇是否吃到豆豆
            if(this.Snackbody[0][1]==food.x&&this.Snackbody[0][2]==food.y){
                this.Snackbody.push([
                    null,
                    this.Snackbody[this.Snackbody.length-1][0],
                    this.Snackbody[this.Snackbody.length-1][1],
                    "silver"
                ])
                //食物换位置
                food.CreatFood();
            }
            //调用蛇撞死方法
            this.SnackDie();
            //调用蛇的创建方法
            this.CreatSnack();
        };
        //封装蛇的穿墙方法
        this.Snackback=function(){
            if(this.Snackbody[0][1]>=40){
                this.Snackbody[0][1]=0;
            }
            if(this.Snackbody[0][1]<0){
                this.Snackbody[0][1]=39;
            }
            if(this.Snackbody[0][2]>=20){
                this.Snackbody[0][2]=0;
            }
            if(this.Snackbody[0][2]<0){
                this.Snackbody[0][2]=20;
            }
        }
        //封装蛇撞死方法
        this.SnackDie=function(){
            for(var i=1;i<this.Snackbody.length;i++){
                if(this.Snackbody[0][1]==this.Snackbody[i][1]&&this.Snackbody[0][2]==this.Snackbody[i][2]){
                    alert("撞死了");
                    clearInterval(time);
                }
            }
        }
    }
   /*第三步：封装一个豆豆类*/
    var food;
    function Food(){
        this.width=30;
        this.height=30;
        this.backgroundColor="yellow";
        this.position="absolute";
        this.foodr=null;
        this.x;//x轴 left
        this.y;//y轴 top
        //封装豆豆创建方法
        this.CreatFood=function(){
            this.x=Math.floor(Math.random()*40);
            this.y=Math.floor(Math.random()*20);
            if(this.foodr==null){
                this.foodr=document.createElement("div");
                this.foodr.style.width=this.width+"px";
                this.foodr.style.height=this.height+"px";
                this.foodr.style.backgroundColor=this.backgroundColor;
                this.foodr.style.position=this.position;
                map.Mapr.appendChild(this.foodr);
            }
            this.foodr.style.left=this.x*this.width+"px";
            this.foodr.style.top=this.y*this.height+"px";
        }
    }
    var time;
    window.οnlοad=function(){
       //实例化地图 调用创建方法
        map=new Map();
        map.CreateMap();
        //实例化蛇 调用创建方法
        snack=new Snack();
        snack.CreatSnack();
        time=setInterval(function(){
            snack.SnackMove();
        },200);

        //实例化豆豆 调用创建方法
        food=new Food();
        food.CreatFood();
        //通过按键事件控制蛇头改变方向
        document.οnkeydοwn=function(e){
           /* e.keyCode; 获取按键码的方法*/
           switch(e.keyCode){
               case 37:if(snack.direct!="right")snack.direct="left";break;
               case 38:if(snack.direct!="down")snack.direct="up";break;
               case 39:if(snack.direct!="left")snack.direct="right";break;
               case 40:if(snack.direct!="up")snack.direct="down";break;
            }
        }
    }
</script>
</body>
</html>
蕙惠子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
贪吃蛇游戏源代码
05-26
基于VC++编写游戏 由于歌曲文件太大 请自己下载WAV格式的音乐 在进行修改
js经典小demo日常记录
weixin_42655877的博客
10-01 442
js经典demo
【华为】【校招】【Java】【模拟】贪吃蛇
Twiss的博客
10-12 937
座位一排共 N 个座位，编号分别为[0,N-1],● seat -> 0,空在任何位置都行，但是要给他安排索引最小的位置，也就是座位 0。每当一个员工进入时，需要坐到最大社交距离（最大化自己和其他人的距离的座位）；● seat -> 4,要和旁边的人距离最远，应该坐到中间，也就是座位 4。会议室座位总数seatNum。例如 -4 表示坐在位置 4 的员工离开（保证有员工坐在该座位上）最后进来员工，他会坐在第几个位置，如果位置已满，则输出-1。● seat -> 9,要和旁边的人距离最远，也就是座位 9。
贪吃蛇小游戏小Demo
wzdaima12的博客
08-24 206
一、前序 最近用java写了一个贪吃蛇游戏的Demo，感觉还不错，在这上面整理一下。 （1）游戏的运行图： 游戏规则很简单： 1.按空格启动开始游戏，再次按空格可以切换暂停和开始游戏，死亡之后按空格可以重新开始游戏 2.监听键盘空格键和上、下、左、右键，使小蛇可以按规定方向行走 （2）游戏工程图： （3）游戏所需要素材 二、核心代码： 1.Images.java 作用：封装所用到的图像地址 package cm.msb.gane; /** * ...
华科复试机试题目
10-03
华中科技大学历年计算机考研复试机试题目及答案
HTML+JS实现贪吃蛇demo
05-07
【HTML+JS实现贪吃蛇demo】是一个使用HTML和JavaScript技术构建的小型在线游戏，它重现了经典的“贪吃蛇”玩法。这个项目是初学者和有经验的开发者学习网页交互和JavaScript编程的一个好例子。下面我们将深入探讨...
electron+coffee做的贪吃蛇小demo
06-17
标题 "electron+coffee做的贪吃蛇小demo" 暗示了这个项目是使用 Electron 和 CoffeeScript 两种技术实现的一个简单的贪吃蛇游戏。 Electron 是一个由 GitHub 开发的开源框架，它允许开发者使用 JavaScript、HTML 和 ...
纯js和css完成贪吃蛇小游戏demo
11-23
在本文中，我们将探讨如何使用纯JavaScript和CSS创建一个简单的贪吃蛇小游戏的示例。首先，我们看到HTML结构设置了游戏的基本布局。`<!doctype html>`确保浏览器以标准模式渲染页面，而`<meta charset="utf-8">`定义...
微信小程序小游戏-贪吃蛇demo
01-23
【微信小程序小游戏-贪吃蛇demo】是一款基于微信小程序平台开发的小游戏，它利用JavaScript（JS）、HTML5（H5）技术实现了一款经典的游戏——贪吃蛇。在这个项目中，我们将探讨微信小程序的框架、游戏逻辑、用户交互...
JS学习笔记之贪吃蛇小游戏demo实例详解
12-10
本文实例讲述了JS学习笔记之贪吃蛇小游戏demo实例。分享给大家供大家参考，具体如下： 最近跟着视频教程打了一个贪吃蛇, 来记录一下实现思路, 先上代码 静态页 <!DOCTYPE html> <html lang="en"> <...
JavaScript版贪吃蛇
03-13
使用JavaScript中对象、定时器以及html5新增的Canvas标签等知识制作的一款纯js贪吃蛇游戏，大家下载来学习下
js 贪吃蛇（面向对象）
08-01
通过该案例，可以充分了解面向对象的概念。同时可以更进一步扩展。
贪吃蛇demo源代码
08-30
贪吃蛇的源代码，程序模拟运行全过程，提供给新手朋友们鉴赏
贪吃蛇DEMO
12-02
今天把以前写一个贪吃蛇的游戏翻了出来，很是兴致勃勃的要把它改写，但是刚写了几行就写不下去了。原因就是这个游戏的代码修改起来工作量太大。游戏一开始没有自己考虑如何对线程进行控制，导致现在游戏运行的时候有很多问题。今天只是给游戏增加了一个菜单栏。也不准备再在修改代码上投入太多的时间。目前已完成的代码就作为一个demo放上来。有时间的话会写一个新的贪吃蛇。
H5 贪吃蛇demo
12-08
H5贪吃蛇demo 简单易学 内有注释
华为OD机试 - 贪吃蛇（Java & JS & Python）
伏城之外的博客
11-10 2913
已支持（Java & JS & Python），考察：逻辑分析
经典贪吃蛇游戏
不想写代码的一天
06-27 975
主要使用单例模式，所有元素动态创建； 1.创建地图 var Map; function map(){ this.mapp=null; this.makemap=function(){ this.mapp=document.createElement ("div"); this.mapp.className...
【华为OD机试真题 JAVA】贪吃蛇
qq_34465338的博客
07-05 2138
标题：贪吃蛇| 贪吃蛇是一个经典游戏，蛇的身体由若干方格连接而成，身体随蛇头移动。蛇头触碰到食物时，蛇的长度会增加一格。蛇头和身体的任一方格或者游戏版图边界碰撞时，游戏结束。下面让我们来完成贪吃蛇游戏的模拟。给定一个N*M的数组arr，代表N*M个方格组成的版图，贪吃蛇每次移动一个方格。若arr[i][j] == 'H'，表示该方格为贪吃蛇的起始位置；若arr[i][j] == 'F'，表示该方格为食物，若arr[i][j] == 'E'，表示该方格为空格。贪吃蛇初始长度为1，初始移动方向为向左。为给...
贪吃蛇的算法分析（1）
James Studio
08-18 4907
贪吃蛇的算法分析(1)James @ www.chenshen.com 贪吃蛇是一款非常经典的手机游戏。它有很多算法，这里详细分析一种比较优秀的算法。首先介绍下主要用到的七个类：l         WormMain：最主要的类，控制所有其它类的运行和销毁。l         WormPit：处理键盘输入事件并实例化Worm类和WormFood类的。l         Wor
帮我用js写一个贪吃蛇demo
最新发布
06-03
好的，以下是一个简单的贪吃蛇demo，代码中有注释说明： ```html <!DOCTYPE html> 贪吃蛇 /* 定义蛇和食物的样式 */ .snake, .food { width: 20px; height: 20px; position: absolute; background-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值