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=".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>
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>
- Chrome at least uses multiple processes, you can see this in Task Manager. There is one main "browser" process that shows the screens and user interface, and one or more "render" processes that turn HTML and scripting into pages to be shown by the browser process. Either (a) your code is crashing render or (b) that tab closed and so its render process ended normally. – Dave S Commented Oct 20, 2017 at 19:37
- Thanks alot! But I'm not seeing any "browser" process or "render" in Task Manager. There are many Chrome.exe processes, but that's it. – Jason Owens Commented Oct 20, 2017 at 19:48
- Chrome uses the same EXE for both roles so you can see them in task manager but the only way to tell them apart is by looking at the command line that started the process. I think some other system / process tools can do that. – Dave S Commented Oct 20, 2017 at 21:22
1 Answer
Reset to default 17I 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;
}