基于JS实现蜘蛛侠动作游戏的示例代码

2024-09-29 14:22:36

代码结构

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"
    style="-webkit-user-select: none; overflow: hidden; background-color: rgb(0, 0, 0);">
	<div class="lis">
		<div style="float: left;width:33%;"><a style="border-bottom: 3px solid #fd6766;" href="http://g.huceo.com" rel="external nofollow" >游戏列表</a></div>
		<div style="float: left;width:34%;"><a style="border-bottom: 3px solid #04fece;" href="http://mp.weixin.qq.com/s?__biz=MzA4Njg1MjkzOA==&mid=200770039&idx=1&sn=a97ee832189c4b1d5eb9947f7e74e7ad#rd" rel="external nofollow" >关注收藏</a></div>
		<div style="float: left;width:33%;"><a style="width:100%;margin:0;border-bottom: 3px solid #fdcd01;" onclick="location.href=location.href;" href="javascript:;" rel="external nofollow"  ><img width="15" src="./vapp/4.png">重玩</a></div>
	</div>
        <div id="myfbk" style="position:absolute;top:-1000px;left:-1000px;background-color:#000000;visibility:hidden;z-Index:100000;border:1px solid #000;-webkit-border-radius:6px;">
            <br>
            &nbsp;
        </div>
        <div id="mypriv" style="position: absolute; top: 453px; left: 1081.375px; font-size: 14px; font-family: Arial; color: rgb(175, 175, 175); z-index: 1000003;">
        </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 style="display: none">
			<img width=100% src="./vapp/58/share.png"
				style="position: fixed; z-index: 9999; top: 0; left: 0; display: "
				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实现蜘蛛侠动作游戏的示例代码的详细内容，更多关于JS蜘蛛侠游戏的资料请关注我们其它相关文章！

基于JavaScript制作一个骰子游戏

目录知识点 HTML 部分 CSS 部分 JavaScript 部分总结游戏可以通过这个链接进入完整源码我已经放在GitHub上了这节实验我们将使用 HTML.CSS 和 JavaScript 构建一个骰子游戏.设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏. 知识点 :hover 选择器 querySelector() 方法 setAttribute() 方法骰子 1-6 点的图片都放在这里了,大家可以将这些图片保存在本地的文件夹中然后用相对地址引用,或者也可
js实现简单拼图小游戏

本文实例为大家分享了js实现简单拼图小游戏的具体代码,供大家参考,具体内容如下游戏很简单,拼拼图,鼠标拖动一块去和另一块互换.语言是HTML+js,注释写的有不明白的可以留言问一下. 截图代码区 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/
js实现连连看游戏

本文实例为大家分享了js实现连连看游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0
js实现简单翻牌小游戏

本文实例为大家分享了js实现简单翻牌小游戏的具体代码,供大家参考,具体内容如下 1.简介非常简单的一个网络消消乐翻牌小游戏的实现,代码量较少,不过遇到的bug和自行开发的步骤十分有纪念意义. 2.核心代码块生成随机数列,确定图片随机分布 function getImgIndex(is){ var index = parseInt(Math.random()*8)+1; if(is[index] < 2){ is[index]++;
JavaScript实现打地鼠游戏

本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下游戏说明: 点击"开始游戏"按钮,在图中随机产生老鼠,老鼠消失前单击老鼠进行击打,打中一次即可获得100的积分,没有打中老鼠,扣取100积分 css模块 <style> #div0{ text-align: center; width: 1360px; height: 600px; margin: 60px auto; background-image: url("imag
基于JS实现蜘蛛侠动作游戏的示例代码

目录代码结构代码展示 HTML JS 项目运行游戏截图整个游戏源码是由html.js. css.图片等代码完成的,无后端数据保存功能. 代码结构 js文件夹是游戏事件控制文件 vapp文件夹是游戏图片文件 icon.png 是网页游戏图标 index.html 是游戏主页代码展示 HTML index.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
基于JS实现Flappy Bird游戏的示例代码

前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入完整源码地址实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>
基于JS实现飞机大战游戏的示例代码

目录演示技术栈源码定义敌方战机定义我方战机碰撞检测演示技术栈今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧.你不说话就是同意了.我们开始了. 下图是正则表达式的一些总结大家可以先看看哦 (function() { /** * 1. JavaScript使用正则式的函数 */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 /
基于JS实现弹性漂浮广告的示例代码

目录效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) 2.div初始样式设置 3.获取div可以移动的页面大小 4.定时器控制移动,鼠标移入事件停止移动,鼠标移出继续移动. 5.点击事件点击让div消失 6.完整代码效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) div实现在页面上移动,并判断碰到页面边框反弹,鼠标移入div停止移动,鼠标移出div进行移动,点击div让它从页面消失,定时器控制它的移动. 2.div初始样式设置 //div(广告)获取节点 var
基于C语言实现迷宫游戏的示例代码

目录 C语言迷宫游戏定义地图打印地图方法一打印地图方法二定义起点和终点位置实现读取按键实现小球下向下移动一步总结小球移动规律实现重新打印地图实现连续移动实现小球下向上下左右移动实现小球走到终点就胜利 C语言迷宫游戏这篇文章是给学完并学懂了C语言的分支(选择和循环)结构和二维数组的朋友看的. 要做一个游戏或者程序先要想好有那些要求,以下是我认为一个迷宫必带的要求: 迷宫要先打印出来(要设置墙.空气.小球的起点),是墙就不能,是空气就可以走. 每次输入'w'.'a'.'s'.
基于Vue3实现数字华容道游戏的示例代码

目录前言环境思路实现 GameCnt GameTool GamePass GameTip Menu 最后前言恰逢春之四月,天气忽热忽凉,遇游戏大赛,以笨拙之技,书一篇小文. 游戏规则:存在n*n的格子,需要将它们按数字顺序或图片顺序一一还原即可. 环境主要环境: vue3 version:3.2.4 vite version:2.5.0 vue-router version:4.0.14 注:这个游戏的路由使用的是自动路由插件主要插件: windicss version:3.5.
基于JS实现动态跟随特效的示例代码

目录演示技术栈源码 css部分 js部分演示技术栈这次用到了关于css的一些功能,和jQuery. CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通过 @keyframes 规则,您能够创建动
基于Python实现24点游戏的示例代码

目录 1.前言 2.思路 3.代码 1.前言 24数大家之前玩过没有? 规则:一副扑克牌抽走大王,小王,K,Q,J(有的规则里面会抽走10,本文一律不抽走),之后在牌堆里随机抽取四张牌,将这四张牌加减乘除得到24. 如果再高级一点,还会有根号.阶乘.幂之类的算法,别问为啥不能幂运算,问就是懒,自己看思路自己实现去(bushi. 知识点:随机数,列表,嵌套判断,循环,死循环,都是新手接触的东西. 由于不能进行像根号,阶乘高级的运算,改版之后完全可以了. 话不多说,上思路 2.思路 1.随机生成四个
基于Python实现成语填空游戏的示例代码

目录前言一.环境准备二.代码展示三.效果展示前言成语填空想必大家都是十分熟悉的了,特别是有在上小学的家长肯定都有十分深刻的印象. 在我们的认知里看图猜成语不就是一些小儿科的东西吗? 当然了你也别小看了成语调控小游戏,有的时候知识储备不够,你还真的不一定猜得出来是什么?更重要的是有的时候给你这个提示你都看不懂,那你就拿他没办法.——小学语文必备成语是小学语文非常重要的一个知识点,几乎是逢考必有,作为基础,自然是需要长期的积累,并且需要积累到一定的数量,有了一定的量才能够产生质变,对于
基于JS实现接粽子小游戏的示例代码

目录游戏设计游戏实现添加粽子元素粽子掉落难度选择开始游戏总结端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS 实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,不用担心端午没粽子了. 游戏设计在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠标移动到粽子上并点击,成功接住粽子,得到积分.在设置面板中,可以设置游戏难度,分为简单.很难.超级难三种等级,不同等级的积分也是不同的,玩家可根据自己的手速进行设置.游戏结束后,可看到自己的成绩.实现出来的效果如下(可