JS仿贪吃蛇：一串跟着鼠标的Div
贪吃蛇是一款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的更多相关文章
- JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div
function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...
- 一串跟随鼠标的DIV
div跟随鼠标移动的函数: <!DOCTYPE HTML><html><head> <meta charset="utf-8"> & ...
- js版贪吃蛇
之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...
- 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
- 用js实现贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用Js写贪吃蛇
使用Javascript做贪吃蛇小游戏, 1.自定义地图宽高,蛇的初始速度 2.食物随机出现 3.蛇的样式属性 4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,) <!DOCTYPE ht ...
- JS实现——贪吃蛇
把以下代码保存成Snake.html文件,使用Google或360浏览器打开 <!DOCTYPE HTML> <html> <head> <meta char ...
- Javascript仿贪吃蛇出现Bug的反思
bug现象: 图一
随机推荐
- S3C6410中断系统
S3C6410的中断主要改进是. 增加中断向量控制器,这样在S3C2440里需要用软件来跳转的中断处理机制,在S3C6410完全由硬件来跳转.你只要把ISR地址是存在连续向量寄存器空间,而不是象S3C ...
- MeteoInfoLab脚本示例：站点数据绘制等值线
站点数据绘制等值线需要首先将站点数据插值为格点数据,MeteoInfo中提供了反距离权法(IDW)和cressman两个方法,其中IDW方法可以有插值半径的选项.这里示例读取一个MICAPS第一类数据 ...
- centos初步配置
设置PS1 编辑sudo vi /etc/profile,PS1的值用于控制主提示符格式,含义如下 参数 描述 /d 代表日期,格式为weekday month date,例如:"Mon A ...
- <二分查找+双指针+前缀和>解决子数组和排序后的区间和
<二分查找+双指针+前缀和>解决子数组和排序后的区间和 题目重现: 给你一个数组 nums ,它包含 n 个正整数.你需要计算所有非空连续子数组的和,并将它们按升序排序,得到一个新的包含 ...
- 【9】进大厂必须掌握的面试题-DevOps面试
Q1.DevOps和Agile之间的根本区别是什么? 下表中列出了两者之间的差异. 特征 DevOps--开发运维 Agile--敏捷 敏捷 开发和运营中的敏捷性 只有发展才能敏捷 流程/实践 涉及C ...
- Redis基础——剖析基础数据结构及其用法
这是一个系列的文章,打算把Redis的基础数据结构.高级数据结构.持久化的方式以及高可用的方式都讲一遍,公众号会比其他的平台提前更新,感兴趣的可以提前关注,「SH的全栈笔记」,下面开始正文. 如果你是 ...
- linux 安装配置zerotier
1.在线安装zerotier curl -s https://install.zerotier.com/ | sudo bash 2.添加开机自启 $ sudo systemctl enable ze ...
- SSM中 web.xml配置文件
<!--核心监听器 当tomcat(web容器,应用服务器,web服务器)启动的时候创建spring 工厂类对象,绑定到tomcat上下文中 --> <listener> &l ...
- PowerShell类grep
PowerShell类grep 方法一: windows下没有grep不过有findstr, 功能差不多 方法二: powershell自带的正择功能 xxx | where {$_ -match & ...
- 攻防世界-mfw
打开题目,让我们看看about这个链接是什么,我们看到了这个 他说他写这个站点用了git.php.bootstrap这很容易就能让我们想到,git源码泄露,这我们直接掏出githack, python ...