onlyforbopi
9/24/2018 - 9:43 AM

JS.Interact.Animate.BasicLinearMotion

JS.Interact.Animate.BasicLinearMotion

style.css
content_copyfile_download
canvas {
  border: 1px solid black;
}
script.js
content_copyfile_download
// useful to have them as global variables
var canvas, ctx, w, h; 
var xMonster = 10;
var yMonster = 10;
var monsterSpeed = 1;

window.onload = function init() {
    // called AFTER the page has been loaded
    canvas = document.querySelector("#myCanvas");
  
    // often useful
    w = canvas.width; 
    h = canvas.height;  
  
    // important, we will draw with this object
    ctx = canvas.getContext('2d');
  
    // ready to go !
    mainLoop();
};

function mainLoop() {
  // 1 - clear the canvas. We told you that w, and h will be useful!
  ctx.clearRect(0, 0, w, h);
  
  // 2 - draw the monster
  drawMyMonster(xMonster, yMonster);
  
  // 3 - move the monster
  xMonster += monsterSpeed;
  
  // 4 - test collisions with vertical boundaries
   if (((xMonster + 100)> w) || (xMonster < 0))  {
     // collision with left or right wall
    // change the direction of movement
    monsterSpeed = -monsterSpeed;
  }
  
  // 5 - request a new frame of animation in 1/60s
  requestAnimationFrame(mainLoop);
}

function drawMyMonster(x, y) {
    // draw a big monster !
    // head
  
    // GOOD practice: save the context, use 2D trasnformations
    ctx.save();
  
    // translate the coordinate system, draw relative to it
    ctx.translate(x, y);
  
    // (0, 0) is the top left corner of the monster.
    ctx.strokeRect(0, 0, 100, 100);
  
    // eyes, x=20, y=20 is relative to the top left corner
    // of the previous rectangle
    ctx.fillRect(20, 20, 10, 10);
    ctx.fillRect(65, 20, 10, 10);
  
    // nose
    ctx.strokeRect(45, 40, 10, 40);
  
    // mouth
    ctx.strokeRect(35, 84, 30, 10);
  
    // teeth
    ctx.fillRect(38, 84, 10, 10);
    ctx.fillRect(52, 84, 10, 10);
  
   // GOOD practice: restore the context
   ctx.restore();
}
js-interact-animate-basiclinearmotion.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Interact.Animate.BasicLinearMotion

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>

<!----
Animating
A typical animation loop will do the following at regular intervals:

Clear the canvas
Draw graphic objects / shapes
Move graphic shapes / objects
Go to step 1
Optional steps can be:

Look at the keyboard / mouse / gamepad if we need to do something according to their status (i.e. if the left arrow is pressed: move the player to the left)
Test collisions: the player collided with an enemy, remove one life
Test game states: if there are no more lives, then go to the "game over" state and display a "game over" menu.
Etc.
Example 1: let's do some animation
There are different methods for coding an animation loop in JavaScript, that are described in the above video, and detailed both in the HTML5 Coding Essentials and Best Practices W3Cx course (week 4), and in the HTML5 Apps and Games W3Cx course (Week 2 is for learning how to code HTML5 games).

In this intro course, we'll only use the recommended one, without going into advanced use.

The trick is to write a function, and at the end of this function, to ask the browser to call it again in 1/60th of a second if possible.

-->
  

  <meta charset="utf-8">
  <title>Draw a monster in a canvas</title>
</head>
<body>
  <canvas id="myCanvas"  width="200" height="200"></canvas>
</body>
</html>