<!--Copyright (c) 2017 Copyright Cliffbreak.de All Rights Reserved.-->
<head>
<title>⛳ Minigolf</title>
<link rel="stylesheet" type="text/css" href="include/style.css">
<script src="include/jquery-3.2.1.min.js"></script>
</head>
<body>
<canvas width="1280" height="720"></canvas>
<canvas width="1280" height="720"></canvas>
</body>
<script>
var ctx,
staticctx,
bX,
bY,
pX,
pY
/************************/
/*** _GAME VARIABLES_ ***/
/***********************/
var _COLOR_GRASS = '#388E3C',
_COLOR_BORDER = '#FF9800',
_COLOR_BALL = '#FFFFFF',
_COLOR_HOLE = '#000000',
_COLOR_BRACKET = '#000000'
$(function(){
ctx = $('canvas')[0].getContext('2d')
staticctx = $('canvas')[1].getContext('2d')
init()
drawBorder(23, 10, 500, 5)
drawBorder(23, 10, 5, 500)
drawBorder(23, 500+10-5, 500, 5)
drawBorder(500+23-5, 10, 5, 500)
drawHole(432, 366)
setInterval(animLoop, 10)
$(document).mousemove(function(e){
pX = e.pageX - $('canvas').offset().left
pY = e.pageY - $('canvas').offset().top
});
})
function animLoop() {
ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());
// drawBall(bX++, bY++)
drawBall(bX, bY)
drawBracket()
}
function init() {
bX = bY = 100
staticctx.fillStyle = _COLOR_GRASS
staticctx.fillRect(23, 10, 500, 500);
}
function drawBorder(x, y, length, width) {
staticctx.fillStyle = _COLOR_BORDER
staticctx.fillRect(x, y, length, width);
}
function drawHole(x, y) {
staticctx.beginPath()
staticctx.arc(x, y, 20, 0, Math.PI*2)
staticctx.fillStyle = _COLOR_HOLE
staticctx.fill()
staticctx.closePath()
}
function drawBall(x, y) {
ctx.beginPath()
ctx.arc(x, y, 10, 0, Math.PI*2)
ctx.fillStyle = _COLOR_BALL
ctx.fill()
ctx.closePath()
}
function drawBracket() {
ctx.beginPath()
ctx.moveTo(bX, bY)
ctx.lineTo(pX, pY)
ctx.strokeStyle = _COLOR_BRACKET
ctx.stroke()
ctx.closePath()
}
</script>
<script src="http://localhost:35729/livereload.js"></script>