0

Here is a game I am working on has a gun that rotates to track the cursor on jsfiddle.

http://jsfiddle.net/otherDewi/zqeLW/

I am trying to get it to work in IE9. I have included jqueryRotate but it does not seem to have made a difference. I was expecting to set the rotation in degrees but it only works in radians in Firefox and Chrome. Unsure if jQueryRotate is linked correctly.

Lines 47-60 in main.js set the rotation:

$canvas.mousemove(function (e) {
    xHair = e.pageX;
    yHair = e.pageY;

    //gun position
    xGPos = xHair / 4 + 280;
    yGPos = yHair / 4 + 200;
    difx = xHair - (235 + xGPos);
    dify = yHair - (230 + yGPos);
    radians = Math.atan2(dify, difx);
    rotation = radians + 2.36; //rotation in radians
    //rotation = (((radians*180)/Math.PI)+135); rotation in degrees
    console.log(rotation);
});

which is used by the draw function in lines 94-111:

function draw(ctx, xGPos, yGPos, difx, dify, rotation) {
    // gun/Linked File
    ctx.save();
    ctx.translate(235 + xGPos, 230 + yGPos);
    //console.log(rotation);
    ctx.rotate(rotation);
    ctx.translate(-235 - xGPos, -230 - yGPos);
    ctx.drawImage(img2, xGPos, yGPos);
    ctx.restore();
};

https://github.com/KiwiTaff/duck-hunt-git2/blob/master/js/main.js

I discovered today that my code throws a 

SYNTAX_ERR code 12

An invalid or illegal string has been specified; for example setting the selectorText property of a CSSStyleRule with an invalid CSS value..

I have checked the script for invalid file names, unsure if the event handler is causing problems.

otherDewi
  • 1,098
  • 10
  • 24
  • Rotating in different browser environments are hard, thats why projects like jQueryRotate were created. Anyway I would advice you to make this code more visible (URL to see problem ?) as getting trough and understanding 400 lines of code are bit too crazy :) – Paweł Witkowski Photography Aug 02 '13 at 06:30
  • @Wilq32 Thanks for the feedback. I believed the point of uploading the code onto Git was allow people like yourself to download it. I get your point about the 400 lines of code. I have now stripped out all the code that works and not relevant to the rotation. – otherDewi Aug 02 '13 at 08:40
  • I mean rather - make a working test case that shows problem somewhere like in http://jsfiddle.net - this way you gain much more attention as people can literaly "click" and "see" the problem by themselves and play with debugger on it :) – Paweł Witkowski Photography Aug 03 '13 at 08:01
  • Link to code on jsfiddle.net added on the 3rd line of the question, hope this makes thing easier. – otherDewi Aug 03 '13 at 22:18
  • This question might help you too: http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate – frenchie Aug 05 '13 at 04:10
  • I discovered today my game throws a SYNTAX_ERR code 12 in IE9 and have edited my question to reflect this – otherDewi Aug 06 '13 at 06:07
  • Maybe its because on JSfiddle CSS is not closed correctly ? (Missing bracet at the end?) I dont have IE9 here so I cant help you much :( – Paweł Witkowski Photography Aug 12 '13 at 13:54
  • Still - im not sure why would you use jQueryRotate as you do rotation on your own? If you dont want to do this on your own, but use a jQueryRotate instead - then you would need to skip whole Canvas idea as jQueryRotate handles proper fallbacks for browsers that do not support canvas or CSS3 or anythin else. – Paweł Witkowski Photography Aug 12 '13 at 13:55

0 Answers0