【试试看如何在网页里面运行网页游戏】

美丽女高中生 发表于 2022-9-20 17:06:08

本帖最后由美丽女高中生于 2022-9-20 19:58 编辑

https://files.catbox.moe/ap5zve.jpeg不知道为什么会失败，把代码保存到本地后缀html可以正常打开，按这个运行代码就是不行。<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=0.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta content="telephone=no" name="format-detection" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<script type="text/javascript">

window.onload=function(){

var a="https://files.catbox.moe/jzuxat.png";
var b="https://files.catbox.moe/jzsnod.png";
var c="https://files.catbox.moe/8x00ff.png";
var d="https://files.catbox.moe/ugv6oy.png";
var e="https://files.catbox.moe/7vwef7.png";
var f="https://files.catbox.moe/5nu0zb.png";
var colorArray=new Array(a,b,c,d,e,f); //颜色数组
var x=5; //x轴行数
var y=7; //y轴行数
var totalArray=new Array(); //方块总数
var sameArray=new Array(); //消灭方块数组
var countmm=new Array(); //消灭方块颜色数组
var niu;//每个方块
var timer=null;
var four=0;
var five=0;
var count=0;
var dixue=500;
var wxue=500;

//初始化方块数组
for(var i=0;i<x;i++){
totalArray=new Array();
for(var j=0;j<y;j++){
var olor=getRound(); //获取随机颜色
totalArray=new Array();
totalArray['color']=olor;
totalArray['col']=i;
totalArray['row']=j;

}
}
countmm['0']=0;
countmm['1']=0;
countmm['2']=0;
countmm['3']=0;
countmm['4']=0;
countmm['5']=0;
starTable(); //初始化方块页面
begano();

//初始化方块页面
function starTable(){
for(var i=0;i<x;i++){
for(var j=0;j<y;j++){
niu=document.getElementById("star"+i+j);
niu.style='background:url('+colorArray['color']]+') no-repeat;background-size:contain';
}
}
var processbar = document.getElementById("jy");
processbar.style.width = '100%';
processbar = document.getElementById("ly");
processbar.style.width = '100%';

}
//触发点击事件
function begano(){ if (timer==null){
timer==1;
var bbegan= 'ontouchstart' in document ? 'touchstart' : 'mousedown' ;
var begancl=function (){
var move = 'ontouchmove' in document ? 'touchmove' : 'mousemove' ;
var lastscx=null;
var lastscy=null;

var movecl=function (e){
var ev = 'ontouchmove' in document ? e.touches : e ;
var scx = (ev.pageX-document.getElementById('content').offsetLeft)/document.getElementById('content').offsetWidth ;
var scy = (ev.pageY-document.getElementById('content').offsetTop)/document.getElementById('content').offsetHeight ; // 这样就能在PC 和手机上都拿到坐标值了
if (scx<0.143){scx=0;}else if (scx<0.286){scx=1;}else if (scx<0.429){scx=2;}else if (scx<0.572){scx=3;}else if (scx<0.714){scx=4;}else if (scx<0.857){scx=5;}else {scx=6;}
if (scy<0.62){scy=0;}else if (scy<0.71){scy=1;}else if (scy<0.8){scy=2;}else if (scy<0.89){scy=3;}else {scy=4;}

if (lastscx==null){
lastscx=scx;
lastscy=scy;
}else if(lastscx&&lastscx==scx&&lastscy==scy){}else{
var tmpstarc=new Array();
tmpstarc=totalArray;
totalArray=totalArray;
totalArray=tmpstarc;
document.getElementById('star'+scy+''+scx).style='background:url('+colorArray['color']]+') no-repeat;background-size:contain';
document.getElementById('star'+lastscy+''+lastscx).style='background:url('+colorArray]+') no-repeat;background-size:contain';

lastscx=scx;
lastscy=scy;
}

}
var moveend = 'ontouchend' in document ? 'touchend' : 'mouseup' ;
var endcl=function (){
var bbegan= 'ontouchstart' in document ? 'touchstart' : 'mousedown' ;
var move = 'ontouchmove' in document ? 'touchmove' : 'mousemove' ;
document.removeEventListener(move, movecl,false);
document.removeEventListener(bbegan, begancl,false);
document.removeEventListener(moveend, endcl,false);
movecl=null;console.log('jj');
onTouchesBegan();
}
document.addEventListener(moveend,endcl,false);
document.addEventListener(move,movecl,false);
document.addEventListener(touchcancel,endcl,false);
}
document.addEventListener(bbegan,begancl,false);}else{setTimeout(begano(),1200);}
}

//消除所有东西
function onTouchesBegan(){
checkfive();

removeSameColorStars(); //移除相同的方块
}

//获取随机颜色
function getRound(){
var num=Math.round(Math.random()*(colorArray.length-1));
console.log('随机数'+num)
return num;
}

//检查数组包含元素
Array.prototype.contains = function(item){
for(i=0;i<this.length;i++){
if(this['col']==item['col'] && this['row']==item['row']){
return true;
}
}
return false;
}

function checkfive(){
var fibin=new Array();
for (j=0;j<y;j++){
var ojo2=totalArray;
var ojo0=totalArray;
var ojo1=totalArray;
var ojo4=totalArray;
var ojo3=totalArray;
if(ojo0['color']==ojo1['color']&&ojo1['color']==ojo2['color']&&ojo2['color']==ojo3['color']){four++;};
if(ojo4['color']==ojo1['color']&&ojo1['color']==ojo2['color']&&ojo2['color']==ojo3['color']){four++;};
if(ojo0['color']==ojo1['color']&&ojo1['color']==ojo2['color']&&ojo2['color']==ojo3['color']&&ojo2['color']==ojo4['color']){five++;};
if(ojo0['color']==ojo1['color']&&ojo2['color']==ojo1['color']){fibin.push(ojo0);fibin.push(ojo1);fibin.push(ojo2);};
if(ojo3['color']==ojo1['color']&&ojo2['color']==ojo1['color']){fibin.push(ojo3);fibin.push(ojo1);fibin.push(ojo2);};
if(ojo4['color']==ojo3['color']&&ojo2['color']==ojo3['color']){fibin.push(ojo3);fibin.push(ojo4);fibin.push(ojo2);};
}
for (i=0;i<x;i++){
var pip0=totalArray;
var pip1=totalArray;
var pip2=totalArray;
var pip3=totalArray;
var pip4=totalArray;
var pip5=totalArray;
var pip6=totalArray;
if(pip0['color']==pip1['color']&&pip2['color']==pip1['color']){fibin.push(pip0);fibin.push(pip1);fibin.push(pip2);
if(pip0['color']==pip3['color']){four++;if(pip4['color']==pip1['color']){five++;}}};
if(pip3['color']==pip1['color']&&pip2['color']==pip1['color']){fibin.push(pip3);fibin.push(pip1);fibin.push(pip2);
if(pip1['color']==pip4['color']){four++;if(pip5['color']==pip1['color']){five++;}}};
if(pip4['color']==pip3['color']&&pip2['color']==pip3['color']){fibin.push(pip3);fibin.push(pip4);fibin.push(pip2);
if(pip5['color']==pip3['color']){four++;if(pip6['color']==pip2['color']){five++;}}};
if(pip3['color']==pip4['color']&&pip5['color']==pip3['color']){fibin.push(pip3);fibin.push(pip4);fibin.push(pip5);
if(pip6['color']==pip3['color']){four++;}};
if(pip4['color']==pip5['color']&&pip5['color']==pip6['color']){fibin.push(pip4);fibin.push(pip5);fibin.push(pip6);};
}
//统计相同的部分
if(fibin.length>0){
for(var j=0;j<fibin.length;j++){
if(!sameArray.contains(fibin)){
sameArray.push(fibin);
}}}
}

//移除相同的方块
function removeSameColorStars(){
//相同颜色的方块是否大于1
var length=sameArray.length;
if(length>1){
for(var k=0;k<length;k++){
var simpleStar=sameArray;
if(simpleStar){
var col=simpleStar['col'];
var row=simpleStar['row'];
var olor=simpleStar['color'];
countmm=countmm+1;
console.log(countmm);
totalArray.splice(row,1,null);
document.getElementById('star'+col+''+row).style.background='none';
count++;
}
}

dixue=dixue-3*length-8*four-15*five;
var processbar = document.getElementById("jy");
processbar.style.width = dixue/500/0.01+'%';
if(dixue<0){ //成功进入下一关暂时只是重来
document.getElementById('greatconfig').style='position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(216,26,255,0.78)';

}
}
sameArray=[];
fallStar();
}

//转换数组获取第j列的数组
function getLtotalArray(j){
var LtotalArray=new Array();
for(var i=0;i<x;i++){
LtotalArray=new Array();
if(totalArray==null){
LtotalArray.splice(i,1,null);
}else{
LtotalArray['color']=totalArray['color'];
LtotalArray['col']=totalArray['col'];
LtotalArray['row']=totalArray['row'];
}
}
return LtotalArray;
}

//方块掉落填充空缺
function fallStar(){
for(var j=0;j<y;j++){
//循环得到每一列的数组
var sprites=getLtotalArray(j);
var length=sprites.length;
for(var i=0;i<length;i++){
var pSprite0=sprites;
//找到空方块
if(pSprite0==null){
var k=i+1;
while(k<length){
var upSprite=sprites;
if(upSprite!=null){
upSprite['col']=i;
upSprite['row']=j;
totalArray.splice(j,1,upSprite);
totalArray.splice(j,1,null);
sprites.splice(i,1,upSprite);
sprites.splice(k,1,null);
document.getElementById('star'+i+''+j).style='background:url('+colorArray]+') no-repeat;background-size:contain';
document.getElementById('star'+k+''+j).style.background='none';
k=length;
}
k++;
}
}
}
}
//补空
for(var j=0;j<y;j++){
var sprites=getLtotalArray(j);
var length=sprites.length;
for(var i=0;i<x;i++){
var upSprite=sprites;
if(upSprite==null){
var upSprite=new Array();
upSprite['col']=i;
upSprite['row']=j;upSprite['color']=getRound();
totalArray.splice(j,1,upSprite);
sprites.splice(i,1,upSprite);
console.log(upSprite);
document.getElementById('star'+i+''+j).style='background:url('+colorArray]+') no-repeat;background-size:contain;';
}}}
document.getElementById('meessg').innerHTML='相同的有'+count+'个，四连'+four+'个，五连'+five+'个。'+countmm['0']+countmm['1']+countmm['2']+countmm['3']+countmm['4']+countmm['5'];
timer=null;
begano();
}

function deadi(){
document.getElementById('deadconfig').style='position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(216,26,255,0.78);';

}
//超时也算输
setTimeout("deadi()",120000);
var dfsh=setInterval(function(){
wxue=wxue-2;
var pro = document.getElementById("ly");
pro.style.width = wxue/500/0.01+'%';
if (wxue<0){deadi();}
},600);
}
function deadi(){
document.getElementById('deadconfig').style='position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(216,26,255,0.78);';

}
function reee(){window.location.reload();}
</script>

<title>三国转珠大战</title>

<title>puzzle</title>
<style type="text/css">
body {
min-width: 320px;
font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;
color: #fff;
text-shadow:0px 0px 3px #000;
overflow:hidden;outline:none;border:none;
-webkit-text-size-adjust: none ;overflow:hidden; scroll:no;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}:focus{outline:none;}
#content{top:0%;left:0%;border:none;position:absolute;width:480px;height:720px;}
@media all and (orientation:landscape){#content{color:#fff;font-weight:bold;}}
@media screen and (orientation:portrait){#content{top:0%;left:0%;border:none;position:absolute;width:100%;height:100%;}}
#bg{width:100%;height:100%;background:url(https://files.catbox.moe/j76co3.png) no-repeat;background-size:cover;}
#meessg{width:80%;height:20%;top:35%;left:10%%;position:absolute;font-size:16px;}
#ssj{width:10%;height:8%;left:1%;top:3%;position:absolute;}
#jykuang{ width:60%;overflow:hidden;height:2.5%;top:1.5%;left:20%;position:absolute; border-radius:8px;}
#jy{ background:rgb(165,156,255); left:0%;top:0%;position:relative; height:100%; }
#big{width:100%;height:30%;left:0%;top:5%;position:absolute;background:url(https://files.catbox.moe/7ad4s1.png) no-repeat;background-size:contain}
#wjiangkuang{width:50%;height:10%;right:0;top:40.5%;position:absolute;}
#wjiangkuang .star{width:28%;height:100%;border:none;text-align:right;cursor:pointer;}
#lykuang{ width:96%;overflow:hidden;height:1.8%;top:51%;left:2%;position:absolute; border-radius:8px;}
#ly{ background:rgb(39,255,5); left:0%;top:0%;position:relative; height:100%; }
#contenttab{width:100%;height:45%;position:absolute;bottom:2%;left:1%;}
#contenttab #sta1{width:100%;height:20%;position:absolute;top:0;left:0;}
#contenttab #sta2{width:100%;height:20%;position:absolute;top:20%;left:0;}
#contenttab #sta3{width:100%;height:20%;position:absolute;top:40%;left:0;}
#contenttab #sta4{width:100%;height:20%;position:absolute;top:60%;left:0;}
#contenttab #sta5{width:100%;height:20%;position:absolute;top:80%;left:0;}
#contenttab .star{width:12.5%;height:100%;border:none;text-align:center;cursor:pointer;transition: all 500ms ease-out;
-webkit-animation: cssAnimation 500ms ;}
@-webkit-keyframes cssAnimation {from { -webkit-transform:rotate(270deg) scale(1.276) }to { -webkit-transform:rotate(0deg) scale(1)} }
#aginanniu{width:60%;height:15%;right:20%;top:65%;position:absolute;}
</style>

</head>
<body>
<div id="content"><div id="bg"></div>
<text id="meessg"></text>
<img id="ssj" src="https://files.catbox.moe/sbyir0.png">
<div id="jykuang"><div id="jy"></div>
</div><audio autoplay="autoplay" loop="loop">
<source src="https://files.catbox.moe/5qql14.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
<div id="big">
</div>
<div id="wjiangkuang">
<img class="star" src="https://files.catbox.moe/j8goy1.png">
<img class="star" src="https://files.catbox.moe/h7xrva.png">
<img class="star" src="https://files.catbox.moe/lby9vg.png">

</div>
<div id="lykuang"><div id="ly"></div>
</div>
<div id="contenttab">
<div id="sta1">
<button class="star" id="star00" ></button>
<button class="star" id="star01" ></button>
<button class="star" id="star02" ></button>
<button class="star" id="star03" ></button>
<button class="star" id="star04" ></button>
<button class="star" id="star05" ></button>
<button class="star" id="star06" ></button>
</div>
<div id="sta2">
<button class="star" id="star10" ></button>
<button class="star" id="star11" ></button>
<button class="star" id="star12" ></button>
<button class="star" id="star13" ></button>
<button class="star" id="star14" ></button>
<button class="star" id="star15" ></button>
<button class="star" id="star16" ></button>
</div>
<div id="sta3">
<button class="star" id="star20" ></button>
<button class="star" id="star21" ></button>
<button class="star" id="star22" ></button>
<button class="star" id="star23" ></button>
<button class="star" id="star24" ></button>
<button class="star" id="star25" ></button>
<button class="star" id="star26" ></button>
</div>
<div id="sta4">
<button class="star" id="star30" ></button>
<button class="star" id="star31" ></button>
<button class="star" id="star32" ></button>
<button class="star" id="star33" ></button>
<button class="star" id="star34" ></button>
<button class="star" id="star35" ></button>
<button class="star" id="star36" ></button>
</div>
<div id="sta5">
<button class="star" id="star40" ></button>
<button class="star" id="star41" ></button>
<button class="star" id="star42" ></button>
<button class="star" id="star43" ></button>
<button class="star" id="star44" ></button>
<button class="star" id="star45" ></button>
<button class="star" id="star46" ></button>
</div>
</div><div id="deadconfig" style="display:none">
<text style="color:black;font-size:30px;">你已经死了，真是不努力。
明明这么easy。
</text>
<button id="aginanniu" style="background:url(https://files.catbox.moe/5m291h.png) no-repeat;background-size:cover"></button>
</div><div id="greatconfig" style="display:none">
<text style="color:gold;font-size:60px;">好耶，过关了!
</text>
<button id="aginanniu" style="background:url(https://files.catbox.moe/5m291h.png) no-repeat;background-size:cover"></button>
</div>
</div>
</body>
</html>

节操君啊 发表于 2022-9-25 11:58:57

本帖最后由节操君啊于 2022-9-25 13:19 编辑

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=0.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />

<script type="text/javascript">
window.onload = function () {
var a = "https://files.catbox.moe/jzuxat.png";
var b = "https://files.catbox.moe/jzsnod.png";
var c = "https://files.catbox.moe/8x00ff.png";
var d = "https://files.catbox.moe/ugv6oy.png";
var e = "https://files.catbox.moe/7vwef7.png";
var f = "https://files.catbox.moe/5nu0zb.png";
var colorArray = new Array(a, b, c, d, e, f); //颜色数组
var x = 5; //x轴行数
var y = 7; //y轴行数
var totalArray = new Array(); //方块总数
var sameArray = new Array(); //消灭方块数组
var countmm = new Array(); //消灭方块颜色数组
var niu; //每个方块
var timer = null;
var four = 0;
var five = 0;
var count = 0;
var dixue = 500;
var wxue = 500;

//初始化方块数组
for (var ix = 0; ix < x; ix++) {
totalArray = new Array();
for (var j = 0; j < y; j++) {
var olor = getRound(); //获取随机颜色
totalArray = new Array();
totalArray["color"] = olor;
totalArray["col"] = ix;
totalArray["row"] = j;
}
}
countmm["0"] = 0;
countmm["1"] = 0;
countmm["2"] = 0;
countmm["3"] = 0;
countmm["4"] = 0;
countmm["5"] = 0;
starTable(); //初始化方块页面
begano();

//初始化方块页面
function starTable() {
for (var ix = 0; ix < x; ix++) {
for (var j = 0; j < y; j++) {
niu = document.getElementById("star" + ix + j);
niu.style =
"background:url(" +
colorArray["color"]] +
") no-repeat;background-size:contain";
}
}
var processbar = document.getElementById("jy");
processbar.style.width = "100%";
processbar = document.getElementById("ly");
processbar.style.width = "100%";
}
//触发点击事件
function begano() {
if (timer == null) {
timer == 1;
var bbegan =
"ontouchstart" in document ? "touchstart" : "mousedown";
var begancl = function () {
var move = "ontouchmove" in document ? "touchmove" : "mousemove";
var lastscx = null;
var lastscy = null;

var movecl = function (e) {
var ev = "ontouchmove" in document ? e.touches : e;
var scx =
(ev.pageX - document.getElementById("content").offsetLeft) /
document.getElementById("content").offsetWidth;
var scy =
(ev.pageY - document.getElementById("content").offsetTop) /
document.getElementById("content").offsetHeight; // 这样就能在PC 和手机上都拿到坐标值了
if (scx < 0.143) {
scx = 0;
} else if (scx < 0.286) {
scx = 1;
} else if (scx < 0.429) {
scx = 2;
} else if (scx < 0.572) {
scx = 3;
} else if (scx < 0.714) {
scx = 4;
} else if (scx < 0.857) {
scx = 5;
} else {
scx = 6;
}
if (scy < 0.62) {
scy = 0;
} else if (scy < 0.71) {
scy = 1;
} else if (scy < 0.8) {
scy = 2;
} else if (scy < 0.89) {
scy = 3;
} else {
scy = 4;
}

if (lastscx == null) {
lastscx = scx;
lastscy = scy;
} else if (lastscx && lastscx == scx && lastscy == scy) {
} else {
var tmpstarc = new Array();
tmpstarc = totalArray;
totalArray = totalArray;
totalArray = tmpstarc;
document.getElementById("star" + scy + "" + scx).style =
"background:url(" +
colorArray["color"]] +
") no-repeat;background-size:contain";
document.getElementById(
"star" + lastscy + "" + lastscx
).style =
"background:url(" +
colorArray] +
") no-repeat;background-size:contain";

lastscx = scx;
lastscy = scy;
}
};
var moveend = "ontouchend" in document ? "touchend" : "mouseup";
var endcl = function () {
var bbegan =
"ontouchstart" in document ? "touchstart" : "mousedown";
var move =
"ontouchmove" in document ? "touchmove" : "mousemove";
document.removeEventListener(move, movecl, false);
document.removeEventListener(bbegan, begancl, false);
document.removeEventListener(moveend, endcl, false);
movecl = null;
console.log("jj");
onTouchesBegan();
};
document.addEventListener(moveend, endcl, false);
document.addEventListener(move, movecl, false);
// document.addEventListener(touchcancel, endcl, false);
};
document.addEventListener(bbegan, begancl, false);
} else {
setTimeout(begano(), 1200);
}
}

//消除所有东西
function onTouchesBegan() {
checkfive();

removeSameColorStars(); //移除相同的方块
}

//获取随机颜色
function getRound() {
var num = Math.round(Math.random() * (colorArray.length - 1));
console.log("随机数" + num);
return num;
}

//检查数组包含元素
Array.prototype.contains = function (item) {
for (ix = 0; ix < this.length; ix++) {
if (
this["col"] == item["col"] &&
this["row"] == item["row"]
) {
return true;
}
}
return false;
};

function checkfive() {
var fibin = new Array();
for (j = 0; j < y; j++) {
var ojo2 = totalArray;
var ojo0 = totalArray;
var ojo1 = totalArray;
var ojo4 = totalArray;
var ojo3 = totalArray;
if (
ojo0["color"] == ojo1["color"] &&
ojo1["color"] == ojo2["color"] &&
ojo2["color"] == ojo3["color"]
) {
four++;
}
if (
ojo4["color"] == ojo1["color"] &&
ojo1["color"] == ojo2["color"] &&
ojo2["color"] == ojo3["color"]
) {
four++;
}
if (
ojo0["color"] == ojo1["color"] &&
ojo1["color"] == ojo2["color"] &&
ojo2["color"] == ojo3["color"] &&
ojo2["color"] == ojo4["color"]
) {
five++;
}
if (
ojo0["color"] == ojo1["color"] &&
ojo2["color"] == ojo1["color"]
) {
fibin.push(ojo0);
fibin.push(ojo1);
fibin.push(ojo2);
}
if (
ojo3["color"] == ojo1["color"] &&
ojo2["color"] == ojo1["color"]
) {
fibin.push(ojo3);
fibin.push(ojo1);
fibin.push(ojo2);
}
if (
ojo4["color"] == ojo3["color"] &&
ojo2["color"] == ojo3["color"]
) {
fibin.push(ojo3);
fibin.push(ojo4);
fibin.push(ojo2);
}
}
for (ix = 0; ix < x; ix++) {
var pip0 = totalArray;
var pip1 = totalArray;
var pip2 = totalArray;
var pip3 = totalArray;
var pip4 = totalArray;
var pip5 = totalArray;
var pip6 = totalArray;
if (
pip0["color"] == pip1["color"] &&
pip2["color"] == pip1["color"]
) {
fibin.push(pip0);
fibin.push(pip1);
fibin.push(pip2);
if (pip0["color"] == pip3["color"]) {
four++;
if (pip4["color"] == pip1["color"]) {
five++;
}
}
}
if (
pip3["color"] == pip1["color"] &&
pip2["color"] == pip1["color"]
) {
fibin.push(pip3);
fibin.push(pip1);
fibin.push(pip2);
if (pip1["color"] == pip4["color"]) {
four++;
if (pip5["color"] == pip1["color"]) {
five++;
}
}
}
if (
pip4["color"] == pip3["color"] &&
pip2["color"] == pip3["color"]
) {
fibin.push(pip3);
fibin.push(pip4);
fibin.push(pip2);
if (pip5["color"] == pip3["color"]) {
four++;
if (pip6["color"] == pip2["color"]) {
five++;
}
}
}
if (
pip3["color"] == pip4["color"] &&
pip5["color"] == pip3["color"]
) {
fibin.push(pip3);
fibin.push(pip4);
fibin.push(pip5);
if (pip6["color"] == pip3["color"]) {
four++;
}
}
if (
pip4["color"] == pip5["color"] &&
pip5["color"] == pip6["color"]
) {
fibin.push(pip4);
fibin.push(pip5);
fibin.push(pip6);
}
}
//统计相同的部分
if (fibin.length > 0) {
for (var j = 0; j < fibin.length; j++) {
if (!sameArray.contains(fibin)) {
sameArray.push(fibin);
}
}
}
}

//移除相同的方块
function removeSameColorStars() {
//相同颜色的方块是否大于1
var length = sameArray.length;
if (length > 1) {
for (var k = 0; k < length; k++) {
var simpleStar = sameArray;
if (simpleStar) {
var col = simpleStar["col"];
var row = simpleStar["row"];
var olor = simpleStar["color"];
countmm = countmm + 1;
console.log(countmm);
totalArray.splice(row, 1, null);
document.getElementById(
"star" + col + "" + row
).style.background = "none";
count++;
}
}

dixue = dixue - 3 * length - 8 * four - 15 * five;
var processbar = document.getElementById("jy");
processbar.style.width = dixue / 500 / 0.01 + "%";
if (dixue < 0) {
//成功进入下一关暂时只是重来
document.getElementById("greatconfig").style =
"position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(216,26,255,0.78)";
}
}
sameArray = [];
fallStar();
}

//转换数组获取第j列的数组
function getLtotalArray(j) {
var LtotalArray = new Array();
for (var ix = 0; ix < x; ix++) {
LtotalArray = new Array();
if (totalArray == null) {
LtotalArray.splice(ix, 1, null);
} else {
LtotalArray["color"] = totalArray["color"];
LtotalArray["col"] = totalArray["col"];
LtotalArray["row"] = totalArray["row"];
}
}
return LtotalArray;
}

//方块掉落填充空缺
function fallStar() {
for (var j = 0; j < y; j++) {
//循环得到每一列的数组
var sprites = getLtotalArray(j);
var length = sprites.length;
for (var ix = 0; ix < length; ix++) {
var pSprite0 = sprites;
//找到空方块
if (pSprite0 == null) {
var k = ix + 1;
while (k < length) {
var upSprite = sprites;
if (upSprite != null) {
upSprite["col"] = ix;
upSprite["row"] = j;
totalArray.splice(j, 1, upSprite);
totalArray.splice(j, 1, null);
sprites.splice(ix, 1, upSprite);
sprites.splice(k, 1, null);
document.getElementById("star" + ix + "" + j).style =
"background:url(" +
colorArray] +
") no-repeat;background-size:contain";
document.getElementById(
"star" + k + "" + j
).style.background = "none";
k = length;
}
k++;
}
}
}
}
//补空
for (var j = 0; j < y; j++) {
var sprites = getLtotalArray(j);
var length = sprites.length;
for (var ix = 0; ix < x; ix++) {
var upSprite = sprites;
if (upSprite == null) {
var upSprite = new Array();
upSprite["col"] = ix;
upSprite["row"] = j;
upSprite["color"] = getRound();
totalArray.splice(j, 1, upSprite);
sprites.splice(ix, 1, upSprite);
console.log(upSprite);
document.getElementById("star" + ix + "" + j).style =
"background:url(" +
colorArray] +
") no-repeat;background-size:contain;";
}
}
}
document.getElementById("meessg").innerHTML =
"相同的有" +
count +
"个，四连" +
four +
"个，五连" +
five +
"个。" +
countmm["0"] +
countmm["1"] +
countmm["2"] +
countmm["3"] +
countmm["4"] +
countmm["5"];
timer = null;
begano();
}

function deadi() {
document.getElementById("deadconfig").style =
"position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(216,26,255,0.78);";
}
//超时也算输
setTimeout("deadi()", 120000);
var dfsh = setInterval(function () {
wxue = wxue - 2;
var pro = document.getElementById("ly");
pro.style.width = wxue / 500 / 0.01 + "%";
if (wxue < 0) {
deadi();
}
}, 600);
};
function deadi() {
document.getElementById("deadconfig").style =
"position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(216,26,255,0.78);";
}
function reee() {
window.location.reload();
}
</script>
<title>三国转珠大战</title>
<title>puzzle</title>
<style type="text/css">
body {
min-width: 320px;
font-family: "microsoft yahei", Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-shadow: 0px 0px 3px #000;
overflow: hidden;
outline: none;
border: none;
-webkit-text-size-adjust: none;
overflow: hidden;
scroll: no;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}

:focus {
outline: none;
}

#content {
top: 0%;
left: 0%;
border: none;
position: absolute;
width: 480px;
height: 720px;
}

@media all and (orientation: landscape) {
#content {
color: #fff;
font-weight: bold;
}
}

@media screen and (orientation: portrait) {
#content {
top: 0%;
left: 0%;
border: none;
position: absolute;
width: 100%;
height: 100%;
}
}

#bg {
width: 100%;
height: 100%;
background: url('https://files.catbox.moe/j76co3.png') no-repeat;
background-size: cover;
}

#meessg {
width: 80%;
height: 20%;
top: 35%;
left: 10%%;
position: absolute;
font-size: 16px;
}

#ssj {
width: 10%;
height: 8%;
left: 1%;
top: 3%;
position: absolute;
}

#jykuang {
width: 60%;
overflow: hidden;
height: 2.5%;
top: 1.5%;
left: 20%;
position: absolute;
border-radius: 8px;
}

#jy {
background: rgb(165, 156, 255);
left: 0%;
top: 0%;
position: relative;
height: 100%;
}

#big {
width: 100%;
height: 30%;
left: 0%;
top: 5%;
position: absolute;
background: url('https://files.catbox.moe/7ad4s1.png') no-repeat;
background-size: contain;
}

#wjiangkuang {
width: 50%;
height: 10%;
right: 0;
top: 40.5%;
position: absolute;
}

#wjiangkuang .star {
width: 28%;
height: 100%;
border: none;
text-align: right;
cursor: pointer;
}

#lykuang {
width: 96%;
overflow: hidden;
height: 1.8%;
top: 51%;
left: 2%;
position: absolute;
border-radius: 8px;
}

#ly {
background: rgb(39, 255, 5);
left: 0%;
top: 0%;
position: relative;
height: 100%;
}

#contenttab {
width: 100%;
height: 45%;
position: absolute;
bottom: 2%;
left: 1%;
}

#contenttab #sta1 {
width: 100%;
height: 20%;
position: absolute;
top: 0;
left: 0;
}

#contenttab #sta2 {
width: 100%;
height: 20%;
position: absolute;
top: 20%;
left: 0;
}

#contenttab #sta3 {
width: 100%;
height: 20%;
position: absolute;
top: 40%;
left: 0;
}

#contenttab #sta4 {
width: 100%;
height: 20%;
position: absolute;
top: 60%;
left: 0;
}

#contenttab #sta5 {
width: 100%;
height: 20%;
position: absolute;
top: 80%;
left: 0;
}

#contenttab .star {
width: 12.5%;
height: 100%;
border: none;
text-align: center;
cursor: pointer;
transition: all 500ms ease-out;
-webkit-animation: cssAnimation 500ms;
}

@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(270deg) scale(1.276);
}

to {
-webkit-transform: rotate(0deg) scale(1);
}
}

#aginanniu {
width: 60%;
height: 15%;
right: 20%;
top: 65%;
position: absolute;
}
</style>
</head>

<body>
<div id="content">
<div id="bg"></div>

<text id="meessg"></text>
<img id="ssj" src="https://files.catbox.moe/sbyir0.png" />
<div id="jykuang">
<div id="jy"></div>
</div>
<audio autoplay="autoplay" loop="loop">

<source src="https://files.catbox.moe/5qql14.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
<div id="big"></div>
<div id="wjiangkuang">
<img class="star" src="https://files.catbox.moe/j8goy1.png" />
<img class="star" src="https://files.catbox.moe/h7xrva.png" />
<img class="star" src="https://files.catbox.moe/lby9vg.png" />
</div>
<div id="lykuang">
<div id="ly"></div>
</div>
<div id="contenttab">
<div id="sta1">
<button class="star" id="star00"></button>
<button class="star" id="star01"></button>
<button class="star" id="star02"></button>
<button class="star" id="star03"></button>
<button class="star" id="star04"></button>
<button class="star" id="star05"></button>
<button class="star" id="star06"></button>
</div>
<div id="sta2">
<button class="star" id="star10"></button>
<button class="star" id="star11"></button>
<button class="star" id="star12"></button>
<button class="star" id="star13"></button>
<button class="star" id="star14"></button>
<button class="star" id="star15"></button>
<button class="star" id="star16"></button>
</div>
<div id="sta3">
<button class="star" id="star20"></button>
<button class="star" id="star21"></button>
<button class="star" id="star22"></button>
<button class="star" id="star23"></button>
<button class="star" id="star24"></button>
<button class="star" id="star25"></button>
<button class="star" id="star26"></button>
</div>
<div id="sta4">
<button class="star" id="star30"></button>
<button class="star" id="star31"></button>
<button class="star" id="star32"></button>
<button class="star" id="star33"></button>
<button class="star" id="star34"></button>
<button class="star" id="star35"></button>
<button class="star" id="star36"></button>
</div>
<div id="sta5">
<button class="star" id="star40"></button>
<button class="star" id="star41"></button>
<button class="star" id="star42"></button>
<button class="star" id="star43"></button>
<button class="star" id="star44"></button>
<button class="star" id="star45"></button>
<button class="star" id="star46"></button>
</div>
</div>
<div id="deadconfig" style="display: none">
<text style="color: black; font-size: 30px">你已经死了，真是不努力。明明这么easy。
</text>
<button id="aginanniu" style="
background: url('https://files.catbox.moe/5m291h.png') no-repeat;
background-size: cover;
"></button>
</div>
<div id="greatconfig" style="display: none">
<text style="color: gold; font-size: 60px">好耶，过关了! </text>
<button id="aginanniu" style="
background: url('https://files.catbox.moe/5m291h.png') no-repeat;
background-size: cover;
"></button>
</div>
</div>
</body>
</html>

user0516 发表于 2022-9-20 17:16:30

本帖最后由 user0516 于 2022-9-20 17:18 编辑

我這邊按下運行代碼後好像出問題了，圖片沒出來，我也不知道該怎麼動:L
如果是想要做網頁遊戲，需要讓使用者得到網頁的資料才能跑，目前似乎沒圖片資料
https://img.gamemale.com/album/202209/20/171552g13ebam3pmi1otp5.jpg

JKRA9 发表于 2022-9-20 17:22:01

大妹什么都做不到

芥末沙拉 发表于 2022-9-20 17:24:56

不行耶打开就跟二楼的图片一样，楼主还需优化惹

Burry 发表于 2022-9-20 17:35:55

打开之后情况跟楼上的图一模一样。楼主还需要更多调整。

退入更深的黑夜 发表于 2022-9-20 17:35:58

看样子似乎不行，完全不懂这些

识缘无情 发表于 2022-9-20 17:45:57

本帖最后由识缘无情于 2022-9-20 17:48 编辑

url(../img/zd/'+totalArray['color']+'.png)
如果尝试，至少要把图片地址改到自己的地方，现在指向是论坛的图片地址(当然不存在)

七宝猕猴桃 发表于 2022-9-20 17:46:36

看不懂感觉好厉害的样子

小四郎 发表于 2022-9-20 17:47:27

貌似不行，和2l一样的结果

铅踝发表于 2022-9-20 18:00:36

同2l，希望楼主再优化一下，感觉创意挺好的

虎熊君 发表于 2022-9-20 18:25:40

運行後還是同2樓的狀況可能還需要再修正修正{:6_200:}

cc簗橗 发表于 2022-9-20 18:27:15

不得行，情况都是一样的

zhuovboyan 发表于 2022-9-20 19:11:12

0-0 确实感觉楼主还需要优化呢

somchipter 发表于 2022-9-20 20:51:09

卧槽，居然是三国志puzzle大战

wehina 发表于 2022-9-20 21:24:08

楼主是想在论坛开游戏厅嘛？感觉会不错哦。

yaoihhh 发表于 2022-9-20 21:44:43

控制台提示Invalid left-hand side in assignment，报错定位在论坛里。。。https://www.gamemale.com/source/plugin/runhtml/js/runhtml.js

节操君啊 发表于 2022-9-20 22:33:20

totalArray<i>=new Array();数组的括号写错了吧...

user_login 发表于 2023-1-3 18:33:58

我知道哦~
把变量i换成其他的就好噜，
因为数组的方括号加上i，会被先识别为bbcode字体标签被转换为html的<i>的了

页: [1]

GameMale's Archiver

【试试看如何在网页里面运行网页游戏】