Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Creating a Dodge Game
ID	5347594564747264
Created	4 years ago, 1620047522871
Updated	4 years ago, 1620110657803
Code	<!DOCTYPE html> <!-- Creating a Dodge Game (Tutorial) Gray Wolf, May 2021 Try out the light/dark mode toggle (bottom right of the page). This was my first attempt at a full on tutorial on KA with code snippets and embedded code. Note that the embedded programs are fully functional except for the Restart button. Let me know what you think of this style, how I can improve it, any issues, etc. Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 Credits - Pamela for the template on adding a PJS program into HTML https://www.khanacademy.org/cs/pjs-inside-webpages-template/5157014494511104 - KY for embedding multiple programs into canvas elements https://www.khanacademy.org/profile/KyProgramming 𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming for the thumbnail saving functionality https://www.khanacademy.org/profile/kaid_1111587369709668626687999 - Slider button used to toggle light/dark mode adapted from https://www.w3schools.com/howto/howto_css_switch.asp - Mozilla Developer Network (MDN) site as always :) --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Creating a Dodge Game</title> <link rel="stylesheet" id="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-light.min.css"/> <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet"> <style> , ::before, ::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; transition-duration: 0.2s; } html.dark body { background: rgb(48, 47, 48); color: rgb(232, 232, 232); } html.dark body a { color: rgb(230, 67, 105); } html.dark body a:hover { color: rgb(209, 75, 107); } #header { /local variables used for the header colors/ --hlight-color: rgb(130, 90, 74); --hdark-color: rgb(119, 82, 68); padding: 20px 15px; border-bottom: solid 1px rgba(200, 200, 200, 0.2); font-weight: bold; margin-top: 0; margin-bottom: 20px; color: white; background-color: var(--hlight-color); background: repeating-linear-gradient(-45deg, var(--hlight-color) 0, var(--hlight-color) 25%, var(--hdark-color) 0, var(--hdark-color) 38%) 0 / 20px 20px; font-family: 'Poiret One', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; } html.dark #header { --hlight-color: rgb(89, 62, 52); --hdark-color: rgb(74, 52, 44); color: rgb(232, 232, 232); } #header span { display: flex; align-items: center; font-size: 34px; margin-bottom: -20px; } #header p { font-size: 20px; font-weight: normal; } #header span img { width: 80px; margin-right: 5px; } #themeSlider { position: fixed; bottom: 8px; right: 10px; } /slider css adapted from web example/ .switch { position: relative; display: inline-block; width: 35px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(191, 187, 191, 0.5); -webkit-transition: .4s; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: rgba(82, 82, 82, 0.5); } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .program { border: solid 2px rgb(220, 220, 220); } .author { color: rgb(122, 118, 122); } .note { color: rgb(242, 75, 117); margin-top: 0; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } </style> </head> <body> <main> <div id="themeSlider"> <label class="switch"> <input id="themeCheckbox" type="checkbox"> <span class="slider"></span> </label> </div> <div id="header"> <div class="container"> <span><img src="https://cdn.kastatic.org/images/avatars/svg/sneak-peak-blue.svg">GW Tutorials</span> <!--<span><img src="https://cdn.kastatic.org/images/badges/moon/1000-kelvin-512x512.png">GW Tutorials</span>--> <!--<span><img src="https://cdn.kastatic.org/images/badges/earth/incredible-inspiration-512x512.png">GW Tutorials</span>--> <p>Tutorials for the KA programming community</p> <!--https://cdn.kastatic.org/images/badges/moon/1000-kelvin-512x512.png--> <!--https://cdn.kastatic.org/images/badges/earth/incredible-inspiration-512x512.png--> </div> </div> <div class="container"> <h1>Creating a Dodge Game</h1> <p class="author">By <a href="https://www.khanacademy.org/profile/kaid_639291037700385781852565" target="_blank">Gray Wolf</a>, May 2021</p> <p>This is a tutorial on how to make a basic dodge game on Khan Academy (KA).</p> <p>When you're looking to make your first game on KA, a dodge game is a great place to start. The concepts and skills you learn by making a dodge game will be transferable into other more advanced/complex games as you start to increase your skill level.</p> <p>This is not intended to be used as a template (although you could), but to help you understand what's required and how to put everything together. It's more so you can learn how to make a game, and then use what you learned to make more games.</p> <p><em>Please note that there are many ways to write code and as such other people's dodge games may be written very differently to this one with much less code. I've mainly focused on trying to highlight some of the key concepts to help you with your future games, etc.</em></p> <p>Also a reminder that you can always check out the <a href="https://www.khanacademy.org/computing/computer-programming/pjs-documentation" target="_blank">PJS documentation</a> for help as you go.</p> <p>So what are we waiting for - let's get started.</p> <!--What do we need--> <h3>What do we need for a basic dodge game?</h3> <ul> <li>Player</li> <li>Enemies (falling blocks)</li> <li>Ground</li> <li>Score</li> <li>Health</li> <li>Collisions</li> <li>Player movement (using the keys on your keyboard)</li> <li>Enemy movement</li> <li>Play / Game Over / Replay</li> </ul> <!--Skills required--> <h3>What skills are required?</h3> <p>Ideally, you should have already completed 100% of <a href="https://www.khanacademy.org/computing/computer-programming/programming">Intro to JS: Drawing & Animation</a>. This covers all the concepts that make up the dodge game.</p> <p>Note that I'll try to explain as much as possible as we go through the tutorial. If you have any further questions you can always ask me in the Questions tab under this program.</p> <ul> <li>Using variables</li> <li>Using <code class="javascript">random</code> to generate random numbers</li> <li>Using <code class="javascript">constrain</code> to limit the movement of the player</li> <li>Key Pressed/Released and Mouse Clicked events</li> <li>Functions</li> <li>Conditional Statements</li> <li>Arrays</li> <li>Loops</li> <li>Literal Objects (to store the player and enemy properties)</li> </ul> <!--Project / Canvas--> <h3>Project / Canvas</h3> <p>First thing we need is a new project. Steps required are below:</p> <ol> <li><a href="https://www.khanacademy.org/computer-programming/new/pjs" target="_blank">Create and save a new program</a> (name it anything you like)</li> <li>Go into the Settings (beneath the program) and change the width and height to 600 (default is 400)</li> <li>Save the program</li> <li>Refresh your page (browser window)</li> </ol> <p>We're now ready to write some actual code.</p> <!--The draw function--> <h3>The <code class="javascript">draw</code> function</h3> <p>Because we are animating (player and enemies moving) we'll need to use the <code class="javascript">draw</code> function. So we might as well set that up first then draw the ground. The code below sets up the <code class="javascript">draw</code> function and sets the background to white. Note that you can set the background color to whatever you like.</p> <pre><code class="javascript">draw = function() { background(255, 255, 255); //other code goes here... }; </code></pre> <p>Next we can draw the ground. Note that the ground doesn't actually do anything. It's just a rectangle that makes it look like the player is standing on the ground. So the <code class="javascript">draw</code> function should now look something like this:</p> <pre><code class="javascript">draw = function() { background(255, 255, 255); //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; </code></pre> <canvas class="program"></canvas> <!--The Player--> <h3>The Player</h3> <p>Next, we'll create our player object. A player will need an <code class="javascript">x</code> and <code class="javascript">y</code> value which will determine the player's position on the screen, and a <code class="javascript">width</code> and <code class="javascript">height</code>. We will also set a <code class="javascript">speed</code> the player should move, and set the player's <code class="javascript">health</code> so we can track when it's game over. And finally a color we want our player to be. Note that I generally use <code class="javascript">vx</code> for the horizontal speed and <code class="javascript">vy</code> for the vertical speed.</p> <p>We could use individual variables for each of the properties of the player. However we will end up using a literal object which is a much cleaner approach. Below is how you might set the player up using individual variables.</p> <pre><code class="javascript">var playerX = 325; var playerY = 480; var playerW = 50; //width of the player var playerH = 70; //height of the player var playerVX = 5; //horizontal velocity (speed) for the player var playerHealth = 100; var playerColor = color(94, 198, 219); </code></pre> <p>Now doing the same thing using an object literal which is what we'll use in this game.</p> <pre><code class="javascript">var player = { x: 325, y: 480, w: 50, //width of the player h: 70, //height of the player vx: 5, //horizontal velocity (speed) for the player health: 100, color: color(94, 198, 219) }; </code></pre> <p>This creates a player object with seven properties. To access one of the properties you can simply start with the name of the object, a <strong>.</strong> then the property you want to get. For example:</p> <pre><code class="javascript">player.vx; player.health; </code></pre> <p>To set a value you can do the following:</p> <pre><code class="javascript">player.x = 300; //set x to 300 player.health-= 10; //subtract 10 from the health </code></pre> <p>If you wanted to draw the player at its current location and width/height you would do the following:</p> <pre><code class="javascript">rect(player.x, player.y, player.w, player.h); </code></pre> <p>Let's update our code to show the player sitting on the ground. Note that the player object is created before (not inside) the <code class="javascript">draw</code> function as we only want to create it once.</p> <!--Player sitting on the ground--> <pre><code class="javascript">var player = { x: 325, y: 480, w: 50, //width of the player h: 70, //height of the player vx: 5, //horizontal velocity (speed) for the player health: 100, color: color(94, 198, 219) }; draw = function() { background(255, 255, 255); //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; </code></pre> <canvas class="program"></canvas> <h4>Moving the Player</h4> <p>The next thing we want to do is move the player when you press the LEFT/RIGHT arrow keys or the A/D keys. Note that it's good practice to cater for both sets of key combinations to allow for both left and right handed people or just personal preference. To be able to capture what key was pressed/released we will add the following.</p> <pre><code class="javascript">var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; </code></pre> <p>This is a very common way of capturing what key was pressed that you'll see in most games on KA. The first time you press a key it will be stored in the <code class="javascript">keys</code> array and set to true. Then when you release that same key it will set it to false. All you need to do in your code is check to see if the key is pressed and run your code appropriately.</p> <p>To check if a key was pressed you would do something like this:</p> <pre><code class="javascript">if(keys[LEFT] \|\| keys[65]) { //the key code for the A key is 65 //write code you want to execute if the LEFT arrow key or the A key is pressed } </code></pre> <p>Note the <code class="javascript">\|\|</code> that separates the conditions. This denotes an OR comparison. So if the LEFT key was pressed <strong>OR</strong> the A key was pressed then the condition is true.</p> <p>For our player object we want to move the player either left or right at the player's speed (<code class="javascript">vx</code>). The code we might use for this is:</p> <pre><code class="javascript">if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); } </code></pre> <p>So what is the <code class="javascript">constrain</code> part doing? It ensures that the value you're trying to set is constrained within a minumum value and a maximum value that you provide. Check out the documentation on <code class="javascript">constrain</code> here: <a href="https://www.khanacademy.org/computer-programming/constrainvalue-min-max/5870136103796736" target="_blank">https://www.khanacademy.org/computer-programming/constrainvalue-min-max/5870136103796736</a></p> <p>The reason we are doing this here is to ensure our player can't move outside the canvas. So the minimum value <code class="javascript">player.x</code> can be is <code class="javascript">0</code> (left side of the screen) and the maximum is <code class="javascript">width - player.w</code> (right side of the screen).</p> <p>Let's put what we have so far together to see how it all works.</p> <pre><code class="javascript">//used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; draw = function() { background(255, 255, 255); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; </code></pre> <canvas class="program"></canvas> <p class="note">Click on the screen then use the keys to move the player.</p> <!--The Enemies--> <h3>The Enemies</h3> <p>Now that we have our player displayed and moving we can start to add some enemies. An enemy is just another rectangle that will fall from the top of the screen which the player needs to dodge.</p> <p>Because we can have many enemies we'll need to setup an array to hold them all. Let's do that now.</p> <pre><code class="javascript">//an array to hold all the enemy objects var enemies = []; </code></pre> <p>So what properties does an enemy need? They'll need an <code class="javascript">x</code> and <code class="javascript">y</code> value plus a <code class="javascript">width</code> and <code class="javascript">height</code>. They'll also need a <code class="javascript">speed</code> property. This time we'll use <code class="javascript">vy</code> for the speed since they are falling vertically. And maybe a <code class="javascript">color</code> for the enemy. Let's create a single enemy object similar to how we created our <code class="javascript">player</code> object.</p> <pre><code class="javascript">var enemy = { x: random(width), //random number between 0 and the width of the screen y: random(-100, -70), //random number between -100 and -70 (just off the top of the screen) w: random(30, 50), //random width h: random(30, 50), //random height vy: random(2, 4), //random vertical speed color: color(217, 94, 139) //color for the enemy }; </code></pre> <p>This will create a single enemy object. However, we want to add multiple enemy objects to the <code class="javascript">enemies</code> array. To do that we can use the <code class="javascript">push</code> method of the array to push (add) an enemy object into the array.</p> <pre><code class="javascript">enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); </code></pre> <p>Note that we don't specify a name for the object. We just push the literal object into the array which we'll access later when iterating (looping) through the array.</p> <p>So how often do we add new enemies to the <code class="javascript">enemies</code> array? We'll set a variable that determines the frequency and then use the modulus (%) operator to check the frequency. We'll also use <code class="javascript">frameCount</code> which is a built-in variable that increments each time the <code class="javascript">draw</code> function executes.</p> <p>Firstly let's make sure we understand how <code class="javascript">frameCount</code> works.</p> <h4>frameCount</h4> <p>Each time the <code class="javascript">draw</code> function runs it increments the built-in variable <code class="javascript">frameCount</code> by 1. When you click on the Restart button <code class="javascript">frameCount</code> will be reset to 0. If you put the following code into a program you'll see the value of <code class="javascript">frameCount</code> increasing.</p> <pre><code class="javascript">fill(0, 0, 0); textSize(50); textAlign(CENTER, CENTER); draw = function() { background(255, 255, 255); //display the value of frameCount text(frameCount, width/2, height/2); }; </code></pre> <p>Now let's make sure we understand how <code class="javascript">%</code> works.</p> <h4>The Modulus % operator</h4> <p>The modulus % operator will return the remainder of a division.</p> <p>Examples:</p> <ul> <li>4 / 2 = 2 with no remainder</li> <li>5 / 2 = 2 with 1 remainder</li> <li>6 / 2 = 3 with no remainder</li> </ul> <p>So:</p> <ul> <li>4 % 2 = 0</li> <li>5 % 2 = 1</li> <li>6 % 2 = 0</li> </ul> <p>See that it returns the remainder only.</p> <p>If we had a frequency of 120 (for example) then we could have some code (as shown below) to check if the remainder of <code class="javascript">frameCount</code> is divisible by 120 with no remainder (the remainder is equal to zero), and run some code if it's true. Effectively it would only run the code every 2 seconds since the <code class="javascript">draw</code> function runs <em>approximately</em> 60 times a second on KA by default.</p> <pre><code class="javascript">if(frameCount % 120 === 0) { //run your code here } </code></pre> <p>So when <code class="javascript">frameCount</code> is equal to 0, 120, 240, 360, etc. there will be no remainder and the code will execute. If you follow on you'll see how we can use both <code class="javascript">frameCount</code> and <code class="javascript">%</code> to add enemies at a set frequency.</p> <p>Let's first declare a new variable to hold the frequency.</p> <pre><code class="javascript">var enemyFrequency = 120; </code></pre> <p>Now let's setup the code to add a new enemy to the <code class="javascript">enemies</code> array using the example we had before.</p> <pre><code class="javascript">if(frameCount % enemyFrequency === 0) { //add a new enemy object to the enemies array enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } </code></pre> <h4>Moving, Drawing and Removing Enemies</h4> <p>Ok, so we now have enemies being added to the <code class="javascript">enemies</code> array every 2 seconds. Next we need to move and draw them. To do this we will need to use a loop to iterate through the array and move/draw each enemy. There's a few different kinds of loops, but the most common one you'll see on KA is the <code class="javascript">for</code> loop which is what we'll use here.</p> <p>Another thing we'll need to do is remove the enemies when they fall past the bottom of the screen otherwise we'll end up with more and more enemies and the program will start to slow down and end up crashing. So within the loop we'll also check the value of the <code class="javascript">y</code> property and if it's greater than the height of the screen we'll remove that enemy from the array.</p> <p>So how do we setup our <code class="javascript">for</code> loop? See the code below:</p> <pre><code class="javascript">for(var i = enemies.length - 1; i &gt= 0; i--) { //get the enemy at the current index //move the enemy //draw the enemy //remove the enemy if it goes off the screen } </code></pre> <p>Note that we are starting our index <code class="javascript">i</code> from the end of the loop (<code class="javascript">enemies.length - 1</code>) and working backwards. This is because we are potentially removing items from the array. If we were to start from the beginning of the array and worked to the end, removing items as we went, we would cause some items in the array to be skipped. This is a common reason why you see flickering in some games.</p> <p>Ok, so let's start to add the code to our loop to show some enemies.</p> <pre><code class="javascript">for(var i = enemies.length - 1; i &gt= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y &gt height) { enemies.splice(i, 1); } } </code></pre> <p>You'll notice we use <code class="javascript">splice</code> to remove items from the array. This is a built-in method for arrays where you specify the index you want to start removing items from, and how many items from that index you want to remove. In our case we only want to remove the single enemy so we put 1.</p> <p>Wow, so that's a lot to take in. Let's put it all together and see what we have so far.</p> <pre><code class="javascript">//used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; draw = function() { background(255, 255, 255); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > height) { enemies.splice(i, 1); } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; </code></pre> <canvas class="program"></canvas> <h4>Score and Health</h4> <p>OK, so we now have our player that we can move horizontally and enemies falling down the screen. The next thing we will do is add in the scoring and display both the score and health on the screen. We already have our <code class="javascript">health</code> property on the <code class="javascript">player</code> object, so we just need to add a variable for the score. We'll declare that before the <code class="javascript">draw</code> function as so:</p> <pre><code class="javascript">//set the initial score to 0 var score = 0; </code></pre> <p>Then in the <code class="javascript">draw</code> function we'll increase <code class="javascript">score</code> by one each time.</p> <pre><code class="javascript">//increase the score score++; </code></pre> <p>To display the score and health we can use the following code in the <code class="javascript">draw</code> function.</p> <pre><code class="javascript">//display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); </code></pre> <p>Let's see how all the code will look up to this point before we move on to collisions.</p> <pre><code class="javascript">//used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; draw = function() { background(255, 255, 255); //increase the score score++; //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > height) { enemies.splice(i, 1); } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; </code></pre> <canvas class="program"></canvas> <h4>Collisions</h4> <p>The next thing we will do is check to see if the player collides with each of the enemies and reduce the health of the player if it does collide. The player's health starts at 100, so we'll reduce it by 10 each time and when it reaches 0 it will be game over.</p> <p>Since both the player and the enemies are rectangles we'll do rect to rect collisions which are the most common type of collision. We can check for collisions within the loop that iterates through each of the enemies. See the code below:</p> <pre><code class="javascript">if( player.x &lt enemy.x + enemy.w && player.x + player.w &gt enemy.x && player.y &lt enemy.y + enemy.h && player.y + player.h &gt enemy.y) { //write code for the collision } </code></pre> <p>This checks each side of the player (top, bottom, left, right) to see if it has overlapped with the enemy.</p> <p>There are actually two things we need to do if there is a collision. Firstly we will reduce the player's health by 10. Secondly we will remove the enemy that collided with the player from the enemies array. Let's see how this would look inside the enemies loop.</p> <pre><code class="javascript">//loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > height) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x &lt enemy.x + enemy.w && player.x + player.w &gt enemy.x && player.y &lt enemy.y + enemy.h && player.y + player.h &gt enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } </code></pre> <p>You'll notice that we used <code class="javascript">constrain</code> again as we don't want the health going lower than zero.</p> <p>So putting it all together let's see what we've got so far.</p> <pre><code class="javascript">//used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; draw = function() { background(255, 255, 255); //increase the score score++; //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > height) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x &lt enemy.x + enemy.w && player.x + player.w &gt enemy.x && player.y &lt enemy.y + enemy.h && player.y + player.h &gt enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; </code></pre> <canvas class="program"></canvas> <h4>Game over</h4> <p>Now we need to add something to manage the game over part. Remember if the player's health reaches zero then it's game over. So let's create a variable to hold the game state. It will start with an initial value of false, then change it to true if the health is zero. We'll declare the <code class="javascript">gameOver</code> variable before the <code class="javascript">draw</code> function as so:</p> <pre><code class="javascript">//set the initial state of the game var gameOver = false; </code></pre> <p>Then we'll change it to true if health is zero.</p> <pre><code class="javascript">//check if the player runs out of health if(player.health === 0) { gameOver = true; } </code></pre> <p>So what happens when it's game over? We want to run some code all the time; some code only when it's not game over; and some code only when it's game over.</p> <p>In this game we'll always display the score and health plus the player and ground. When it's game over we'll also display some text saying Game Over. And run the rest of the code when it's not game over (the player is still alive). To do this we'll add a condition statement for when <code class="javascript">gameOver</code> is true and when it's false.</p> <pre><code class="javascript">//code to run all the time goes here if(gameOver) { //code that runs when it's game over goes here } else { //code that runs when it's NOT game over goes here } //other code that runs all the time goes here </code></pre> <p>See full code below with everything so far.</p> <pre><code class="javascript">//used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; //set the initial state of the game var gameOver = false; draw = function() { background(255, 255, 255); //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //if game over if(gameOver) { textAlign(CENTER); textSize(30); fill(0); text("GAME OVER\n\nClick the Restart Button to play again", 300, 300); } //else (not game over) else { //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > height) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x &lt enemy.x + enemy.w && player.x + player.w &gt enemy.x && player.y &lt enemy.y + enemy.h && player.y + player.h &gt enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //increase the score score++; //check if the player runs out of health if(player.health === 0) { gameOver = true; } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; </code></pre> <canvas class="program"></canvas> <p class="note">Note that the Restart button isn't available within this example.</p> <h1>Congratulations - we now have a fully working dodge game.</h1> <br> <p>The rest of the tutorial will be working on improving different aspects of the game.</p> <h3>Restarting the game when you click on the screen</h3> <p>At the moment you need to click on the Restart button to restart the game. We'll add some code to restart the game when the user clicks on the screen instead. To do this we need to add a <code class="javascript">mouseClicked</code> function and reset a few things. We also only want it to reset the game if it's already game over. We'll want to reset the <code class="javascript">score</code> back to 0, <code class="javascript">gameOver</code> back to false, player's <code class="javascript">health</code> back to 100, and lastly clear the <code class="javascript">enemies</code> array so there aren't any enemies left. We'll put the <code class="javascript">mouseClicked</code> function after the <code class="javascript">draw</code> function. See the code below:</p> <pre><code class="javascript">mouseClicked = function() { //if it's currently game over if(gameOver) { //set the score back to 0 score = 0; //set the game over state back to false gameOver = false; //set the player's health back to 100 player.health = 100; //clear the enemies array enemies.length = 0; } }; </code></pre> <p>Note that to clear the <code class="javascript">enemies</code> array we used <code class="javascript">enemies.length = 0;</code> This is by far the most efficient way to clear an array.</p> <h3>Adding difficulty as the game goes on</h3> <p>Most games get harder as you progress. A dodge game is no different. So in this game we'll periodically reduce the <code class="javascript">enemyFrequency</code> so enemies get added more often as the game progresses. We'll do this by using the existing conditional statement we use for adding enemies to the array. See code below:</p> <pre><code class="javascript">enemyFrequency = constrain(enemyFrequency - 2, 10, 120); </code></pre> <p>Using <code class="javascript">constrain</code> again, we'll reduce <code class="javascript">enemyFrequency</code> by 2 each time, but make sure that it doesn't go lower than 10. See code below:</p> <pre><code class="javascript">if(frameCount % enemyFrequency === 0) { //add a new enemy object to the enemies array enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); //change the frequency of the enemies enemyFrequency = constrain(enemyFrequency - 2, 10, 120); } </code></pre> <p>We'll also need to reset the value of <code class="javascript">enemyFrequency</code> when we restart the game.</p> <pre><code class="javascript">mouseClicked = function() { //if it's currently game over if(gameOver) { //set the score back to 0 score = 0; //set the game over state back to false gameOver = false; //set the player's health back to 100 player.health = 100; //clear the enemies array enemies.length = 0; //reset the enemy frequency enemyFrequency = 120; } }; </code></pre> <h3>Random colors for the enemies</h3> <p>Maybe not something you'd want to do in your dodge game but good to show you how you can set random colors. When you create a color you put three numbers between 0 and 255 for the amount of red, green and blue you want to use respectively. We can use the <code class="javascript">random</code> function to generate random red, green and blue values. See code below:</p> <pre><code class="javascript">//manual values for red, green and blue color(200, 100, 150); //random values for red, green and blue (between 0 and 255) color(random(0, 255), random(0, 255), random(0, 255)); </code></pre> <p>We'll set random red, green and blue color values between 100 and 220 for our enemies. See code below:</p> <pre><code class="javascript">enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(random(100, 220), random(100, 220), random(100, 220)) } ); </code></pre> <h3>Moving eyes for the player based on current direction</h3> <p>Many games have the eyes of the player facing the direction they're currently going. We'll add a couple of eyes and change them slightly depending on the direction of the player.</p> <p> See code below for basic eyes that don't move (we'll change them shortly so they move):</p> <pre><code class="javascript">fill(0); ellipse(player.x + player.w 0.3, player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); ellipse(player.x + player.w * 0.7, player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); </code></pre> <p>Note that we've set the width and height of the eyes based on a percentage of the width and height of the player. This is important because you might decide to change the width and height of the player at some stage and you want everything to stay in the correct proportion. If the player gets bigger, the eyes will automatically get bigger, etc.</p> <p>To move them in the direction the player is facing we'll add a property to the <code class="javascript">player</code> object that determines the direction it's going. -1 will be left, 1 will be right, and 0 will be stationary (no direction)</p> <pre><code class="javascript">var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219), direction: 0 }; </code></pre> <p>Then when the user presses one of the keys to move the player we'll set the <code class="javascript">direction</code> accordingly.</p> <pre><code class="javascript">//move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); //set the direction player.direction = -1; } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); //set the direction player.direction = 1; } </code></pre> <p>And we want to reset the direction to 0 each time in the <code class="javascript">draw</code> function after we draw the player.</p> <pre><code class="javascript">//reset the direction player.direction = 0; </code></pre> <p>Then we can use this to move the eyes appropriately as so:</p> <pre><code class="javascript">ellipse(player.x + player.w * 0.3 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); ellipse(player.x + player.w * 0.7 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); </code></pre> <p>Remember that <code class="javascript">direction</code> will be either 0, -1 or 1. So when it's 0 it won't actually add any offset to the eye because <code class="javascript">(0 * player.w * 0.1)</code> is equal to 0.</p> <p>It might be a good time to put all of this extra code together to see what we have so far.</p> <pre><code class="javascript">//used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219), direction: 0 }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; //set the initial status of the game var gameOver = false; draw = function() { background(255, 255, 255); //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); player.direction = -1; } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); player.direction = 1; } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //player eyes fill(0); ellipse(player.x + player.w * 0.3 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); ellipse(player.x + player.w * 0.7 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); //reset the direction of the player to 0 player.direction = 0; //if game over if(gameOver) { textAlign(CENTER); textSize(30); fill(0); text("GAME OVER\n\nClick the screen to play again", 300, 300); } //else (not game over) else { //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(random(100, 220), random(100, 220), random(100, 220)) } ); //change the frequency of the enemies enemyFrequency = constrain(enemyFrequency - 2, 10, 120); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > height) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x &lt enemy.x + enemy.w && player.x + player.w &gt enemy.x && player.y &lt enemy.y + enemy.h && player.y + player.h &gt enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //increase the score score++; //check if the player runs out of health if(player.health === 0) { gameOver = true; } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); }; mouseClicked = function() { //if it's currently game over if(gameOver) { //set the score back to 0 score = 0; //set the game over state back to false gameOver = false; //set the player's health back to 100 player.health = 100; //clear the enemies array enemies.length = 0; //reset the enemy frequency enemyFrequency = 120; } }; </code></pre> <canvas class="program"></canvas> <h2>Last Addition</h2> <h3>Adding a Starting Screen</h3> <p>At the moment the game starts automatically when you open the program and there aren't any instructions on how to play (although there's not much to it). Let's add a starting screen that shows when the program starts, and the game only starts when you click on the screen.</p> <p>For this we'll declare another variable to set the started state. It will initially be false, and when you first click on the screen it will be set to true.</p> <pre><code class="javascript">var started = false; </code></pre> <p>We'll add some additional code into our <code class="javascript">mouseClicked</code> function to set it to true when clicked.</p> <pre><code class="javascript">mouseClicked = function() { //if game hasn't started then set it to started if(started === false) { started = true; } //else if it's currently game over else if(gameOver) { //set the score back to 0 score = 0; //set the game over state back to false gameOver = false; //set the player's health back to 100 player.health = 100; //clear the enemies array enemies.length = 0; //reset the enemy frequency enemyFrequency = 120; } }; </code></pre> <p>And finally we'll add a conditional statement into our <code class="javascript">draw</code> function to run our game code if the game has started, and our start screen when the game hasn't yet started.</p> <pre><code class="javascript">if(started) { //display the game code } else { //display code for our start screen } </code></pre> <p>Let's put it all together again to see how it now runs.</p> <pre><code class="javascript">//used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219), direction: 0 }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; //set the initial status of the game var gameOver = false; //set the game as not yet started var started = false; draw = function() { background(255, 255, 255); //if the game has started if(started) { //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, width - player.w); player.direction = -1; } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, width - player.w); player.direction = 1; } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //player eyes fill(0); ellipse(player.x + player.w * 0.3 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); ellipse(player.x + player.w * 0.7 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); //reset the direction of the player to 0 player.direction = 0; //if game over if(gameOver) { textAlign(CENTER); textSize(30); fill(0); text("GAME OVER\n\nClick the screen to play again", 300, 300); } //else (not game over) else { //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(width), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(random(100, 220), random(100, 220), random(100, 220)) } ); //change the frequency of the enemies enemyFrequency = constrain(enemyFrequency - 2, 10, 120); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > height) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x &lt enemy.x + enemy.w && player.x + player.w &gt enemy.x && player.y &lt enemy.y + enemy.h && player.y + player.h &gt enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //increase the score score++; //check if the player runs out of health if(player.health === 0) { gameOver = true; } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, width, 50); } //game hasn't yet started else { //display the starting screen background(245, 152, 174); textAlign(CENTER); textSize(50); fill(0); text("DODGE GAME", 300, 150); textSize(20); text("Welcome to my dodge game.\n\nThe objective of the game is to avoid the falling blocks for as long as possible.\n\nUse the LEFT/RIGHT or A/D keys to move left and right.\n\nHow long can you survive?\n\n\n\nClick the screen to start.", 25, 200, 550, 600); } }; mouseClicked = function() { //if game hasn't started then set it to started if(started === false) { started = true; } //else if it's currently game over else if(gameOver) { //set the score back to 0 score = 0; //set the game over state back to false gameOver = false; //set the player's health back to 100 player.health = 100; //clear the enemies array enemies.length = 0; //reset the enemy frequency enemyFrequency = 120; } }; </code></pre> <canvas class="program"></canvas> <p class="note">Click on the screen to play the finished game.</p> <h2>Other improvement ideas</h2> <p>Below are some other ideas that could improve the game.</p> <ul> <li>Better graphics (scene, player, enemies, etc.)</li> <li>Screen shaking when a collision occurs</li> <li>Explosions and other animations</li> <li>Scene management (including buttons) so you can include a leaderboard screen, etc.</li> <li>Ability for the player (and maybe enemies) to fire bullets</li> <li>Different types of enemies</li> <li>Health packs to increase your health</li> <li>Different types of blocks that can give you special abilities</li> <li>Increase the speed of the enemies as the game goes on (similar to the frequency)</li> <li>Shop where you can buy different player characters, etc.</li> <li>Transitions when you first start the game and when you restart the game</li> <li>Ability for the player to jump and gravity to bring the player back down</li> <li>Camera so you can move further than the current visible area</li> <li>Rotating enemies as they fall and updated collisions to detect rotated rects</li> <li>The list goes on... it's only limited to your imagination</li> </ul> <h2>Wrapping up</h2> <p>Ok, so that was quite a bit to take in. Hopefully it all (or at least mostly) made sense. Remember that the purpose of this tutorial was to provide you with some skills you can use to make your own dodge game, or other types of games.</p> <p>If you have any questions please ask in the Questions tab beneath this program. If you haven't finished the <a href="https://www.khanacademy.org/computing/computer-programming/programming" target="_blank">Intro to JS</a> course on KA then I'd suggest you go and complete that as soon as possible, then go on to the <a href="https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations" target="_blank">Advanced JS</a> course that covers even more topics.</p> <p>Also, if you see any errors please let me know and I'll ensure I fix them.</p> <h2>HAPPY CODING!!!!</h2> </div> </main> <!--Import the highlight JS library and load it--> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <!--Import Khan Academy's Processing JS library--> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <!--Import library to handle saving a nice thumbnail--> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <!--Create the functions ready to insert into the appropriate places in the tutorial--> <script type="application/javascript"> window.addEventListener('DOMContentLoaded', (event) => { const programArr = [ (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); var player = { x: 325, y: 480, w: 50, //width of the player h: 70, //height of the player vx: 5, //horizontal velocity (speed) for the player health: 100, color: color(94, 198, 219) }; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(60); //used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, 600 - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, 600 - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(60); //used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, 600 - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, 600 - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(600), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > 600) { enemies.splice(i, 1); } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(60); //used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //increase the score score++; //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, 600 - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, 600 - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(600), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > 600) { enemies.splice(i, 1); } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(60); //used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //increase the score score++; //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, 600 - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, 600 - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(600), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > 600) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x < enemy.x + enemy.w && player.x + player.w > enemy.x && player.y < enemy.y + enemy.h && player.y + player.h > enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(60); //used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219) }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; //set the initial state of the game var gameOver = false; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, 600 - player.w); } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, 600 - player.w); } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //if game over if(gameOver) { textAlign(CENTER); textSize(30); fill(0); text("GAME OVER\n\nClick the Restart Button to play again", 300, 300); } //else (not game over) else { //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(600), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(217, 94, 139) } ); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > 600) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x < enemy.x + enemy.w && player.x + player.w > enemy.x && player.y < enemy.y + enemy.h && player.y + player.h > enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //increase the score score++; //check if the player runs out of health if(player.health === 0) { gameOver = true; } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(60); //used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219), direction: 0 }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; //set the initial status of the game var gameOver = false; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, 600 - player.w); player.direction = -1; } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, 600 - player.w); player.direction = 1; } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //player eyes fill(0); ellipse(player.x + player.w * 0.3 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); ellipse(player.x + player.w * 0.7 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); //reset the direction of the player to 0 player.direction = 0; //if game over if(gameOver) { textAlign(CENTER); textSize(30); fill(0); text("GAME OVER\n\nClick the screen to play again", 300, 300); } //else (not game over) else { //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(600), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(random(100, 220), random(100, 220), random(100, 220)) } ); //change the frequency of the enemies enemyFrequency = constrain(enemyFrequency - 2, 10, 120); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > 600) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x < enemy.x + enemy.w && player.x + player.w > enemy.x && player.y < enemy.y + enemy.h && player.y + player.h > enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //increase the score score++; //check if the player runs out of health if(player.health === 0) { gameOver = true; } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); popMatrix(); }; mouseClicked = function() { //if it's currently game over if(gameOver) { //set the score back to 0 score = 0; //set the game over state back to false gameOver = false; //set the player's health back to 100 player.health = 100; //clear the enemies array enemies.length = 0; //reset the enemy frequency enemyFrequency = 120; } }; } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(60); //used to track what key was pressed for moving the player var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //create the player object var player = { x: 325, y: 480, w: 50, h: 70, vx: 5, health: 100, color: color(94, 198, 219), direction: 0 }; //an array to hold all the enemy objects var enemies = []; //set the initial frequency that enemies are added var enemyFrequency = 120; //set the initial score to 0 var score = 0; //set the initial status of the game var gameOver = false; //set the game as not yet started var started = false; draw = function() { pushMatrix(); scale(400 / 600); background(255, 255, 255); //if the game has started if(started) { //display the player's health and score textAlign(CENTER); textSize(30); fill(0); text("HEALTH: " + player.health, 300, 100); text("SCORE: " + score, 300, 150); //move the player if(keys[LEFT] \|\| keys[65]) { //Left arrow or A //move the player to the left player.x = constrain(player.x - player.vx, 0, 600 - player.w); player.direction = -1; } if(keys[RIGHT] \|\| keys[68]) { //Right arrow or D //move the player to the right player.x = constrain(player.x + player.vx, 0, 600 - player.w); player.direction = 1; } //draw the player noStroke(); fill(player.color); rect(player.x, player.y, player.w, player.h); //player eyes fill(0); ellipse(player.x + player.w * 0.3 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); ellipse(player.x + player.w * 0.7 + (player.direction * player.w * 0.1), player.y + player.h * 0.25, player.w * 0.15, player.h * 0.15 ); //reset the direction of the player to 0 player.direction = 0; //if game over if(gameOver) { textAlign(CENTER); textSize(30); fill(0); text("GAME OVER\n\nClick the screen to play again", 300, 300); } //else (not game over) else { //add a new enemy object to the enemies array if(frameCount % enemyFrequency === 0) { enemies.push( { x: random(600), y: random(-100, -70), w: random(30, 50), h: random(30, 50), vy: random(2, 4), color: color(random(100, 220), random(100, 220), random(100, 220)) } ); //change the frequency of the enemies enemyFrequency = constrain(enemyFrequency - 2, 10, 120); } //loop through the enemies array for(var i = enemies.length - 1; i >= 0; i--) { //get the enemy at the current index var enemy = enemies[i]; //move the enemy enemy.y+= enemy.vy; //draw the enemy noStroke(); fill(enemy.color); rect(enemy.x, enemy.y, enemy.w, enemy.h); //remove the enemy if it goes off the screen if(enemy.y > 600) { enemies.splice(i, 1); } //check for collision between the player and the enemy else if(player.x < enemy.x + enemy.w && player.x + player.w > enemy.x && player.y < enemy.y + enemy.h && player.y + player.h > enemy.y) { //reduce the player's health player.health = constrain(player.health - 10, 0, 100); //remove the enemy enemies.splice(i, 1); } } //increase the score score++; //check if the player runs out of health if(player.health === 0) { gameOver = true; } } //draw the ground noStroke(); fill(94, 93, 94); rect(0, 550, 600, 50); } //game hasn't yet started else { //display the starting screen background(245, 152, 174); textAlign(CENTER); textSize(50); fill(0); text("DODGE GAME", 300, 150); textSize(20); text("Welcome to my dodge game.\n\nThe objective of the game is to avoid the falling blocks for as long as possible.\n\nUse the LEFT/RIGHT or A/D keys to move left and right.\n\nHow long can you survive?\n\n\n\nClick the screen to start.", 25, 200, 550, 600); } popMatrix(); }; mouseClicked = function() { //if game hasn't started then set it to started if(started === false) { started = true; } //else if it's currently game over else if(gameOver) { //set the score back to 0 score = 0; //set the game over state back to false gameOver = false; //set the player's health back to 100 player.health = 100; //clear the enemies array enemies.length = 0; //reset the enemy frequency enemyFrequency = 120; } }; } } ]; const programElements = document.getElementsByClassName("program"); let processingInstance; Array.prototype.forEach.call(programElements, (item, index) => { processingInstance = new Processing(item, programArr[index]); }); document.getElementById('themeCheckbox').addEventListener('change', function() { if(this.checked) { document.documentElement.classList.add("dark"); document.getElementById('stylesheet').href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-dark.min.css'; } else { document.documentElement.classList.remove("dark"); document.getElementById('stylesheet').href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-light.min.css'; } }); function saveThumbnail() { html2canvas(document.body, { onrendered: function(canvas) { b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }, allowTaint : false, useCORS: true, width:window.innerWidth, height:window.innerWidth }); }; function save() { document.body.innerHTML = '<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap"rel="stylesheet"><div style="position:absolute;top:0;left:0;width:600px;height:600px;background-color:rgb(130,90,74);"><div style="display:grid;align-items:center;justify-content:center;text-align:center;color:white;font-family:\'Poiret One\';font-size:1.8em;"><img style="margin:auto;margin-bottom:-50px;text-align:center;width:250px;" src="https://cdn.kastatic.org/images/avatars/sneak-peak-blue.png"><h1 style="margin-bottom:0;">GW Tutorials</h1><p>Tutorials for the KA programming community</p><h2>Creating a Dodge Game</h2></div></div>'; saveThumbnail(); } document.body.addEventListener("keydown", (e) => { if(e.keyCode === 83) { //S key save(); } }); }); </script> </body> </html>
Folds	37,183,184,2788
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL2TvvO_CQw
Votes	296
Spin-Offs	17
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739380758621
Updated	4 months ago, 1744844959758
Source Deleted	unknown