DIR : /home/kozerus/public_html/contact.htm
/home/kozerus/public_html
<html>
<head>
<title>contact.html 20200418_0100 border reposition</title>
<!--
<title>contact.html 20200418_0100</title>
-->
<style id="style_contact">
body {
background-color: wheat;
padding:20px;
}
canvas {
border:1px solid red;
}
</style>
<script id="script_startup_contact">
function startup_contact(args) {
alert( "BUGS_100 startup_contact args="+args );
return("");
}
</script>
</head>
<body bgcolor=wheat onload="startup_contact("");return false;" >
<canvas id="canvas_contact0" width=400 height=300></canvas>
<script id="script_contact">
// alert( "BUGS_400 script_contact" );
var canvas = document.getElementById('canvas_contact0');
var ctx = canvas.getContext('2d');
// alert( "BUGS_400 script_contact canvas="+canvas );
// alert( "BUGS_400 script_contact ctx="+ctx );
// var ctx = document.getElementById("canvas_contact").getContext("2d");
// var ctx = document.getElementById("canvas_contact").getContext("2d");
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
ctx.fillStyle = "lightgray";
ctx.strokeStyle = "skyblue";
// top collision circle vs circle
var circle1 = { x: 30, y: 30, r: 10 };
var circle2 = { x: 70, y: 40, r: 10 };
var circle3 = { x: 350, y: 30, r: 10 };
// var circle3 = { x: 100, y: 30, r: 10 };
var direction1 = 1;
// middle collision rect vs rect
var rect1 = { x: 20, y: 100, w: 20, h: 20 };
var rect2 = { x: 50, y: 110, w: 20, h: 20 };
// var rect3 = { x: 90, y: 100, w: 20, h: 20 };
var rect3 = { x: 80, y: 100, w: 20, h: 20 };
var direction2 = 1;
// bottom collision rect vs circle
var circle4 = { x: 30, y: 200, r: 10 };
var rect4 = { x: 50, y: 205, w: 20, h: 20 };
var circle5 = { x: 100, y: 200, r: 10 };
// var circle5 = { x: 100, y: 200, r: 10 };
var direction3 = 1;
function drawAll() {
// alert( "BUGS_400 drawAll" );
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCircle(circle1);
drawCircle(circle2);
drawCircle(circle3);
drawCircle(circle4);
drawCircle(circle5);
drawRect(rect1);
drawRect(rect2);
drawRect(rect3);
drawRect(rect4);
}
function drawCircle(c) {
ctx.beginPath();
ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function drawRect(r) {
ctx.beginPath();
ctx.rect(r.x, r.y, r.w, r.h);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//
function CirclesColliding(c1, c2) {
var dx = c2.x - c1.x;
var dy = c2.y - c1.y;
var rSum = c1.r + c2.r;
return (dx * dx + dy * dy <= rSum * rSum);
}
//
function RectsColliding(r1, r2) {
return !(r1.x > r2.x + r2.w || r1.x + r1.w < r2.x || r1.y > r2.y + r2.h || r1.y + r1.h < r2.y);
}
//
function RectCircleColliding(rect, circle) {
var dx = Math.abs(circle.x - (rect.x + rect.w / 2));
var dy = Math.abs(circle.y - (rect.y + rect.y / 2));
if (dx > circle.r + rect.w2) { return (false); }
if (dy > circle.r + rect.h2) {
return (false);
}
if (dx <= rect.w) { return (true); }
if (dy <= rect.h) { return (true); }
var dx = dx - rect.w;
var dy = dy - rect.h
return (dx * dx + dy * dy <= circle.r * circle.r);
}
var fps = 15;
function animate() {
setTimeout(function () {
requestAnimFrame(animate);
// circle vs circle
circle2.x = circle2.x + direction1;
if (CirclesColliding(circle2, circle1) || CirclesColliding(circle2, circle3)) {
direction1 = -direction1;
}
// rect vs rect
rect2.x = rect2.x + direction2;
if (RectsColliding(rect2, rect1) || RectsColliding(rect2, rect3)) {
direction2 = -direction2;
}
// rect vs circle
rect4.x = rect4.x + direction3;
if (RectCircleColliding(rect4, circle4) || RectCircleColliding(rect4, circle5)) {
direction3 = -direction3;
}
// alert( "BUGS_411 drawall beg" );
drawAll();
}, 1000 / fps);
}
animate();
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer