贪吃蛇是一款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. Nginx如何部署静态web项目

    环境准备 windows nginx web项目资源包 准备资源包 这里拿layuimini项目举例,从码云上克隆下来直接访问提示需要部署在web服务器当中才能正常浏览演示 准备Nginx 进入解压后 ...

  2. python中的对文件的读写

    简单的实例 open函数获取文件,w是写权限,可以对文件进行io操作 file=open('C:/Users/Administrator/Desktop/yes.txt','w') file.writ ...

  3. 女儿拿着小天才电话手表问我App启动流程

    前言 首先,new一个女儿, var mDdaughter = new 女儿("6岁","漂亮可爱","健康乖巧","最喜欢玩小天 ...

  4. Verilog基础入门——Vivado工程创建（三）

    Verilog基础入门--Vivado工程创建(三) Vivado是Verilog语言的一个集成环境,目前使用的版本为英文版,简单介绍一下在Vivado中创建一个工程并写入源文件 [配置] win10 ...

  5. maven项目导入eclipse报错

    错误提示: 原因:未安装maven,缺少ojdbc6.jar包 解决: 一.安装maven 第一步百度搜索Maven官网,进去之后,下载apache-maven-3.5.3-bin.zip,下载完成之 ...

  6. 字符集、字符编码、国际化、本地化简要总结(UNICODE/UTF/ASCII/GB2312/GBK/GB18030)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 环境说明   普通的linux 和 普通的windows.    ...

  7. PHP程序员必须会的 45 个PHP 面试题

    Q1: == 和 === 之间有什么区别? 话题: PHP困难: 如果是两个不同的类型,运算符 == 则在两个不同的类型之间进行强制转换 === 操作符执行'类型安全比较' 这意味着只有当两个操作数具 ...

  8. xUtils简介和使用方法

    xUtils简介 xUtils 包含了很多实用的android工具. xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10种谓词) ...

  9. vscode自定义插件安装位置

    vscode的插件默认安装位置在: C:\Users\用户名\.vscode\extensions 如果不想将插件安装在C盘,可以自定义一个目标位置存储,使用如下: 右键快捷方式,在原本的目标后加入- ...

  10. git删除缓存区中文件

    删除缓冲区中的文件 git rm --cached "文件路径",不删除物理文件,仅将该文件从缓存中删除: git rm --f "文件路径",不仅将该文件从缓 ...