I have this code and it works fine in Firefox, but in Chrome I get this error:
"Unused error: INVALID_STATE_ERR: DOM 11 exception" on sprites.js: 36
this line contains this code:
context.drawImage(
Context is a global variable that contains a 2d canvas context. Here is the complete code:
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="sprites.js"></script> <script type="text/javascript" src="game.js"></script> <script type="text/javascript" src="prototypes.js"></script> <script type="text/javascript" src="initialize.js"></script> </head> <body onload="initialize()"> </body> </html>
sprites.js
function SpritePrototype(frames, width, height, type) { this.frames = frames; this.type = type; if (this.frames > 0) { this.frameArray = new Array(this.frames); for (var i = 0; i < this.frames; i++) { this.frameArray[i] = document.createElement("canvas"); } } } function Sprite() { this.id = 0; this.prototype = 0; this.next = 0; this.prev = 0; this.x = 0; this.y = 0; this.startFrame = 0; this.currentFrame = 0; } Sprite.prototype.draw = function() { if (this.prototype == 0) { return; } if (context.drawImage) { if (this.prototype.frames > 0) { context.drawImage( this.prototype.frameArray[this.currentFrame], Math.round(this.x), Math.round(this.y) ); } } }
game.js
function Game() { this.frameLength = 1000/30; this.startTime = 0; this.sprites = 0; } Game.prototype.resetTime = function() { var d = new Date(); this.startTime = d.getTime(); delete d; } Game.prototype.addSprite = function(prototype) { currentId++; if (this.sprites == 0) { // if creating the first sprite this.sprites = new Sprite(); this.sprites.id = currentId; this.sprites.prototype = prototype; } else { var tempSprite = this.sprites; // temporarily store the first sprite while (tempSprite.next != 0) { // while not the last sprite tempSprite = tempSprite.next; // shift to next one } tempSprite.next = new Sprite(); // next sprite to the last sprite tempSprite.next.id = currentId; tempSprite.next.prototype = prototype; tempSprite.next.next = 0; // the last sprite, or the last one in the space tempSprite.next.prev = tempSprite; } } Game.prototype.loop = function() { var tempSprite; var currentTime; var globalFrame; var oldFrame; var d = new Date(); currentTime = d.getTime(); delete d; globalFrame = Math.floor((currentTime - this.startTime)/this.frameLength); canvas.width = canvas.width; tempSprite = this.sprites; while (tempSprite != 0) { if (tempSprite.frames > 0) { oldFrame = tempSprite.currentFrame; tempSprite.currentFrame = globalFrame; } tempSprite.draw(); tempSprite = tempSprite.next; } }
prototypes.js
var protoPlayer; function createPrototypes() { var tempCtx; var i; protoPlayer = new SpritePrototype(5, 20, 30, "player"); for (i = 0; i < protoPlayer.frames; i++) { protoPlayer.frameArray[i].width = protoPlayer.width; protoPlayer.frameArray[i].height = protoPlayer.height; tempCtx = protoPlayer.frameArray[i].getContext("2d"); tempCtx.strokeStyle = "rgb("+ i * 50 +", 0, 0)"; tempCtx.beginPath(); tempCtx.moveTo(0, 0); tempCtx.lineTo(20, 30); tempCtx.stroke(); } }
initialize.js
var game; var canvas; var context; var currentId; function initialize() { canvas = document.createElement("canvas"); canvas.width = 640; canvas.height = 480; canvas.setAttribute("style", "background:#060606;"); document.body.appendChild(canvas); context = canvas.getContext("2d"); createPrototypes(); currentId = 0; game = new Game(); game.addSprite(protoPlayer); game.loop(); }
TomΓ‘Ε‘ Nesrovnal
source share