0
Javascriptが、CanvasRenderingContext2D.drawImageは、だから私はキャンバスにグリッドとして、いくつかの画像をレンダリングしようとしてきた
function IMGLoader()
{
\t this.imageBuffer = [];
}
IMGLoader.prototype.load = function(src)
{
\t var temp = new Image();
\t temp.src = src;
\t this.imageBuffer.push(temp);
\t
}画像データを認識できません。コードのデバッグを開始したとき、私は1つのエラーを除くすべてを取り除くことができました。その結果、いくつかのアプローチを書き直して試してみる必要がありました。私は非常にjavascriptに新しいですし、jqueryについて多くのことを知らない。
問題は、ロードした画像がキャンバスにレンダリングされないということです。 drawImageを呼び出す前に、それらがロードされていることを確認しようとしました。私はまた、 "spr" instanceof Image、それが時々あるかどうかを調べました。
私はこの問題を解決しようとしていますが、私は他の質問を読もうとしました。同じエラー引数。しかしそれはあまり役に立たなかった。
私の間違いを見つけられる場合は、どうかしてください。
// Object calling function...
function GameObject(x, y, w, h)
{
\t this.x = x;
\t this.y = y;
\t this.w = w;
\t this.h = h;
\t this.img = null;
}
GameObject.prototype.draw = function(ctx)
{
\t //alert("Attempt draw...");
\t //alert(this.img instanceof Image);
\t //var context = document.getElementById("mainCanvas").getContext("2d");
\t this.img.onload = function(){
\t \t ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
\t };
\t this.img.onerror = function() {
\t \t alert("Image is not loaded!");
\t };
}
GameObject.prototype.loadIMG = function(spr)
{
\t
\t this.img = spr;
\t //alert(this.img instanceof Image);
}
//child class that inherits
//####################################################
Player.prototype = Object.create(GameObject.prototype);
Player.prototype.constructor = Player;
function Player (x, y, w, h)
{
\t
\t GameObject.call(this,[x, y, w, h]);
\t this.moveQueue = [];
}
Player.prototype.update = function()
{
\t if (this.moveQueue.length > 0)
\t {
\t \t var move = moveQueue.pop();
\t \t this.x = move[0];
\t \t this.y = move[1];
\t }
}
// Primary controller code
//##############################
function Game()
{ \t
\t this.cvs = null;
\t this.ctx = null; \t
\t this.eventhandler = null;
\t this.tileMap = null;
\t this.imgLoader = null;
\t this.gameObjects = []; \t
}
Game.prototype.setup = function()
{
\t // Loading graphics window and renderer
\t this.cvs = document.getElementById("mainCanvas");
\t //this.cvs.width = document.body.clientWidth;
\t //this.cvs.height = document.body.clientHeight;
\t this.ctx = this.cvs.getContext("2d");
\t
\t this.eventhandler = new EventHandler();
\t this.tileMap = new TileMap();
\t this.imgLoader = new IMGLoader();
\t
\t this.eventhandler.setup(this.cvs);
\t
\t
\t this.imgLoader.load("./assets/floortile001.png");
\t this.imgLoader.load("./assets/player.png");
\t
\t var floorTiles = [this.imgLoader.imageBuffer[0]];
\t this.tileMap.setup(2, 2, 128, floorTiles);
\t
\t
\t var playerSprite = this.imgLoader.imageBuffer[1];
\t
\t this.gameObjects.push(new Player(128, 128, 96, 96));
\t this.gameObjects[0].loadIMG(playerSprite);
}
Game.prototype.handleEvents = function()
{
\t if (this.eventhandler.hasClickedLeft)
\t {
\t \t var start = [this.player.x, this.player.y];
\t \t var end = this.tileMap.boundCoordinates(this.eventhandler.x, this.eventhandler.y);
\t \t this.player.moveQueue = algorithms.pathfinding(start, end, this.tileMap);
\t }
}
Game.prototype.update = function()
{
\t for (var i = 0; i < this.gameObjects.length; i++)
\t \t this.gameObjects[i].update();
}
Game.prototype.render = function()
{
\t this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height);
\t this.ctx.fillStyle = "#000000";
\t this.ctx.fillRect(0, 0, this.cvs.width, this.cvs.height);
\t this.tileMap.draw(this.ctx);
\t for (var i = 0; i < this.gameObjects.length; i++)
\t \t this.gameObjects[i].draw(this.ctx);
}
Game.prototype.run = function()
{
\t var self = this;
\t setInterval(function()
\t {
\t \t self.handleEvents();
\t \t self.update();
\t \t self.render();
\t }, 1000/30);
}<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
\t
\t <script type="text/javascript" src="js/priorityqueue.js"></script>
\t <script type="text/javascript" src="js/algorithms.js"></script>
\t <script type="text/javascript" src="js/gameobject.js"></script>
\t <script type="text/javascript" src="js/tile.js"></script>
\t <script type="text/javascript" src="js/tilemap.js"></script>
\t <script type="text/javascript" src="js/player.js"></script>
\t <script type="text/javascript" src="js/imgloader.js"></script>
\t <script type="text/javascript" src="js/core.js"></script>
\t <script type="text/javascript" src="js/eventhandler.js"></script>
</head>
<body>
\t <canvas id="mainCanvas" width="800px" height="800px"></canvas>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
\t var game = new Game();
\t game.setup();
\t game.run();
});
</script>
を、イメージ "onload"ハンドラの中の 'this'の値は' GameObject'インスタンスではありません。 – Pointy