Menu
I'm making a game, and eventually it will just stop working. It seems no rhyme or reason, not sure if I have a Memory leak or something like that? Before I inserted the massive array, I was pulling this from a json file hosted online. It's not until I get to completing the game that is give the message in the console. "debugging connection was closed. Reason: Render process gone." Doesn't matter if it's firefox or chrome. Since it's heavy clicking on the buttons, it seems if I don't click as fast, it will run.
<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>
712
I had this error and it appeared random, but I got to the root of the cause: a never-ending for loop.
Given the non-specificity of the error in Google Chrome, I had to write a bunch of console.log("...") notes to zero in on the issue and found that I (poorly) wrote a function that had both non-integer increments and also the potential to never reach the end of the loop.
It looked something like this:
var myArray = [];
for (i = 0; i <= total; i += total / 100) {
myArray.push(i);
};
Due to rounding issues, i was always <= total. I updated the code to instead use:
var myArray = [];
for (var i = 0; i <= 100; i++) {
myArray.push(total * (i / 100));
};
And haven't had the problem since.
And to the OP, while I haven't dived into your code too deeply, it could be that one of your for loops that decreases the iterator (i) could be creating the same never-ending loop. I'm referring specifically to this part of your code:
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
