Grawitacja gry
Niektóre gry mają siły, które ciągną element gry w jednym kierunku, na przykład grawitacja przyciąga obiekty do ziemi.
Powaga
Aby dodać tę funkcjonalność do naszego konstruktora komponentów, najpierw dodaj gravitywłaściwość, która ustawia aktualną grawitację. Następnie dodaj gravitySpeedwłaściwość, która zwiększa się za każdym razem, gdy aktualizujemy ramkę:
Przykład
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;
}
}
Uderz w dno
Aby zapobiec wiecznemu spadaniu czerwonego kwadratu, zatrzymaj spadanie, gdy dotknie on dolnej części obszaru gry:
Przykład
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;
}
}
Przyspiesz w górę
W grze, gdy masz siłę, która ciągnie Cię w dół, powinieneś mieć metodę na zmuszenie komponentu do przyspieszenia.
Uruchom funkcję, gdy ktoś kliknie przycisk i sprawi, że czerwony kwadrat wzniesie się w powietrze:
Przykład
<script>function accelerate(n) {
myGamePiece.gravity = n;
}</script>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>
Gra
Stwórz grę w oparciu o to, czego do tej pory się nauczyliśmy: