返回顶部
首页 > 资讯 > 精选 >基于JS如何实现蜘蛛侠动作游戏
  • 185
分享到

基于JS如何实现蜘蛛侠动作游戏

2023-07-02 09:07:10 185人浏览 独家记忆
摘要

这篇文章主要介绍“基于js如何实现蜘蛛侠动作游戏”,在日常操作中,相信很多人在基于JS如何实现蜘蛛侠动作游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”基于JS如何实现蜘蛛侠动作游戏”的疑惑有所帮助!接下来

这篇文章主要介绍“基于js如何实现蜘蛛侠动作游戏”,在日常操作中,相信很多人在基于JS如何实现蜘蛛侠动作游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”基于JS如何实现蜘蛛侠动作游戏”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

代码结构

基于JS如何实现蜘蛛侠动作游戏

js文件夹是游戏事件控制文件

vapp文件夹是游戏图片文件

icon.png 是网页游戏图标

index.html 是游戏主页

代码展示

HTML

index.html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta charset="utf-8" />        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-Scalable=no">        <title>蜘蛛侠</title><script type="text/javascript">var _con = {}; _con["num"] = 58;</script>        <meta name='robots' content='noindex,follow' />        <meta name="fORMat-detection" content="telephone=no email=no" />        <meta name="apple-mobile-WEB-app-capable" content="yes" />        <meta name="apple-mobile-web-app-status-bar-style" content="black" />        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />        <style type="text/CSS">            body {margin:0; -webkit-user-select:none; -webkit-text-size-adjust:none; -moz-user-select:none;            -moz-text-size-adjust:none; -ms-user-select:none; -ms-text-size-adjust:none;            -o-user-select:none; -o-text-size-adjust:none; user-select:none; text-size-adjust:none;            min-height:100% } #g1{margin-top:280px;margin-left:40px;position:absolute}            #weixin-share{background-image:url(./vapp/58/share11.png);height:100px;width:160px;position:absolute;top:0px;left:240px;z-index:699}            #weixin-text{ font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif;            height: 600px; width: 420px; margin-top: 0px; margin-right: auto; margin-left:            auto; background-color: #E8D9AE; padding-top: 23px; padding-left: 40px;            z-index: 600 }#weixin-text #j{height:464px;width:316px;background-image:url(./vapp/58/j.png);background-repeat:no-repeat;margin:0px;padding:0px;clear:both;position:absolute;z-index:601}#weixin-text            #j #txt{font-size:36px;font-weight:bold;color:#790000;margin-top:110px;margin-left:0px;text-align:center;}#weixin-text            #j #rank{text-align:center;margin-top:0px;position:absolute;width:100%;padding-top:5px;color:#4E4524}.lis{overflow: hidden;width: 100%;z-index: 99999;position: absolute;top:0;}.lis a{display: block;width:99.9%;color:#ffffff;font-size:14px;text-decoration: none;background:#606783;text-align: center;opacity: 0.5;line-height:30px;font-weight: bold;font-family:"微软雅黑"}.lis a img{position: relative;top: 1px;}        </style>    </head>        <body bGColor="#000000" vlink="#7f7f7f" alink="#7f7f7f" link="#7f7f7f"    ><div class="lis"><div ><a  href="http://g.huceo.com" rel="external nofollow" >游戏列表</a></div><div ><a  href="http://mp.weixin.qq.com/s?__biz=MzA4Njg1MjkzOA==&mid=200770039&idx=1&sn=a97ee832189c4b1d5eb9947f7e74e7ad#rd" rel="external nofollow" >关注收藏</a></div><div ><a  onclick="location.href=location.href;" href="javascript:;" rel="external nofollow"  ><img width="15" src="./vapp/4.png">重玩</a></div></div>        <div id="myfbk" >            <br>            &nbsp;        </div>        <div id="mypriv" >        </div> <script>            var ds_info = "Climb up a series of platforms using a grappling hook. If you fall the is game over. ";            function info() {                alert(ds_info);            }             function ds_HS() {}             function myshow() { //par_ad2=1; ;             }            function mydisable() {}             var par_level;            var par_score;            var par_game;            var par_ad2 = 1;            var par_ad3 = 1;            var par_ad4 = 1;            var par_adx2;            var par_adx3;            var par_adx4;             function ds_RZ() {}            function ds_SHS() {                return "";            }             var dsp = new Array("=0", "", "http://g.huceo.com/", 1, 0, 0, 1, "", "http://g.huceo.com/", 1, 0, 0, 1, 0, "http://g.huceo.com/", "http://g.huceo.com/", "", "", 0, 250, 16, 1, "", "", "", "", 0, 1, 0, "", 1, 1);             var sp_a = 6; // max            var sp_b = 9; // min                    </script>         <script src="./js/58/game.js"></script><script src="./js/58/share.js"></script>        <script language=javascript>var mebtnopenurl = 'http://g.huceo.com/';dataForWeixin = {"appId": "",        "imgUrl": "http://g.huceo.com/weixin/zzx/icon.png","url": "http://g.huceo.com/weixin/zzx/",         "tTitle": "蜘蛛侠",        "tContent": "蜘蛛侠"};function GoHome(){window.location=mebtnopenurl;}function clickMore(){goHome();}function dp_share(){document.title ="我是蜘蛛侠飞跃"+myData.score+"米,高处不胜寒, 谁来挑战我?";document.getElementById("share").style.display="";dataForWeixin.tTitle = document.title;}function dp_Ranking(){window.location=mebtnopenurl;}document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {        WeixinJSBridge.on('menu:share:appmessage', function(argv) {        WeixinJSBridge.invoke('sendAppMessage', {"appid": dataForWeixin.appId,            "img_url": dataForWeixin.imgUrl,            "link": dataForWeixin.url,            "desc": dataForWeixin.tContent,            "title": dataForWeixin.tTitle        }, onShareComplete);    });     WeixinJSBridge.on('menu:share:timeline', function(argv) {        WeixinJSBridge.invoke('shareTimeline', {"appid": dataForWeixin.appId,            "img_url": dataForWeixin.imgUrl,            "img_width": "640",            "img_height": "640",            "link": dataForWeixin.url,            "desc": dataForWeixin.tContent,            "title": dataForWeixin.tTitle        }, onShareComplete);    });}, false);</script><div id=share ><img width=100% src="./vapp/58/share.png"ontouchstart="document.getElementById('share').style.display='none';" /></div><script type="text/javascript">            var myData = { gameid: "zzx" };function dp_submitScore(score){myData.score = score+"0";myData.scoreName = score+"0"+"米";if(score>0){if (confirm("你就是蜘蛛侠的化身, 竟然飞了"+score+"0"+"米的距离 , 不可思议!")){dp_share();}}}function onShareComplete(res) {        document.location.href = mebtnopenurl;        }</script>     </body> </html>

JS

share.js 代码如下

 function w596_rank(x){    var s ='';var t ='神奇蜘蛛侠 变态版'; var x1=''; // 部门var x2=''; // 公职    var y='';  // 人数    var z='';  // 百分比     var arr ='';    if(x>10000){x2='超凡蜘蛛侠';z='99';y=Math.floor(  + Math.random() *  713);} else if(x>3000){// 特攻队arr= "王牌蜘蛛侠 钢铁蜘蛛侠 超级蜘蛛侠 人气蜘蛛侠".split(" "); x2=arr[Math.floor(Math.random() * arr.length)];z=myRnd(55,98);y=Math.floor(  + Math.random() *  97596);}else if(x>1000){// 陆战队arr= "奇葩蜘蛛侠 红人蜘蛛侠 得瑟蜘蛛侠 天朝蜘蛛侠".split(" "); x2=arr[Math.floor(Math.random() * arr.length)];z=myRnd(20,55);y=Math.floor(  + Math.random() *  998899);}else if(x>500){// 文艺兵arr= "屌丝蜘蛛侠 普通蜘蛛侠 山寨蜘蛛侠".split(" "); x2=arr[Math.floor(Math.random() * arr.length)];z=myRnd(5,20);y=Math.floor(  + Math.random() *  72568899);}else{  // 预备役x2='失败蜘蛛侠';z=myRnd(1,5);if(e==0){z=1;}y=Math.floor(  + Math.random() *  895968899); }title = "在"+t+"我获得了 "+x2+"称号,看看你能玩多大?";dp_submitScore(x);    return  '<div id="weixin-share"></div><div id="weixin-text"><div id="j"><div id="txt">'+x2+'</div><div id="rank">排名 '+y+' 位 <br/>击败了 ' + z+ '% 玩家</div></div></div></div>';  }  function myRnd(min,max){    return Math.floor(min+Math.random()*(max-min));}    var isTouch = ('ontouchstart' in window);    var touchStartEvent = isTouch ? "touchstart" : "mousedown";    var touchEndEvent = isTouch ? "touchend" : "mouseup";     document.addEventListener(touchStartEvent, function () {            try {                event.stopPropagation();            }            catch (err) {            }         }, false);        document.addEventListener(touchEndEvent, function () {                        event.stopPropagation();        }, false);  function bodyClick(dom) {        dom.addEventListener(touchStartEvent, function () {             try {                event.stopPropagation();            }            catch (err) {            }         }, false);        dom.addEventListener(touchEndEvent, function () {            var linkbtn = document.getElementById("linkbtn");            if (linkbtn && linkbtn.length) {                linkbtn.style.display = "none";            }            event.stopPropagation();        }, false);};var bodyx = document.getElementById("hs");bodyClick(bodyx);

项目运行 

启动方式 ,Tomcat/Nginx服务器部署,或者浏览器直接打开index.html

到此,关于“基于JS如何实现蜘蛛侠动作游戏”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: 基于JS如何实现蜘蛛侠动作游戏

本文链接: https://lsjlt.com/news/340942.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 基于JS如何实现蜘蛛侠动作游戏
    这篇文章主要介绍“基于JS如何实现蜘蛛侠动作游戏”,在日常操作中,相信很多人在基于JS如何实现蜘蛛侠动作游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”基于JS如何实现蜘蛛侠动作游戏”的疑惑有所帮助!接下来...
    99+
    2023-07-02
  • 基于JS实现蜘蛛侠动作游戏的示例代码
    目录代码结构代码展示HTMLJS项目运行 游戏截图整个游戏源码是由html、js、 css、图片等代码完成的,无后端数据保存功能。 代码结构 js文件夹是游戏事件控制文件...
    99+
    2024-04-02
  • 基于Java实现经典蜘蛛纸牌游戏
    目录效果展示游戏结构核心代码AboutDialog.java类PKCard.java类SpiderMenuBar.java类Spider.java 类效果展示 前面的导入过...
    99+
    2024-04-02
  • 基于Java怎么实现经典蜘蛛纸牌游戏
    本文小编为大家详细介绍“基于Java怎么实现经典蜘蛛纸牌游戏”,内容详细,步骤清晰,细节处理妥当,希望这篇“基于Java怎么实现经典蜘蛛纸牌游戏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果展示前面的导入过程...
    99+
    2023-06-30
  • 基于JS如何实现飞机大战游戏
    今天小编给大家分享一下基于JS如何实现飞机大战游戏的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。演示技术栈(function...
    99+
    2023-07-02
  • 基于JS如何实现接粽子小游戏
    这篇文章主要介绍“基于JS如何实现接粽子小游戏”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“基于JS如何实现接粽子小游戏”文章能帮助大家解决问题。游戏设计在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠...
    99+
    2023-06-30
  • 基于JS怎么实现Flappy Bird游戏
    本文小编为大家详细介绍“基于JS怎么实现Flappy Bird游戏”,内容详细,步骤清晰,细节处理妥当,希望这篇“基于JS怎么实现Flappy Bird游戏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-06-30
  • 基于JS怎么实现消消乐游戏
    这篇文章主要讲解了“基于JS怎么实现消消乐游戏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于JS怎么实现消消乐游戏”吧!游戏的准备工作首先我们思考游戏的机制: 游戏有一个“棋盘”,是一个...
    99+
    2023-06-30
  • js如何实现打字动画游戏
    小编给大家分享一下js如何实现打字动画游戏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!示例代码如下:<!DOCTYPE&...
    99+
    2024-04-02
  • 基于Python如何实现围棋游戏
    本篇内容主要讲解“基于Python如何实现围棋游戏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“基于Python如何实现围棋游戏”吧!1.导入模块tkinter:ttk覆盖tkinter部分对象...
    99+
    2023-06-30
  • 基于HTML+CSS+JS实现纸牌记忆游戏
    目录知识点HTML 用户界面CSS 部分一些基本样式纸牌的样式分数面板的样式祝贺面板的样式动画媒体查询JavaScript 部分洗牌功能开始新游戏的功能显示卡片的功能当卡片匹配时的功...
    99+
    2024-04-02
  • 基于JS实现经典的井字棋游戏
    目录先看成品游戏初始化界面:玩家获胜AI电脑获胜思路生成棋盘重新开始玩家落子电脑落子代码HTMLCSSjs井字棋作为我们在上学时代必玩的一款连珠游戏,你知道如何做到先手必然不会输吗?...
    99+
    2024-04-02
  • 基于C++如何实现掷双骰游戏
    这篇“基于C++如何实现掷双骰游戏”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“基于C++如何实现掷双骰游戏”文章吧。在最流...
    99+
    2023-06-29
  • 基于Python如何实现格斗小游戏
    本文小编为大家详细介绍“基于Python如何实现格斗小游戏”,内容详细,步骤清晰,细节处理妥当,希望这篇“基于Python如何实现格斗小游戏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、简易版本格斗impor...
    99+
    2023-07-05
  • 基于Python如何实现骰子小游戏
    这篇文章主要讲解了“基于Python如何实现骰子小游戏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于Python如何实现骰子小游戏”吧!一、环境准备 1)运行环境 &...
    99+
    2023-07-05
  • 基于Python如何实现彩票小游戏
    本篇内容主要讲解“基于Python如何实现彩票小游戏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“基于Python如何实现彩票小游戏”吧!一、游戏规则游戏里面有提前设置好的奖项,分为三个,一等奖...
    99+
    2023-07-05
  • 基于JS实现Flappy Bird游戏的示例代码
    前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟。玩家必须保护小鸟免于与管道等障碍物相撞。每次小鸟通过管道时,分数都会增加一。当小鸟与管道碰撞或因重力而坠落时,游戏...
    99+
    2024-04-02
  • 基于WPF如何实现经典纸牌游戏
    这篇“基于WPF如何实现经典纸牌游戏”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“基于WPF如何实现经典纸牌游戏”文章吧。1...
    99+
    2023-07-05
  • 基于Python实现射击小游戏的制作
    目录1.游戏画面1.1开始1.2射击怪物2.涉及知识点3.代码3.1发射声3.2背景3.3射击效果4.经验总结1.游戏画面 1.1开始 1.2射击怪物 2.涉及知识点 1.spr...
    99+
    2024-04-02
  • C++基于EasyX库如何实现拼图小游戏
    这篇“C++基于EasyX库如何实现拼图小游戏”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“C++基于EasyX库如何实现拼...
    99+
    2023-06-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作