H5 雪碧图移动的机器猫

精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。

本文中用的就是这张，来自爱给网。

效果

操作

键盘上下左右控制移动

document.addEventListener("keydown", (ev) => {let x = 0,y = 0;if (ev.code === "ArrowUp") y = -1;if (ev.code === "ArrowDown") y = 1;if (ev.code === "ArrowLeft") x = -1;if (ev.code === "ArrowRight") x = 1;if (x || y) move(x, y);
});

动画

通过判断不同状态来展示不同动画

function sprite() {/** @type {{x:number,y:number}[]} */let anim = anims[currSprite];let animIndex = 0;let render = () => {let curr = anim[animIndex];let currX = Math.round(curr.x * 25); // 25 指单个小图的宽度let currY = Math.round(curr.y * 38); // 38 指单个小图的高度backgroundPosition = `background-position: ${currX}px ${currY}px;`;doraemon.setAttribute("style", `${transform}${backgroundPosition}`);animIndex++;if (anim.length === animIndex) animIndex = 0;};render();return setInterval(render, 200); // 200 是指每帧渲染间隔0.2s
}

源码

没有进行精简，属于粗略的代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.doraemon {width: 25px;height: 38px;position: relative;background-image: url("./assets/doraemon.png");}.doraemon .name {position: absolute;top: -14px;left: 50%;transform: translateX(-50%);font-size: 12px;text-align: center;white-space: nowrap;}</style></head><body><div class="doraemon"><div class="name">哆啦A梦</div></div><script>// 写一下 doraemon 移动// 操作元素let doraemon = document.querySelector(".doraemon");// 当前位置let pos = { x: 0, y: 0 };// 移动速度let speed = 2;// 当前动画let currSprite = "idle";// 默认let idleSprite = [{ x: 2, y: 0 }];// 向下let downSprite = [{ x: 1, y: 0 },{ x: 2, y: 0 },{ x: 3, y: 0 },];// 向上let upSprite = [{ x: 1, y: 1 },{ x: 2, y: 1 },{ x: 3, y: 1 },];// 向左let leftSprite = [{ x: 1, y: 3 },{ x: 2, y: 3 },{ x: 3, y: 3 },];// 向右let rightSprite = [{ x: 1, y: 2 },{ x: 2, y: 2 },{ x: 3, y: 2 },];// 动画集let anims = {idle: idleSprite,down: downSprite,up: upSprite,left: leftSprite,right: rightSprite,};// 当前操作的位置let backgroundPosition = "";// 当前的位移let transform = "";// 初始动画let spriteInterval = sprite();// 延迟默认let idleTimeout = 0;document.addEventListener("keydown", (ev) => {let x = 0,y = 0;if (ev.code === "ArrowUp") y = -1;if (ev.code === "ArrowDown") y = 1;if (ev.code === "ArrowLeft") x = -1;if (ev.code === "ArrowRight") x = 1;if (x || y) move(x, y);});function sprite() {/** @type {{x:number,y:number}[]} */let anim = anims[currSprite];let animIndex = 0;let render = () => {let curr = anim[animIndex];let currX = Math.round(curr.x * 25);let currY = Math.round(curr.y * 38);backgroundPosition = `background-position: ${currX}px ${currY}px;`;doraemon.setAttribute("style", `${transform}${backgroundPosition}`);animIndex++;if (anim.length === animIndex) animIndex = 0;};render();return setInterval(render, 200);}/*** 元素移动* @param {number} x* @param {number} y*/function move(x, y) {clearTimeout(idleTimeout);idleTimeout = setTimeout(() => {clearInterval(spriteInterval);currSprite = "idle";spriteInterval = sprite();}, 500);x *= speed;y *= speed;pos.x += x;pos.y += y;if (x > 0 && currSprite != "right") {clearInterval(spriteInterval);currSprite = "right";spriteInterval = sprite();}if (y > 0 && currSprite != "down") {clearInterval(spriteInterval);currSprite = "down";spriteInterval = sprite();}if (x < 0 && currSprite != "left") {clearInterval(spriteInterval);currSprite = "left";spriteInterval = sprite();}if (y < 0 && currSprite != "up") {clearInterval(spriteInterval);currSprite = "up";spriteInterval = sprite();}transform = `transform: translate(${pos.x}px,${pos.y}px);`;doraemon.setAttribute("style", `${transform}${backgroundPosition}`);}</script></body>
</html>

地址

https://github.com/linyisonger/H5.Examples

H5 雪碧图移动的机器猫相关推荐

webpack雪碧图生成
原文链接:http://dopro.io/webpack-sprites.html 前言在HTTP/2.0还没有普及的现在,css sprite(雪碧图)仍是前端工程化中必备的一环,而随着webpa ...
glidedsky挑战-图片式反爬（雪碧图）
为了避免某某官方网站,本次记录同样也是 "glidedsky" 网站中的反爬虫题目,只要明白,其它网站理论都差不一样. 相关网站:http://glidedsky.com/leve ...
css sprit雪碧图制作，使用教程
写在前面: 在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能.百度词条对雪碧图的解释是:CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景 ...
python多张图片合并拼接，python制作sprite图、雪碧图
python多张图片合并拼接,python制作sprite图.雪碧图整理图片集找两个文件夹,yangying和zhaoliying,分别放上照片8张,共16张照片. 创建sprite.py # 多 ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
雪碧图工具sprity（20151201更新修复了同时合并多张图的bug）
前身是css-sprite,前几天帮新同事搭建环境,意外发现sprity在window下可以安装成功了,同时也发现node版本已经4点几了,自己电脑的版本还停留在0.10,赶紧把自己的node升级到最 ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
CSS 关于雪碧图预处理和后处理方案的讨论
广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到的问题以及解决方案.其 ...
让字体图标代替雪碧图，减少请求带宽
一.什么是字体图标 icon font 及使用场景从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...

H5 雪碧图移动的机器猫

效果

操作

动画

源码

地址

H5 雪碧图移动的机器猫相关推荐

最新文章

热门文章

H5 雪碧图 移动的机器猫

效果

操作

动画

源码

地址

H5 雪碧图 移动的机器猫相关推荐

最新文章

热门文章

H5 雪碧图移动的机器猫

H5 雪碧图移动的机器猫相关推荐