JS实现最简单的贪吃蛇小游戏（面向对象思想）

r囧r小猫 2022-05-23 05:20 167阅读 0赞

**本次练习主要是练习javaScript的面对对象思想**

**话不多说，先看看效果图**

**![20180602211148708][]**

**功能描述**：1.小蛇在指定地图内移动，撞到边界即弹窗，显示游戏结束

2.通过上、下、左、右四个按键，控制小蛇运动的方向

3.随机产生“食物”，小蛇吃到食物就变长。地图再次出现食物

4.统计分数，每吃一个食物就加一分

**具体封装如下**

1.食物对象(食物的横纵坐标,宽和高,背景颜色)  
     \*  
     \* 食物需要画出来---渲染出来--画,随机的画,在画食物的时候要先删除原来的食物  
     \*  
 2 .小蛇对象(宽，高,方向)  
     \* 蛇需要画出来---渲染出来--画,每走一次,需要把前一次的小蛇删除  
     \* 蛇走的时候,需要方向,是否吃到了食物  
     \* 小蛇移动的时候,是否吃了食物(吃了就要把小蛇的后面加一个食物的宽和高，颜色,无非就是把原来的蛇尾复制了一个加入到        body中,------>把蛇尾拿出来再次加入到蛇尾的后面)  
       
 3. 游戏对象(初始化食物,初始化小蛇,自动移动小蛇,判断按键)

\* 自动的设置小蛇移动,判断小蛇是否撞墙,用户按下了什么方向键

具体实现代码如下：

1.html部分，html部分比较简单，主要是显示一个地图，设置样式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>贪吃蛇</title>
        <style>
            h1{
                text-align: center;
            }
            .map{
                width: 800px;
                height: 600px;
                /*background-color: #ccc;*/
                background-image:url("bg.jpg");
                position: relative;
                /*子绝父相*/
                margin: 10px auto;
            }
            .score{
                width: 100px;
                height: 50px;
                background-color: #cccfff;
                position: absolute;
                right: -105px;
                font-size: 20px;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    
    <h1>贪吃蛇</h1>
    <div class="map">
        <div class="score"id="scroe">0分</div>
    </div>
    </body>
    </html>

2.js部分的代码

<script>
        // 自调用函数---食物
        (function(){
            //定义一个数组，存储产生的div
            var element=[];
            //自定义构造函数，创建食物对象
            function Food(width,height,color,x,y,) {
                this.width=width||20;
                this.height=height||20;
                this.color=color||"red";
                this.x=x||0;
                this.y=y||0;
            }
            //初始化食物,因为需要在地图上生成，故需传入参数map
            Food.prototype.init=function (map) {
                remove();
                var div=document.createElement("div");
                map.appendChild(div);
                div.style.width=this.width+"px";
                div.style.height=this.height+"px";
                div.style.backgroundColor=this.color;
                div.style.position="absolute";
                //产生随机坐标
                this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
                this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
                div.style.left=this.x+"px";
                div.style.top=this.y+"px";
                element.push(div);
            };
            //删除食物函数
            function remove(){
                for(var i=0;i<element.length;i++){
                    var ele=element[i];
                    ele.parentNode.removeChild(ele);//通过食物找到其父元素，再将食物删除
                    //在数组中将其删除
                    element.splice(i,1);
                }
            }
            //将Food暴露给window
            window.Food=Food;
        }());
    
        //自调用函数---小蛇
        (function(){
            //构造函数，创建小蛇
            var scroe=0;  //统计分数
            var element=[];//创建数组，存放小蛇
            function Snake(width,height,direction) {
                //小蛇每部分的宽
                this.width=width||20;
                this.height=height||20;
                this.direction=direction||"right";
                this.body=[
                    {x:3,y:2,color:"yellow"},//头
                    {x:2,y:2,color:"green"},
                    {x:1,y:2,color:"green"}//尾部
                ]
            }
            //小蛇的初始化
            Snake.prototype.init=function (map) {
                remove();
                for(var i=0;i<this.body.length;i++){
                    var obj=this.body[i];
                    var div=document.createElement("div");
                    map.appendChild(div);
                    div.style.width=this.width+"px";
                    div.style.height=this.height+"px";
                    div.style.backgroundColor=obj.color;
                    div.style.position="absolute";
                    div.style.left=obj.x*this.width+"px";
                    div.style.top=obj.y*this.height+"px";
                    element.push(div);
                }
            };
            //为原型添加函数---让小蛇动起来
            Snake.prototype.move=function(food,map){
                var i=this.body.length-1;  //让蛇的身体动起来
                for(;i>0;i--){
                    this.body[i].x=this.body[i-1].x;
                    this.body[i].y=this.body[i-1].y;
                }
                switch (this.direction){
                    case "right":this.body[0].x+=1;break;
                    case "left":this.body[0].x-=1;break;
                    case "top":this.body[0].y-=1;break;
                    case "bottom":this.body[0].y+=1;break;
                }
                //判断小蛇是否碰到食物
                var headX=this.body[0].x*this.width;
                var headY=this.body[0].y*this.height;
                if (headX==food.x&&headY==food.y){
                    var last=this.body[this.body.length-1];
                    this.body.push({
                        x:last.x,
                        y:last.y,
                        color:last.color
                        });
                    scroe++;
                    document.getElementById("scroe").innerText=scroe+"分";
                    console.log(scroe);
                    food.init(map);//删掉现有的食物，重新产生食物
                }
            };
    
            //s删除小蛇函数
            function remove(){
                var i=element.length-1;
                for(;i>=0;i--){
                    var ele=element[i];
                    ele.parentNode.removeChild(ele);
                    element.splice(i,1);
                }
            }
            window.Snake=Snake;
        }());
        // //自调用函数--计分器
        // (function(){
        //
        // }())
        //自调用函数---游戏
        (function () {
            function Game(map){
                this.food=new Food();
                this.snake=new Snake();
                this.map=map;
                that=this;
            }
            //初始化游戏，显示小蛇和食物
            Game.prototype.init=function () {
                this.food.init(this.map);
                this.snake.init(this.map);
                this.runSnake(this.food,this.map);
                this.bindkey();
            };
    
            //让蛇跑起来
            Game.prototype.runSnake=function(food,map){
                var timeId=setInterval(function () {
                    this.snake.move(food,map);
                    this.snake.init(map);//这两次调用，就能让蛇跑起来了
    
                    //下面判断蛇是否碰到墙
                    var MaxX=this.map.offsetWidth/this.snake.width;
                    var MaxY=this.map.offsetHeight/this.snake.height;
    
                    var headX=this.snake.body[0].x;
                    var headY=this.snake.body[0].y;
    
                    if (headY<0||headY>=MaxY){
                        clearInterval(timeId);
                       alert("游戏结束");
                    }
                    if(headX<0||headX>=MaxX){
                        clearInterval(timeId);
                        alert("游戏结束");
                    }
                }.bind(that),150);
            };
    
            //添加原型对象---改变蛇运动的方向
            Game.prototype.bindkey=function(){
              document.addEventListener("keydown",function (e) {
                  switch (e.keyCode){
                      case 37:this.snake.direction="left";break;
                      case 38:this.snake.direction="top";break;
                      case 39:this.snake.direction="right";break;
                      case 40:this.snake.direction="bottom";break;
                  }
              }.bind(that),false);
            };
            window.Game=Game;
        }());
        //测试
        var game=new Game(document.querySelector(".map"));
        game.init();
    
    </script>

背景图：bg.jpg

![20180602212113902][]

[20180602211148708]: /images/20220523/43113c3d0e3143eb9f1cecd7243888a2.png
[20180602212113902]: /images/20220523/7d671a2b58c54f0ab52d9b7778d41613.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关一款简单的贪吃蛇小游戏（html+js）实现

游戏规则： > 1.初始分数为=0、初始速度为1！ > > 2.操作蛇移动，使蛇可以吃到红色的食物! > > 3.每当我的分数每次达到100分时，当前速度就会提高一个等级

短命女/ 2024年03月30日 13:54/ 0 赞/ 63 阅读

相关 JavaScript—面向对象贪吃蛇_2 游戏对象

游戏对象 function Game(map) { this.map = map; this.food = new Food(this

迷南。/ 2023年10月11日 13:16/ 0 赞/ 52 阅读

相关贪吃蛇小游戏

贪吃蛇游戏是一款比较经典的休闲游戏，文章包括项目的部分源码以及运行界面的一些图片，项目也参考学习了许多大佬的文章，会在文章最后面贴出参考文章，有什么问题也请大家指正。一、

谁借莪１个温暖的怀抱￠/ 2023年01月02日 08:28/ 0 赞/ 294 阅读

相关 JS小功能：贪吃蛇游戏简单的实现

实现思路在贪吃蛇游戏的实现中，主要创建了五个对象来实现游戏的搭建，分别为： Tools：工具对象，产生随机数 Food：食物对象，在地图上随机产生食物 Sn

约定不等于承诺〃/ 2022年11月25日 00:52/ 0 赞/ 190 阅读

相关贪吃蛇小游戏的简单实现——Java

贪吃蛇贪吃蛇源码：贪吃蛇贪吃蛇这一款小游戏，在以前的诺基亚手机中基本都会带有这款，曾经风靡一时。那么我们如何将这一款小游戏实现出来

逃离我推掉我的手/ 2022年10月29日 09:03/ 0 赞/ 252 阅读

相关小游戏：贪吃蛇

功能描述： 1.蛇初始长度为5，随着吃食物变长，速度也变快 2.速度有上限，当速度达到上限，不再增速 3.可长按方向键加速 4.吃一个食物加一分三个文件：S

淡淡的烟草味﹌/ 2022年06月03日 03:44/ 0 赞/ 380 阅读

相关 js小游戏贪吃蛇

介绍一个由本人制作的贪吃蛇小游戏。这个游戏采用了前端BootStrap框架和jQuery框架，因此移动端和电脑端都能兼容。虽然界面比较简陋，但是基本功能比较齐全，如果有bug欢

蔚落/ 2022年05月27日 07:26/ 0 赞/ 332 阅读

相关 JS实现最简单的贪吃蛇小游戏（面向对象思想）

本次练习主要是练习javaScript的面对对象思想话不多说，先看看效果图 ![20180602211148708][] 功能描述：1.小蛇在指定地图内移动，撞到

r囧r小猫/ 2022年05月23日 05:20/ 0 赞/ 168 阅读

相关 js实现web贪吃蛇小游戏

js实现web贪吃蛇小游戏效果图见下，[效果展示地址][Link 1] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

本是古典何须时尚/ 2022年03月21日 08:10/ 0 赞/ 300 阅读

相关 js小游戏案例（贪吃蛇）

> 贪吃蛇是我们都玩过的游戏，也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。基本思路：随机创建地图；利用top和left值，利用坐标的传递使蛇动起来；随机在地

ゝ一世哀愁。/ 2022年03月18日 09:24/ 0 赞/ 524 阅读