 [JS], Potrzebuję pomocy w |
  |
| [JS], Potrzebuję pomocy w |
 30.05.2017, 08:17:39
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 1 Pomógł: 0 Dołączył: 30.05.2017 Ostrzeżenie: (0%) 
 |
Potrzebuję pilnej pomocy. Mógłby ktoś wytłumaczyć grę Pong? Mam gotowy kod ale nie całkiem go rozumiem.
<!doctype html> <head> <title>pong</title> </head> <body> <script> var WIDTH = 700, HEIGHT = 600, pi = Math.PI, UpArrow = 38, DownArrow = 40, canvas, ctx, keystate, player = { x: null, y: null, width: 20, height: 100, update: function() { if (keystate[UpArrow]) this.y -= 10; if (keystate[DownArrow]) this.y += 7; this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0); }, draw: function() { ctx.fillRect(this.x, this.y, this.width, this.height); } }, ai = { x: null, y: null, width: 20, height: 100, update: function() { var desty = ball.y - (this.height - ball.side)*0.5; this.y += (desty - this.y) * 0.1; this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0); }, draw: function() { ctx.fillRect(this.x, this.y, this.width, this.height); } }, ball = { x: null, y: null, vel: null, side: 20, speed: 12, serve: function(side) { var r = Math.random(); this.x = side===1 ? player.x+player.width : ai.x - this.side; this.y = (HEIGHT - this.side)*r; var phi = 0.1*pi*(1 - 2*r); this.vel = { x: side*this.speed*Math.cos(phi), y: this.speed*Math.sin(phi) } }, update: function() { this.x += this.vel.x; this.y += this.vel.y; if (0 > this.y || this.y+this.side > HEIGHT) { var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y+this.side); this.y += 2*offset; this.vel.y *= -1; } var AABBIntersect = function(ax, ay, aw, ah, bx, by, bw, bh) { return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah; }; var pdle = this.vel.x < 0 ? player : ai; if (AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height, this.x, this.y, this.side, this.side) ) { this.x = pdle===player ? player.x+player.width : ai.x - this.side; var n = (this.y+this.side - pdle.y)/(pdle.height+this.side); var phi = 0.25*pi*(2*n - 1); var smash = Math.abs(phi) > 0.2*pi ? 1.5 : 1; this.vel.x = smash*(pdle===player ? 1 : -1)*this.speed*Math.cos(phi); this.vel.y = smash*this.speed*Math.sin(phi); } if (0 > this.x+this.side || this.x > WIDTH) { this.serve(pdle===player ? 1 : -1); } }, draw: function() { ctx.fillRect(this.x, this.y, this.side, this.side); } }; function main() { canvas = document.createElement("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; ctx = canvas.getContext("2d"); document.body.appendChild(canvas); keystate = {}; document.addEventListener("keydown", function(evt) { keystate[evt.keyCode] = true; }); document.addEventListener("keyup", function(evt) { delete keystate[evt.keyCode]; }); init(); var loop = function() { update(); draw(); window.requestAnimationFrame(loop, canvas); }; window.requestAnimationFrame(loop, canvas); } function init() { player.x = player.width; player.y = (HEIGHT - player.height)/2; ai.x = WIDTH - (player.width + ai.width); ai.y = (HEIGHT - ai.height)/2; ball.serve(1); } function update() { ball.update(); player.update(); ai.update(); } function draw() { ctx.fillRect(0, 0, WIDTH, HEIGHT); ctx.save(); ctx.fillStyle = "#fff"; ball.draw(); player.draw(); ai.draw(); var w = 4; var x = (WIDTH - w)*0.5; var y = 0; var step = HEIGHT/20; while (y < HEIGHT) { ctx.fillRect(x, y+step*0.25, w, step*0.5); y += step; } ctx.restore(); } main(); </script> </body> </html> |
 |
 
|
|
|
Wersja Lo-Fi | Aktualny czas: 18.07.2025 - 07:01 |
