Cliffbreak/Minigolf
Archived
4
1
Fork 0
Code Releases Activity

Added physics (still buggy as f**k...)

Browse source
This commit is contained in:
Simon Giesel 2017-06-19 00:55:08 +02:00
parent c313988a6b
commit 3504379e5c
1 changed files with 69 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
index.html
View file

@ -14,9 +14,11 @@ var ctx,
staticctx,
bX,
bY,
bWidth = 10,
pX,
pY,
bVec
bVec,
borders = []
/************************/
/*** _GAME VARIABLES_ ***/
@ -38,6 +40,7 @@ var _COLOR_GRASS = '#388E3C',
init()
drawBorder(23, 10, 500, 5)
drawBorder(23, 10, 5, 500)
drawBorder(23+200, 10+70, 50, 50)
drawBorder(23, 500+10-5, 500, 5)
drawBorder(500+23-5, 10, 5, 500)
drawHole(432, 366)
@ -73,12 +76,14 @@ var _COLOR_GRASS = '#388E3C',
})
})
var i = 0
// var i = 0
function animLoop() {
ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());
// drawBall(bX++, bY++)
if(bVec != null)
drawBall(bX-i++*bVec[0], bY-i*bVec[1])
if(bVec != null){
collide()
drawBall(bX = bX-bVec[0], bY = bY-bVec[1])
}
else
drawBall(bX, bY)
drawBracket()
@ -87,12 +92,18 @@ var _COLOR_GRASS = '#388E3C',
function init() {
bX = bY = 100
staticctx.fillStyle = _COLOR_GRASS
staticctx.fillRect(23, 10, 500, 500);
staticctx.fillRect(23, 10, 500, 500)
}
function drawBorder(x, y, length, width) {
function drawBorder(x, y, width, height) {
staticctx.fillStyle = _COLOR_BORDER
staticctx.fillRect(x, y, length, width);
staticctx.fillRect(x, y, width, height)
borders.push(new Border(x, y, width, height))
}
function drawDebugBorder(border) {
staticctx.fillStyle = 'red'
staticctx.fillRect(border.x, border.y, border.width, border.height)
}
function drawHole(x, y) {
@ -105,7 +116,7 @@ var _COLOR_GRASS = '#388E3C',
function drawBall(x, y) {
ctx.beginPath()
ctx.arc(x, y, 10, 0, Math.PI*2)
ctx.arc(x, y, bWidth, 0, Math.PI*2)
ctx.fillStyle = _COLOR_BALL
ctx.fill()
ctx.closePath()
@ -128,6 +139,54 @@ var _COLOR_GRASS = '#388E3C',
ctx.stroke()
ctx.closePath()
}
function collide() {
borders.forEach(function(el){
// if(bX >= el.x && bX <= el.x+el.width && bY >= el.y && bY <= el.y+el.height){
// drawDebugBorder(el)
// if(Math.round(bX) == el.x || Math.round(bX) == el.x+el.width){
// bVec = [-bVec[0], bVec[1]]
// }
// else if(Math.round(bY) == el.y || Math.round(bY) == el.y+el.height)
// bVec = [bVec[0], -bVec[1]]
// else {
// console.error('Error during collide()')
// console.log(el)
// console.log(Math.round(bY));
// console.log(Math.round(bX));
// }
// }
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;
var collision = 'none';
if(Math.abs(dx)<=width && Math.abs(dy)<=height){
if(crossWidth<crossHeight){
collision=(crossWidth<(-crossHeight))?'bottom':'left'
} else {
collision=(crossWidth<(-crossHeight))?'right':'top'
}
}
if(collision != 'none') console.log(collision);
switch (collision) {
case 'bottom':
case 'top': bVec = [bVec[0], -bVec[1]]; break
case 'left':
case 'right': bVec = [-bVec[0], bVec[1]]; break
}
})
}
/** CLASSES **/
function Border(x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
}
</script>
<script src="http://localhost:35729/livereload.js"></script>