js的面向对象小游戏1——贪吃蛇

最新推荐文章于 2024-05-15 16:14:45 发布
最新推荐文章于 2024-05-15 16:14:45 发布
阅读量280 收藏 1
点赞数
文章标签： js面向对象编程1 贪吃蛇小游戏程序编写
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onlySeungRi/article/details/80598066
版权
实现的功能：三块div组成的蛇，属性值以数组形式存储，通过控制键盘按键控制方向，蛇撞见食物之后蛇尾部长了一截，注意食物并没有消失，而是重新调用了食物创建 方法，随机了一个位置

代码实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //构造地图父类
    //定义地图子类
    var map
    function Map()
    {
        //地图的属性
        this.width=1200
        this.height=600
        this.margin="0 auto"
        this.backgroundColor="black"
        //地图的方法
        //创建地图插入到body中//先存在一个空的
        this._Map=null
        //封装方法创建地图插到页面中
        this.creatMap=function(){
            if(this._Map==null)
            {
                this._Map=document.createElement("div")
                this._Map.style.position="relative"
                this._Map.style.width=this.width+"px"
                this._Map.style.height=this.height+"px"

                this._Map.style.margin=this.margin        

               this._Map.style.backgroundColor=this.backgroundColor

                document.body.appendChild(this._Map)
            }
        }
    }
    //创建蛇的父类
    //创建蛇的子类
    var snack
    function Snack()
    {
        //默认蛇的移动方向为右
        this.direct="right"
        this.width=30
        this.height=30
        //创建蛇出现的方法并将它加到地图里,先让它存在为空,用数组写其余样式
        this.snackbody=[[3,1,"blue",null],[2,1,"white",null],[1,1,"white",null]];
        this.creatsnack=function()
        {

           for(var i=0;i<this.snackbody.length;i++)
           {
               if(this.snackbody[i][3]==null)
               {
                   this.snackbody[i][3]=document.createElement("div")
                   this.snackbody[i][3].style.position="absolute"
                   this.snackbody[i][3].style.width=this.width+"px"
                   this.snackbody[i][3].style.height=this.height+"px"
                   this.snackbody[i][3].style.backgroundColor=this.snackbody[i][2]
                   //将蛇加到地图里,注意创建的地图也是父类地图的属性要用.获取
                   map._Map.appendChild(this.snackbody[i][3])
               }
               //放在if外面因为如果存在则不用再创建，直接换位置就好
               this.snackbody[i][3].style.left=this.snackbody[i][0]*this.width+"px";
               this.snackbody[i][3].style.top=this.snackbody[i][1]*this.height+"px";
           }
        }
        //创建蛇移动的方法，此方法中只要改变数组坐标再调用创建蛇中通过坐标改变lefttop值即可
      this.snackmove=function()
        {

            var len=this.snackbody.length-1 //从后往前替换属性值，先获取长度
            for(var i=len;i>0;i--)
            {
                //蛇尾移动的方法
                this.snackbody[i][0]=this.snackbody[i-1][0]
                this.snackbody[i][1]=this.snackbody[i-1][1]
            }
            //蛇头单独移动的方式  //注意要在蛇尾变了之后在改变
            switch (this.direct)
            {

case"right":this.snackbody[0][0]+=1;break;

case"left":this.snackbody[0][0]-=1;break;

case "up":this.snackbody[0][1]-=1; break;

case "down":this.snackbody[0][1]+=1; break;

            }
            //创建蛇吃到食物方法
            //去判断蛇头和食物是否坐标一样
           if(this.snackbody[0][0]==food.x&&this.snackbody[0][1]==food.y)
            {
                //开始吃
                this.snackbody.push([
                    this.snackbody[this.snackbody.length-1][0], //插入数组尾部最后一个元素
                    this.snackbody[this.snackbody.length-1][1],
                    "white",
                    null
                ]);
                food.creatfood()
            }

            this.creatsnack()//如果在一个父类里引用用this.在外面引用引用一定要用实例化的对象点.
            this.chuqu()
            this.zhuang();
        }
        //判断蛇是否穿墙的方法,也可以写在remove方法里，不过为了代码优化，封装成方法，直接调用即可
        this.chuqu=function(){
            if(this.snackbody[0][0]>=40){
                this.snackbody[0][0]=0
            }
            if(this.snackbody[0][0]<0){
                this.snackbody[0][0]=39
            }
            if(this.snackbody[0][1]>=20){
                this.snackbody[0][1]=0
            }
            if(this.snackbody[0][1]<0){
                this.snackbody[0][1]=19
            }
        }
        //判断蛇是否自己撞到自己的身体
        this.zhuang=function(){
            for(var i=1;i<this.snackbody.length;i++)
            {
                if(this.snackbody[0][0]==this.snackbody[i][0]&&this.snackbody[0][1]==this.snackbody[i][1])
                {
                    clearInterval(time);
                    alert("撞死啦！");
                }
            }
        }
    }
    //创建食物父类
    //创建食物子类
    var food;
    function Food() {
        this.width = 30
        this.height = 30
        this.color = "yellow"
        this.x = 0
        this.y = 0
        this.position = "absolute"
        //创建食物的方法并添加到地图上
        this._food = null
        this.creatfood = function () {
            this.x = Math.floor(Math.random() * 40)
            this.y = Math.floor(Math.random() * 20)
            if (this._food == null) {
                this._food=document.createElement("div")
                this._food.style.position=this.position
                this._food.style.width = this.width+"px"
                this._food.style.height=this.width+"px"
            this._food.style.backgroundColor=this.color
                map._Map.appendChild(this._food)
            }
           this._food.style.left=this.x*this.width+"px"
           this._food.style.top=this.y*this.height+"px"
        }
    }
    var time;
    window.onload=function()
    {
        //实例化地图的类
        map=new Map()
        map.creatMap()
        snack=new Snack()
        snack.creatsnack()
        //用键盘按键控制蛇的移动方向
        document.οnkeydοwn=function(e)
        {
            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;
            }
        }
        food=new Food()
        food.creatfood()
         time=setInterval("snack.snackmove()",100)
    }
</script>
</body>
</html>

 


onlySeungRi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现五子棋游戏的方法详解
12-08
本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考，具体如下： 最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。 老规矩，先上图，再说话。 效果图： 五子棋素材图： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl
面向对象的方法实现贪吃蛇
03-04
1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重写原型对象的时候，一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为...
2024年最新面向对象完成小游戏贪吃蛇，2024年最新面试培训班有必要吗
最新发布
java_dazhuzhu的博客
05-15 393
其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；Game 游戏类 - 控制器。isOver 判断是否结束。control 游戏控制器。eatFood 吃食物。start 开始游戏。
Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
唯恋殊雨的博客
09-24 1575
面向对象游戏案例：贪吃蛇 案例相关源码以上传到 GitHub ：https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址：贪吃蛇 案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫长的过程。 功能实现 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { ...
js:面向对象：贪吃蛇小游戏（生成地图，边界碰撞，刷新食物，障碍物产生）
冲鸭
09-16 880
目录 index.html Game.js Snake.js Block.js Food.js Map.js 1. 贪吃蛇项目 我们决定使用面向对象的方式来书写该游戏 因为面向对象是最适合书写游戏的 我们将这个游戏看成是一个类(Game类) 既然把游戏看成是一个类，它可以拥有属性和方法 有一个地图属性 有一个蛇属性 有一个食物属性 有一个障碍物属性 2. 我们可以把地图看成一个类 有一个行属性 有一个列属性 有...
面向对象编程---掷骰子游戏
Liu_Bruce的博客
06-03 2767
最近编了一个面向编程的经典游戏案例，根据游戏的规则，设计编程的流程和类，方法，属性。这是一个比较经典和流行的面向对象编程的玩骰子的小游戏。整个游戏分为四个模块：​ ◆ 主菜单模块（main_menu.py)​ ◊ 功能：导入主程序模块，定义一个AllThatDice类, 定义一个run函数​ ◆ 主程序模块（main.py)​ ◊ 功能：程序运行主界面，游戏玩家名单注册、显示游戏的总成绩、进入游戏、退出游戏。​ playGame函数，参数为游戏名， getTable函数​
微信小程序贪吃蛇源码
05-29
在本案例中，"微信小程序贪吃蛇源码"是一个使用小程序基本语法实现的经典游戏——贪吃蛇。下面我们将深入探讨这个项目中涉及到的技术和知识点。 1. **小程序基本语法**：微信小程序的编程语言主要由三部分组成：...
javascript期末项目-贪吃蛇.zip
02-21
【标题】"javascript期末项目-贪吃蛇.zip"是一个基于JavaScript技术实现的期末项目，它构建了一个经典的小游戏——贪吃蛇。这个项目展示了开发者在JavaScript编程上的技能和对游戏逻辑的理解。 【描述】提到的“蛇...
jsnake:JS上的简单游戏“贪吃蛇”
06-22
"jsnake"是一个基于JavaScript实现的简单游戏——贪吃蛇，它展示了如何利用JavaScript的基本语法和事件处理来创建交互式的网页应用。 **一、JavaScript基础** JavaScript是解释型的、面向对象的、弱类型的脚本语言...
Js小游戏 纯手写
09-29
在本项目中，"Js小游戏 纯手写"是一个完全使用JavaScript编程语言实现的简单游戏集合，包括了经典的游戏——“贪吃蛇”和“打飞机”。这种纯JavaScript实现的游戏开发，对于初学者来说是一个很好的实践平台，因为它...
面向对象js开发扫雷小游戏
09-03
面向对象，js，开发扫雷小游戏已封装，只需要创建一个对象就可以。
JavaScript面向对象编程小游戏---贪吃蛇代码实例
10-17
主要介绍了JavaScript贪吃蛇的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
原生JS 实现贪吃蛇
11-11
原生js 实现贪吃蛇。
js面向对象游戏开发，飞机大战
11-17
js面向对象开发的飞机游戏！简单适合新手
js 贪吃蛇（面向对象）
08-01
通过该案例，可以充分了解面向对象的概念。同时可以更进一步扩展。
面向对象编程案例—贪吃蛇小游戏
weixin_48376132的博客
08-06 734
1. 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { width: 800px; height: 600px; background-color: #ccc; position: relative; } 2. 分析对象 游戏对象 Game 蛇对象 Snake 食物对象 Food 3. 创建食物对象 （1）创建 Food 的构造函数，并设置属性 x y width height color （2）通过原型设置方法 render 随机创建一个食物对象，并输出
JavaScript面向对象编程小游戏---贪吃蛇
weixin_34367845的博客
05-21 249
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在，即使改变需求，那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低。 ​ 2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序--贪吃蛇. ​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想. 该小De...
JS实现最简单的贪吃蛇小游戏（面向对象思想）
呵呵到天亮的博客
06-02 3069
本次练习主要是练习javaScript的面对对象思想话不多说，先看看效果图功能描述：1.小蛇在指定地图内移动，撞到边界即弹窗，显示游戏结束                  2.通过上、下、左、右四个按键，控制小蛇运动的方向                   3.随机产生“食物”，小蛇吃到食物就变长。地图再次出现食物                    4.统计分数，每吃一个食物就加一分具体封...
java小游戏——贪吃蛇
04-15
贪吃蛇是一款经典的小游戏，玩家通过控制一条蛇的移动来吃食物，每吃到一个食物，蛇的长度会增加一节。游戏的目标是尽可能地吃到更多的食物，同时避免蛇头碰到自己的身体或者游戏界面的边界。 在Java中，可以使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值