JavaScript实现移动小精灵的案例代码
前言
提示：
今天学习了一个js的小案例，来和可乐一起学习探讨下吧 skr~
效果：
提示：以下是本篇文章正文内容，下面案例可供参考
一、元素偏移量是什么？
offset ：中文就是偏离的意思， 使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
案例中使用到的属性：offsetLeft offseLtTopoffsetleft ：返回元素距离父元素左侧的距离offsetTop：返回元素距离父元素上方的距离
二、使用步骤
1.想方设法：先获取到坐标 鼠标点击获取盒子中的位置，出现坐标？
代码如下（示例）：
<script>
<div class="box"></div>
document.querySelector('.box').addEventListener('click',function(event){
var x = event.pageX
var y = event.pageY
var left = this.offsetLeft
var top = this.offsetTop
console.log(x-left,y-top)
})
</script>
注：
1、获取盒子 给盒子创建点击的事件监听事件
2、通过event 获取 页面上的坐标（pageX,pageY）
3、怎么获得？ 使用pageX-盒子的offsetLeft获得x轴
使用pageY-盒子的offsetTop获得y轴
2.读入数据
在获得坐标的基础上 实现盒子移动
代码如下（示例）：
总结
提示：这里对文章进行总结：
例如：以上就是今天的内容la，本文仅仅简单介绍了元素偏移的使用，元素偏移提供了大量能使我们快速便捷地处理数据的方法。谢谢支持
到此这篇关于JavaScript实现移动小精灵的案例代码的文章就介绍到这了,更多相关js 移动小精灵内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
移动精灵 现在你知道了如何展示精灵，但是让它们移动呢？很简单：使用Pixi的ticker。这被称为 游戏循环 。任何在游戏循环里的代码都会1秒更新60次。你可以用下面的代码让 cat 精灵以每帧1像素的速率移动。 function setup() { //Start the game loop by adding the `gameLoop` function to //Pixi's `t
-
我正在用PyGame制作一个小游戏，相机聚焦在一个代表角色的精灵上，当按下箭头键时，地图会围绕它移动。问题是地图不动。我以前多次遇到过这个问题，我想我已经把它缩小到可能的范围，但是我不知道如何真正解决这个问题。 这是代码： 基于我过去的PyGame程序，我总是在移动被绘制到屏幕上的精灵集时遇到问题，比如我在这里所做的。即使是平庸简单的例子也会失败。我想知道的是这是为什么，我怎样才能简明扼要地画出大
-
我在Java和Slick2D方面有几年的经验，我正试图将一个游戏移植到libgdx，因为它是一个更好的库。然而，我有一个简单的问题在屏幕上移动精灵。这个应用编程接口一定有一些我不理解的范例。我将我的代码提炼成以下内容。它识别输入，并在我的整个实体和网络系统中运行它，无论是在服务器上还是从服务器上，但是精灵保持在同一个位置。任何帮助都会很棒。 我的create（）方法： getCurrentX/Y方
-
本文向大家介绍JavaScript实现背景自动切换小案例，包括了JavaScript实现背景自动切换小案例的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现背景自动切换的具体代码，供大家参考，具体内容如下 功能： 窗口打开背景图自动跳转切换 所有代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
问题内容： 目前，每次按键时，精灵仅移动1个像素。按住左右键时，如何使水暖工精灵不断移动？ 问题答案： 您可以使用pygame.key.get_pressed来做到这一点。 例：
-
本文向大家介绍Javascript 实现全屏滚动实例代码，包括了Javascript 实现全屏滚动实例代码的使用技巧和注意事项，需要的朋友参考一下 JS 全屏滚动 参照fullPage.js的效果，用自己的想法实现的。 实现的效果：1、全屏滚动，滚动一下齿轮就会滚动全屏。 2、自适应缩放，无论怎么改变窗口的大小，都会保证用一个元素占满全屏。 下一步计划： 1、改成react组件 2、实现更多的效果