|
|
本帖最后由 节操君啊 于 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[ix] = new Array();
for (var j = 0; j < y; j++) {
var olor = getRound(); //获取随机颜色
totalArray[ix][j] = new Array();
totalArray[ix][j]["color"] = olor;
totalArray[ix][j]["col"] = ix;
totalArray[ix][j]["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[totalArray[ix][j]["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[0] : 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[scy][scx];
totalArray[scy][scx] = totalArray[lastscy][lastscx];
totalArray[lastscy][lastscx] = tmpstarc;
document.getElementById("star" + scy + "" + scx).style =
"background:url(" +
colorArray[totalArray[scy][scx]["color"]] +
") no-repeat;background-size:contain";
document.getElementById(
"star" + lastscy + "" + lastscx
).style =
"background:url(" +
colorArray[tmpstarc["color"]] +
") 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[ix]["col"] == item["col"] &&
this[ix]["row"] == item["row"]
) {
return true;
}
}
return false;
};
function checkfive() {
var fibin = new Array();
for (j = 0; j < y; j++) {
var ojo2 = totalArray[2][j];
var ojo0 = totalArray[0][j];
var ojo1 = totalArray[1][j];
var ojo4 = totalArray[4][j];
var ojo3 = totalArray[3][j];
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[ix][0];
var pip1 = totalArray[ix][1];
var pip2 = totalArray[ix][2];
var pip3 = totalArray[ix][3];
var pip4 = totalArray[ix][4];
var pip5 = totalArray[ix][5];
var pip6 = totalArray[ix][6];
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[j])) {
sameArray.push(fibin[j]);
}
}
}
}
//移除相同的方块
function removeSameColorStars() {
//相同颜色的方块是否大于1
var length = sameArray.length;
if (length > 1) {
for (var k = 0; k < length; k++) {
var simpleStar = sameArray[k];
if (simpleStar) {
var col = simpleStar["col"];
var row = simpleStar["row"];
var olor = simpleStar["color"];
countmm[olor] = countmm[olor] + 1;
console.log(countmm[olor]);
totalArray[col].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[ix] = new Array();
if (totalArray[ix][j] == null) {
LtotalArray.splice(ix, 1, null);
} else {
LtotalArray[ix]["color"] = totalArray[ix][j]["color"];
LtotalArray[ix]["col"] = totalArray[ix][j]["col"];
LtotalArray[ix]["row"] = totalArray[ix][j]["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[ix];
//找到空方块
if (pSprite0 == null) {
var k = ix + 1;
while (k < length) {
var upSprite = sprites[k];
if (upSprite != null) {
upSprite["col"] = ix;
upSprite["row"] = j;
totalArray[ix].splice(j, 1, upSprite);
totalArray[k].splice(j, 1, null);
sprites.splice(ix, 1, upSprite);
sprites.splice(k, 1, null);
document.getElementById("star" + ix + "" + j).style =
"background:url(" +
colorArray[upSprite["color"]] +
") 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[ix];
if (upSprite == null) {
var upSprite = new Array();
upSprite["col"] = ix;
upSprite["row"] = j;
upSprite["color"] = getRound();
totalArray[ix].splice(j, 1, upSprite);
sprites.splice(ix, 1, upSprite);
console.log(upSprite);
document.getElementById("star" + ix + "" + j).style =
"background:url(" +
colorArray[upSprite["color"]] +
") 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> |
 节操君啊
:大概就是这个代码插件有点问题..插入代码的时候会优先识别保留字然后自动把代码改了，修改办法的话就是：1. 避免代码里出现（对应文本斜体功能）的情况；2. 避免出现缩进导致转义成空格；3. 用url的时候带上引号，不然会套特定的[img]或[url]功能
 美丽女高中生
:谢谢大佬
-
|
GameMale
金币
血液
旅程
追随
知识
咒术
堕落
灵魂
主题
回帖
日志
记录
好友
积分
不知道为什么会失败，把代码保存到本地后缀html可以正常打开，按这个运行代码就是不行。<!DOCTYPE html>
提升卡
变色卡
千斤顶
