0
単純なHTML5ゲームを作成しようとしていますが、いくつか問題があります。私は正方形をその中心の周りに回転させ、弾丸をその方向に発射させようとしています。オブジェクト指向のJavaScriptを使用したHTML5キャンバス回転イメージ
私は四角形（上、下、左、右）、射撃（Y軸に沿って上がる）を持っていますが、正方形（キーAとS）を回転させるのに問題があります。
これまでの試みでは、四角形を中心に移動させていましたが、背景やその他のオブジェクトを画面上に移動することもありました。
私は多くの場所で保存と復元の方法を実装しようとしましたが、喜びはありません。正方形が発射できたら、弾丸をその方向にも発射する必要があります（宇宙は火です）。
以下は、これまでのコードです。助けていただきありがとうございます。
function Sprite(ctx, x, y, width, height){
this._ctx = ctx;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
}
Sprite.prototype = {
createSprite: function(color){
this.color = color;
this._ctx.fillStyle = this.color;
this._ctx.beginPath();
this._ctx.rect(this.x, this.y, this.width, this.height);
this._ctx.closePath();
this._ctx.fill();
}
}
function Player(ctx, x, y, width, height){
this._ctx = ctx;
this.width = width;
this.height = height;
this.srcx = 100;
this.srcy = 0;
this.srcwidth = 99;
this.srcheight = 77;
this.x = x;
this.y = y;
this.movement = 5;
this.health = 4;
this.score = 0;
this.shield = false;
this.movedeg = 0;
Sprite.call(this, this._ctx, this.x, this.y, this.width, this.height);
}
Player.prototype = Object.create(Sprite.prototype);
Player.prototype.constructor = Player;
Player.prototype.create = function(){
Sprite.prototype.create.call(this);
}
Player.prototype.move = function(){
if((37 in keys && keys[37]) && (this.x -= this.movement > 0)){
this.x -= this.movement;
this.srcx = 0;
if (this.x <= 0){
this.x = 0;
}
}
if((39 in keys && keys[39]) && (this.x += this.movement < (750 - this.width))){
this.x += this.movement;
this.srcx = 200;
if (this.x >= (750 - this.width)){
this.x = (750 - this.width);
}
}
if((38 in keys && keys[38])){
this.y -= this.movement;
if (this.y <= (0)){
this.y = (0);
}
}
if((40 in keys && keys[40])){
this.y += this.movement;
if (this.y >= (500 - this.height)){
this.y = (500 - this.height);
}
}
if((65 in keys && keys[65])){
this.movedeg = '-0.01';
//this.rotate(move);
}
if((83 in keys && keys[83])){
//this.rotate(move);
this.movedeg = '0.01';
}
};
Player.prototype.rotate = function(){
this._ctx.translate(this.height/2, this.width/2);
this._ctx.rotate(Math.PI/180 * this.movedeg);
}
Player.prototype.rotateBack = function(){
this._ctx.rotate(Math.PI/180 * -this.movedeg);
this._ctx.translate(-this.height/2, -this.width/2);
}
Player.prototype.shoot = function(evt){
if(game.outbullets < game.bullettotal){
bullets.push(new Bullet(this._ctx, this.x + ((this.width/2) - 5), this.y, 15, 54, '#0f93e7'));
game.outbullets++;
}
};
Player.prototype.render = function() {
this.move();
this.createSprite('#000');
};
function Bullet(ctx, x, y, width, height){
this._ctx = ctx;
this.srcwidth = 15;
this.srcheight = 54;
this.srcx = 0;
this.srcy = 0;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.toremove = false;
this.movement = 10;
Sprite.call(this, ctx, x, y, width, height);
}
Bullet.prototype = Object.create(Sprite.prototype);
Bullet.prototype.constructor = Bullet;
Bullet.prototype.create = function(){
Sprite.prototype.create.call(this);
}
Bullet.prototype.move = function(){
if (this.y > -30) {
this.y -= this.movement;
} else {
this.toremove = true;
}
};
Bullet.prototype.remove = function(){
if(this.toremove == true){
var _this = bullets.indexOf(this);
bullets.splice(_this, 1);
game.outbullets--;
}
};
Bullet.prototype.render = function() {
this.move();
this.createSprite('#f00');
this.remove();
};
function Background(ctx, x, y, width, height){
this._ctx = ctx;
this.srcwidth = 750;
this.srcheight = 500;
this.srcx = 0;
this.srcy = 500;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.movement = 0.5;
Sprite.call(this, ctx, this.x, this.y, this.width, this.height);
}
Background.prototype = Object.create(Sprite.prototype);
Background.prototype.constructor = Background;
Background.prototype.create = function(){
Sprite.prototype.create.call(this);
}
Background.prototype.parallax = function(){
if ((this.srcy - this.movement) > 0){
this.srcy -= this.movement;
} else {
this.srcy = 500;
}
}
Background.prototype.render = function(){
this.createSprite('#0f0');
}
function Game(options){
this.id = options.id;
this.difficulty = 5;
this._canvas = document.getElementById(this.id);
this._ctx = this._canvas.getContext('2d');
this._width = options.width || 750;
this._height = options.height || 500;
this.timeout;
gametime = 0;
keys = [];
bullets = [];
this.bullettotal = 2;
this.outbullets = 0;
background = new Background(this._ctx, 0, 0, 750, 500);
player = new Player(this._ctx, 250, 250, 99, 77);
gametimer = setInterval(this.timer.bind(this), 1000);
window.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('keyup', this.onKeyUp.bind(this));
this.init();
}
Game.prototype = {
clear: function(){
this._ctx.clearRect(0,0, this._width, this._height);
},
timer: function(){
gametime++;
},
loop: function(){
this.clear();
background.render();
if(bullets.length > (this.outbullets - 1) && (this.outbullets > 0)){
for(var i = 0; i < bullets.length; i++){
bullets[i].render();
}
}
//this._ctx.save();
player.rotate();
player.render();
player.rotateBack();
//this._ctx.restore();
},
onKeyDown: function(evt){
if(evt.keyCode == 32){
player.shoot(evt.keyCode);
} else {
keys[evt.keyCode] = true;
}
console.log(evt.keyCode);
},
onKeyUp: function(evt){
keys[evt.keyCode] = false;
},
init: function(){
// this._canvas.removeEventListener('click', this.x);
var _this = this;
(function animloop(){
_this.animation = window.requestAnimationFrame(animloop);
_this.loop();
})()
}
}
var gameOptions = {
id: 'canvas',
width: 750,
height: 500
}
game = new Game(gameOptions);