forked from vancem/Samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mouse.html
133 lines (109 loc) · 4.88 KB
/
mouse.html
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
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html>
<body>
<!-- *********************************************************************** -->
<p> This is a simple program that makes a ball bounce around in a box.</p>
<ul>
<li> <button title="Start the simulation over" onclick="reset()">reset</button>
<button title="Pause the simulation" onclick="pause()">pause</button>
</li>
<li> Position: <span id=positionSpan>(0,0)</span> </li>
</ul>
<canvas id="ballCanvas" tabindex="1" onkeydown="keypress(event)" style="border:2px solid red"
onmousemove="mouseMove(event)" height="500" width="800"> </canvas>
<script>
/***********************************************************************/
// Global variables
// get GUI object needed
let ballCanvas = document.getElementById('ballCanvas');
let positionSpan = document.getElementById('positionSpan');
let ballCanvasContext = ballCanvas.getContext('2d');
// state variables for ball position, velocity and size (all will be overwritten in reset())
let x, y, deltaX, deltaY, ballSize;
let paddleX, paddleY, paddleWidth;
let paused = false;
/***********************************************************************/
// Functions
// Start the simulation over, which sets the position, velocity and size of the ball
function reset() {
ballSize = Math.floor(Math.random() * 20 + 5);
deltaX = Math.floor(Math.random() * 10 + 3);
deltaY = Math.floor(Math.random() * 10 + 3);
x = y = ballSize;
paddleX = ballCanvas.width / 2;
paddleWidth = 150;
paddleY = ballCanvas.height - 50;
}
// moves the ball a small distance based on its velocity
function update() {
// update ball position and wait
x = x + deltaX;
y = y + deltaY;
// Bounce off the left and right wall
if (x < ballSize && deltaX < 0)
deltaX = -deltaX;
else if (ballCanvas.width < x + ballSize && 0 < deltaX)
deltaX = -deltaX;
// Bounce off the top and bottom wall
if (y < ballSize && deltaY < 0)
deltaY = -deltaY;
else if (ballCanvas.height < y + ballSize && 0 < deltaY) {
reset();
return;
//deltaY = -deltaY;
}
// Bounce off paddle
let bottomOfBall = y + ballSize;
if (0 < deltaY && paddleY < bottomOfBall && paddleX - paddleWidth / 2 <= x && x <= paddleX + paddleWidth / 2)
deltaY = -deltaY;
}
// pauses or unpauses the simulation
function pause() {
paused = !paused;
}
/*****************************/
// functions that update the gui (and model)
function drawAndUpdate() {
if (paused) return;
// clear the canvas
ballCanvasContext.clearRect(0, 0, ballCanvas.width, ballCanvas.height);
// Draw the ball
ballCanvasContext.beginPath();
ballCanvasContext.arc(x, y, ballSize, 0, 2 * Math.PI, false);
ballCanvasContext.fillStyle = "red";
ballCanvasContext.fill();
ballCanvasContext.stroke();
// Draw the paddle
ballCanvasContext.fillStyle = "black";
ballCanvasContext.fillRect(paddleX - paddleWidth / 2, paddleY, paddleWidth, 20);
// report the x, y position as numbers
positionSpan.innerHTML = "(" + x + ", " + y + ")";
// update the model (the ball)
update();
}
/*****************************/
function mouseMove(eventData) {
paddleX = eventData.offsetX;
paddleX = Math.max(paddleX, paddleWidth / 2);
paddleX = Math.min(paddleX, ballCanvas.width - paddleWidth / 2);
}
/*****************************/
function keypress(eventData) {
if (eventData.key == "ArrowLeft") {
paddleX -= 50;
paddleX = Math.max(paddleX, paddleWidth / 2);
}
if (eventData.key == "ArrowRight") {
paddleX += 50;
paddleX = Math.min(paddleX, ballCanvas.width - paddleWidth / 2);
}
}
/***********************************************************************/
// Subscribe to a tick that goes off every 20 msec to update the animation
window.setInterval(drawAndUpdate, 20);
/***********************************************************************/
// Initialize program (after which callbacks take over)
reset();
</script>
</body>
</html>