利用JavaScript制作一个搞怪的兔子动画效果

目录
  • 前言
  • 实现
  • 效果图

前言

Hello,掘友们好!又是一年新春之际,祝福大家兔年快乐!给大家介绍一个有趣的动效(兼容 IE),页面右下角有一只搞怪的兔子,鼠标在页面中悬停时,兔子会跟着做出不同的动作和表情。然后可以在页面中任意位置(离兔子太近不能发射,会伤到兔子)点击鼠标,将从兔子眼睛里发射炮弹,随之击中的是你的霉 运、压 力、贫 穷、疾 病。

实现

定义一个随机文本块。

<p id="p1"></p>

定义兔子的构造函数。

function HoverRabbit() {
  this.explodeImage = new Image();
  this.explodeImage.src = "img/explode.png";
  for (var i = 1; i <= 6; i++) {
    this.images[i] = new Image();
    this.images[i].src = "img/s" + i + ".png";
  }
  if (typeof(CanvasGradient) != 'undefined') {
    this.canvas = document.createElement("canvas");
    this.canvas.width = screen.width + 100;
    this.canvas.height = screen.height;
    this.canvas.style.position = 'absolute';
    this.canvas.style.left = '0px';
    this.canvas.style.top = '0px';
    this.canvas.style.display = 'none';
    document.body.appendChild(this.canvas);
    this.canvas.style.position = 'fixed';
  }
}

定义兔子原型的属性和方法。

HoverRabbit.prototype = {
  images: [],
  explodeImage: null,
  eyePositions: [],
  current: 1,
  frame: 1,
  canvas: null,
  interval: null,
  start: function() {
    var me = this;
    this.eyePositions[1] = {
      eye1x: 123,
      eye1y: 47,
      eye2x: 104,
      eye2y: 53
    };
    this.eyePositions[2] = {
      eye1x: 120,
      eye1y: 50,
      eye2x: 101,
      eye2y: 54
    };
    this.eyePositions[3] = {
      eye1x: 119,
      eye1y: 54,
      eye2x: 97,
      eye2y: 56
    };
    this.eyePositions[4] = {
      eye1x: 112,
      eye1y: 61,
      eye2x: 90,
      eye2y: 61
    };
    this.eyePositions[5] = {
      eye1x: 105,
      eye1y: 64,
      eye2x: 85,
      eye2y: 61
    };
    this.eyePositions[6] = {
      eye1x: 98,
      eye1y: 68,
      eye2x: 79,
      eye2y: 56
    };
    document.onmousemove = function(e) {
      me.onmousemove(e);
    }
    if (this.canvas) {
      document.addEventListener("click", function(e) {
        me.ondblclick(e);
      });
    }
  },
  onmousemove: function(e) {
    var event = e || window.event;
    var deg = Math.abs(screen.height - event.screenY) / (Math.abs(screen.width - event.screenX) + 1);
    var n = 1;
    if (deg > 2) n = 6;
    else if (deg > 1.4) n = 5;
    else if (deg > 0.7) n = 4;
    else if (deg > 0.45) n = 3;
    else if (deg > 0.2) n = 2;
    this.deg = n;
    if (this.current != n) {
      document.body.style.backgroundImage = "url(" + this.images[n].src + ")";
      this.current = n;
    }
  },
  drawBomb: function(ctxt, n, x, y) {
    var sx = 64 * (n % 4);
    var sy = 64 * (Math.floor(n / 4));
    ctxt.drawImage(this.explodeImage, sx, sy, 64, 64, x - 32, y - 32, 64, 64);
  },
  ondblclick: function(e) {
    if (this.canvas.style.display != 'none') return;
    var me = this;
    if (e.clientX > window.innerWidth - 200 && e.clientY > window.innerHeight - 200) return;
    var ctxt = this.canvas.getContext("2d");
    this.frame = 1;
    this.interval = setInterval(function(e2) {
      ctxt.clearRect(0, 0, me.canvas.width, me.canvas.height);
      switch (me.frame) {
        case 1:
          ctxt.strokeStyle = 'rgba(247,166,71,1)';
          me.canvas.style.display = 'block';
        case 2:
          if (me.frame == 2) {
            ctxt.strokeStyle = 'rgba(247,166,71,0.5)';
            me.drawBomb(ctxt, 0, e.clientX, e.clientY);
          }
          case 3:
            if (me.frame == 3) {
              ctxt.strokeStyle = 'rgba(247,166,71,0.1)';
              me.drawBomb(ctxt, 1, e.clientX, e.clientY);
            }
            var eye1x = window.innerWidth - me.eyePositions[me.current].eye1x;
            var eye1y = window.innerHeight - me.eyePositions[me.current].eye1y;
            ctxt.lineWidth = 3;
            ctxt.beginPath();
            ctxt.moveTo(eye1x, eye1y);
            ctxt.lineTo(e.clientX, e.clientY);
            ctxt.stroke();
            var eye2x = window.innerWidth - me.eyePositions[me.current].eye2x;
            var eye2y = window.innerHeight - me.eyePositions[me.current].eye2y;
            ctxt.beginPath();
            ctxt.moveTo(eye2x, eye2y);
            ctxt.lineTo(e.clientX, e.clientY);
            p1.textContent = ['霉 运', '压 力', '贫 穷', '疾 病'][Math.floor(Math.random() * 4)];
            p1.style.display = 'block';
            p1.style.transform = 'rotate(' + (-150 + me.deg * 30) + 'deg)';
            p1.style.left = e.clientX - 30 + 'px';
            p1.style.top = e.clientY - 30 + 'px';
            fade(p1);
            ctxt.stroke();
            break;
          case 4:
            me.drawBomb(ctxt, 2, e.clientX, e.clientY);
            break;
          case 14:
            me.canvas.style.display = 'none';
            window.clearInterval(me.interval);
            break;
          default:
            me.drawBomb(ctxt, me.frame - 2, e.clientX, e.clientY);
      }
      me.frame++;
    }, 50);
  }
};

各个属性和方法说明:

  • images - 兔子不同的动作的图片数组。
  • explodeImage - 炮弹图片元素。
  • eyePositions - 兔子眼睛位置的数组。
  • current - 整型数字,当前动作的指针。
  • frame - 整型数字,发射炮弹动画的帧数指针。
  • canvas - 画布元素。
  • interval - 发射炮弹动画时间间隔定时器的 interval ID。
  • start - 启动页面交互的方法,在这里定义了兔子眼睛位置的数组数据,绑定页面鼠标移动、点击事件。
  • onmousemove - 定义页面鼠标移动的实现方法。
  • ondblclick - 定义页面鼠标点击的实现方法。
  • drawBomb - 定义绘制和更新炮弹动画的方法。

定义文字淡出的动画。

function fade(e) {
  var s = e.style;
  s.opacity = 1;
  (function hide() {
    (s.opacity -= .01) < 0 ? s.display = "none" : requestAnimationFrame(hide);
  })();
}

创建兔子对象,调用启动交互方法。

var s = new HoverRabbit();
s.start();

效果图

到此这篇关于利用JavaScript制作一个搞怪的兔子动画效果的文章就介绍到这了,更多相关JavaScript兔子动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript实现移动端红包雨页面

    本文实例为大家分享了js实现移动端红包雨页面的具体代码,供大家参考,具体内容如下 实习的效果如下: 具体代码如下 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

  • 基于React.js实现兔兔牌九宫格翻牌抽奖组件

    目录 基础页面结构 初始化数据 翻转逻辑 count 为 0 100% 中奖 效果图 基础页面结构 import React, { useEffect, useState } from "react" import './index.css' const FlopLuckyDraw9 = () => { return ( <> <div className="title"> 可抽奖 <label >{count}</l

  • 利用JavaScript创建一个兔年春节倒数计时器

    目录 如何在 JavaScript 中构建倒数计时器 第1步:创建倒计时输入框 第2步:倒数计时器的基本结构 第 3 步:使用 CSS 设计 JavaScript 定时器 第四步:简单倒数计时器的JavaScript 我们可以通过多种方式构建 JavaScript 倒数计时,我在本教程中展示的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创建的. 它的工作方式非常简单,需要两种类型的时间.我们要运行倒计时的当前时间和特定时间,必须手动添加计时器倒计时,JavaScri

  • JS技巧动手实现红包兔子雨效果示例详解

    目录 前言 展示效果 技术栈 思考与实现 红包下落效果 生成红包雨 打开红包效果 兔子雨效果 拓展 设置中奖概率 后记 前言 人生天地之间,若白驹过隙,忽然而已.不知不觉中,2022年已然逝去,2023年也过去了半个月了.看到「兔了个兔」这个活动几天了,不过这周比较忙,没时间参与. 心血来潮,捣鼓了一晚上,实现一个兔年的红包雨(兔子雨)效果~ 展示效果 技术栈 Vue2 SCSS:实现红包雨(兔子雨)效果.按钮交互效果等. 思考与实现 首先,思考一下最终的展示效果:在屏幕上会有很多随机下落的兔子

  • js+css实现红包雨效果

    本文实例为大家分享了js实现红包雨展示的具体代码,供大家参考,具体内容如下 1.html部分 红包的样子,先写一个模版在页面上 <div class="hide"> <div class="RedPackage__Box js-RedPackageBox" data-txt> <img src="./images/redPackage.png" alt=""> </div> &l

  • JavaScript Html实现移动端红包雨功能页面

    本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下 实现效果如下: 具体代码如下 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • JavaScript+Canvas模拟实现支付宝画年兔游戏

    目录 动手前的思路 思考1.如何让鼠标只能在特定区域内画画? 思考2.如何让绘制的图画动起来 思考3.如何撤销上一步操作 思考4.如何判断线条绘制完毕 关键步骤 接近过年了,支付宝的集福的活动又开始了,集美们的五福集齐了没有.每年的集福活动都有一些小游戏,今年也不例外,画年画就是其中之一,本篇用canvas来写一个画年兔的游戏. 动手前的思路 画年画游戏规则是:跟着特定轮廓画出线条来. 思考1.如何让鼠标只能在特定区域内画画? 首先要获取到这个轮廓区域所在画布上的位置,判断鼠标绘画的位置是否在指

  • 利用JavaScript制作一个搞怪的兔子动画效果

    目录 前言 实现 效果图 前言 Hello,掘友们好!又是一年新春之际,祝福大家兔年快乐!给大家介绍一个有趣的动效(兼容 IE),页面右下角有一只搞怪的兔子,鼠标在页面中悬停时,兔子会跟着做出不同的动作和表情.然后可以在页面中任意位置(离兔子太近不能发射,会伤到兔子)点击鼠标,将从兔子眼睛里发射炮弹,随之击中的是你的霉 运.压 力.贫 穷.疾 病. 实现 定义一个随机文本块. <p id="p1"></p> 定义兔子的构造函数. function HoverRa

  • 利用JavaScript制作一个酷炫的3D图片演示

    目录 前言 一.页面特效效果展示 二.功能描述 三.功能实现 前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示 注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转 三.

  • 利用java制作一个小的目录查询器的方法

    实例如下: import java.util.*; import javax.swing.*; import java.awt.*; import java.io.*; import java.awt.event.*; class MyWindow{ private Frame f1; private Button bt1; private TextField tx1; private TextArea tx2; MyWindow(){ init(); } public void init(){

  • Python利用PyQt5制作一个获取网络实时NBA数据并播报的GUI程序

    制作NBA数据爬虫 捋顺思路 我们在这里选择的是百度体育带来的数据,我们在百度当中直接搜索NBA跳转到网页,我们可以看到,百度已经为我们提供了相关的数据 我们点击进去后,可以发现这是一个非常简洁的网址 我们看一下这个地址栏,发现毫无规律https://tiyu.baidu.com/live/detail/576O5Zu955S35a2Q6IGM5Lia56%2Bu55CD6IGU6LWbI2Jhc2tldGJhbGwjMjAyMS0wNi0xMyPniLXlo6t2c%2BWspritq%2Bi

  • Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI功能

    制作NBA数据爬虫 捋顺思路 我们在这里选择的是百度体育带来的数据,我们在百度当中直接搜索NBA跳转到网页,我们可以看到,百度已经为我们提供了相关的数据 我们点击进去后,可以发现这是一个非常简洁的网址 我们看一下这个地址栏,发现毫无规律https://tiyu.baidu.com/live/detail/576O5Zu955S35a2Q6IGM5Lia56%2Bu55CD6IGU6LWbI2Jhc2tldGJhbGwjMjAyMS0wNi0xMyPniLXlo6t2c%2BWspritq%2Bi

  • 如何利用JavaScript编写一个格斗小游戏

    拖延症晚期的我原本计划趁着周末写个年终总结,但是一直没有什么思路,想来想去也没想到要写啥就胡乱写了这么一个小东西. 一直比较痴迷游戏行业,可能我不太适合做前端,应该去学C++.... 首先当然是选择一张背景图,作为整个场景中的地图,而且要大要高清.布局到页面中. 然后通过可视区值展示这张图片的一小部分.我这里用的是宽600,高420的,超出直接隐藏掉. width: 600px; height: 420px; 这样一个简单的场景就写好了,接着我们需要在这个场景中加入我们的人物.也就是游戏中的角色

  • 利用JavaScript写一个简单计算器

    效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

  • 利用Flutter制作一个摸鱼桌面版App

    目录 准备工作 开始敲代码 找到资源 思考布局 实现布局 思考动画 实现动画 结语 Win10商店上架了一款名为<摸鱼>的App,在下载打开之后,这个App会让你的电脑进入一个假更新的画面,让别人以为你的电脑正在升级,这时候你就可以休息一下,优雅地喝一杯咖啡.  顿时这个念头划过了我的脑海:好东西,但是我用的是 MacBook,不能用这个应用.但是貌似我可以自己写一个? 准备工作 年轻最需要的就是行动力,想到就干,尽管我此刻正在理顺 DevFest 的讲稿,但丝毫不妨碍我用 10 分钟写一个

  • 利用PyQt5制作一个豆瓣电影信息查看器

    制作一个查看器可以查看豆瓣前100名电影的信息,当然这个爬取信息比较简单.所以重点放在 QThread 多线程的应用上面. QThread 子线程是 PyQt5 自带的一个线程使用,因为如果使用 PyQt5 的主线程去做所有的事情.如果处理速度太慢的情况下主线程就会直接出现卡死状态. 网络信息提取的相关模块有下面这些,主要是一个获取 Html 信息,另一个解析 Html5 的页面信息. import requests # 网络请求库 from bs4 import BeautifulSoup #

随机推荐