aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorYaroslav <contact@yaroslavps.com>2019-02-09 16:36:02 +0300
committerYaroslav <contact@yaroslavps.com>2019-02-09 16:36:02 +0300
commit8171f14d658af4b237589ab1354b8bdcc684f80d (patch)
tree832dfd3a5e7a945fd1b4eef0ba57f6f0f8f66560
parentcc9486b13e028c5ed1ba65bfff30695b4fa48194 (diff)
downloadcanvas-antics-8171f14d658af4b237589ab1354b8bdcc684f80d.tar.gz
canvas-antics-8171f14d658af4b237589ab1354b8bdcc684f80d.zip
dvd more options (hits, coordinates debug)HEADmaster
-rw-r--r--dvd/dvd.js39
-rw-r--r--dvd/index.html2
2 files changed, 38 insertions, 3 deletions
diff --git a/dvd/dvd.js b/dvd/dvd.js
index 1e5c822..60da7a0 100644
--- a/dvd/dvd.js
+++ b/dvd/dvd.js
@@ -39,6 +39,7 @@ function playDVD(options={}){
And a list of colors
*/
var speed = options.hasOwnProperty('speed') ? options['speed'] : 200;
+ var hit_counter = options.hasOwnProperty('hit_counter') ? options['hit_counter'] : false;
var colors = [
"#012fff",
"#ff2190",
@@ -78,6 +79,9 @@ function playDVD(options={}){
var boundx;
var boundy;
var last = null;
+ var hits = 0;
+
+ var debugxy = false;
function randomRange(min, max){
return Math.floor(Math.random() * (max - min - 1)) + min;
@@ -130,6 +134,22 @@ function playDVD(options={}){
ctx.save();
}
+ function drawCounter(){
+ ctx.font = '21px monospace';
+ ctx.fillStyle = '#d1bc55';
+ ctx.fillText('Hits: '+hits, 10, 25);
+ ctx.restore();
+ ctx.save();
+ }
+
+ function drawCoordinates(){
+ ctx.font = '21px monospace';
+ ctx.fillStyle = '#d1bc55';
+ ctx.fillText('XY: '+px+', '+py, 10, 50);
+ ctx.restore();
+ ctx.save();
+ }
+
function nextFrame(timestamp){
if(!last) last = timestamp;
let delta = timestamp - last;
@@ -153,15 +173,30 @@ function playDVD(options={}){
py = py > boundy ? boundy : py;
px = px < 0 ? 0 : px;
py = py < 0 ? 0 : py;
- if (px === boundx || py === boundy || px == 0 || py == 0)
+
+ if (px === boundx || py === boundy || px == 0 || py == 0){
bounce();
+ // If it hits the corner, update hit counter
+ if ((px == boundx && py == boundy) || (px == boundx && py == 0) ||
+ (px == 0 && py == boundy) || (px == 0 && py == 0))
+ hits++;
+ }
+
drawLogo();
+ if (hit_counter) drawCounter();
+ if (debugxy) drawCoordinates();
last = timestamp;
requestedFrame = window.requestAnimationFrame(nextFrame);
}
resize();
- window.addEventListener("resize", resize);
+ window.addEventListener('resize', resize);
+ window.addEventListener('keypress', function(e){
+ if (e.code == 'KeyH')
+ hit_counter = !hit_counter;
+ if (e.code == 'KeyD')
+ debugxy = !debugxy;
+ });
}
// This is the path for the logo, it is just a 'd' SVG string
diff --git a/dvd/index.html b/dvd/index.html
index cdd9dc1..47bbbc7 100644
--- a/dvd/index.html
+++ b/dvd/index.html
@@ -38,7 +38,7 @@ html{
</style>
<script>
window.addEventListener("load", function(){
- playDVD({"speed": 210});
+ playDVD({"speed": 1200, "hit_counter": false});
});
</script>
</head>