2017-06-18 16:33:49 +00:00
|
|
|
<!--Copyright (c) 2017 Copyright Cliffbreak.de All Rights Reserved.-->
|
2017-06-18 14:46:11 +00:00
|
|
|
<head>
|
2017-06-18 16:44:10 +00:00
|
|
|
<title>⛳ Minigolf</title>
|
2017-06-18 16:33:49 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="include/style.css">
|
|
|
|
|
<script src="include/jquery-3.2.1.min.js"></script>
|
2017-06-18 14:46:11 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2017-06-18 16:33:49 +00:00
|
|
|
<canvas width="1280" height="720"></canvas>
|
|
|
|
|
<canvas width="1280" height="720"></canvas>
|
2017-06-18 14:46:11 +00:00
|
|
|
</body>
|
2017-06-18 16:33:49 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var ctx,
|
|
|
|
|
staticctx,
|
|
|
|
|
bX,
|
|
|
|
|
bY,
|
|
|
|
|
pX,
|
2017-06-18 20:17:35 +00:00
|
|
|
pY,
|
|
|
|
|
bVec
|
2017-06-18 16:33:49 +00:00
|
|
|
|
|
|
|
|
/************************/
|
|
|
|
|
/*** _GAME VARIABLES_ ***/
|
|
|
|
|
/***********************/
|
|
|
|
|
var _COLOR_GRASS = '#388E3C',
|
|
|
|
|
_COLOR_BORDER = '#FF9800',
|
|
|
|
|
_COLOR_BALL = '#FFFFFF',
|
|
|
|
|
_COLOR_HOLE = '#000000',
|
|
|
|
|
_COLOR_BRACKET = '#000000'
|
|
|
|
|
|
2017-06-18 19:50:42 +00:00
|
|
|
|
2017-06-18 20:17:35 +00:00
|
|
|
var _MAX_BRACKET = 100,
|
|
|
|
|
_BALL_SPEED = 50,
|
|
|
|
|
_BALL_SPEED_THRESHOLD = 10
|
2017-06-18 19:50:42 +00:00
|
|
|
|
2017-06-18 16:33:49 +00:00
|
|
|
$(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
|
2017-06-18 19:50:42 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(document).mousedown(function(e){
|
2017-06-18 20:17:35 +00:00
|
|
|
var strength = Math.hypot(pX - bX, pY - bY)
|
|
|
|
|
if(strength > _MAX_BRACKET)
|
|
|
|
|
strength = _MAX_BRACKET
|
|
|
|
|
angle = Math.atan2(pY - bY, pX - bX)
|
|
|
|
|
x = bX+strength*Math.cos(angle)-_MAX_BRACKET
|
|
|
|
|
y = bY+strength*Math.sin(angle)-_MAX_BRACKET
|
|
|
|
|
if(Math.abs(x) < _BALL_SPEED_THRESHOLD){
|
|
|
|
|
if(x < 0)
|
|
|
|
|
x = -_BALL_SPEED_THRESHOLD
|
|
|
|
|
if(x > 0)
|
|
|
|
|
x = +_BALL_SPEED_THRESHOLD
|
|
|
|
|
}
|
|
|
|
|
if(Math.abs(y) < _BALL_SPEED_THRESHOLD){
|
|
|
|
|
if(y < 0)
|
|
|
|
|
y = -_BALL_SPEED_THRESHOLD
|
|
|
|
|
if(y > 0)
|
|
|
|
|
y = +_BALL_SPEED_THRESHOLD
|
|
|
|
|
}
|
|
|
|
|
console.log(x + '|' + y);
|
|
|
|
|
if(bVec == null)
|
|
|
|
|
bVec = [x/_BALL_SPEED, y/_BALL_SPEED]
|
2017-06-18 19:50:42 +00:00
|
|
|
})
|
2017-06-18 16:33:49 +00:00
|
|
|
})
|
|
|
|
|
|
2017-06-18 20:17:35 +00:00
|
|
|
var i = 0
|
2017-06-18 16:33:49 +00:00
|
|
|
function animLoop() {
|
|
|
|
|
ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());
|
|
|
|
|
// drawBall(bX++, bY++)
|
2017-06-18 20:17:35 +00:00
|
|
|
if(bVec != null)
|
|
|
|
|
drawBall(bX-i++*bVec[0], bY-i*bVec[1])
|
|
|
|
|
else
|
|
|
|
|
drawBall(bX, bY)
|
2017-06-18 16:33:49 +00:00
|
|
|
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() {
|
2017-06-18 19:50:42 +00:00
|
|
|
var x = pX,
|
|
|
|
|
y = pY
|
|
|
|
|
if(Math.hypot(pX - bX, pY - bY) > _MAX_BRACKET){
|
|
|
|
|
angle = Math.atan2(pY - bY, pX - bX)
|
|
|
|
|
x = bX+_MAX_BRACKET*Math.cos(angle)
|
|
|
|
|
y = bY+_MAX_BRACKET*Math.sin(angle)
|
|
|
|
|
}
|
|
|
|
|
|
2017-06-18 16:33:49 +00:00
|
|
|
ctx.beginPath()
|
|
|
|
|
ctx.moveTo(bX, bY)
|
2017-06-18 19:50:42 +00:00
|
|
|
ctx.lineTo(x, y)
|
2017-06-18 16:33:49 +00:00
|
|
|
ctx.strokeStyle = _COLOR_BRACKET
|
|
|
|
|
ctx.stroke()
|
|
|
|
|
ctx.closePath()
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script src="http://localhost:35729/livereload.js"></script>
|
