aboutsummaryrefslogtreecommitdiff
path: root/files/pl/games
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-15 13:01:50 -0400
committerGitHub <noreply@github.com>2021-07-15 13:01:50 -0400
commit037a4118c4324d39fdef8bd23f9dd21b02f50946 (patch)
tree22dac72fd38b56df6f2caf0fb7f21cb187179e76 /files/pl/games
parent335d06b805fab26d8d4b3e1378e7722c12f715fe (diff)
downloadtranslated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.gz
translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.bz2
translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.zip
delete pages that were never translated from en-US (pl, part 1) (#1549)
Diffstat (limited to 'files/pl/games')
-rw-r--r--files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html129
1 files changed, 0 insertions, 129 deletions
diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
deleted file mode 100644
index f0883194a9..0000000000
--- a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: Wykrywanie kolizji
-slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
-translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
-original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/wykrywanie_kolizji
----
-<div>{{GamesSidebar}}</div>
-
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
-
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
-
-<div class="summary">
-<p>This is the <strong>7th step</strong> out of 10 of the <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. You can find the source code as it should look after completing this lesson at <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p>
-</div>
-
-<p><span class="seoSummary">We have the bricks appearing on the screen already, but the game still isn't <em>that</em> interesting as the ball goes through them. We need to think about adding collision detection so it can bounce off the bricks and break them.</span></p>
-
-<p>It's our decision how to implement this, of course, but it can be tough to calculate whether the ball is touching the rectangle or not because there are no helper functions in Canvas for this. For the sake of this tutorial we will do it the easiest way possible. We will check if the center of the ball is colliding with any of the given bricks. This won't give a perfect result every time, and there are much more sophisticated ways to do collision detection, but this will work fine for teaching you the basic concepts.</p>
-
-<h2 id="A_collision_detection_function">A collision detection function</h2>
-
-<p>To kick this all off we want to create a collision detection function that will loop through all the bricks and compare every single brick's position with the ball's coordinates as each frame is drawn. For better readability of the code we will define the <code>b</code> variable for storing the brick object in every loop of the collision detection:</p>
-
-<pre class="brush: js">function collisionDetection() {
- for(var c=0; c&lt;brickColumnCount; c++) {
- for(var r=0; r&lt;brickRowCount; r++) {
- var b = bricks[c][r];
- // calculations
- }
- }
-}</pre>
-
-<p>If the center of the ball is inside the coordinates of one of our bricks, we'll change the direction of the ball. For the center of the ball to be inside the brick, all four of the following statements need to be true:</p>
-
-<ul>
- <li>The x position of the ball is greater than the x position of the brick.</li>
- <li>The x position of the ball is less than the x position of the brick plus its width.</li>
- <li>The y position of the ball is greater than the y position of the brick.</li>
- <li>The y position of the ball is less than the y position of the brick plus its height.</li>
-</ul>
-
-<p>Let's write that down in code:</p>
-
-<pre class="brush: js">function collisionDetection() {
- for(var c=0; c&lt;brickColumnCount; c++) {
- for(var r=0; r&lt;brickRowCount; r++) {
- var b = bricks[c][r];
- if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
- dy = -dy;
- }
- }
- }
-}</pre>
-
-<p>Add the above block to your code, below the <code>keyUpHandler()</code> function.</p>
-
-<h2 id="Making_the_bricks_disappear_after_they_are_hit">Making the bricks disappear after they are hit</h2>
-
-<p>The above code will work as desired and the ball changes its direction. The problem is that the bricks are staying where they are. We have to figure out a way to get rid of the ones we've already hit with the ball. We can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. In the part of the code where we initialize the bricks, let's add a <code>status</code> property to each brick object. Update the following part of the code as indicated by the highlighted line:</p>
-
-<pre class="brush: js; highlight:[5]">var bricks = [];
-for(var c=0; c&lt;brickColumnCount; c++) {
- bricks[c] = [];
- for(var r=0; r&lt;brickRowCount; r++) {
- bricks[c][r] = { x: 0, y: 0, status: 1 };
- }
-}</pre>
-
-<p>Next we'll check the value of each brick's <code>status</code> property in the <code>drawBricks()</code> function before drawing it — if <code>status</code> is <code>1</code>, then draw it, but if it's <code>0</code>, then it was hit by the ball and we don't want it on the screen anymore. Update your <code>drawBricks()</code> function as follows:</p>
-
-<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() {
- for(var c=0; c&lt;brickColumnCount; c++) {
- for(var r=0; r&lt;brickRowCount; r++) {
- if(bricks[c][r].status == 1) {
- var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
- var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
- bricks[c][r].x = brickX;
- bricks[c][r].y = brickY;
- ctx.beginPath();
- ctx.rect(brickX, brickY, brickWidth, brickHeight);
- ctx.fillStyle = "#0095DD";
- ctx.fill();
- ctx.closePath();
- }
- }
- }
-}</pre>
-
-<h2 id="Tracking_and_updating_the_status_in_the_collision_detection_function">Tracking and updating the status in the collision detection function</h2>
-
-<p>Now we need to involve the brick <code>status</code> property in the <code>collisionDetection()</code> function: if the brick is active (its status is <code>1</code>) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to <code>0</code> so it won't be painted on the screen. Update your <code>collisionDetection()</code> function as indicated below:</p>
-
-<pre class="brush: js; highlight:[5,6,7,8,9,10]">function collisionDetection() {
- for(var c=0; c&lt;brickColumnCount; c++) {
- for(var r=0; r&lt;brickRowCount; r++) {
- var b = bricks[c][r];
- if(b.status == 1) {
- if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
- dy = -dy;
- b.status = 0;
- }
- }
- }
- }
-}</pre>
-
-<h2 id="Activating_our_collision_detection">Activating our collision detection</h2>
-
-<p>The last thing to do is to add a call to the <code>collisionDetection()</code> function to our main <code>draw()</code> function. Add the following line to the <code>draw()</code> function, just below the <code>drawPaddle()</code> call:</p>
-
-<pre class="brush: js">collisionDetection();
-</pre>
-
-<h2 id="Compare_your_code">Compare your code</h2>
-
-<p>The collision detection of the ball is now checked on every frame, with every brick. Now we can destroy bricks! :-</p>
-
-<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}</p>
-
-<div class="note">
-<p><strong>Exercise</strong>: change the color of the ball when it hits the brick.</p>
-</div>
-
-<h2 id="Next_steps">Next steps</h2>
-
-<p>We are definitely getting there now; let's move on! In the eighth chapter we will be looking at how to <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win">Track the score and win</a>.</p>
-
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>