H5游戏源码分享-手机捉鬼游戏

news2024/11/27 16:27:38

H5游戏源码分享-手机捉鬼游戏

一款考验手速的游戏

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>手机捉鬼 微信HTML5在线朋友圈游戏</title>
        
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <style>*{padding:0;margin:0}body{background:#000}#canvas{background:url('./catch_gui/bg.jpg');background-size:100% 100%}#timer,#times{position:absolute;top:15px;color:#e44a43;font-size:24px;display:none}#timer{left:15px}#times{right:15px}.pop{position:absolute;top:0;background:url('./catch_gui/bg2.jpg');display:none}#c0{height:100%;width:100%}.result-text{width:100%;height:70%;margin:20px auto;background:url('img/textBg.png');background-size:cover}.weixin-button{width:73%;height:10%;margin:20px auto;background:url('./catch_gui/btn-share2.png');background-size:cover}h1,h2,h3,h4{color:#fff;text-align:center;line-height:40px}.begin,.fenxiang{position:absolute;left:0;top:81%;width:100%}.begin div{margin:0 auto;width:204px;height:52px;background:url("./catch_gui/btn.png") no-repeat center;background-size:204px 52px}#play-again{position:absolute;left:10%;top:68%;font-size:2em;color:white;width:80%;border:2px solid white;display:none}.fenxiang{top:80%;z-index:1000}.fenxiang div{width:264px;height:52px;margin:0 auto}.fx_body{width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(28,26,24,0.8);display:none}.fx_body div{position:absolute;right:50px;top:50px;width:191px;height:215px;background:url("./catch_gui/show_share.png") no-repeat center;background-size:191px 215px}</style>  

        <script src="./static/zepto.min.js"></script>
        <script src="./static/sprites.js"></script>
        <script src="./static/requestNextAnimationFrame.js"></script>
        <script type="text/javascript">
        var title = "鬼节到了，我的手机见鬼了！！胆大的快来帮忙抓鬼啊！！";
        var image_ready = new Image;
            image_ready.src = "./catch_gui/ready.png", window.onload = function() {
                function P(e) {
                    var t = e.x || e.clientX, n = e.y || e.clientY, r = a.getBoundingClientRect();
                    return{x: t - r.left * (a.width / r.width), y: n - r.top * (a.height / r.height)}
                }
                function H(e) {
                    return{left: e.left, top: e.top, width: e.width, height: e.height}
                }
                function B() {
                    var e = H(y), t = e.left + e.width, n = e.top + e.height;
                    if (t > a.width || e.left < 0)
                        E = -E, t > a.width && (y.left -= t - a.width), e.left < 0 && (y.left -= e.left);
                    if (n > a.height || e.top < 0)
                        S = -S, n > a.height && (y.top -= n - a.height), e.top < 0 && (y.top -= e.top)
                }
                function j() {
                    b && B()
                }
                function F(e, t) {
                    return e > y.left && e < y.left + y.width && t > y.top && t < y.top + y.height
                }
                function I(e, t) {
                    return e > a.width * (1 - M) * .5 && e < a.width * (1 - M) * .5 + a.width * M && t > a.height * .8 && t < a.height + a.width * M * v.height / v.width
                }
                function q(e, t) {
                    return e > a.width * (1 - D) * .5 && e < a.width * (1 - D) * .5 + a.width * D && t > a.height * .8 && t < a.height + a.width * D * v.height / v.width
                }
                function R(e) {
                    var t = "", n, r;
                    e == 0 ? (v.src = "./catch_gui/btn-share.png", n = "\u4f60\u7684\u624b\u62bd\u7b4b\u4e86\u4e48\uff1f", r = "\u5feb\u5411\u670b\u53cb\u6c42\u6551\u5427\uff01") : (v.src = "./catch_gui/btn-share2.png", n = "\u54c7\uff01\u6293\u5230" + e + "\u53ea\u9b3c", r = "\u5feb\u5411\u670b\u53cb\u70ab\u8000\u5427\uff01"), c.clearRect(0, 0, a.width, a.height), c.drawImage(p, 0, 0, a.width, a.height), c.drawImage(d, a.width * .05, a.height * .1, a.width * .9, a.width * .9 * d.height / d.width), c.drawImage(v, a.width * (1 - M) * .5, a.height * .8, a.width * M, a.width * M * v.height / v.width), n && (c.fillStyle = "rgba(255, 255, 255, 1)", c.font = "28px \u9ed1\u4f53", c.fillText(n, a.width / 2, a.height * .35), c.textAlign = "center", c.shadowBlur = 4, c.shadowOffsetX = 2, c.shadowOffsetY = 2, c.textBaseline = "middle"), r && (c.font = "28px \u9ed1\u4f53", c.fillText(r, a.width / 2, a.height * .5))
                }
                function U() {
                    A = 0, L = 0, T = !1, N = !1, b = !1, C = !0, y.width = t, y.height = n, E = MOVE_SPEED_X, S = MOVE_SPEED_Y, $("#timer,#times").hide(), window.requestNextAnimationFrame(z)
                }
                function z(e) {
                    var t;
                    N ? (R(A), $("#timer,#times").hide()) : w === 0 ? w = e : (c.clearRect(0, 0, a.width, a.height), b && (t = parseFloat(e - w) / 1e3, y.left += E * t, y.top += S * t, j()), w = e, N && !A && y.width < screenWidth && y.height < screenHeight && (y.width += scaleX, y.height += scaleY, y.top = (screenHeight - y.height) / 2, y.left = (screenWidth - y.width) / 2), C ? (c.drawImage(image_ready, 0, 0, a.width, a.height), c.drawImage(m, a.width * (1 - D) * .5, a.height * .8, a.width * D, a.width * D * m.height / m.width)) : y.paint(c)), window.requestNextAnimationFrame(z)
                }
                var e = "./catch_gui/gui.png", t = 80, n = 80, r = "./catch_gui/hun.png", i = 10;
                MOVE_SPEED_X = 370, MOVE_SPEED_Y = 98, MOVE_SPEED_INC_PER = 1, SHOW_START_TEXT = !0, IMAGE_READY = "./catch_gui/ready.png";
                var s = 0, o = 0, u = function(e, t) {
                    s = e, o = t, aab = e
                }, a = document.getElementById("canvas");
                document && (screenWidth = document.documentElement.clientWidth, screenHeight = document.documentElement.clientHeight, a.width = screenWidth, a.height = screenHeight);
                var f = document.getElementById("second"), l = document.getElementById("number"), c = a.getContext("2d"), h = new Image, p = new Image, d = new Image, v = new Image, m = new Image, g = new Image, y = new Sprite("ball", new ImagePainter(e, t, n)), b = !1, w = undefined, E = incVelocityX = MOVE_SPEED_X, S = incVelocityY = MOVE_SPEED_Y, T = !1, N = !1, C = SHOW_START_TEXT, k, L = 0, A = 0;
                h.src = r, p.src = "./catch_gui/bg2.jpg", d.src = "img/textBg.png", v.src = "./catch_gui/btn-share.png", g.src = "./catch_gui/btn-share2.png", m.src = "./catch_gui/btn.png";
                var O = 0;
                imgArr = [h, p, d, v, m, g];
                for (x in imgArr)
                    imgArr[x].onload = function() {
                        console.log(O), ++O == 6 && ($("timer").text(O), console.log(O), window.requestNextAnimationFrame(z))
                    };
                var M = .75, _ = .9, D = .6;
                y.catched = function() {
                    this.painter.image.src = r, b = !1, f.innerHTML = parseInt(f.innerHTML)
                }, y.init = function() {
                    this.painter.image.src = e, b = !0, this.left = Math.random() * (screenWidth - y.width), this.top = Math.random() * (screenHeight - y.height)
                }, y.stop = function() {
                    b = !1, N = !0, y.left = screenWidth / 2 - y.width / 2, y.top = screenHeight / 2 - y.height / 2
                }, $("body").on("touchstart", function(e) {
                    if (e.target.className == "fx_body")
                        return $(".fx_body").hide(), !1;
                    e = e.touches[0];
                    if (q(e.clientX, e.clientY) || T) {
                        if (!b)
                            if (!T) {
                                $("#timer,#times").show(), scaleX = (screenWidth - y.width) / i, scaleY = (screenHeight - y.height) / i, f.innerHTML = 10;
                                var t = setInterval(function() {
                                    var e = parseInt(f.innerHTML);
                                    f.innerHTML = --e, L++, L != 0 && (E = E < 0 ? E - incVelocityX * MOVE_SPEED_INC_PER : E + incVelocityX * MOVE_SPEED_INC_PER, S = S < 0 ? S - incVelocityY * MOVE_SPEED_INC_PER : S + incVelocityY * MOVE_SPEED_INC_PER), e <= 0 && (y.stop(), clearInterval(t), u(A, L), setInterval(function() {
                                        R(A)
                                    }, 500))
                                }, 1e3);
                                b = !0, T = !0
                            } else
                                N && I(e.clientX, e.clientY) && $(".fx_body").show();
                        else
                            !N && F(e.clientX, e.clientY) && (A++, l.innerHTML = A, b = !b, y.catched(), setTimeout(function() {
                                y.init();
                                var num = document.getElementById("number").innerHTML;
                                if(num>0){
                                    title = "哇！我抓到 "+num+" 只鬼，赶紧来试试吧！";
                                }
                            }, 300));
                        C && (C = !1)
                    }
                    return!1
                }), this.left = Math.random(screenWidth / 2), this.top = Math.random(screenHeight / 2)
            }</script>

        <script>

        </script>
    </head>

    <body>

        <canvas id="canvas" width="1366" height="652">
            Canvas not supported
        </canvas>
        <div id="timer">Time:<span id="second">10</span>s</div>
        <div id="times">Catch:<span id="number">0</span></div>
        <div class="fx_body"><div></div></div>


        <script>
          document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                WeixinJSBridge.on('menu:share:appmessage', function(argv) {
                    WeixinJSBridge.invoke('sendAppMessage', {
                        "img_url": "http://app.46465.com/html5/zhuogui/logo.png",
                        "link": "http://app.46465.com/html5/zhuogui/index.html",
                        "desc": "鬼节到了，我的手机见鬼了！！胆大的快来帮忙抓鬼啊！！",
                        "title": title
                    }, function(res) {
                        document.location.href = "http://app.46465.com/";
                    })
                });

                WeixinJSBridge.on('menu:share:timeline', function(argv) {
                    WeixinJSBridge.invoke('shareTimeline', {
                        "img_url": "http://app.46465.com/html5/zhuogui/logo.png",
                        "img_width": "120",
                        "img_height": "120",
                        "link": "http://app.46465.com/html5/zhuogui/index.html",
                        "desc": "鬼节到了，我的手机见鬼了！！胆大的快来帮忙抓鬼啊！！",
                        "title": title
                    }, function(res) {
                        document.location.href = "http://app.46465.com/";
                    });
                });
            }, false);

            </script> 

<img src="http://img.tongji.linezing.com/3455448/tongji.gif">
</body></html>

项目地址：https://download.csdn.net/download/Highning0007/88481860

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1146407.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

openWRT SFTP 实现远程文件安全传输

openWRT SFTP 实现远程文件安全传输

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f516;系列专栏&#xff1a; C语言、Linux、 Cpolar ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言 1. openssh-sftp-server 安装2. 安装cpolar工具3.配置SFTP远程访问4.固定远程连接地址 前言 本次教程我…
阅读更多...
“体检报告健康解读技术传承人”授牌仪式圆满结束

“体检报告健康解读技术传承人”授牌仪式圆满结束

2023年10月&#xff0c;全国卫生健康技术推广传承项目办公室将体检报告健康解读技术传承人证书授予中山大学麻醉学硕士、副主任医师、医说友道创始人许才燕医生。 10月13日&#xff0c;许才燕医生团队在广东佛山举行“解读体检报告 重构健康生态”体检报告健康解读技术传承人授…
阅读更多...
launch4j jar转exe使用笔记

launch4j jar转exe使用笔记

一、下载 网盘下载&#xff1a;https://pan.baidu.com/s/1b8g8qwePmufgm4rKao4icw?pwdxf28 官网下载&#xff1a;https://sourceforge.net/projects/launch4j/files/latest/download &#xff08;注&#xff1a;点击链接会自动下载&#xff09; jre下载&#xff1a;https://p…
阅读更多...
C++ priority_queue 的使用

C++ priority_queue 的使用

1. priority_queue 的介绍 下面是 priority_queue 的介绍&#xff0c;来自于&#xff1a;&#x1f3f9;priority_queue - C Reference (cplusplus.com) 的中文翻译&#xff0c;您可以尝试看看。 优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一…
阅读更多...
H5游戏分享-烟花效果

H5游戏分享-烟花效果

<!DOCTYPE html> <html dir"ltr" lang"zh-CN"> <head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width" /> <title>点击夜空欣赏烟花</title> <sc…
阅读更多...
WIN11新版画图问题解决

WIN11新版画图问题解决

1 白色背景被连同删除的问题 解决方法&#xff1a;加层 将层调整为新建的层&#xff0c;在这个层下画图就行。 2 QQ截图无法直接放在画图上的问题 使用QQ截图的时候&#xff1a; 解决方法&#xff1a;使用windows自带的截图工具 步骤&#xff1a; 1. 使用快捷键winshifts 2.…
阅读更多...
矢量图形编辑软件illustrator 2023 mac中文软件特点

矢量图形编辑软件illustrator 2023 mac中文软件特点

illustrator 2023 mac是一款矢量图形编辑软件&#xff0c;用于创建和编辑排版、图标、标志、插图和其他类型的矢量图形。 illustrator 2023 mac软件特点 矢量图形&#xff1a;illustrator创建的图形是矢量图形&#xff0c;可以无限放大而不失真&#xff0c;这与像素图形编辑软…
阅读更多...
Spring是如何解决bean循环依赖的问题的

Spring是如何解决bean循环依赖的问题的

在Spring框架中&#xff0c;循环依赖是指两个或多个Bean之间相互依赖&#xff0c;形成了一个闭环的依赖关系。当存在循环依赖时&#xff0c;Bean的创建过程会陷入死循环&#xff0c;导致应用程序无法启动或出现异常。 说到循环依赖&#xff0c;首先我先说说bean的三级缓存 在S…
阅读更多...
【windows 脚本】netsh命令

【windows 脚本】netsh命令

netsh 是 Windows 操作系统中的一个命令行工具&#xff0c;用于配置和管理网络设置。它提供了一系列的命令和参数&#xff0c;可以用于配置网络接口、防火墙、路由表等网络相关的设置。以下是一些常用的 netsh 命令和用法&#xff1a; 配置静态IP&#xff0c;IP地址、子网掩码和…
阅读更多...
python画图之颜色标尺

python画图之颜色标尺

目录 带有颜色标尺的散点图带有颜色标尺的热图显示具体数值不显示具体数值 带有颜色标尺的轮廓图 在画图的时候加上颜色标尺可以非常方便看出数据的动态变化。以下是几个使用Python中常见的数据可视化库&#xff08;Matplotlib和Seaborn&#xff09;创建带有颜色标尺的图表的示…
阅读更多...
震惊！ 全方位解释在测试眼里，什么是需求？为什么要有需求？深入理解需求——图文并茂，生活举例，简单好理解

震惊！ 全方位解释在测试眼里，什么是需求？为什么要有需求？深入理解需求——图文并茂，生活举例，简单好理解

1、什么是需求&#xff1f; 需求定义(官方) 满足用户期望或正式规定文档&#xff08;合同、标准、规范&#xff09;所具有的条件和权能&#xff0c;包含用户需求和软件需求 用户需求&#xff1a;可以简单理解为甲方提出的需求&#xff0c;如果没有甲方&#xff0c;那么就是终端…
阅读更多...
阿里云创建站点后如何制作网站

阿里云创建站点后如何制作网站

前言 链接: 如何用云服务器搭建网站、多个站点&#xff08;不使用域名仅用公网IP&#xff09; 这是之前我所写的如何利用阿里云服务器搭建站点&#xff0c;那么这篇文章就继续教大家如何制作网站&#xff0c;也算不上制作吧&#xff0c;就是导入网站模板。 文章目录 前言1.准备…
阅读更多...
至高直降3000元，微星笔记本双11爆款推荐、好评有礼拿到手软

至高直降3000元，微星笔记本双11爆款推荐、好评有礼拿到手软

今年双11来的更早一些&#xff0c;微星笔记本先行的第一波雷影17促销活动&#xff0c;就已经领略到玩家们满满的热情。开门红高潮一触即发&#xff0c;微星笔记本双11活动周期至高直降3000元&#xff0c;众多爆款好货已经开启预约预售&#xff1a;有硬核玩家偏爱的性能双雄&…
阅读更多...
【WinForm详细教程三】WinForm中的NumericUpDown、PictureBox、RichTextBox及三种Timer控件

【WinForm详细教程三】WinForm中的NumericUpDown、PictureBox、RichTextBox及三种Timer控件

文章目录 1. NumericUpDown2. PictureBox3.RichTextBox控件4. Timer 、System.Timers.Timer和System.Threading.Timer 计时器4.1 Timer4.2 System.Timers.Timer4.3 System.Threading.Timer 1. NumericUpDown NumericUpDown 控件是一个用于数字输入和显示的控件&#xff0c;通常…
阅读更多...
freeRTOS学习day5

freeRTOS学习day5

测试demo 创建两个任务 任务一 按键按下 释放二值信号量 任务二获取 并打印执行次数 #include "sys.h" #include "delay.h" #include "usart.h" #include "led.h" #include "FreeRTOS.h" #include "task.h" #in…
阅读更多...
iis前端代理后台tomcat

iis前端代理后台tomcat

1)tomcat服务器配置运行好&#xff0c;服务地址位于 localhost:8080/wechat 2)iis 绑定了域名 api.abc.com 希望访问 api.abc.com/wechat时&#xff0c;实际由tomcat的服务处理; 3)iis上需要添加组件 requestRouter_amd64.msi rewrite_amd64_zh-CN.msi 4)iis进行相关配置…
阅读更多...
皮卡搜索-阿里夸克百度网盘资源超级搜索引擎

皮卡搜索-阿里夸克百度网盘资源超级搜索引擎

https://www.pikaso.top INDEX_SEARCH_CTA 少儿 小学 初中 高中 大学 四六级 考研 考公 教资 英语 电影 动漫 美剧 软件 电子书 编程 剪辑 设计 聚合云盘搜索接口地址&#xff1a;https://www.pikaso.top/search/?q%s% 阿里云盘搜索接口地址&#xff1a;https://www.pikaso.…
阅读更多...
博彦科技：以金融为起点，凭借创新技术平台真打实干

博彦科技：以金融为起点，凭借创新技术平台真打实干

【科技明说 &#xff5c; 重磅专题】 成立于1995年的博彦科技&#xff0c;已有28年左右的发展历程。 我没有想到&#xff0c;博彦科技也对AIGC领域情有独钟。博彦科技自研的数字人产品SaaS平台&#xff0c;可以接入包括百度文心一言、阿里通义千问等AI大模型产品。可见&#…
阅读更多...
8.多线程之阻塞队列

8.多线程之阻塞队列

阻塞队列和生产者消费者模型 文章目录 阻塞队列和生产者消费者模型1. 阻塞队列2. Java标准库中的阻塞队列 - BlockingQueue3. 阻塞队列的实现4. 生产者消费者模型 1. 阻塞队列 阻塞队列是什么呢&#xff1f;阻塞队列是一种特殊的队列&#xff0c;满足队列的基本要求 - 先进先出…
阅读更多...
CMake学习教程（一）

CMake学习教程（一）

前言 看到陈皓大神写作的《跟我一起写 Makefile》&#xff0c;我也想出一个CMake学习的专栏。 距离我接触CMake已经过了3年&#xff0c;那是我还是研一&#xff0c;不懂得底层编译的事情&#xff0c;因为导师的项目才突然转到这个方向&#xff08;项目是做工业软件的&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023