JS案例----贪吃蛇(源码)

最新推荐文章于 2024-05-23 22:21:26 发布
最新推荐文章于 2024-05-23 22:21:26 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreamer0823/article/details/88766061
版权

由于我笔记本键盘原因,为了方便我操作,将上下左右方向键设置为英文字母 I K J L 

可以自己在document.onkeydown中自行修改.这篇内容是纯代码篇

分析的篇章会在后面发.

注:仅简单实现基础游戏功能,存在部分bug.功能并不完善

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //要素: 地图  食物  蛇?
        //步骤1:封装一个地图类
            //地图的   背景  宽  高  定位:父相子绝
        function Map(){
            this.width = "1600px";
            this.height = "800px";
            this.backgroundColor = "#ebf1dd";
            this.position = "relative";
            //用一个属性来保存div的值,以便于后面被调用
            this._map = null;

            //步骤1.1:封装一个显示地图类
            this.show = function(){
                //创建一个div
                this._map = document.createElement("div");
                this._map.style.width = this.width;
                this._map.style.height = this.height;
                this._map.style.backgroundColor = this.backgroundColor;
                this._map.style.position = this.position;
                //将this._map挂载到 body中
                document.body.appendChild(this._map);
            }
        }
        //实例化地图类
        var map = new Map();
//***********************************************************************************
        //步骤2:封装一个食物类
//***********************************************************************************
        function Food(){
            this.width = "20px";
            this.height = "20px";
            this.backgroundColor = "#e5b9b7";
            this.position = "absolute";
            this.borderRadius = "100%";

            this.left = 0; //初始化x坐标
            this.top = 0; //初始化y坐标

            //用一个属性来保存div的值,以便于后面被调用
            this._food = null;

            //步骤1.1:封装一个显示食物方法
            this.show = function(){
                //步骤3.1:判断this._food,阻止重复显示食物
                if(!this._food){
                    //创建一个div
                    this._food = document.createElement("div");
                    this._food.style.width = this.width;
                    this._food.style.height = this.height;
                    this._food.style.backgroundColor = this.backgroundColor;
                    this._food.style.position = this.position;
                    this._food.style.borderRadius = this.borderRadius;
                    
                    //将this._food追加到 map._map中,即:挂载到背景图的div中
                    map._map.appendChild(this._food);  
                }

                //调用随机数方法,随机获取(x,y)坐标值
                this.randPos();

                //定义食物出现的坐标(x,y)
                this._food.style.left = this.left*20+"px";
                this._food.style.top = this.top*20+"px";
            }
            //步骤2.1封装一个随机数方法
            this.randPos = function(){
                this.left = Math.floor(Math.random()*80);
                this.top = Math.floor(Math.random()*40);
            }
        }
        //实例化食物类
        var food = new Food();
//***********************************************************************************
        //步骤3:定义蛇类
//***********************************************************************************
        function Snake(){
            this.width = "20px";
            this.height = "20px";
            this.position = "absolute";
            this.borderRadius = "100%";
            //定义蛇身体,是个二维数组
            //在设置完移动后,回来添加一个数组值:null,管理自身的部分
            this.body = [[25,20,"#ffc000",null],[24,20,"#fbd5b5",null],[23,20,"#fbd5b5",null]];

            //封装显示蛇的方法
            this.show = function(){
                //因为蛇身体是一个二维数组,所以用for...of循环遍历
                for(var i of this.body){
                    //判断是否已创建蛇身,不再重复生成
                    if(!i[3]){
                        i[3] = document.createElement("div");
                        i[3].style.width = this.width;
                        i[3].style.height = this.height;
                        i[3].style.position = this.position;
                        i[3].style.borderRadius = this.borderRadius;
                        i[3].style.backgroundColor = i[2];
                        //将创建的蛇身体div 挂载到 map 的div中
                        map._map.appendChild(i[3]);
                    }
                    i[3].style.left = i[0] * 20 + "px";
                    i[3].style.top = i[1] * 20 + "px";
                    
                }
            }

            //添加运动方向的属性,默认不动
            this.direct = null;

            //封装蛇运动的方法
            this.move = function(){
                //处理蛇尾移动
                //获取蛇身数组,蛇身移动时,末尾一个的坐标等于前一个的坐标
                // 即将尾坐标替换成它的前一个坐标

                //判断,当蛇头不动时,即this.direct 为 false,则不执行蛇尾的移动
                if(this.direct){
                    for(var i=this.body.length-1;i>0;i--){
                    this.body[i][0] = this.body[i-1][0]; //替换x坐标
                    this.body[i][1] = this.body[i-1][1]; //替换y坐标
                    }
                }
                
                //处理蛇头移动
                switch (this.direct) {
                    case "up":
                        this.body[0][1] -= 1;  
                        break;
                    case "down":
                        this.body[0][1] += 1;  
                        break;
                    case "left":
                        this.body[0][0] -= 1;  
                        break;
                    case "right":
                        this.body[0][0] += 1;  
                        break;
                }
                //蛇运动后,要重新显示,所以调用this.show()方法

                //判断如果出界,则不再调用这个方法
                if(!(this.body[0][0] < 0 || this.body[0][0] > 79 || this.body[0][1] < 0 || this.body[0][1] > 39)){
                    this.show();
                }
            }
            
            //封装蛇吃食物的方法
            this.eat = function(){
                //当食物生成在蛇身体内时,自动吃掉,积分增加
                //循环变量蛇身的所有坐标,判断是否等于食物的坐标
                
                if(this.body[0][0] == food.left && this.body[0][1] == food.top){
                    //坐标相等表示吃到了
                    //食物刷新
                    food.show()
                    //每吃一个食物,加十分.
                    score += 10;

                    //蛇身长度加一个单位
                    //注意:新的蛇身部分的坐标值,只要不出现在地图中,设置为几都无所谓
                    //原因:因为当蛇移动时,末尾的蛇身的坐标会等于前一个蛇身的坐标,所以马上会更新到贪吃蛇的尾部
                    this.body.push([-10,-10,"#fbd5b5",null]);
                }   

            }

            //封装蛇出界的方法
            this.outLine = function(){
                if(this.body[0][0] < 0 || this.body[0][0] > 79 || this.body[0][1] < 0 || this.body[0][1] > 39){
                    //坐标出界,游戏结束
                    //停止运动,即:停止定时器,使蛇不再动,并提示Game Over
                    clearInterval(id);
                    alert("不撞南墙不回头!");
                    alert("游戏结束,总得分:"+score+"分");
                }
            }

            //封装蛇追尾的方法
            this.eatSelf = function(){
                for(var i=4;i<this.body.length;i++){
                    if(this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]){
                        //蛇头坐标等于蛇身的坐标,表示吃到自己,游戏结束
                        clearInterval(id);
                        alert("撞到自己了!");
                        alert("游戏结束."+"总得分:"+score+"分");
                    }
                }
            }
        }
        //实例化蛇类
        var snake = new Snake();
        
//***********************************************************************************
        //从这里开始执行
//***********************************************************************************
        //定义全局积分变量,并初始化值为0
        var score = 0;
        window.onload = open;
        function open(){
            //设置一个h1标签计分
            var h1 = document.getElementsByTagName("h1");
            //调用地图类的show()方法
            map.show();
            //调用食物类的show()方法
            food.show();
            //调用蛇类的show()方法
            snake.show();
            //小技巧:设置一个函数,将snake.move()放入函数内,此时,move()方法的调用者就是snake了
            function run(){
                snake.eat();
                snake.outLine();
                snake.eatSelf();
                snake.move();
                h1[0].innerHTML = "游戏积分: <font color=red>"+score+"</font> 分" ;  
            }
            //设置定时器调用蛇类的move()方法,让蛇一直动
            id = setInterval(run,60);
            //绑定键盘事件,控制蛇移动的方向,同时判断,不允许蛇回头
            document.onkeydown = function(event){
                switch (event.keyCode) {
                    
                    case 73:
                        if(snake.direct != "down"){
                            snake.direct = "up";
                        }
                        break;
                    case 75:
                        if(snake.direct != "up"){
                            snake.direct = "down";
                        }
                        break;
                    case 74:
                        if(snake.direct != "right"){
                            snake.direct = "left";
                        }
                        break;
                    case 76:
                        if(snake.direct != "left"){
                            snake.direct = "right";
                        }
                        break;
                    case 32:
                        if(confirm("是否提前结束游戏?")){
                            clearInterval(id);
                            alert("游戏结束!")
                            alert("总得分:"+score+"分");
                        }
                        break;
                }
            }   
        }
    </script>
</head>
<body>
    <h1></h1>
</body>
</html>

 

yoonhi_
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
贪吃蛇js源代码
暖心少年
11-19 863
项目目录如下： css代码：#map { width: 800px; height: 600px; background-color: lightgray; position: relative; } html代码： Document js代码： // ---------------------Tools-----
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
JS 实战 贪吃蛇游戏
最新发布
2301_80441013的博客
05-23 521
想要开始和暂停两个按钮居中，可以将盒子设置为弹性盒也可以使用其他方法【代码】
js实现贪吃蛇
deasec的博客
03-28 5344
很久没有打过js了，所以我翻出以前用画布(Canvas)标签做的贪吃蛇来复习一下顺便讲解一下执行原理。 实现思路：主要用到canvas标签来作为动画，采用逐帧运动法：先画一张之后销毁上一张，擦除->重绘（循环） 需要利用定时器每隔一小段时间就擦除->重绘。运动产生的原理就是：每次运动过程中在前面加一个头然后判断是否吃到食物。如果没有吃到食物就删除尾部(这样就产生前进的效果)，吃到了就不用删除：这样就比原来长度长了一段。边界判定就是获取当前蛇头位置的x,y乘以像素值n 判断是否达到了边界，还有头
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3120
JS 超详细 贪吃蛇 案例 速速围观
html5 canvas+js贪吃蛇网页小游戏代码
wjh091225的博客
03-28 7996
html5 canvas+js贪吃蛇网页小游戏代码 注解都在代码里了,自己理解吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte.
【JS】原生js实现极简版贪吃蛇，附全部代码
小安驾到的博客
02-15 1387
原生js实现贪吃蛇小游戏，包括小蛇的移动、吃食物、检测是否撞到自己等功能
JS贪吃蛇
csdn_jwdlh的博客
03-04 2519
JS贪吃蛇效果展示CSS样式index.htmlindex.css构造方格蛇的创造蛇的初始化蛇的运动创建和生成食物创建游戏逻辑按下键盘方向键控制蛇移动方向定时器开始游戏暂停游戏结束游戏 效果展示 CSS样式 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
JS实现贪吃蛇
SChenmi的博客
03-14 201
JS实现贪吃蛇javascript实现贪吃蛇设置样式的函数地图获取随机数食物蛇游戏开始按钮效果展示整体源代码 javascript实现贪吃蛇 新学的用面向对象做一个贪吃蛇小游戏，和大家分享一下！ 贪吃蛇总体分为三个部分：地图、食物、蛇 设置样式的函数 // 设置样式 function setStyle(ele,obj) { for(var attr in obj){ ele...
cocos-creator贪吃蛇
08-07
【cocos-creator贪吃蛇】是一款利用Cocos Creator开发的简单而有趣的小游戏，它以经典的“贪吃蛇”玩法为核心，旨在为初学者提供一个学习和实践的平台。Cocos Creator是一款强大的2D游戏开发引擎，它集成了图形编辑...
微信小程序开发-贪吃蛇游戏案例源码.zip
12-12
本案例聚焦于微信小程序开发中的一个经典游戏——贪吃蛇，通过源码分析，我们可以深入理解小程序的开发流程和核心技术。 首先，贪吃蛇游戏的核心机制包括以下几个方面： 1. **用户交互**：小程序的界面设计通常...
微信小程序-贪吃蛇游戏源码
10-25
本资源是一个微信小程序版本的“贪吃蛇”游戏源码，旨在帮助开发者了解如何在微信小程序平台上开发游戏。 1. **贪吃蛇游戏原理**： 贪吃蛇游戏是一款经典的电子游戏，玩家控制一条蛇，通过移动使其吃到食物，每次...
微信小程序开发-小程序贪吃蛇案例源码.zip
08-15
在这个“微信小程序开发-小程序贪吃蛇案例源码.zip”压缩包中，包含了一个具体的小程序项目，用于教授开发者如何利用微信小程序框架构建一个贪吃蛇游戏。 首先，我们要了解微信小程序的基本架构。它基于JavaScript...
用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
JavaScript贪吃蛇游戏源码
一个程序员的复习笔记
10-09 7536
蛇对象 属性：方向、一组蛇节（div，div，div）、地图、食物 方法：生成蛇，增加蛇头，计算新蛇头的位置，蛇移动 食物对象 属性：横向位置、纵向位置、div元素、地图 方法：随机位置 游戏对象 属性：蛇，食物 方法：开始 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
用js代码实现贪吃蛇小游戏
guai_guai_guai的博客
05-02 1552
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
我跪了，使用js写贪吃蛇游戏，只用了30行！！！最简贪吃蛇源代码分享
HMX404的博客
04-21 921
最简贪吃蛇游戏只用了30行！！！
JS贪吃蛇小游戏实现
超级小胖子的博客
11-14 1025
JS贪吃蛇小游戏实现，暂停游戏，继续游戏，分数统计，数据配置化。
JS学习——贪吃蛇代码（简易版）
awwwwmman的博客
05-17 3861
贪吃蛇目录页面游戏页面开始页面暂停页面代码html代码css代码js代码素材目录结构图片素材说明方块的构造函数方块原型上的方法蛇的构造函数蛇的初始化方法蛇的下一个位置方法（重点）这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情。处理碰撞后要做的事的方法move（重点）eatdie创建蛇的实例对象创建食物创建游戏逻辑游戏实例的初始化方法游戏的开始，暂停，结束方法游戏的开始start游戏的暂停pause游戏的结束over开始游戏和按钮暂停游戏和暂停游戏按钮 页面 游戏页面 开始页面 暂停页
cocos2d-x平台上实现的贪吃蛇游戏教程
在这个Cocos2d-x版本的贪吃蛇项目中，开发者使用了C++语言和Cocos2d-x游戏引擎来实现一款2D手机游戏。Cocos2d-x是一个开源且跨平台的游戏开发框架，特别适合于移动设备游戏的开发。该项目的目标是通过实际编写贪吃蛇...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值