前端——原生HTML猫猫max桌宠（附源码）

一、前言

看见了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>