Ошибка Uncaught TypeError: Cannot read property 'offsetX' of undefined

@DenisDavydov · Регистрация: 06.04.2015

Не могу избавиться от ошибки
Uncaught TypeError: Cannot read property 'offsetX' of undefined

в этом коде

Javascript

function getClickXY(event)
  {
    restart.addEventListener('click', getClickXY, false);
    var x;
    var y;
     if(event.offsetX){
        x = event.offsetX;
        y = event.offsetY;
    }
    else if(event.layerX){
       x = event.layerX;
       y = event.layerY;
    }
    location.reload();
  }

помогите разобраться

@BANO · 03.04.2016, 00:56

Javascript

1	var x, y, event = event \|\| window.event;

Добавлено через 13 секунд
это для ие по идее

@DenisDavydov · 03.04.2016, 01:36 **[ТС]**

немного не понял
это поможет убрать ошибку?
у меня в хроме она

@WhiteMind · 03.04.2016, 02:18

Сообщение от DenisDavydov

немного не понял
это поможет убрать ошибку?
у меня в хроме она

ваш код рабочий в хроме.
вы уверены что правильно повесили getClickXY?

Javascript

function getClickXY(event)  {
  //  restart.addEventListener('click', getClickXY, false);
    var x;
    var y;
     if(event.offsetX){
        x = event.offsetX;
        y = event.offsetY;
    }
    else if(event.layerX){
       x = event.layerX;
       y = event.layerY;
    }
    //location.reload();
    
    console.info(x,y);
  }
  
  document.getElementById('divId').onclick = getClickXY;

HTML5

1
2
3

<div id="divId" style="width: 500px; height: 500px; background: #F01;">
 
</div>

https://jsfiddle.net/3eoftx8t/1/

@DenisDavydov · 03.04.2016, 23:26 **[ТС]**

не уверен
все работает как надо, но когда объекты сталкиваются ошибка эта вылезает
она в принципе никак не мешает, но не приятно
возможно по полному коду понятно будет в чем ошибка?

Javascript

window.onload = init;
 
var map;
var ctxMap;
 
var pl;
var ctxPl;
 
var enemyCv;
var ctxEnemy;
 
var stats;
var ctxStats;
 
var restart = document.getElementById('restart');
var ctxRestart;
 
 
var drawBtn;
var clearBtn;
 
var gameWidth = 800;
var gameHeight = 500;
 
var background = new Image();
background.src = "fon.jpg";
 
var background1 = new Image();
background1.src = "fon.jpg";
 
var tiles = new Image();
tiles.src = "player.png";
 
var player;
var enemies = [];
 
var isPlaying;
 
var health = 0;
var timerId = setInterval(resetHealth, 100) ;
 
var mapX = 0;
var map1X = gameWidth;
 
 
 
var requestAnimFrame = window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame;
                        
function init()
{
    map = document.getElementById("map");
    ctxMap = map.getContext("2d");
    
    pl = document.getElementById("player");
    ctxPl = pl.getContext("2d");
    
    enemyCvs = document.getElementById("enemy");
    ctxEnemy = enemyCvs.getContext("2d");
    
    stats = document.getElementById("stats");
    ctxStats = stats.getContext("2d");
    
    restart = document.getElementById("restart");
    ctxRestart = restart.getContext("2d");
    
    map.width = gameWidth;
    map.height = gameHeight;
    pl.width = gameWidth;
    pl.height = gameHeight;
    enemyCvs.width = gameWidth;
    enemyCvs.height = gameHeight;
    stats.width = gameWidth;
    stats.height = gameHeight;
    restart.width = gameWidth;
    restart.height = gameHeight;
    
    ctxStats.fillStyle = "#000";
    ctxStats.font = "bold 15pt Arial";
    
    ctxRestart.fillStyle = "#000";
    ctxRestart.font = "bold 15pt Arial";
    
    drawBtn = document.getElementById("drawBtn");
    clearBtn = document.getElementById("clearBtn");
    
    drawBtn.addEventListener("click", drawRect, false);
    clearBtn.addEventListener("click", clearRect, false);
    
    player = new Player();
    
    resetHealth;
    
    startLoop();
    
    document.addEventListener("keydown", checkKeyDown, false);
    document.addEventListener("keyup", checkKeyUp, false);
}
 
 
function resetHealth()
{
      var invervat = 1 ;
    var end = 10 ;
    
    if(health < end) {
        health += invervat ;
    } else {
        health += 1 ;
    }
}
 
 
function spawnEnemy(count)
{
    for(var i = 0; i < count; i++)
    {
        enemies[i] = new Enemy();
    }
}
 
function startCreatingEnemies()
{   
    spawnEnemy(10);
}
 
 
function loop()
{
    if(isPlaying)
    {
        draw();
        update();
        requestAnimFrame(loop);
    }
}
 
function startLoop()
{
    isPlaying = true;
    loop();
    startCreatingEnemies();
}
 
function stopLoop()
{
    isPlaying = false;
}
 
function draw()
{
    player.draw();
    clearCtxEnemy();
    for(var i = 0; i < enemies.length; i++)
    {
        enemies[i].draw();
    }
}
 
function update()
{
    moveBg();
    drawBg();
    updateStats();
    player.update();
    
    for(var i = 0; i < enemies.length; i++)
    {
        enemies[i].update();
    }
}
 
function moveBg()
{
    var vel = 4;
    mapX -= 4;
    map1X -= 4;
    if(mapX+gameWidth<0) mapX = gameWidth-5;
    if(map1X+gameWidth<0) map1X = gameWidth-5;
}
 
function Player()
{
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 10;
    this.drawY = 200;
    this.width = 50;
    this.height = 50;
    this.speed = 3;
    
    //For keys
    this.isUp = false;
    this.isDown = false;
    this.isRight = false;
    this.isLeft = false;
    
    
    this.speed = 10;
}
 
function Enemy()
{
    this.srcX = 0;
    this.srcY = 50;
    this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
    this.drawY = Math.floor(Math.random() * gameHeight);
    this.width = 50;
    this.height = 50;
    
    this.speed = 7;
    
}
 
 
Enemy.prototype.draw = function()
{
    ctxEnemy.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
    this.drawX, this.drawY, this.width, this.height);
}
 
Enemy.prototype.update = function()
{
    this.drawX -= 7;
    if(this.drawX + this.width < 0)
    {
    this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
    this.drawY = Math.floor(Math.random() * gameHeight);
    }
}
    
Enemy.prototype.destroy = function()
{
    enemies.splice(enemies.indexOf(this), 1);
}   
    
Player.prototype.draw = function()
{
    clearCtxPlayer();
    ctxPl.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
    this.drawX, this.drawY, this.width, this.height);
}
 
 
 
Player.prototype.update = function()
{
    
    if(this.drawX < 0) this.drawX = 0;
    if(this.drawX > gameWidth - this.width) this.drawX = gameWidth - this.width;
    if(this.drawY < 0) this.drawY = 0;
    if(this.drawY > gameHeight - this.height) this.drawY = gameHeight - this.height;
 
    for(var i = 0; i < enemies.length; i++)
    {
        if(this.drawX <= enemies[i].drawX + enemies[i].width &&
            this.drawX + this.width >= enemies[i].drawX  &&
            this.drawY + this.height >= enemies[i].drawY &&
            this.drawY <= enemies[i].drawY + enemies[i].height)
        {
            updateRestart();
        }
    }
    
    this.chooseDir();
}
 
 
Player.prototype.chooseDir = function()
{
    if(this.isUp)
        this.drawY -= this.speed;
    if(this.isDown)
        this.drawY += this.speed;
    if(this.isRight)
        this.drawX += this.speed;
    if(this.isLeft)
        this.drawX -= this.speed;
}
 
function checkKeyDown(e)
{
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W")
    {
        player.isUp = true;
        e.preventDefault();
    }
    if(keyChar == "S")
    {
        player.isDown = true;
        e.preventDefault();
    }
    if(keyChar == "D")
    {
        player.isRight = true;
        e.preventDefault();
    }
    if(keyChar == "A")
    {
        player.isLeft = true;
        e.preventDefault();
    }
}
 
function checkKeyUp(e)
{
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W")
    {
        player.isUp = false;
        e.preventDefault();
    }
    if(keyChar == "S")
    {
        player.isDown = false;
        e.preventDefault();
    }
    if(keyChar == "D")
    {
        player.isRight = false;
        e.preventDefault();
    }
    if(keyChar == "A")
    {
        player.isLeft = false;
        e.preventDefault();
    }
}
 
function drawRect()
{
    ctxMap.fillStyle = "green";
    ctxMap.fillRect(10, 10, 100, 100);
}
 
function clearRect()
{
    ctxMap.clearRect(0, 0, 800, 500);
}
 
function clearCtxPlayer()
{
    ctxPl.clearRect(0, 0, gameWidth, gameHeight);
}
 
function clearCtxEnemy()
{
    ctxEnemy.clearRect(0, 0, gameWidth, gameHeight);
}
 
function updateStats()
{
    ctxStats.clearRect(0, 0, gameWidth, gameHeight);
    ctxStats.fillText("Score: " + health, 10, 20);
}
 
function updateRestart()
{   
    ctxRestart.clearRect(0, 0, gameWidth, gameHeight);
    ctxRestart.fillText("RESTART ", 350, 250);
    getClickXY(event);
}
 
function getClickXY(event)
  {
      
    restart.addEventListener('click', getClickXY, false);
    var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
    var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
   location.reload();
  }
  
function drawBg()
{
    ctxMap.clearRect(0, 0, gameWidth, gameHeight);
    ctxMap.drawImage(background, 0, 0, 800, 480,
    mapX, 0, gameWidth, gameHeight);
    ctxMap.drawImage(background1, 0, 0, 800, 480,
    map1X, 0, gameWidth, gameHeight);
}

Добавлено через 1 час 14 минут
Вопрос еще
Можно ли скрипт запустить заново каким нибудь другим способом кроме location.reload(); ?

@WhiteMind · 04.04.2016, 05:32

я бы сделал так.

Javascript

<canvas id="map"></canvas>
<canvas id="player"></canvas>
<canvas id="enemy"></canvas>
<canvas id="stats"></canvas>
<canvas id="restart"></canvas>
<button id="drawBtn">drawBtn</button>
<button id="clearBtn">clearBtn</button>
 
<script>
 
(function() {
 
 
 
var map;
var ctxMap;
 
var pl;
var ctxPl;
 
var enemyCv;
var ctxEnemy;
 
var stats;
var ctxStats;
 
var restart = document.getElementById('restart');
var ctxRestart;
 
 
var drawBtn;
var clearBtn;
 
var gameWidth = 800;
var gameHeight = 500;
 
var background = new Image();
background.src = "http://anticache.img0.joyreactor.cc/pics/post/%D0%9A%D0%BB%D0%B8%D0%BA%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE-art-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B8%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-862058.jpeg";//fon.jpg";
 
var background1 = new Image();
background1.src = "http://anticache.img1.joyreactor.cc/pics/post/%D0%9A%D0%BB%D0%B8%D0%BA%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B8%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%BA%D0%BE%D1%81%D0%BC%D0%BE%D1%81-860583.jpeg";//fon.jpg";
 
var tiles = new Image();
tiles.src = "http://anticache.img1.joyreactor.cc/pics/post/%D0%9E%D1%80%D0%B1%D0%B8%D1%82%D1%8B-%D0%90%D1%81%D1%82%D0%B5%D1%80%D0%BE%D0%B8%D0%B4%D0%BE%D0%B2-%D0%BA%D0%BE%D1%81%D0%BC%D0%BE%D1%81-NASA-828447.jpeg";//player.png";
 
var player;
var enemies = [];
 
var isPlaying;
 
var health = 0;
var timerId = setInterval(resetHealth, 100) ;
 
var mapX = 0;
var map1X = gameWidth;
 
 
 
var requestAnimFrame = window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame;
                        
var shutdown = false;                       
                        
var init_once_inc = 0;
function init_once() {
    if ( init_once_inc != 0 ) {
        return;
    }
    init_once_inc++;
    
    var drawBtn = document.getElementById("drawBtn");
    var clearBtn = document.getElementById("clearBtn");
    
    drawBtn.addEventListener("click", drawRect, false);
    clearBtn.addEventListener("click", clearRect, false);   
    
    document.addEventListener("keydown", checkKeyDown, false);
    document.addEventListener("keyup", checkKeyUp, false);  
    
    var restart = document.getElementById("restart");
    restart.addEventListener('click', getClickXY, false);   
}             
             
function init()
{
    init_once();
    
    map = document.getElementById("map");
    ctxMap = map.getContext("2d");
    
    pl = document.getElementById("player");
    ctxPl = pl.getContext("2d");
    
    enemyCvs = document.getElementById("enemy");
    ctxEnemy = enemyCvs.getContext("2d");
    
    stats = document.getElementById("stats");
    ctxStats = stats.getContext("2d");
    
    restart = document.getElementById("restart");
    ctxRestart = restart.getContext("2d");
    
    map.width = gameWidth;
    map.height = gameHeight;
    pl.width = gameWidth;
    pl.height = gameHeight;
    enemyCvs.width = gameWidth;
    enemyCvs.height = gameHeight;
    stats.width = gameWidth;
    stats.height = gameHeight;
    restart.width = gameWidth;
    restart.height = gameHeight;
    
    ctxStats.fillStyle = "#000";
    ctxStats.font = "bold 15pt Arial";
    
    ctxRestart.fillStyle = "#000";
    ctxRestart.font = "bold 15pt Arial";
 
    player = new Player();
    
    health = 0;
    resetHealth();
    
    startLoop();
}
 
 
function resetHealth()
{
    var invervat = 1 ;
    var end = 10 ;
    
    if(health < end) {
        health += invervat ;
    } else {
        health += 1 ;
    }
}
 
 
function spawnEnemy(count)
{
    for(var i = 0; i < count; i++)
    {
        enemies[i] = new Enemy();
    }
}
 
function startCreatingEnemies()
{   
    spawnEnemy(10);
}
 
 
function loop()
{
    if(isPlaying)
    {
        draw();
        update();
        requestAnimFrame(loop);
    }
}
 
function startLoop()
{
    isPlaying = true;
    loop();
    startCreatingEnemies();
}
 
function stopLoop()
{
    isPlaying = false;
}
 
function draw()
{
    player.draw();
    clearCtxEnemy();
    for(var i = 0; i < enemies.length; i++)
    {
        enemies[i].draw();
    }
}
 
function update()
{
    moveBg();
    drawBg();
    updateStats();
    player.update();
    
    for(var i = 0; i < enemies.length; i++)
    {
        enemies[i].update();
    }
}
 
function moveBg()
{
    var vel = 4;
    mapX -= 4;
    map1X -= 4;
    if(mapX+gameWidth<0) mapX = gameWidth-5;
    if(map1X+gameWidth<0) map1X = gameWidth-5;
}
 
function Player()
{
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 10;
    this.drawY = 200;
    this.width = 50;
    this.height = 50;
    this.speed = 3;
    
    //For keys
    this.isUp = false;
    this.isDown = false;
    this.isRight = false;
    this.isLeft = false;
    
    
    this.speed = 10;
}
 
function Enemy()
{
    this.srcX = 0;
    this.srcY = 50;
    this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
    this.drawY = Math.floor(Math.random() * gameHeight);
    this.width = 50;
    this.height = 50;
    
    this.speed = 7;
    
}
 
 
Enemy.prototype.draw = function()
{
    ctxEnemy.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
    this.drawX, this.drawY, this.width, this.height);
}
 
Enemy.prototype.update = function()
{
    this.drawX -= 7;
    if(this.drawX + this.width < 0)
    {
    this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
    this.drawY = Math.floor(Math.random() * gameHeight);
    }
}
    
Enemy.prototype.destroy = function()
{
    enemies.splice(enemies.indexOf(this), 1);
}   
    
Player.prototype.draw = function()
{
    clearCtxPlayer();
    ctxPl.drawImage(tiles, this.srcX, this.srcY, this.width, this.height,
    this.drawX, this.drawY, this.width, this.height);
}
 
 
 
Player.prototype.update = function()
{
    
    if(this.drawX < 0) this.drawX = 0;
    if(this.drawX > gameWidth - this.width) this.drawX = gameWidth - this.width;
    if(this.drawY < 0) this.drawY = 0;
    if(this.drawY > gameHeight - this.height) this.drawY = gameHeight - this.height;
 
    for(var i = 0; i < enemies.length; i++)
    {
        if(this.drawX <= enemies[i].drawX + enemies[i].width &&
            this.drawX + this.width >= enemies[i].drawX  &&
            this.drawY + this.height >= enemies[i].drawY &&
            this.drawY <= enemies[i].drawY + enemies[i].height)
        {
            updateRestart();
        }
    }
    
    this.chooseDir();
}
 
 
Player.prototype.chooseDir = function()
{
    if(this.isUp)
        this.drawY -= this.speed;
    if(this.isDown)
        this.drawY += this.speed;
    if(this.isRight)
        this.drawX += this.speed;
    if(this.isLeft)
        this.drawX -= this.speed;
}
 
function checkKeyDown(e)
{
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W")
    {
        player.isUp = true;
        e.preventDefault();
    }
    if(keyChar == "S")
    {
        player.isDown = true;
        e.preventDefault();
    }
    if(keyChar == "D")
    {
        player.isRight = true;
        e.preventDefault();
    }
    if(keyChar == "A")
    {
        player.isLeft = true;
        e.preventDefault();
    }
}
 
function checkKeyUp(e)
{
    var keyID = e.keyCode || e.which;
    var keyChar = String.fromCharCode(keyID);
    
    if(keyChar == "W")
    {
        player.isUp = false;
        e.preventDefault();
    }
    if(keyChar == "S")
    {
        player.isDown = false;
        e.preventDefault();
    }
    if(keyChar == "D")
    {
        player.isRight = false;
        e.preventDefault();
    }
    if(keyChar == "A")
    {
        player.isLeft = false;
        e.preventDefault();
    }
}
 
function drawRect()
{
    ctxMap.fillStyle = "green";
    ctxMap.fillRect(10, 10, 100, 100);
}
 
function clearRect()
{
    ctxMap.clearRect(0, 0, 800, 500);
}
 
function clearCtxPlayer()
{
    ctxPl.clearRect(0, 0, gameWidth, gameHeight);
}
 
function clearCtxEnemy()
{
    ctxEnemy.clearRect(0, 0, gameWidth, gameHeight);
}
 
function updateStats()
{
    ctxStats.clearRect(0, 0, gameWidth, gameHeight);
    ctxStats.fillText("Score: " + health, 10, 20);
}
 
function updateRestart()
{   
    ctxRestart.clearRect(0, 0, gameWidth, gameHeight);
    ctxRestart.fillText("RESTART ", 350, 250);
    stopLoop();
    shutdown = true;
}
 
function getClickXY(event)
  {      
    if ( shutdown !== true ) return;
    shutdown = false;
    //location.reload();
    init();
  }
  
function drawBg()
{
    ctxMap.clearRect(0, 0, gameWidth, gameHeight);
    ctxMap.drawImage(background, 0, 0, 800, 480,
    mapX, 0, gameWidth, gameHeight);
    ctxMap.drawImage(background1, 0, 0, 800, 480,
    map1X, 0, gameWidth, gameHeight);
}
 
 
 
 
 
window.onload = init;
 
})();
 
</script>

https://jsfiddle.net/wgb14m0e/10/

@DenisDavydov · 04.04.2016, 23:23 **[ТС]**

Спасибо
В двух словах не расскажешь, что изменил в коде
вот про это интересно

Javascript

var init_once_inc = 0;
function init_once() {
    if ( init_once_inc != 0 ) {
        return;
    }
    init_once_inc++;
    
    var drawBtn = document.getElementById("drawBtn");
    var clearBtn = document.getElementById("clearBtn");
    
    drawBtn.addEventListener("click", drawRect, false);
    clearBtn.addEventListener("click", clearRect, false);   
    
    document.addEventListener("keydown", checkKeyDown, false);
    document.addEventListener("keyup", checkKeyUp, false);  
    
    var restart = document.getElementById("restart");
    restart.addEventListener('click', getClickXY, false);   
}

@DenisDavydov 5 / 7 / 2 Регистрация: 06.04.2015 Сообщений: 62
	03.04.2016, 01:36 [ТС]	3
	немного не понял это поможет убрать ошибку? у меня в хроме она 0

Опции темы

Ошибка Uncaught TypeError: Cannot read property 'offsetX' of undefined

Решение