回归原生，使用javascript编写小游戏 --- 贪食蛇

最新推荐文章于 2024-09-16 13:39:40 发布
最新推荐文章于 2024-09-16 13:39:40 发布
阅读量76 收藏
点赞数
文章标签： 游戏 javascript ViewUI
原文链接：https://segmentfault.com/a/1190000014515100
版权

需求分析

  1. 生成地图。

    • 将应用抽象成一个对象。
    • 地图使用一个二维数组作为结构。

  2. 生成食物。

    • 生成食物的范围。
    • 食物不能和身体生成位置重合。

  3. 生成蛇,开始移动。

    • 蛇碰到墙壁,计算出穿过墙的范围.
    • 蛇碰到自己的身体,Game Over .
    • 蛇吃到食物，长度加一,并生成新的食物

  4. 监听键盘事件。

    • 对上下左右移动做出反应。

代码实现(也可以查看 github ）

html (index.html)

<!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>
    <link rel="stylesheet" href="./style/index.css">
</head>
<body>
    <div class="wrap">
        <div id="container">
        </div>
    </div>
    <script src="./js/index.js" ></script>
</body>
</html>

css (./style/index.css)

* {
    margin: 0;
    padding: 0;
}

.wrap{
    display: flex;
    justify-content: center;
    align-content: center;
}

#container{
    width: 100%;
    text-align: center;
}

#container div{
    /* width: 20px;
    height: 20px; */
    float: left;
    border: 1px solid #000;
}

js(./js/index.js)

    (function(self){

    function GreedySnake(gridXN,gridYN){
        // 地图
        this.gridXN = gridXN >= 10 ? gridXN : 10; 
        this.gridYN = gridYN >= 10 ? gridYN : 10;
        this.gridSize = 20; //每个格子的固定大小
        this.map = []; //保存地图中dom对象的二维数组
        this.container = document.getElementById('container');
        

        // 食物属性
        this.food = null;
        this.foodX = null;
        this.foodY = null;

        // 蛇
        this.snake = [];//将蛇抽象成一个二维列表，列为身体长度，排为坐标数组 
        this.snakeLen = null ; //默认蛇长为3
        // 初始蛇头坐标
        this.snakeHead = []

        // 蛇的移动方向
        this.direction = 'top'

        // 速度
        this.speed = 1 ;

        this.timer = null
    }

    GreedySnake.prototype.init = function(){
        this.initMap();
        this.createSnake();
        this.createFood();
        this.snakeMove()
        this.listenKeyBoardEvents()
    }

    GreedySnake.prototype.restart = function(gridXN,gridYN){
    
        // 地图
        this.gridXN = null
        this.gridYN = null
        this.gridSize = null
        this.map = null
        this.container = null
        
        // 食物属性
        this.food = null;
        this.foodX = null;
        this.foodY = null;

        // 蛇
        this.snake = null;
        this.snakeLen = null; 
        // 初始蛇头坐标
        this.snakeHead = null;

        // 蛇的移动方向
        this.direction = null;

        // 速度
        this.speed = null;

    }


    // 初始化地图
    GreedySnake.prototype.initMap = function(){
        var gridYN = this.gridYN,
            gridXN = this.gridXN,
            w = gridXN * this.gridSize + gridXN + 1 ,
            h = gridYN * this.gridSize + gridYN + 1;
        
        this.container.style.width = w + "px";
        this.container.style.height = h  + 'px';

        for(let y = 0 ; y < gridXN ; y++){
            this.map[y] = [] //初始化二维数组
            for(let x = 0 ; x < gridYN ; x++){
                this.createGrid(x,y)
            }
        }   
    }
    // 创建每一个格子,x轴格子索引，y轴格子索引
    GreedySnake.prototype.createGrid = function(idxX,idxY){
        // 当idxY > 0 时，对应的grid的向左移动1px，将格子之间的线重合；
        // 当idxX > 0 时，对应的grid的向上移动1px，将格子之间的线重合；
        let grid = document.createElement('div');
        grid.style.width = this.gridSize + 'px';
        grid.style.height = this.gridSize + "px";
        this.map[idxY][idxX] = grid
        if(idxX > 0 ){
            grid.style.marginLeft = '-1px';
        }
        if(idxY > 0 ){
            grid.style.marginTop = '-1px';
        }
        this.container.appendChild(grid);
    }

    // 创建食物:原理就是根据在范围内的格子数，生成两个随机数，作为元素的坐标
    GreedySnake.prototype.createFood = function(){
        var gridYN = this.gridYN,
            gridXN = this.gridXN,
            temp = null ,
            flag = true;
        this.foodX = Math.floor(Math.random() * gridXN); //缓存
        this.foodY = Math.floor(Math.random() * gridYN);

        for(var i = 0 ; i<this.snake.length ; i++){
            temp = this.snake[i]
            // 检测食物是否和蛇的身体重合
            while(temp[0] == this.foodY && temp[1] == this.foodX){
                flag = false
                this.createFood();
            }
        }
        if(flag){
            this.food = this.map[this.foodY][this.foodX];
            this.food.style.backgroundColor = '#f00';
        }
    }

    // 生成蛇
    GreedySnake.prototype.createSnake = function(){
        this.snakeLen = 3 ; //默认蛇长为3
        let i = this.snakeLen - 1;
        for(i ; i >= 0; i--){
            this.snake.push([this.gridYN - 1 - i ,this.gridXN - 1 - 3])
            this.map[this.gridYN - 1 - i][this.gridXN - 1 - 3].style.backgroundColor = 'blue'
        }
        // 初始蛇头坐标
        this.snakeHead = this.snake[0]
        // console.log(this.snake)
    }
    
    // 开始移动,移动后蛇头坐标 +-1 
    GreedySnake.prototype.snakeMove = function(){
        let _this = this,
            sH = this.snakeHead,
            y = null,
            x = null,
            tempH = null,
            last = null,
            alive = true

        function common(){
            
            _this.map[tempH[0]][tempH[1]].style.backgroundColor = 'blue'
            _this.snake.unshift(tempH);
            _this.snakeHead = tempH;
            // 检测蛇头是否和蛇的身体相撞
            for(var i = 1 ; i < _this.snake.length;i++){
                if(_this.snakeHead[0] == _this.snake[i][0] && _this.snakeHead[1] ==  _this.snake[i][2]){
                    alert('GAME OVER');
                    alive = false
                    return false
                }
            }
            // 当蛇吃到食物后再重新创建食物
            if(sH[0] === _this.foodY && sH[1] === _this.foodX){
                _this.createFood()
                return false
            }
            last = _this.snake.pop();
            _this.map[last[0]][last[1]].style.backgroundColor = ''
        }

        switch(this.direction){
            case 'top':
                y = sH[0] //缓存
                tempH = [--y , sH[1] ];
                if(tempH[0] < 0){
                    tempH = [this.gridYN - 1 , sH[1]]
                }
                common();
                break;
            case 'bottom':
                y = sH[0]
                tempH = [++y , sH[1] ];
                // 边界判断
                if(tempH[0] > this.gridYN - 1){
                    tempH = [ 0 , sH[1]]
                }
                common()
                break;
            case 'left':
                x = sH[1]
                tempH = [sH[0] , --x ];
                if(tempH[1] < 0){
                    tempH = [ sH[0] , this.gridXN - 1]
                }
                common()
                break;
            case 'right':
                x = sH[1]
                tempH = [sH[0] , ++x ];
                if(tempH[1] > this.gridXN - 1){
                    tempH = [  sH[0] ,  0 ]
                }
                common()
                break;
        }

        alive && setTimeout(function(){
            _this.snakeMove()
        },500 / this.speed)
    }

    // 注册键盘事件
    GreedySnake.prototype.listenKeyBoardEvents = function(){
        let _this = this
        self.onkeyup = function(e){
            let dir = _this.direction
            switch(e.keyCode){
                case 37:
                    if(dir != 'right'){
                       _this.direction = 'left';
                    }
                    break;
                case 38:
                    if(dir != 'bottom'){
                        _this.direction = 'top';
                    }
                    break;
                case 39:
                    if(dir != 'left'){
                        _this.direction = 'right';
                    }
                    break;
                case 40:
                    if(dir != 'top'){
                        _this.direction = 'bottom';
                    }
                    break;
            }
        }
    }

    GreedySnake.prototype.print = function(){
        return this.map
    }
    
    // 参数含义：x轴，y轴上的格子数量
    var greedySnake = new GreedySnake(20,20);
    greedySnake.init()
})(window)
weixin_33913332
关注
使用Java编写的简单贪食蛇小游戏.zip
06-19
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请...
反转贪吃蛇 Cocos2d-x+lua贪食蛇游戏源码
12-13
使用cocos2d-x lua和code ide编写的贪吃蛇小游戏 反转贪食蛇一改传统贪食蛇的玩法，游戏大屏幕一分为二。半屏采用传统贪食蛇玩法，半屏加入反转元素，触屏即向相反方向转头！ 除此之外，还新增多种规则，等着...
python小游戏-贪食蛇
03-29
使用python的Tkinter库中的canvas制作的小游戏-贪食蛇
原生js实现贪食蛇小游戏的思路详解
10-15
在本文中，我们将深入探讨如何使用原生JavaScript实现经典的贪食蛇小游戏。首先，我们要明白这个游戏的基本机制：一条由多个方块组成的蛇在棋盘上移动，吃掉食物后会增长，碰到边界或自身会导致游戏结束。 游戏的...
Unity-Transform-坐标转换
最新发布
m0_53393728的博客
09-16 374
世界坐标系 转本地坐标系 可以帮助我们大概判断一个相对位置。
猫鼠游戏： KaijiK病毒入侵溯源分析
WangsuSecurity的博客
09-11 1307
这个病毒对进程、文件均进行了隐藏，并且使用了多种方式进行持久化
【项目开发 | Python】基于“羊了个羊“风格的消除类小游戏
等风来
09-12 721
本项目分为四个主要模块：主界面、游戏界面、获胜界面和失败界面，1、在游戏开始时，生成图案遵循成对出现与随机摆放的原则，以确保玩家能够合理匹配相同图案并进行消除。2、玩家通过点击选择三个图案进行匹配，如果三个图案相同，则这三个图案被消除；若匹配失败则取消选择，允许玩家重新选择图案；游戏会不断检查剩余图案数量，当所有图案被成功消除时，玩家获胜。3、设置倒计时机制，玩家需要在时间内完成所有图案的匹配消除，时间结束时游戏失败；玩家可以选择重新开始或退出游戏。
Unity 第一人称游戏的武器被其他物体覆盖解决方案
sjsjs11的博客
09-12 459
Clear Flags 是相机（Camera）组件的一个属性，它决定了在渲染每一帧时，背景部分如何被清空或填充。（不清除）：这个选项不会清除深度缓冲区或颜色缓冲区，意味着新帧将直接叠加在旧帧上。Main Camera的参数：我们这个摄像机不渲染equipable层（自定义武器为equipable的layer）（天空盒）：这是默认选项，表示使用当前场景的天空盒来填充背景。如果你的场景有天空盒材质，它会被渲染在背景中。在第一人称游戏的时候，会出现渲染过程中，主角的手持武器可能会被其他物体挡住。
开发游戏的学习规划
weixin_42795092的博客
09-14 395
● C#语言快速系统地学习一遍（基础的语法、面向对象、基础的数据结构、基础的设计模式）● Unity的2D和3D部分及UI、动画、物理系统● 阶段性测验：需要去用前面所学的这些基础知识来完成一个简单的2d或者3d的案例，将通过一个自制的《Flappy bird》游戏案例讲解游戏开发的思想及方法，并将《Flappy bird》这个游戏进一步改造成一个横版射击类游戏《Crazy bird》以巩固并且升华整体学习效果。能独立完成，则测验合格。
Unity 粒子系统参数说明
qq_40924071的博客
09-14 1014
这些参数属于 Unity 粒子系统中 “Renderer” 模块的设置，用于控制粒子的外观和渲染方式，包括粒子的对齐、大小、材质、排序等。通过调整这些参数，你可以自定义粒子的渲染方式，实现不同的视觉效果，例如烟雾、火焰、爆炸、闪电等。
《黑神话：悟空》：中国游戏界的新篇章
文宇的博客
09-16 132
4. 国际视野与本土文化的融合 《黑神话：悟空》在国际上的成功，展示了中国文化的独特魅力，同时也促进了文化的国际交流。3. 大型游戏公司的崛起 通过资本和技术的积累，大型游戏公司推动了产业的快速发展，为玩家带来了更多高质量的游戏作品。3. 推动了游戏产业的技术进步 《黑神话：悟空》采用的先进技术，推动了整个行业的技术升级，增强了竞争力。4. 促进了游戏文化的多元化发展 游戏促进了不同文化之间的交流和理解，为游戏文化的多元化发展做出了贡献。引言： 在数字娱乐的浪潮中，游戏已成为连接全球文化的重要媒介。
C#环境搭建和入门教程--vs2022之下
binhyun的博客
09-11 1134
1.环境搭建 2.先让程序跑起来 3.C#代码结构 4.变量，输入输出介绍 5.内容输入和类型转换
Unity基本操作
wacanda的博客
09-12 605
Unity 脚本 API在遇到不懂的方法、想更深入的学习或者是想查看是否有相应的方法实现某项功能，可以在Unity官方这里查看脚本。以Transform为例，可以直接搜索，或者在UnityEngine -> Classes -> Transform中查看。
Unity实现自己的协程系统
R3333355726856的博客
09-12 632
Unity实现自己的协程系统
AI为云游戏带来的革新及解决方案：深度技术剖析与未来展望
LANHYGPU的博客
09-12 922
黑神话：悟空》作为一款划时代的游戏作品，不仅以其对《西游记》这一古典名著的深刻致敬与独特诠释吸引了全球玩家的目光，更以其背后强大的AI技术支持，展示了游戏产业在智能化时代的无限可能。从智能角色的细腻表现到动态游戏世界的构建，从个性化游戏体验的定制到高效游戏开发与测试的推进，《黑神话：悟空》无疑是AI技术在游戏产业中深度应用的生动例证。《黑神话：悟空》作为AI技术的杰出展示，不仅将传统文化与现代科技完美融合，更预示了游戏产业在AI的赋能下，将持续探索未知，开创更加辉煌的未来，丰富人类的文化娱乐世界。
unity关于UI隐藏时性能问题
weixin_61943345的博客
09-11 374
这个在一些书上写的这种方式相较于active有优势，但是仅限比active有优势。在某些情况隐藏后并不会减少drawcall的次数（比如把ui放到同一canvas下，当其中有任何一个ui还在显示范围内，其余放到屏幕外、scale被修改的UI依旧会被渲染，并且体现在batch上。只有当前canvas下所有ui被移出屏幕外时，这个canvas下所有的UI才不会被渲染）。最基础的隐藏UI的方式，性能开销最大的，内部会递归调用UI的子节点对其进行Active=False;当透明度为0的时候，该UI就不会被渲染。
Unity Behavior Designe 可视化有限状态机（Composites篇）
咩咩觉主的博客
09-13 481
初识
猜数字困难版（1-10000）
woshiyaozhenyang的博客
09-13 391
小游戏，通过提示每次猜高或猜低以及每次猜中的位数，10次内猜中1-10000的一个数。
原生JavaScript实现贪食蛇游戏详解及代码示例
本文将详细介绍如何使用原生JavaScript实现一款贪食蛇小游戏。作者首先通过HTML结构设置了一个简单的界面，包括一个800x600像素、背景为灰色的矩形区域 `.map` 和一个橙色圆形按钮 `#dv` 作为开始游戏的入口。CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值