AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > html游戏

html5游戏如何设置对象旋转

51自学网 http://www.51zixue.net

 游戏中对象的旋转

在本教程前面,红色方块能够在游戏区内移动,但无法转动或旋转。


要旋转组件,我们必须改变我们绘制组件的方式。


可用于canvas元素的唯一旋转方法就是旋转整个画布:

在画布上绘制的其他任何东西也将被旋转,不仅仅是指定旋转的组件。


这就是为什么我们必须在update()方法中进行一些更改:


首先,我们保存当前画布上的对象:


ctx.save();


然后,使用translate方法将整个画布移动到特定组件的中心:


ctx.translate(x,y);

然后我们使用rotate()方法执行想要的旋转:


ctx.rotate(角度);

现在我们准备将该组件绘制到已转动的画布上,绘制的中心位置在已转动的画布的(0,0):


ctx.fillRect(width / -2,height / -2,width,height);

完成后,我们必须使用restore方法将上下文对象恢复到保存的位置:


ctx.restore();


只有绘制的组件被旋转:


 

The Component Constructor

The component constructor has a new propery called angle, which is radian number that represents the angle of the component.

The update method of the component constructor is were we draw the component, and here you can see the changes that will allow the component to rotate:

组件构造函数

组件构造函数有一个称为angle的新属性,它是表示组件角度的弧度数。


组件构造函数的更新方法是我们绘制组件,并看到组件旋转的变化

Example

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.angle = 0;
    this.x = x;
    this.y = y; 
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y); 
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height); 
        ctx.restore(); 
    }
}
function updateGameArea() {
    myGameArea.clear();
    myGamePiece.angle += 1 * Math.PI / 180
    myGamePiece.update();
}

完整源代码:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

canvas {

    border:1px solid #d3d3d3;

    background-color: #f1f1f1;

}

</style>

 

 

</head>

<body onload="startGame()">

<script>

 

var myGamePiece;

 

function startGame() {

    myGamePiece = new component(30, 30, "red", 80, 75);

    myGameArea.start();

}

 

var myGameArea = {

    canvas : document.createElement("canvas"),

    start : function() {

        this.canvas.width = 480;

        this.canvas.height = 270;

        this.context = this.canvas.getContext("2d");

        document.body.insertBefore(this.canvas, document.body.childNodes[0]);

        this.frameNo = 0;

        this.interval = setInterval(updateGameArea, 20);

    },

    stop : function() {

        clearInterval(this.interval);

    },    

    clear : function() {

        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    }

}

 

function component(width, height, color, x, y) {

    this.width = width;

    this.height = height;

    this.angle = 0;

    this.x = x;

    this.y = y;    

    this.update = function() {

        ctx = myGameArea.context;

        ctx.save();

        ctx.translate(this.x, this.y);        

        ctx.rotate(this.angle);

        ctx.fillStyle = color;

        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);        

        ctx.restore();    

    }

}

 

function updateGameArea() {

    myGameArea.clear();

    myGamePiece.angle += 1 * Math.PI / 180;    

    myGamePiece.update();

}

 

</script>

 

<p>每当游戏区更新(每秒50次)时,红色方块将旋转一度。

 

注意:angle属性必须是弧度。</p>

</body>

</html>


 
上一篇:html5游戏如何设置对象的反弹  下一篇:返回列表