howtoprogramgames/games.html at master · djhipps/howtoprogramgames · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>

<script>
var ballX = 75;
var ballY = 75;
var ballSpeedX = 5;
var ballSpeedY = 7;

const PADDLE_WIDTH = 100;
const PADDLE_THICKNESS = 10;
const PADDLE_DIST_FROM_EDGE = 60;

var paddleX = 400;

var canvas, canvasContext;

window.onload = function(){
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');

  var framesPerSecond  = 30;
  setInterval(updateAll, 1000/framesPerSecond);

  canvas.addEventListener('mousemove', updateMousePos);
}

function updateMousePos(evt){
   //contains fixes so that positions are calucated realive to canvas
   //and not the browser root.
   var rect = canvas.getBoundingClientRect();
   var root = document.documentElement;

   var mouseX = evt.clientX - rect.left - root.scrollLeft;
   // var mouseY = evt.clientY - rect.top - root.scrollTops;

   paddleX = mouseX - PADDLE_WIDTH/2;
}

function updateAll(){
    moveAll();
    drawAll();
}

function ballReset(){
  ballX = canvas.width/2;
  ballY = canvas.height/2;
}

function moveAll(){

    ballX += ballSpeedX;
    ballY += ballSpeedY;

    var paddleLeftEdgeX = paddleX;
    var paddleRightEdgeX = paddleLeftEdgeX + PADDLE_WIDTH;
    var paddleTopEdgeY = canvas.height-PADDLE_DIST_FROM_EDGE;
    var paddleBottomEdgeY = paddleTopEdgeY-PADDLE_THICKNESS;

    if(ballX > paddleLeftEdgeX &&
       ballX < paddleRightEdgeX &&
       ballY < paddleTopEdgeY &&
       ballY > paddleBottomEdgeY
      ){
         ballSpeedY *= -1;

         var centerOfPaddleX = paddleX + PADDLE_WIDTH/2;
         var ballDistFromPaddleCentreX = ballX -centerOfPaddleX;
         ballSpeedX = ballDistFromPaddleCentreX * 0.35;
    }

    if(ballX < 0){ //left
       ballSpeedX *= -1;
    }
    if(ballX > canvas.width){ //right
      ballSpeedX *= -1;
    }

    if(ballY < 0){ //top
       ballSpeedY *= -1;
    }
    if(ballY > canvas.height){ //bottom
      ballReset();
      // ballSpeedY *= -1;
    }
}

function drawAll(){
  //required to avoid persistency problems
  colorRect(0,0, canvas.width, canvas.height, 'black');

  colorCircle(ballX,ballY, 10, 'white');

  colorRect(paddleX, canvas.height-PADDLE_DIST_FROM_EDGE, PADDLE_WIDTH, PADDLE_THICKNESS);
}

function colorRect(topLeftX, topLeftY,boxWidth, boxHeight,fillColor) {
  canvasContext.fillStyle = fillColor;
  canvasContext.fillRect(topLeftX,topLeftY, boxWidth,boxHeight);
}

function colorCircle(centerX,centerY, radius, fillColor){
  canvasContext.fillStyle = fillColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX,centerY, radius, 0,Math.PI*2, true);
  canvasContext.fill();
}


console.log();
</script>

</body>
</html>