我正在尝试制作一个简单的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);
答案 0 :(得分：1)
要围绕其中心以一定角度绘制精灵，请使用此功能。
// ctx is the 2Dcontext to draw to
// img is the image to draw
// x,y is where the image center will be placed
// rotate is the rotation in radians
function drawImageRotated(ctx, img, x, y, rotate){
ctx.setTransform(1,0,0,1,x,y); // set translation
ctx.rotate(rotate); // rotate image
ctx.drawImage(img, -img.width / 2, -img.height / 2); // draw image offset by half its height and width
}
而不是使用保存和恢复，如果您没有任何其他转换，请使用
ctx.setTransform(1,0,0,1,0,0); // to reset to default transformation
以一个角度获得x，y（向量）使用cos和sin。下面是一个对象的示例，其中delta x，y设置为一个角度，然后是如何移动它。
// a obj (bullet??)
var obj = {};
obj.speed = 10; // how fast to move
obj.x = 100; // current location
obj.y = 100;
var angle = ?; // the angle to move along in radians
obj.dx = Math.cos(angle); // get delta x
obj.dy = Math.sin(angle); // and y
对于移动obj的每个帧
obj.x += obj.dx * obj.speed;
obj.y += obj.dy * obj.speed;