贪吃蛇是一款80后、90后比较熟悉的经典游戏，下面通过简单的JS代码来实现低仿版贪吃蛇效果：随着鼠标的移动，在页面中呈现所有Div块跟随鼠标依次移动，效果如下图所示。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>习题-仿select下拉框</title>

    <style>

        div {

            width: 20px;height: 20px;background-color: purple;position: absolute;

        }

    </style>

    <script>

        //此处写代码

    </script>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

　　参考代码：

 window.onload = function () {

    // getPos函数获取鼠标的坐标

    function getPos(ev) {

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        return { x: ev.clientX + scrollTop, y: ev.clientY + scrollLeft };

    }

    document.onmousemove = function (ev) {

        var oEvent = ev || event;

        var pos = getPos(oEvent);

        var aDiv = document.getElementsByTagName('div');

        //递减循环

        for (var i = aDiv.length - 1; i > 0; i--) {

            aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px';

            aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px';

        }

        aDiv[0].style.left = pos.x + 'px';

        aDiv[0].style.top = pos.y + 'px';

    }

}

　　

思考：为什么采用下面递增循环代码就无法达到预期效果？

代码：

// 与参考文档区别部分

for (var i = 0; i < aDiv.length - 1; i++) {

    aDiv[i + 1].style.left = aDiv[i].offsetLeft + 'px';

    aDiv[i + 1].style.top = aDiv[i].offsetTop + 'px';

}

　　效果：

如果递增循环设计进行修改后，可以实现其它独特效果：(平移连珠直线)

代码：

window.onload = function () {

    // getPos函数获取鼠标移动时的坐标

    function getPos(ev) {

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        return { x: ev.clientX + scrollTop, y: ev.clientY + scrollLeft };

    }

    document.onmousemove = function (ev) {

        var oEvent = ev || event;

        var pos = getPos(oEvent);

        var aDiv = document.getElementsByTagName('div');

        for (var i = 0; i < aDiv.length - 1; i++) {

            aDiv[i + 1].style.left = aDiv[i].offsetLeft + 20 + 'px';

            aDiv[i + 1].style.top = aDiv[i].offsetTop + 20 + 'px';

        }

        aDiv[0].style.left = pos.x + 'px';

        aDiv[0].style.top = pos.y + 'px';

    }

}

JS仿贪吃蛇：一串跟着鼠标的Div的更多相关文章

  1. JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div

    function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...

  2. 一串跟随鼠标的DIV

    div跟随鼠标移动的函数: <!DOCTYPE HTML><html><head> <meta charset="utf-8"> & ...

  3. js版贪吃蛇

    之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...

  4. 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  5. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

  6. 用js实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 用Js写贪吃蛇

    使用Javascript做贪吃蛇小游戏, 1.自定义地图宽高,蛇的初始速度 2.食物随机出现 3.蛇的样式属性 4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,) <!DOCTYPE ht ...

  8. JS实现——贪吃蛇

    把以下代码保存成Snake.html文件,使用Google或360浏览器打开 <!DOCTYPE HTML> <html> <head> <meta char ...

  9. Javascript仿贪吃蛇出现Bug的反思

    bug现象:    图一

随机推荐

  1. 多测师讲解接口自动化测试 _requests_高级讲师肖sir

    rep=requests.post 错误方法: 1.在代理中---把高级中----代理-----去除勾选,调用失败

  2. 微信聊天记录导出为csv，并生成词云图

    微信聊天记录生成特定图片图云 首先贴上github地址 https://github.com/ghdefe/WechatRecordToWordCloud 来个效果图 提取聊天记录到csv参考教程 h ...

  3. C#使用RabbitMq队列(Sample,Work,Fanout,Direct等模式的简单使用)

    1:RabbitMQ是个啥?(专业术语参考自网络) RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件). RabbitMQ服务器是用Erlang语言编写的, ...

  4. C++学习---二叉树的输入及非递归遍历

    二叉树的二叉链表存储表示如下 //二叉树的二叉链表存储表示 typedef struct BiTNode { char data;//结点数据域 struct BiTNode* lchild, * r ...

  5. Tensorflow学习笔记No.8

    使用VGG16网络进行迁移学习 使用在ImageNet数据上预训练的VGG16网络模型对猫狗数据集进行分类识别. 1.预训练网络 预训练网络是一个保存好的,已经在大型数据集上训练好的卷积神经网络. 如 ...

  6. tomcat 登录主页成功 点击Manager App 401 等问题

    1.将项目部署在tomcat的安装路径webapps下(如果报404,查下该应用是否在tomcat的webapps下部署着) 2.启动tomcat成功,http://127.0.0.1:8080成功, ...

  7. ubuntu 使用cuda以及cudnn

    关于我自己的电脑是 mx250显卡. 使用cuda之前需要解决显卡驱动的问题,这个问题最简单的办法就是在[软件更新器]里面更换下载源.我的语言设置是中文,所以默认是cn的镜像源.更换成ustc(中国科 ...

  8. IOS8 对flex兼容性问题

    问题: IOS8.2 dispaly:flex:不生效: 注意一下兼容写法的顺序问题,  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Saf ...

  9. OpenTelemetry架构介绍

    OpenTelemetry: 经得起考验的工具 摘自:https://blog.newrelic.com/product-news/what-is-opentelemetry/ 目录 OpenTele ...

  10. 操作安装docker

    在本地建造起vue-cli服务 参考项目:https : //gitee.com/QiHanXiBei/myvue 在本地建造起一个django项目架构,通过/ hello能够打印出helloworl ...