基于JS實(shí)現(xiàn)蜘蛛俠動(dòng)作游戲的示例代碼
更新時(shí)間：2022年06月15日 10:03:57 作者：洛陽泰山
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的蜘蛛俠動(dòng)作游戲，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript游戲開發(fā)有一定的幫助，需要的可以參考一下
整個(gè)游戲源碼是由html、js、 css、圖片等代碼完成的，無后端數(shù)據(jù)保存功能。
代碼結(jié)構(gòu)
js文件夾是游戲事件控制文件
vapp文件夾是游戲圖片文件
icon.png 是網(wǎng)頁游戲圖標(biāo)
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;" rel="external nofollow" >游戲列表</a></div>
<div style="float: left;width:34%;"><a style="border-bottom: 3px solid #04fece;" rel="external nofollow" >關(guān)注收藏</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>
</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+"米,高處不勝寒, 誰來挑戰(zhàn)我?";
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 ='神奇蜘蛛俠 變態(tài)版';
var x1=''; // 部門
var x2=''; // 公職
var y=''; // 人數(shù)
var z=''; // 百分比
var arr ='';
if(x>10000){
x2='超凡蜘蛛俠';
z='99';
y=Math.floor( + Math.random() * 713);
}
else if(x>3000){ // 特攻隊(duì)
arr= "王牌蜘蛛俠 鋼鐵蜘蛛俠 超級(jí)蜘蛛俠 人氣蜘蛛俠".split(" ");
x2=arr[Math.floor(Math.random() * arr.length)];
z=myRnd(55,98);
y=Math.floor( + Math.random() * 97596);
}
else if(x>1000){ // 陸戰(zhàn)隊(duì)
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{ // 預(yù)備役
x2='失敗蜘蛛俠';
z=myRnd(1,5);
if(e==0){z=1;}
y=Math.floor( + Math.random() * 895968899);
}
title = "在"+t+"我獲得了 "+x2+"稱號(hào)，看看你能玩多大?";
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);項(xiàng)目運(yùn)行
啟動(dòng)方式 ，tomcat/nginx 等服務(wù)器部署，或者瀏覽器直接打開index.html
游戲截圖
以上就是基于JS實(shí)現(xiàn)蜘蛛俠動(dòng)作游戲的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于JS蜘蛛俠游戲的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條
本篇文章主要介紹了微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
JS輸出空格的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S輸出空格的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
Ext JS 實(shí)現(xiàn)建議詞模糊動(dòng)態(tài)搜索功能
這篇文章主要介紹了Ext JS 實(shí)現(xiàn)建議詞模糊動(dòng)態(tài)搜索功能,需要的朋友可以參考下2017-05-05
JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù)詳解
這篇文章主要介紹了JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
這篇文章主要介紹了token 機(jī)制和實(shí)現(xiàn)方式的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)token，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了微信小程序仿QQ頭像輪播效果流程分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
本文主要對(duì)html5 canvas的使用進(jìn)行了詳細(xì)的介紹。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)
本文詳細(xì)羅列了如何在javascript獲取網(wǎng)頁各種高寬及位置，內(nèi)容比較全面，有需要的可以參考一下。2016-07-07
本篇文章主要教給大家如何在javascript中動(dòng)態(tài)加載按順序加載運(yùn)行js的方法以及實(shí)現(xiàn)代碼，需要的朋友參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了js中hash和ico的關(guān)聯(lián)分析,以實(shí)例形式分析了location.hash與ico的加載順序關(guān)系,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02