贪吃蛇是一款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. 54.Qt-将界面程序封装成动态库DLL

    1.生成dll 然后选择创建共享库: 创建好后,修改pro文件,改为下面两句(这样就可以创建界面了):  然后修改sharedlib.h: #ifndef SHAREDLIB_H #define SH ...

  2. 多测师讲解jmeter _安装和配置环境（00）_高级讲师肖sir

    1.下载jmeter包,我们已经下载了有现成的: 2.安装jjdk默认安装或自定义安装 默认安装的路径: 如下图 3.第三步:安装完成后配置JDK的环境变量  位置:计算机→属性→高级系统设置→高级→ ...

  3. SpringBoot整合Elasticsearch游标查询（scroll）

    游标查询(scroll)简介 scroll 查询 可以用来对 Elasticsearch 有效地执行大批量的文档查询,而又不用付出深度分页那种代价. 游标查询会取某个时间点的快照数据. 查询初始化之后 ...

  4. 【UR #2】猪猪侠再战括号序列

    UOJ小清新题表 题目摘要 UOJ链接 有一个由 \(n\) 个左括号 "(" 和 \(n\) 个右括号 ")" 组成的序列.每次操作时可以选定两个数 \(l, ...

  5. 正式班D13

    2020.10.22星期四 正式班D13 修改文件内容 vim编辑 vim基础 可理解为Windows下的文本编辑器 vim可用来修改配置.写脚本 三种模式(命令模式.输入模式.末行模式) 命令模式按 ...

  6. win10使用U盘安装Linux系统教程

    win10安装Linux系统详细教程 目前想要再Windows系统上安装Linux系统有三种方式:其一是安装在虚拟机上(VMWare或者VirtualBox),其二是使用win10最新支持的Linux ...

  7. 使用Vue简单的写组件的UI库

    初始化项目vue create nature-ui 在根目录下面创建一个文件目录放置组件(我这里的创建packages) packages 目录下面创建个个组件的名称并创建index.js(用于输出所 ...

  8. vue 中v-if 与v-show 的区别

    相同点或者说功能,都可以动态操作dom元素的显示隐藏 不同点: 1.手段:v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐: 2.编 ...

  9. E. Almost Regular Bracket Sequence 解析(思維)

    Codeforce 1095 E. Almost Regular Bracket Sequence 解析(思維) 今天我們來看看CF1095E 題目連結 題目 給你一個括號序列,求有幾個字元改括號方向 ...

  10. java数据结构-04单循环链表

    单循环链表与单链表的不同是,单循环链表尾结点的next指向第一个结点(或头结点)  代码: 无头结点: public class SingleCircleLinkedList<E> ext ...