获取错误 - 调试连接已关闭。原因：渲染过程消失了

时间：2017-10-20 19:16:59

标签： javascript jquery

我正在制作游戏，最终它将停止工作。这似乎没有押韵或理由，不确定我是否有内存泄漏或类似的东西？在我插入大规模数组之前，我是从在线托管的json文件中提取的。直到我完成游戏才能在控制台中发出消息。 “调试连接已关闭。原因：渲染过程消失了。”无论是firefox还是chrome都没关系。由于点按了大量的按钮，似乎我没有快速点击，它会运行。

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<style>
#myScore {
    position: fixed;
    right: 5px;
    width: 220px;
    border: 0px solid #555555;
    padding: 10px;
}
#myContainer {
  width: 736px;
  height: 736px;
  position: relative;
  background-image:url(img/board.jpg);
}
#unit1 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: red;
  left: 20;
  top: 10;
}
#unit2 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: red;
  left: 80;
  top: 10;
}
#unit3 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: red;
  left: 120;
  top: 10;
}
#unit4 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: red;
  left: 180;
  top: 10;
}
#unit5 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: blue;
  left: 500;
  top: 20;
}
#unit6 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: blue;
  left: 550;
  top: 20;
}
#unit7 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: blue;
  left: 670;
  top: 20;
}
#unit8 {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: blue;
  left: 720;
  top: 20;
}
#player1 {  background-color: red;}
#player2 {  background-color: blue;}
</style>
</head>
<body>
<div id="myScore"> 
<table align="right" width="100%"><tr><td id="player1">Team 1</td>
<td id="player2">Team 2</td></tr><tr><td id="team1"></td><td id="team2"></td></tr>
</table>
<tr><td>
<p id="1st">1st Dice<br><div id ="dice1"></div><div id ="1stmove"></div></p>
<p id="2nd">2nd Dice<br><div id ="dice2"></div><div id ="2ndmove"></div></p>
</td>
<td><button id="turn" onclick="rollem()">Player 1 Starts</button>
<button id="turn" onclick="lastmove1(unit6)">Unit1 last move</button></td></tr>
<button id="turn" onclick="bumpmove(unit1, '75')">Unit1 bumpmove</button></td></tr>
<button id="turn" onclick="bumpmove(unit2, '75')">Unit2 bumpmove</button></td></tr>
<button id="turn" onclick="bumpmove(unit3, '75')">Unit3 bumpmove</button></td></tr>
<button id="turn" onclick="bumpmove(unit4, '75')">Unit4 bumpmove</button></td></tr>
<br>
<p id="total"></p>
<p id="list"></p>
<p id="change"></p>
<p id="update"></p>
</div>
<div id ="myContainer">
<div id ="unit1"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit1.png" width="20px" height="20px"/></div>
<div id ="unit2"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit2.png" width="20px" height="20px"/></div>
<div id ="unit3"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit3.png" width="20px" height="20px"/></div>
<div id ="unit4"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit4.png" width="20px" height="20px"/></div>
<div id ="unit5"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit5.png" width="20px" height="20px"/></div>
<div id ="unit6"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit6.png" width="20px" height="20px"/></div>
<div id ="unit7"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit7.png" width="20px" height="20px"/></div>
<div id ="unit8"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/unit8.png" width="20px" height="20px"/></div>
</div>
<script>
"use strict";
function bigImg(x) {
    x.style.height = "64px";
    x.style.width = "64px";
}
function normalImg(x) {
    x.style.height = "20px";
    x.style.width = "20px";
}
var turn = "1";
var data = [{"FIELD1":425,"FIELD2":715},
{"FIELD1":425,"FIELD2":680},
{"FIELD1":425,"FIELD2":645},
{"FIELD1":425,"FIELD2":615},
{"FIELD1":425,"FIELD2":580},
{"FIELD1":425,"FIELD2":545},
{"FIELD1":425,"FIELD2":515},
{"FIELD1":425,"FIELD2":480},
{"FIELD1":480,"FIELD2":480},
{"FIELD1":510,"FIELD2":480},
{"FIELD1":545,"FIELD2":480},
{"FIELD1":580,"FIELD2":480},
{"FIELD1":610,"FIELD2":480},
{"FIELD1":645,"FIELD2":480},
{"FIELD1":680,"FIELD2":480},
{"FIELD1":710,"FIELD2":480},
{"FIELD1":710,"FIELD2":380},
{"FIELD1":710,"FIELD2":280},
{"FIELD1":680,"FIELD2":280},
{"FIELD1":645,"FIELD2":280},
{"FIELD1":610,"FIELD2":280},
{"FIELD1":580,"FIELD2":280},
{"FIELD1":545,"FIELD2":280},
{"FIELD1":510,"FIELD2":280},
{"FIELD1":480,"FIELD2":280},
{"FIELD1":450,"FIELD2":260},
{"FIELD1":450,"FIELD2":230},
{"FIELD1":450,"FIELD2":200},
{"FIELD1":450,"FIELD2":160},
{"FIELD1":450,"FIELD2":130},
{"FIELD1":450,"FIELD2":100},
{"FIELD1":450,"FIELD2":60},
{"FIELD1":450,"FIELD2":30},
{"FIELD1":360,"FIELD2":30},
{"FIELD1":260,"FIELD2":30},
{"FIELD1":260,"FIELD2":60},
{"FIELD1":260,"FIELD2":90},
{"FIELD1":260,"FIELD2":120},
{"FIELD1":260,"FIELD2":160},
{"FIELD1":260,"FIELD2":190},
{"FIELD1":260,"FIELD2":220},
{"FIELD1":280,"FIELD2":260},
{"FIELD1":260,"FIELD2":280},
{"FIELD1":230,"FIELD2":280},
{"FIELD1":200,"FIELD2":280},
{"FIELD1":160,"FIELD2":280},
{"FIELD1":130,"FIELD2":280},
{"FIELD1":100,"FIELD2":280},
{"FIELD1":60,"FIELD2":280},
{"FIELD1":20,"FIELD2":280},
{"FIELD1":20,"FIELD2":380},
{"FIELD1":20,"FIELD2":480},
{"FIELD1":50,"FIELD2":460},
{"FIELD1":80,"FIELD2":460},
{"FIELD1":110,"FIELD2":460},
{"FIELD1":160,"FIELD2":460},
{"FIELD1":200,"FIELD2":460},
{"FIELD1":240,"FIELD2":460},
{"FIELD1":250,"FIELD2":460},
{"FIELD1":280,"FIELD2":480},
{"FIELD1":280,"FIELD2":500},
{"FIELD1":280,"FIELD2":540},
{"FIELD1":280,"FIELD2":580},
{"FIELD1":280,"FIELD2":610},
{"FIELD1":280,"FIELD2":640},
{"FIELD1":280,"FIELD2":680},
{"FIELD1":280,"FIELD2":710},
{"FIELD1":370,"FIELD2":715},
{"FIELD1":680,"FIELD2":360},
{"FIELD1":650,"FIELD2":360},
{"FIELD1":620,"FIELD2":360},
{"FIELD1":580,"FIELD2":360},
{"FIELD1":550,"FIELD2":360},
{"FIELD1":520,"FIELD2":360},
{"FIELD1":480,"FIELD2":360},
{"FIELD1":430,"FIELD2":360},
{"FIELD1":360,"FIELD2":50},
{"FIELD1":360,"FIELD2":80},
{"FIELD1":360,"FIELD2":120},
{"FIELD1":360,"FIELD2":150},
{"FIELD1":360,"FIELD2":180},
{"FIELD1":360,"FIELD2":220},
{"FIELD1":360,"FIELD2":250},
{"FIELD1":360,"FIELD2":300},
{"FIELD1":120,"FIELD2":10},
{"FIELD1":120,"FIELD2":10},
{"FIELD1":120,"FIELD2":10},
{"FIELD1":120,"FIELD2":10},
{"FIELD1":120,"FIELD2":10},
{"FIELD1":120,"FIELD2":10},
{"FIELD1":120,"FIELD2":10},
{"FIELD1":120,"FIELD2":10}]

var unit1,unit2,unit3,unit4,unit5,unit6,unit7,unit8;
unit1 = { "name":"unit1", "curPos":1, "startPos":38, "jail":"True", "last":"False"};
unit2 = { "name":"unit2", "curPos":1, "startPos":38, "jail":"True", "last":"False"};
unit3 = { "name":"unit3", "curPos":1, "startPos":38, "jail":"True", "last":"False"};
unit4 = { "name":"unit4", "curPos":1, "startPos":38, "jail":"True", "last":"False"};
unit5 = { "name":"unit5", "curPos":2, "startPos":22, "jail":"True", "last":"False"};
unit6 = { "name":"unit6", "curPos":2, "startPos":22, "jail":"True", "last":"False"};
unit7 = { "name":"unit7", "curPos":2, "startPos":22, "jail":"True", "last":"False"};
unit8 = { "name":"unit8", "curPos":2, "startPos":22, "jail":"True", "last":"False"};

var team1, team2;
team1 = [unit1,unit2,unit3,unit4];
team2 = [unit5,unit6,unit7,unit8];

function team(a) {
for (i = 0; i < a.length; i++) {
    var x = a[i].curPos = "38"; 
    } 
}

function bumpmove(a, d) {
    var cur = a.curPos;
    d = Number(d);
    cur = Number(cur);
    cur = cur + d;
    cur = Number(cur);
    a.curPos = cur;
        var obj = data[cur];
        var current = Object.values(obj);
        var elem = document.getElementById(a.name); 
        elem.style.left = current[0] + 'px';
        elem.style.top = current[1] + 'px';
    }

function lastmove1(a) {
    var d = document.getElementById("1st").innerHTML;
    var cur = a.curPos;
    d = Number(d);
    cur = Number(cur);
    cur = cur + d;
    cur = Number(cur);
    a.curPos = cur;
        var obj = data[cur];
        var current = Object.values(obj);
        var elem = document.getElementById(a.name); 
        elem.style.left = current[0] + 'px';
        elem.style.top = current[1] + 'px';
    }
function lastmove2(a) {
    var d = document.getElementById("1st").innerHTML;
    var cur = a.curPos;
    d = Number(d);
    cur = Number(cur);
    cur = cur + d;
    cur = Number(cur);
    a.curPos = cur;
        console.log(cur)
        var obj = data[cur];
        console.log(obj)
        var current = Object.values(obj);
        var elem = document.getElementById(a.name); 
        elem.style.left = current[0] + 'px';
        elem.style.top = current[1] + 'px';
    }

function check1(a) {
for (i = 0; i < team1.length; i++) {
    var x = team1[i];
    if (x.curPos == a.curPos) {
        if (x.name != a.name){
        var num = x.curPos;
        num = Number(num);
        console.log(num)
        var obj = data[num];
        console.log(obj)
        var current = Object.values(obj);   
        var elem = x.name;
        document.getElementById(elem).style.left = current[0] += 20 ;
        document.getElementById(elem).style.top = current[1] ;  
        }
    }else {
        console.log()
        }
    }
for (i = 0; i < team2.length; i++) {
    var x = team2[i];
    if (x.curPos == a.curPos) {
        x.jail = "True"
        var elem = x.name;
        if (elem == "unit5") {
        document.getElementById(elem).style.left = "500" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else if (elem == "unit6") {
        document.getElementById(elem).style.left = "550" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else if (elem == "unit7") {
        document.getElementById(elem).style.left = "670" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else if (elem == "unit8") {
        document.getElementById(elem).style.left = "720" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else {
        console.log()
        }

    }else {
        console.log()
        }
    }   
}

function check2(a) {
for (i = 0; i < team2.length; i++) {
    var x = team2[i];
    if (x.curPos == a.curPos) {
        if (x.name != a.name){
        var num = x.curPos;
        num = Number(num);
        console.log(num)
        var obj = data[num];
        console.log(obj)
        var current = Object.values(obj);   
        var elem = x.name;
        document.getElementById(elem).style.left = current[0] += 20 ;
        document.getElementById(elem).style.top = current[1] ;  
        }
    }else {
        console.log()
        }
    }
for (i = 0; i < team1.length; i++) {
    var x = team1[i];
    if (x.curPos == a.curPos) {
        x.jail = "True"
        var elem = x.name;
        if (elem == "unit1") {
        document.getElementById(elem).style.left = "20" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else if (elem == "unit2") {
        document.getElementById(elem).style.left = "80" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else if (elem == "unit3") {
        document.getElementById(elem).style.left = "120" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else if (elem == "unit4") {
        document.getElementById(elem).style.left = "180" ;
        document.getElementById(elem).style.top = "20" ;    
        }
        else {
        console.log()
        }

    }else {
        console.log()
        }
    }   
}   

//makes the 1st dice move happen, must specify team
function mv1(a) {
if (a.jail == "False"){
    document.getElementById("1stmove").innerHTML = "" ;
    var d = document.getElementById("1st").innerHTML;
    var cur = a.curPos;
    d = Number(d);
    cur = Number(cur);
    cur = cur + d;
    a.curPos = cur;
        if (cur >= "83" && a.name == a.name && a.last == "True"){
        console.log("removed " + a.name)

        Array.prototype.remByVal = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] === val) {
                    this.splice(i, 1);
                    i--;
                }
            }
            return this;
        }
        team1 = team1.remByVal(a)
        console.log(team1)
        }
        else if (cur >= "76" && a.name == a.name && a.last == "True"){
            console.log(cur + " almost there")
        }
        else if (cur >= "68") {
        cur = cur - "68";
            if (cur >= "34" && a.name == a.name) {
            console.log(cur)
            cur = "76";
            a.last = "True";
            a.curPos = cur;
            }
        }
        console.log(cur)
        var obj = data[cur];
        var current = Object.values(obj);
        var elem = document.getElementById(a.name); 
        elem.style.left = current[0] + 'px';
        elem.style.top = current[1] + 'px';
    }
}
//makes the 2nd dice move happen, must specify team
function mv2(a) {
if (a.jail == "False"){
    document.getElementById("2ndmove").innerHTML = "" ;
    var d = document.getElementById("2nd").innerHTML;
    var cur = a.curPos;
    d = Number(d);
    cur = Number(cur);
    cur = cur + d;
    a.curPos = cur;
        if (cur >= "83" && a.name == a.name && a.last == "True"){
        console.log("removed " + a.name)

        Array.prototype.remByVal = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] === val) {
                    this.splice(i, 1);
                    i--;
                }
            }
            return this;
        }
        team1 = team1.remByVal(a)
        console.log(team1)
        }
        else if (cur >= "76" && a.name == a.name && a.last == "True"){
            console.log(cur + " almost there")
        }
        else if (cur >= "68") {
        cur = cur - "68";
            if (cur >= "34" && a.name == a.name) {
            console.log(cur)
            cur = "76";
            a.last = "True";
            a.curPos = cur;
            }
        }
        console.log(cur)
        var obj = data[cur];
        var current = Object.values(obj);
        var elem = document.getElementById(a.name); 
        elem.style.left = current[0] + 'px';
        elem.style.top = current[1] + 'px';
    }
}
//Rolls, get's random, get's results and move accordingly
function rollem() {
    var dice1 = Math.floor((Math.random() * 3)+1);
    var dice2 = Math.floor((Math.random() * 3)+1);  
    document.getElementById("1st").innerHTML = dice1;
    document.getElementById("2nd").innerHTML = dice2;
    var total = Number(dice1) + Number(dice2);
    document.getElementById("total").innerHTML = total + " is the Total you can move";
    document.getElementById("dice1").innerHTML = '<img src= "img/' + dice1 + '.jpg" width="30px" height="30px"/>';
    document.getElementById("dice2").innerHTML = '<img src= "img/' + dice2 + '.jpg" width="30px" height="30px"/>';
    if (dice1 === dice2 && turn == "1") {
        turn = "1";
        var i;
        for (i = 0; i < team1.length; i++) {
            var x = team1[i].name;
            if (team1[i].jail == "True") {
                team1[i].jail = "False";
                var obj = data[38];
                team1[i].curPos = "38";
                var current = Object.values(obj);
                var elem = document.getElementById(x); 
                elem.style.left = current[0] + 'px';
                elem.style.top = current[1] + 'px';
                document.getElementById("1stmove").innerHTML += '<button src= "img/' + x + '.png" onclick="mv1('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                + x +'.png" width="20px" height="20px"/> </button>';
                document.getElementById("2ndmove").innerHTML += '<button src= "img/' + x + '.png" onclick="mv2('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                + x +'.png" width="20px" height="20px"/> </button>';

            }else {
//          var d = document.getElementById("2nd").innerHTML;
            turn = "1";
            var i;
            for (i = 0; i < team1.length; i++) {
                var x = team1[i].name;
                if (team1[i].jail == "False") {
                    document.getElementById("1stmove").innerHTML += '<button onclick="mv1('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                    + x +'.png" width="20px" height="20px"/> </button>';
                    document.getElementById("2ndmove").innerHTML += '<button onclick="mv2('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                    + x +'.png" width="20px" height="20px"/> </button>';
                    document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
                }else {
                document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
                }
            }   
            //check2(x);    
            }
        }   
    }
    else if (dice1 === dice2 && turn == "2") {
        turn = "2";
        var i;
        for (i = 0; i < team2.length; i++) {
            var x = team2[i].name;
            if (team2[i].jail == "True") {
                team2[i].jail = "False";
                var obj = data[22];
                team2[i].curPos = "22";
                var current = Object.values(obj);
                var elem = document.getElementById(x); 
                elem.style.left = current[0] + 'px';
                elem.style.top = current[1] + 'px';
                document.getElementById("1stmove").innerHTML += '<button src= "img/' + x + '.png" onclick="mv1('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                + x +'.png" width="20px" height="20px"/> </button>';    
                document.getElementById("2ndmove").innerHTML += '<button src= "img/' + x + '.png" onclick="mv2('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                + x +'.png" width="20px" height="20px"/> </button>';                

            }else {
//          var d = document.getElementById("2nd").innerHTML;
            turn = "2";
            var i;
            for (i = 0; i < team1.length; i++) {
                var x = team2[i].name;
                if (team2[i].jail == "False") {
                    document.getElementById("1stmove").innerHTML += '<button onclick="mv1('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                    + x +'.png" width="20px" height="20px"/> </button>';
                    document.getElementById("2ndmove").innerHTML += '<button onclick="mv2('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                    + x +'.png" width="20px" height="20px"/> </button>';
                    document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
                }else {
                document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
                }
            }   
            //check1(x);    
            }
        }   
    }
    else if (turn == "1") {
        turn = "2";
        var i;
        for (i = 0; i < team1.length; i++) {
            var x = team1[i].name;
            if (team1[i].jail == "False") {
                document.getElementById("1stmove").innerHTML += '<button onclick="mv1('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                + x +'.png" width="20px" height="20px"/> </button>';
                document.getElementById("2ndmove").innerHTML += '<button onclick="mv2('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
                + x +'.png" width="20px" height="20px"/> </button>';
                document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
            }else {
            document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
            }
        }   
    }
    else if (turn == "2"){
        turn = "1";
        var i;
        for (i = 0; i < team2.length; i++) {
            var x = team2[i].name;
            if (team2[i].jail == "False") {
            document.getElementById("1stmove").innerHTML += '<button onclick="mv1('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
            + x +'.png" width="20px" height="20px"/> </button>';
            document.getElementById("2ndmove").innerHTML += '<button onclick="mv2('+x+')"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src= "img/' 
            + x +'.png" width="20px" height="20px"/> </button>';
            document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
            }else {
            document.getElementById("turn").innerHTML = "Player " + turn + " 's turn!"
            }
        }   
    }       
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：2)

我遇到了这个错误，它似乎是随机的，但我找到了原因所在：一个永无止境的for循环。

鉴于Google Chrome浏览器中错误的非特定性，我不得不在此问题上写一堆console.log("...")注释为零，发现我（很糟糕）编写了一个函数，它们都具有非整数增量，以及永远不会到达循环终点的可能性。

它看起来像这样：

var myArray = [];
for (i = 0; i <= total; i += total / 100) {
   myArray.push(i);
};

由于四舍五入的问题，i一直是 <= total。我更新了代码，改为使用：

var myArray = [];
for (var i = 0; i <= 100; i++) {
   myArray.push(total * (i / 100));
};

从那以后再也没有问题了。

对OP而言，虽然我还没有深入研究您的代码，但可能是您的for循环之一减少了迭代器（i ）可能会创建相同的永无止境的循环。我指的是您的代码的这一部分：

Array.prototype.remByVal = function(val) {
   for (var i = 0; i < this.length; i++) {
      if (this[i] === val) {
         this.splice(i, 1);
         i--;  // <-- This part here could be an issue
      }
   }
   return this;
}
相关问题
最新问题