网格中的JS迷你游戏,首次复制后浏览器被冻结

时间:2014-10-01 10:31:45

标签: javascript jquery grid web-worker

我试图创建一个复制网格中邻居单元格的小游戏。我使用每秒钟绘制复制单元格的Web工作者。我能够复制第一秒。如果我的初始单元格是row3col3,则新复制的单元格将为:

row3col2,row3col4 row2col3,row4col3

问题是,在第一秒(和复制)之后,游戏冻结了,我无法做某事。无法点击细胞等

编辑:几秒钟后,它会转到00:00'但是Chrome崩溃了......#Aw; Snap!出了点问题......' [RELOAD]

编辑2:查看使用的内存后,看来我有内存溢出,16000 Mb!我的方法很糟糕,所以。

我知道我的代码没有真正优化,我认为这就是问题所在。不幸的是,我无法提供更高效的代码,所以我向你们提供一些帮助,给我一些探索方法。

这里是代码:

var lastClicked;
var cellTab = Array();
var replicant = Array();
var newReplicant = Array();
var count = 5;

var rows = 20;
var cols = 20;

var randomRow = Math.floor((Math.random() * rows));
var randomCol = Math.floor((Math.random() * cols));



var grid = clickableGrid(rows, cols,randomRow,randomCol,cellTab, function(el,row,col,i){
    console.log("You clicked on element:",el);
    console.log("You clicked on row:",row);
    console.log("You clicked on col:",col);
    console.log("You clicked on item #:",i);

    $(el).addClass('clicked');

    lastClicked = el;
});

document.getElementById("game").appendChild(grid);

function clickableGrid( rows, cols, randomRow, randomCol, cellTab, callback ){
    var i=0;
    var grid = document.createElement('table');
    grid.className = 'grid';
    for (var r=0;r<rows;++r){
        var tr = grid.appendChild(document.createElement('tr'));
        for (var c=0;c<cols;++c){
            var cell = tr.appendChild(document.createElement('td'));
            $(cell).addClass('row'+r+'col'+c);
            if(randomCol == c && randomRow == r)
            {
                storeCoordinate(r, c, replicant);
                $(cell).css('background', '#000000');
            }
            storeCoordinate(r, c, cellTab);
            cell.addEventListener('click',(function(el,r,c,i){
                return function(){
                    callback(el,r,c,i);
                }
            })(cell,r,c,i),false);
        }
    }
    return grid;
}


function storeCoordinate(xVal, yVal, array)
{
    array.push({x: xVal, y: yVal});
}

function replicate(replicant)
{
    for (var i = 0; i < replicant.length; i++) {
      console.log(replicant);
        var supRowX = replicant[i].x-1;
        var supRowY = replicant[i].y;
        storeCoordinate(supRowX, supRowY, newReplicant);
        var subRowX = replicant[i].x+1;
        var subRowY = replicant[i].y;
        storeCoordinate(subRowX, subRowY, newReplicant);
        var supColsX = replicant[i].x;
        var supColsY = replicant[i].y-1;
        storeCoordinate(supColsX, supColsY, newReplicant);
        var subColsX = replicant[i].x;
        var subColsY = replicant[i].y+1;
        storeCoordinate(subColsX, subColsY, newReplicant);
    }
}

function drawReplicant(replicant, cellTab)
{
    for (var i = 0; i < replicant.length; i++) {
        if($.inArray(replicant[i], cellTab))
        {
            $('.row'+replicant[i].x+'col'+replicant[i].y).css('background', '#000000');
        }
    }
}

var w = null; // initialize variable

// function to start the timer
function startTimer()
{
   // First check whether Web Workers are supported
   if (typeof(Worker)!=="undefined"){
      // Check whether Web Worker has been created. If not, create a new Web Worker based on the Javascript file simple-timer.js
      if (w==null){
         w = new Worker("w.countdown.js");
      }
      // Update timer div with output from Web Worker
      w.onmessage = function (event) {
        document.getElementById("timer").innerHTML = event.data;
        console.log(event.data);
        replicate(replicant);
        replicant = newReplicant;
        drawReplicant(replicant, cellTab);
      };
   } else {
      // Web workers are not supported by your browser
      document.getElementById("timer").innerHTML = "Sorry, your browser does not support Web Workers ...";
   }
}

// function to stop the timer
function stopTimer()
{
   w.terminate();
   timerStart = true;
   w = null;
}

startTimer();

在这里,网络工作者:

var timerStart = true;

function myTimer(d0)
{
   // get current time
   var d=(new Date()).valueOf();
   // calculate time difference between now and initial time
   var diff = d-d0;
   // calculate number of minutes
   var minutes = Math.floor(diff/1000/60);
   // calculate number of seconds
   var seconds = Math.floor(diff/1000)-minutes*60;
   var myVar = null;
   // if number of minutes less than 10, add a leading "0"
   minutes = minutes.toString();
   if (minutes.length == 1){
      minutes = "0"+minutes;
   }
   // if number of seconds less than 10, add a leading "0"
   seconds = seconds.toString();
   if (seconds.length == 1){
      seconds = "0"+seconds;
   }

   // return output to Web Worker
   postMessage(minutes+":"+seconds);
}

if (timerStart){
   // get current time
   var d0=(new Date()).valueOf();
   // repeat myTimer(d0) every 100 ms
   myVar=setInterval(function(){myTimer(d0)},1000);
   // timer should not start anymore since it has been started
   timerStart = false;
}

也许是因为我使用jQuery?

0 个答案:

没有答案