<html>
<head>
<title>Canvas HTML Element Golf Shot Primer Tutorial ... RJM Programming ... March 2015 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script language="JavaScript">
var topstuff='';
var firsttime=1;
var score=3000;
var goes=0;
var wis=400;
var his=400;
var elemzero;
var elemLeftzero;
var elemTopzero;
var contextzero;
var firstX = -999.0;
var firstY = -999.0;
var secondX = -999.0;
var secondY = -999.0;
var yourfirstX = -999.0;
var yourfirstY = -999.0;
var yoursecondX = -999.0;
var yoursecondY = -999.0;
var elem; //= document.getElementById('canvaselement');
var elemLeft; //= elem.offsetLeft;
var elemTop; //= elem.offsetTop;
var context; //= elem.getContext('2d');
var elemzero; //= document.getElementById('canvaselement');
var elemLeftzero; //= elem.offsetLeft;
var elemTopzero; //= elem.offsetTop;
var contextzero; //= elem.getContext('2d');
function andthen() {
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect ( 0 , 0 , elem.width, elem.height);
contextzero.setTransform(1, 0, 0, 1, 0, 0);
contextzero.clearRect ( 0 , 0 , elemzero.width, elemzero.height );
yourfirstX = -999.0;
yourfirstY = -999.0;
nextbit();
}
function nextyourbit() {
context.fillStyle = "yellow";
context.beginPath();
context.arc(yourfirstX, yourfirstY,2,0,2*Math.PI);
context.fill();
context.fillStyle = "green";
context.beginPath();
context.arc(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY)),10,0,2*Math.PI);
context.fill();
context.beginPath();
context.lineWidth="1";
context.fillStyle = "green";
context.strokeStyle="brown"; // Green path
context.moveTo(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY)));
context.lineTo(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY) - 30));
context.stroke();
context.fillStyle = "red";
context.beginPath();
context.rect(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY) - 30),10, 10);
context.fill();
var stuff="You missed by (" + eval(yoursecondX - (yourfirstX + (secondX - firstX))) + "," + eval(yoursecondY - (yourfirstY + (secondY - firstY))) + ")";
goes = goes + 1;
score = eval(score - Math.abs(eval(yoursecondX - (yourfirstX + (secondX - firstX)))) - Math.abs(eval(yoursecondY - (yourfirstY + (secondY - firstY)))));
document.getElementById('myh3').innerHTML = "Score: " + score + " Goes: " + goes + "<br>" + stuff.replace("You missed by (0,0)", "Congratulations! Hole in one!");
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(andthen, 2000);
} else {
topstuff=stuff;
setTimeout(sta, 1000);
//alert(stuff.replace("You missed by (0,0)", "Congratulations! Hole in one!"));
setTimeout(andthen, 3000);
//andthen();
}
}
function sta() {
if (topstuff != '') {
var spare=topstuff;
topstuff='';
alert(spare.replace("You missed by (0,0)", "Congratulations! Hole in one!"));
}
}
function nextbit() {
if (firsttime == 1) {
firstX = 5;
} else {
firstX = Math.floor((Math.random()*wis)+50);
}
firstY = Math.floor((Math.random()*his)+50);
contextzero.beginPath();
contextzero.lineWidth="2";
contextzero.fillStyle = "green";
contextzero.strokeStyle="black"; // Black path
contextzero.moveTo(firstX, firstY);
if (firsttime == 1) {
secondX = 5;
} else {
secondX = Math.floor((Math.random()*wis)+50);
}
secondY = Math.floor((Math.random()*his)+50);
contextzero.lineTo(secondX, secondY);
contextzero.stroke();
contextzero.fillStyle = "yellow";
contextzero.beginPath();
contextzero.arc(firstX, firstY,2,0,2*Math.PI);
contextzero.fill();
contextzero.fillStyle = "green";
contextzero.beginPath();
contextzero.arc(secondX, secondY,10,0,2*Math.PI);
contextzero.fill();
contextzero.beginPath();
contextzero.lineWidth="1";
contextzero.fillStyle = "green";
if (firsttime == 1) {
contextzero.strokeStyle="magenta";
} else {
contextzero.strokeStyle="brown"; // Brown path
}
contextzero.moveTo(secondX, secondY);
contextzero.lineTo(secondX, eval(secondY - 30));
contextzero.stroke();
if (firsttime == 1) {
contextzero.fillStyle = "yellow";
} else {
contextzero.fillStyle = "red";
}
contextzero.beginPath();
contextzero.rect(secondX, eval(secondY - 30),10, 10);
contextzero.fill();
firsttime=0;
}
function drawshot() {
elemzero = document.getElementById('canvaselementzero');
elemLeftzero = elemzero.offsetLeft;
elemTopzero = elemzero.offsetTop;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
wis = eval(wis / 2);
elemzero.width = eval(500 / 2);
elemzero.style.left = eval(510 / 2);
} else {
firsttime=0;
}
contextzero = elemzero.getContext('2d');
nextbit();
}
</script>
</head>
<body onload="drawshot();" style="background-color: lightgreen; background: url('faint_grass_pattern_204850.jpg'); repeat; " title="Grass courtesy of http://all-free-download.com/free-photos/ ... thanks">
<table style="width:100%;">
<tr style="width:100%;"><td style="width:50%;">
<canvas title='Click to define start of your shot then where it is to finish' id="canvaselement" width="500" height="500" style="position:absolute; top:0; left:0; border: 1px solid yellow;" />
</td><td style="width:50%;">
<canvas onclick="location.href='./golfshotcanvas.html';" readonly title='Golf shot to simulate here' id="canvaselementzero" width="950" height="500" style="position:absolute; top:0; left:510; border-left: 1px solid red; border-top: 1px solid red; border-bottom: 1px solid red;" />
</td></tr>
</table>
<h1 id='myh1' align="right">Try Our Golf Shot <br>Accuracy Simulator <a id='gsc' target=_top title='Another go' href='./golfshotcanvas.html'>Game</a></h1><br>
<h2 id='myh2' align="right">Your Shot (over at left) ... <br>Click to Start and to Finish</h2><br>
<h3 id='myh3' align="right">Score: 3000 Goes: 0</h3><br>
<script language="JavaScript">
elem = document.getElementById('canvaselement');
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
elem.width = eval(500 / 2);
}
context = elem.getContext('2d');
// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
var x = event.pageX - elemLeft;
var y = event.pageY - elemTop;
if (yourfirstX == -999.0 && yourfirstY == -999.0) {
yourfirstX = x;
yourfirstY = y;
//alert("here");
context.beginPath();
context.lineWidth="2";
context.fillStyle = "black";
context.strokeStyle="brown"; // Brown path
context.moveTo(x, y);
} else {
yoursecondX = x;
yoursecondY = y;
//alert("there");
context.lineTo(x, y);
context.stroke(); // Draw it
//alert(yoursecondX + "," + yoursecondY);
nextyourbit();
}
});
</script>
</body>
</html>