javascript实现贪吃蛇小游戏

最新推荐文章于 2023-04-06 14:31:10 发布
最新推荐文章于 2023-04-06 14:31:10 发布
阅读量252 收藏 6
点赞数 2
分类专栏： web前端 js初级 日常总结 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendymwz/article/details/106845749
版权
web前端 同时被 3 个专栏收录
40 篇文章 1 订阅
订阅专栏
日常总结
28 篇文章 0 订阅
订阅专栏
js初级
22 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<script>
    var map; //地图类对象
    var snake; //蛇类对象
    var food; //食物类对象
    var timer; //定时器对象
    var sum=0; //分数
    
    //地图类
    function Map()
    {
        this.width=800; //地图宽度
        this.height=400; //地图高度
        this.position='absolute'; //定位方式
        this.color='#FFDD00'; //地图颜色
        this._map=null; //保存地图dom元素
        
        this.show=function()
        {
            //用于显示地图
            //创建地图div元素
            this._map = document.createElement('div');
            //设置地图样式
            this._map.style.width = this.width + 'px';
            this._map.style.height = this.height + 'px';
            this._map.style.position = this.position ;
            this._map.style.backgroundColor = this.color ;
            
            //将地图div元素追加到body标签之间
            document.getElementsByTagName('body')[0].appendChild(this._map);
        };
    }
    
    //食物类
    function Food()
    {
        this.width=20; //宽度
        this.height=20; //高度
        this.position='absolute'; //定位方式
        this.color='#FF0026'; //食物颜色
        this._food=null; //用于保存食物dom元素
        this.x=0; //横向第几个格
        this.y=0; //纵向第几个格
        
        this.show=function()
        {
            //用于显示食物
            if(this._food==null)
            {
                this._food=document.createElement('div');
                
                //设置食物样式
                this._food.style.width = this.width + 'px';
                this._food.style.height = this.height + 'px';
                this._food.style.position = this.position ;
                this._food.style.backgroundColor = this.color ;
                
                map._map.appendChild(this._food);
            }
            //如果之前创建过，只需要重新设置坐标
            this.x=Math.floor(Math.random()*40);
            this.y=Math.floor(Math.random()*20);
            this._food.style.left = this.x*this.width+'px';
            this._food.style.top = this.y*this.height+'px';
        };
    }
    
    //蛇类
    function Snake()
    {
        this.width=20;    //蛇节宽度
        this.height=20;    //蛇节高度
        this.position='absolute'; //蛇节定位方式
        this.direct=''; //蛇的移动方向
        //所有蛇节全部信息
        this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]];
        
        this.setDirect = function(code)
        {
            switch(code)
            {
                case 37:
                    this.direct='left';
                    break;
                case 38:
                    this.direct='up';
                    break;
                case 39:
                    this.direct='right';
                    break;
                case 40:
                    this.direct='down';
                    break;
            }
        }
        
        this.show=function()
        {
            //用于显示蛇
            for(var i=0;i<this.body.length;i++)
            {
                if(this.body[i][3]==null)
                {
                    this.body[i][3] = document.createElement('div');
                    this.body[i][3].style.width = this.width +'px';
                    this.body[i][3].style.height = this.height +'px';
                    this.body[i][3].style.position = this.position;
                    this.body[i][3].style.backgroundColor = this.body[i][2];
                    map._map.appendChild(this.body[i][3]);
                }
                //设置蛇节的横纵坐标
                this.body[i][3].style.left=this.body[i][0]*this.width+'px';
                this.body[i][3].style.top=this.body[i][1]*this.height+'px';
            }
        }
        
        this.move = function()
        {
            //移动蛇身
            var length = this.body.length-1;
            for(var i=length;i>0;i--)
            {
                //让后面的蛇节的坐标等于前面蛇节的坐标
                this.body[i][0]=this.body[i-1][0]; //横坐标
                this.body[i][1]=this.body[i-1][1]; //纵坐标
                
            }
            switch(this.direct)
            {
                case 'right':
                    this.body[0][0]=this.body[0][0]+1;
                    break;
                case 'down':
                    this.body[0][1]=this.body[0][1]+1;
                    break;
                case 'left':
                    this.body[0][0]=this.body[0][0]-1;
                    break;
                case 'up':
                    this.body[0][1]=this.body[0][1]-1;
                    break;
                default:
                    return;
            }
            
            //判断蛇吃到食物
            if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
            {
                var x=this.body[length][0];
                var y=this.body[length][1];
                sum++;
                document.title='分数:'+sum+'分';
                this.body.push([x,y,'#FF008C',null]);
                food.show();
            }
            
            //判断撞墙死
            if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
            {
                alert('撞墙死');
                clearTimeout(timer);
                return;
            }
            
            //吃到自己死
            for(var i=1;i<this.body.length;i++)
            {
                if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
                {
                    alert('吃到自己死');
                    clearTimeout(timer);
                    return;
                }
            }
            
            this.show();
        }
    }
    
    window.onload = function()
    {
        map = new Map(); //实例化地图类对象
        map.show();    //显示地图
        
        
        food=new Food(); //实例化食物类对象
        food.show(); //显示食物
        
        snake = new Snake(); //实例化蛇类对象
        snake.show();
        timer = setInterval('snake.move()',200);
        
        document.onkeydown = function()
        {
            var code;
            if(window.event)
            {
                code=window.event.keyCode;
            }else
            {
                code = event.keyCode;
            }
            snake.setDirect(code);
        };
        
        
    }
</script>
</head>
<body>

</body>
</html>

来个效果图：
在这里插入图片描述

依古比古*
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript写的贪吃蛇游戏（很简单，很详细）
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3056
JS 超详细 贪吃蛇 案例 速速围观
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
html+js实现贪吃蛇小游戏
最新发布
qq_45142260的博客
04-06 2731
使用原生js+html实现贪吃蛇小游戏,功能：蛇移动，蛇死亡（撞墙，咬到自己），蛇吃到食物成长，暂停，开始，重新开始。
javaScript贪吃蛇
m0_58065010的博客
11-16 3975
javaScript写的贪吃蛇，有注解和图片。
基于javascript实现贪吃蛇小游戏
12-13
本文实例为大家分享了js贪吃蛇游戏的具体代码，供大家参考，具体内容如下 先不多说先上图 下面是代码部分（这里你可以根据需要改变蛇头和身体还有食物的图片，然后默认的样式是使用纯颜色的如果没有更改我的背景...
Javascript实现贪吃蛇小游戏（含详细注释）
01-22
本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html <!DOCTYPE html> <html lang=en> <...
JavaScript写的贪吃蛇游戏
11-23
用JavaScript写的贪吃蛇游戏，键盘方向键控制方向，“+”键加速，"-"键减速。
用JavaScript实现贪吃蛇游戏
10-14
主要为大家详细介绍了用JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏
javascript实现贪吃蛇游戏
09-16
功能：蛇吃食物有三种情况：走到的地方有食物；走到的地方没有食物；走到的地方是墙壁。吃到食物后，蛇的身体会变长；碰到墙壁后 Game Over，询问是否重新开始。 整个游戏是在一个<div>框子(地图)里展开的，蛇有地图里的一系列<div>构成，初始状态(刚刚打开页面)蛇是一个<div>框，蛇头和蛇尾是在一起的，就是这个<div>框，以后吃了食物后<div>个数会变多，蛇就会长长。食物用一个<span>框表示，初始时和蛇一样其位置是随机产生的。蛇和食物的坐标用<div>和<span>的绝对位置表示。 算法的关键是当蛇移动到新的位置后，判断前述的三种情况，做出相应的处理。而二维数组 Map[][] 就是判断的依据。二维数组 Map[][]通过其元素的值来表示蛇身、食物和空地。蛇身、食物和空地的值分别为'S'、'F'和'0'。 用 Javascript 编程和其他语言的一个大的区别就是键盘的控制代码不同。js是通过 Key=event.keyCode 语句获取键盘码，再在多分支 switch 结构里分别处理。看完这些代码就会对浏览器里的键盘控制有所了解了。 当然该段代码的最大价值还是让我们了解到网页游戏的大概写法，而算法其实是最重要的，把一个游戏的设想变为一堆包含许多的函数的结构化的代码，是值得我们借鉴和学习的。
javascript开发贪吃蛇游戏
01-17
个人小练习，纯javascript开发贪吃蛇小游戏
JavaScript贪吃蛇游戏源码
一个程序员的复习笔记
10-09 7496
蛇对象 属性：方向、一组蛇节（div，div，div）、地图、食物 方法：生成蛇，增加蛇头，计算新蛇头的位置，蛇移动 食物对象 属性：横向位置、纵向位置、div元素、地图 方法：随机位置 游戏对象 属性：蛇，食物 方法：开始 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
记录：初次面向对象编写贪吃蛇案列
05-21 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> .ma...
JS实现贪吃蛇小游戏
FFlouxetine的博客
05-14 2631
JS实现贪吃蛇小游戏 分析食物 对象：食物 属性：宽（width）、高（height）、水平坐标（x）、垂直坐标（y）、背景颜色（bgcolor） 方法：随机生成、移除食物 （在此之前可以完成一个小任务,相当于为这一步做铺垫） 例题：随机生成十个方块，每一秒刷新一次，位置随机，颜色随机 分析蛇 对象：蛇 属性：初始长度（一个个蛇节构成：x，y，color）、方向：（direction） 方...
JS实现简单的贪吃蛇小游戏
qq_27905183的博客
04-10 4278
网页布局框架搭建:<!Doctype html> <html> <head> <title>贪吃蛇小游戏</title> <meta http-equiv="content-Type" content="text/html;charset=gbk" /> <meta http-equiv="Window-target" content="_to
编写一段前端代码,可以实现贪吃蛇小游戏
02-25
可以使用以下代码实现贪吃蛇小游戏： 贪吃蛇小游戏 #canvas { border: 1px solid #ccc; } 你的浏览器不支持canvas元素 <script type="text/javascript"> // 画布和画笔 var canvas = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值