一、前言
看见了max大佬和狗头人大佬做的一个桌宠，于是就像用web简单实现一下
二、代码包
https://wwwf.lanzout.com/iWfER0ze0cqd
密码:fg88
三、简单效果
简单用了随机动作（可以进行权重设置）
四、踩坑情况
如果不是主循环loop里，这里不能用这个，会导致开启多个loop循环
animationId = requestAnimationFrame(loop); // 浏览器提供的 API，用于优化动画性能并在重绘之前在主线程上执行指定的函数
定时器在函数里面设置时，最好挂载到全局变量上！方便后面销毁！
1、初始化变量
2、创建定时器（在函数中）
3、清除定时器
ico图标和cur图标都可以在web中应用！
注意：他们的大小不能超过32x32像素 ！！！
给父盒子设置了点击监听器——点击子盒子就无法触发监听器！！
解决方法：把子盒子设置为不可点击即可！！！
.cywl img {
width: 90px;
height: 90px;
pointer-events: none;
user-select: none;
}
五、主页面代码
<!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">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<style>
.cywl {
position: fixed;
width: 100px;
height: 100px;
z-index: 9999;
left: 50px;
bottom: 50px;
cursor: url(./Maxwell_Who-CatCursor/alternate.ico),
default;
display: flex;
}
.cywl img {
width: 90px;
height: 90px;
pointer-events: none;
user-select: none;
}
</style>
</head>
<body style="height: 5000px; background-image: linear-gradient(200deg, #5ee7df, #b490ca);">
<div id="pet" class="cywl">
<img id="pet-img" src="./max/stand1.png">
</div>
<script>
const pet = {
x: 50,
y: 50,
vx: 1,
vy: 0
};
var actions = {
walkleft: 1,
walkright: 1,
fish: 1,
sleep: 1,
kiss: 1,
stand: 1,
};
const LeftwalkFrames = [];
const RightwalkFrames = [];
const DragFrames = [];
const fishFrames = [];
const kissFrames = [];
const sleepFrames = [];
const standFrames = [];
const fallingFrames = [];
var ttt = null;
var dragTime = null;
var action = 'stand';
var actionList = Object.keys(actions).map(function (key) {
return {
name: key,
weight: actions[key]
};
}).reduce(function (prev, curr) {
return prev.concat(curr);
}, []);
function randomAction() {
var totalWeight = actionList.reduce(function (prev, curr) {
return prev + curr.weight;
}, 0);
var randomNum = Math.random() * totalWeight;
for (var i = 0; i < actionList.length; i++) {
if (randomNum <= actionList[i].weight) {
return actionList[i].name;
}
randomNum -= actionList[i].weight;
}
}
const img111 = new Image();
img111.src = `./max/falling1.png`;
fallingFrames.push(img111);
for (let i = 1; i < 13; i++) {
const img = new Image();
img.src = `./max/walkright${i}.png`;
RightwalkFrames.push(img);
const img2 = new Image();
img2.src = `./max/walkleft${i}.png`;
LeftwalkFrames.push(img2);
const img3 = new Image();
img3.src = `./max/drag${i}.png`;
DragFrames.push(img3);
const img4 = new Image();
img4.src = `./max/fish${i}.png`;
fishFrames.push(img4);
const img5 = new Image();
img5.src = `./max/kiss${i}.png`;
kissFrames.push(img5);
const img6 = new Image();
img6.src = `./max/sleep${i}.png`;
sleepFrames.push(img6);
const img7 = new Image();
img7.src = `./max/stand${i}.png`;
standFrames.push(img7);
}
function drawPet(anyFrames = RightwalkFrames) {
const frameIndex = Math.floor(Date.now() / 100) % anyFrames.length;
const img = anyFrames[frameIndex];
document.querySelector('.cywl img').src = img.src;
}
function updatePet() {
pet.x += pet.vx;
if (pet.x < 0) {
action = 'walkright'
}
if (pet.x + petDiv.clientWidth > window.innerWidth) {
action = 'walkleft'
}
petDiv.style.left = pet.x + 'px';
petDiv.style.bottom = pet.y + 'px';
}
const petDiv = document.querySelector('#pet');
petDiv.style.left = pet.x + 'px';
petDiv.style.bottom = pet.y + 'px';
const petImg = document.querySelector('#pet-img');
petImg.style.pointerEvents = 'none';
var isDragging = false;
var diffX = 0;
var diffY = 0;
let animationId = null;
petDiv.addEventListener('mousedown', function (event) {
action = '';
clearInterval(petTimer);
if (event.target === petDiv) {
isDragging = true;
diffX = event.clientX - petDiv.offsetLeft;
diffY = event.clientY - petDiv.offsetTop;
dragTime = setInterval(function drag() {
drawPet(DragFrames);
}, 100);
}
});
document.addEventListener('mousemove', function (event) {
if (isDragging === true) {
pet.x = event.clientX - diffX
pet.y = event.clientY - diffY
petDiv.style.left = pet.x + 'px';
petDiv.style.top = pet.y + 'px';
}
});
document.addEventListener('mouseup', function (event) {
if (isDragging === true) {
clearInterval(ttt);
clearInterval(dragTime);
isDragging = false;
action = 'stand';
ttt = setInterval(function name() {
action = randomAction();
}, 3000);
if (pet.y < 0 || pet.y + petDiv.clientHeight > window.innerHeight || pet.x + petDiv.clientWidth > window.innerWidth || pet.x < 0) {
pet.x = 500;
pet.y = 500;
const petDiv = document.querySelector('#pet');
petDiv.style.left = 500 + 'px';
petDiv.style.top = 500 + 'px';
}
drawPet(fallingFrames);
}
});
var petTimer = setInterval(function name() {
action = randomAction();
}, 3000);
function loop() {
console.log(action);
if (action == 'walkleft') {
pet.vx = -0.5;
updatePet();
drawPet(LeftwalkFrames);
}
if (action == 'walkright') {
pet.vx = 0.5;
updatePet();
drawPet(RightwalkFrames);
}
if (action == 'fish') {
drawPet(fishFrames);
}
if (action == 'kiss') {
drawPet(kissFrames);
}
if (action == 'sleep') {
drawPet(sleepFrames);
}
if (action == 'stand') {
drawPet(standFrames);
}
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
