Archived
4
1
Fork 0
This repository has been archived on 2019-02-05. You can view files and clone it, but cannot push or open issues or pull requests.
Minigolf/index.html

216 lines
5.3 KiB
HTML
Raw Permalink Normal View History

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>&#9971; 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,
2017-06-18 22:55:08 +00:00
bWidth = 10,
2017-06-18 16:33:49 +00:00
pX,
2017-06-18 20:17:35 +00:00
pY,
2017-06-18 22:55:08 +00:00
bVec,
2017-06-20 12:25:53 +00:00
borders = [],
hole = []
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-20 11:28:29 +00:00
2017-06-18 20:17:35 +00:00
var _MAX_BRACKET = 100,
2017-06-20 11:28:29 +00:00
_BALL_SPEED = 100,
2017-06-20 12:42:34 +00:00
// _BALL_SPEED_THRESHOLD = 10,
_BALL_SPEED_THRESHOLD = 0,
2017-06-20 12:25:53 +00:00
_HOLE_WIDTH = 15
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()
2017-06-20 11:52:21 +00:00
drawBorder(23, 10, 500, 10)
drawBorder(23, 10, 10, 500)
2017-06-18 22:55:08 +00:00
drawBorder(23+200, 10+70, 50, 50)
2017-06-20 11:52:21 +00:00
drawBorder(23, 500+10-10, 500, 10)
drawBorder(500+23-10, 10, 10, 500)
2017-06-20 12:25:53 +00:00
// drawHole(432, 366)
drawHole(140, 100)
2017-06-20 11:28:29 +00:00
setInterval(animLoop, 5)
2017-06-18 16:33:49 +00:00
$(document).mousemove(function(e){
pX = e.pageX - $('canvas').offset().left
pY = e.pageY - $('canvas').offset().top
2017-06-18 19:50:42 +00:00
})
2017-06-20 11:28:29 +00:00
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
})
function animLoop() {
ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());
2017-06-20 11:28:29 +00:00
2017-06-18 22:55:08 +00:00
if(bVec != null){
collide()
drawBall(bX = bX-bVec[0], bY = bY-bVec[1])
2017-06-20 12:25:53 +00:00
checkHole()
2017-06-18 22:55:08 +00:00
}
2017-06-18 20:17:35 +00:00
else
drawBall(bX, bY)
2017-06-18 16:33:49 +00:00
drawBracket()
}
function init() {
bX = bY = 100
staticctx.fillStyle = _COLOR_GRASS
2017-06-18 22:55:08 +00:00
staticctx.fillRect(23, 10, 500, 500)
2017-06-18 16:33:49 +00:00
}
2017-06-18 22:55:08 +00:00
function drawBorder(x, y, width, height) {
2017-06-18 16:33:49 +00:00
staticctx.fillStyle = _COLOR_BORDER
2017-06-18 22:55:08 +00:00
staticctx.fillRect(x, y, width, height)
borders.push(new Border(x, y, width, height))
}
2017-06-19 16:21:58 +00:00
function debugBorder(border) {
drawDebugBorder(border)
setTimeout(function(){drawDebugBorderUndo(border)}, 2*1000)
}
2017-06-18 22:55:08 +00:00
function drawDebugBorder(border) {
staticctx.fillStyle = 'red'
staticctx.fillRect(border.x, border.y, border.width, border.height)
2017-06-18 16:33:49 +00:00
}
2017-06-20 11:28:29 +00:00
2017-06-19 16:21:58 +00:00
function drawDebugBorderUndo(border) {
staticctx.fillStyle = _COLOR_BORDER
staticctx.fillRect(border.x, border.y, border.width, border.height)
}
2017-06-18 16:33:49 +00:00
function drawHole(x, y) {
staticctx.beginPath()
2017-06-20 12:25:53 +00:00
staticctx.arc(x, y, _HOLE_WIDTH, 0, Math.PI*2)
2017-06-18 16:33:49 +00:00
staticctx.fillStyle = _COLOR_HOLE
staticctx.fill()
staticctx.closePath()
2017-06-20 12:25:53 +00:00
hole = [x, y]
2017-06-18 16:33:49 +00:00
}
function drawBall(x, y) {
ctx.beginPath()
2017-06-18 22:55:08 +00:00
ctx.arc(x, y, bWidth, 0, Math.PI*2)
2017-06-18 16:33:49 +00:00
ctx.fillStyle = _COLOR_BALL
ctx.fill()
ctx.closePath()
}
function drawBracket() {
2017-06-18 20:20:12 +00:00
if(bVec != null) return;
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-20 11:28:29 +00:00
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()
}
2017-06-18 22:55:08 +00:00
function collide() {
2017-06-19 16:21:58 +00:00
var coll = [false, false, false, false] //left, top, right, bottom
2017-06-18 22:55:08 +00:00
borders.forEach(function(el){
var dx = (el.x+el.width/2)-(bX+bWidth/2)
var dy = (el.y+el.height/2)-(bY+bWidth/2)
var width = (el.width+bWidth)/2
var height = (el.height+bWidth)/2
var crossWidth = width*dy;
var crossHeight = height*dx;
if(Math.abs(dx)<=width && Math.abs(dy)<=height){
2017-06-19 16:21:58 +00:00
debugBorder(el)
2017-06-18 22:55:08 +00:00
if(crossWidth<crossHeight){
2017-06-19 16:21:58 +00:00
if (crossWidth<(-crossHeight))
coll[3] = true
else
coll[0] = true
2017-06-18 22:55:08 +00:00
} else {
2017-06-19 16:21:58 +00:00
if (crossWidth<(-crossHeight))
coll[2] = true
else
coll[1] = true
2017-06-18 22:55:08 +00:00
}
}
})
2017-06-20 11:52:21 +00:00
2017-06-19 16:21:58 +00:00
if(coll[0]){
console.log('left < 0');
bVec = [Math.abs(bVec[0]), bVec[1]]
}
if(coll[1]){
console.log('top < 0');
2017-06-20 11:28:29 +00:00
bVec = [bVec[0], Math.abs(bVec[1])]
2017-06-19 16:21:58 +00:00
}
if(coll[2]){
console.log('right > 0');
2017-06-20 11:28:29 +00:00
bVec = [-Math.abs(bVec[0]), bVec[1]]
2017-06-19 16:21:58 +00:00
}
if(coll[3]){
console.log('bottom > 0');
2017-06-20 11:28:29 +00:00
bVec = [bVec[0], -Math.abs(bVec[1])]
2017-06-19 16:21:58 +00:00
}
2017-06-18 22:55:08 +00:00
}
2017-06-20 12:25:53 +00:00
function checkHole() {
2017-06-20 12:30:32 +00:00
if(bX >= hole[0]-_HOLE_WIDTH/2 && bX <= hole[0]+_HOLE_WIDTH/2 && bY >= hole[1]-_HOLE_WIDTH/2 && bY <= hole[1]+_HOLE_WIDTH/2)
2017-06-20 12:25:53 +00:00
alert('Hole')
}
2017-06-18 22:55:08 +00:00
/** CLASSES **/
function Border(x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
}
2017-06-18 16:33:49 +00:00
</script>
<script src="http://localhost:35729/livereload.js"></script>