教你用 JavaScript 完成简易贪吃蛇小游戏

2022-12-19
河北
本文字数：1460 字
阅读完需：约 5 分钟

案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！

我们来用 JavaScript 编程实战案例，做一个简易的贪吃蛇小游戏。贪吃蛇小游戏主要实现玩家通过键盘‘上下左右键’控制贪吃蛇获取食物的同时增加身体长度，蛇头碰到地图边界则游戏结束。通过实战我们将学会利用 for 循环、函数的创建 function、数组 Array 以及获取键盘方向 document.onkeydown 等语法知识。

案例演示

从案例 DEMO，演示如下：

贪吃蛇通过获取食物增加身体长度。

蛇头触碰到地图边线，提示玩家游戏结束。

案例设计

JavaScript实战案例-简易贪吃蛇小游戏

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。

其中架构设计包含了 HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习。

对地图和蛇身以及食物进行初始化，使用数组描述某一确定点。

var mapX=20;var mapY=20; //地图边界，横向和纵向的div小格var arrMap=new Array();//地图数组var snackeX = [4,5,6,7],snackeY=[2,2,2,2];//蛇身初始化坐标值var foodX,foodY; //创建食物坐标var keyCode = 39;//蛇身移动方向,默认向右

复制代码

通过 for 语句来实现蛇身的创建、清除

  function createSnack(){            //改变地图中一串连续div底色            for(i=0;i<snackeX.length;i++)            {                arrMap[snackeY[i]][snackeX[i]].className ="divSnake";            }        }        //清除蛇身        function clearSnack() {            for(i=0;i<snackeX.length;i++)            {                arrMap[snackeY[i]][snackeX[i]].className="divMap";            }        }

复制代码

通过键盘事件控制贪吃蛇的运动路线，event.keyCode 获取键盘指令

//键盘事件        function keyDown(){            var newKey = event.keyCode//键盘按键            if(keyCode == 37 && newKey == 39||                keyCode == 39 && newKey == 37||                keyCode == 38 && newKey == 40||                keyCode == 40 && newKey == 38            ) {               //禁止掉头                return ;            } else if(newKey>=37&&newKey<=40){                //用户按了某个方向键                keyCode=newKey;                }                else{                    //其他按键            }        }

复制代码

总结思考

学习点

1、for 循环：是编程语言中一种循环语句，而循环语句由循环体及循环的判定条件两部分组成，其表达式为：for（单次表达式;条件表达式;末尾循环体）{中间循环体；}。

  for(i=1;i<100;i++){     sum=sum+i;  }

复制代码

2、函数定义 function:在 javascript 中，function 是定义一个函数的关键字，通常形态是

function 函数名(参数1,参数2,......){要执行的代码return 返回值; //此行可省略}

复制代码

3、Array 数组：数组是一个固定长度的存储相同数据类型的数据结构，数组中的元素被存储在一段连续的内存空间中。它是最简单的数据结构之一，大多数现代编程语言都内置数组支持。

问答

1、for 循环是否可以用在数组上？

2、Array 数组是固定长度的吗？

关注我，跟着我每天学习一点点，让你不再枯燥，不再孤单..

全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。

私微信：huodaxia_xfeater

二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg

公众号：有个小院（微信公众号：yougexiaoyuan）

github：yougexiaoyuan (视频源码免费获取)

（部分素材来源于互联网，如有保护请联系作者）

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/dffc258bae318742b1035445c】。文章转载请联系作者。

小院里的霍大侠

关注

还未添加个人签名 2020-09-02 加入

还未添加个人简介

发布

暂无评论

创作场景

教你用 JavaScript 完成简易贪吃蛇小游戏

案例介绍

案例演示

案例设计

源码学习

总结思考

小院里的霍大侠

评论