贪吃蛇是一款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. 用pChart生成雷达图图片

    需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...

  2. 题解：HDU 6598

    题解:HDU 6598 Description Now, Bob is playing an interesting game in which he is a general of a harmon ...

  3. 【树】HNOI2014 米特运输

    题目大意 洛谷链接 给出一课点带权的树,修改一些点的权值使该树满足: 同一个父亲的儿子权值必须相同 父亲的取值必须是所有儿子权值之和 输入格式 第一行是一个正整数\(N\),表示节点的数目. 接下来\ ...

  4. 骨架屏(page-skeleton-webpack-plugin)初探

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 微信公众 ...

  5. 想买保时捷的运维李先生学Java性能之 JIT即时编译器

    前言 本文记录日常学习<深入理解Java虚拟机>,不知道为啥感觉看一遍也就过了,喜欢动动手理解理解,这样才有点感觉,静不下心来的时候,看书抄书也可以用这个办法. 一.什么是JIT(Just ...

  6. 记2020年初对SimpleGUI源码的阅读成果

    2020春节,阅读了下SimpleGUI源码,我一直喜欢边阅读,边手绘图片,所以这里只贴几张图片. 一,什么是SimpleGUI ? https://gitee.com/Polarix/simpleg ...

  7. CC2530定时器模模式最大值计算

    首先假设 频率: f 分频系数: n 间隔定时: s 周期: T 模模式最大值: N 因为 T = 1 / f 所以 s = ( n / f ) * N  =  n * N / f 由此可得 计算模模 ...

  8. IDEA出现Error Loading Project: Cannot load module xxx报错

    IDEA出现Error Loading Project: Cannot load module xxx报错,是因为IDEA不能找到模块xxx加载,应该是添加/新建了xxx模块,之后又删除了该模块,但没 ...

  9. ORA-28000错误解决方案

    当使用SQL*Plus登录时,Oracle数据库时提示"ORA-28000:帐号被锁定". 导致出现改错误的原因是:在oracle database 11g中,默认在default ...

  10. IntelliJ IDEA 2020.2 x64 激活 2020-09-18亲测有效

    idea 激活,查阅许多资源和文章,激活码都失效,无意发现该资源(https://macwk.com/article/jetbrains-crack),亲测有效(2020-09-18),在此记录,以备 ...