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

 

加速

在游戏中,当你有一个力量把你拉下来的时候,你应该有一个方法来迫使组件加速。


当有人点击一个按钮时触发一个功能,使红色方块在空中飞起来:

Example

<script>
function accelerate(n) {
    myGamePiece.gravity = n;
}

</script>

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>

 

完整源代码:

<!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.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, type) {

    this.type = type;

    this.width = width;

    this.height = height;

    this.x = x;

    this.y = y;    

    this.speedX = 0;

    this.speedY = 0;    

    this.gravity = 0.05;

    this.gravitySpeed = 0;

    this.update = function() {

        ctx = myGameArea.context;

        ctx.fillStyle = color;

        ctx.fillRect(this.x, this.y, this.width, this.height);

    }

    this.newPos = function() {

        this.gravitySpeed += this.gravity;

        this.x += this.speedX;

        this.y += this.speedY + this.gravitySpeed;

        this.hitBottom();

    }

    this.hitBottom = function() {

        var rockbottom = myGameArea.canvas.height - this.height;

        if (this.y > rockbottom) {

            this.y = rockbottom;

            this.gravitySpeed = 0;

        }

    }

}


function updateGameArea() {

    myGameArea.clear();

    myGamePiece.newPos();

    myGamePiece.update();

}


function accelerate(n) {

    myGamePiece.gravity = n;

}

</script>


<br>

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>


<p>尝试加速红色方块。</p>


</body>

</html>

 查看效果>>>


 
上一篇:html5游戏编程:如何击中游戏区域的底部时停止下降  下一篇:返回列表