Minigolf/index.html

<!--Copyright (c) 2017 Copyright Cliffbreak.de All Rights Reserved.-->
<head>
  <title>&#9971; 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,
    bWidth = 10,
    pX,
    pY,
    bVec,
    borders = [],
    hole = []

  /************************/
 /*** _GAME VARIABLES_ ***/
/***********************/
var _COLOR_GRASS = '#388E3C',
    _COLOR_BORDER = '#FF9800',
    _COLOR_BALL = '#FFFFFF',
    _COLOR_HOLE = '#000000',
    _COLOR_BRACKET = '#000000'


  var _MAX_BRACKET = 100,
      _BALL_SPEED = 100,
      _BALL_SPEED_THRESHOLD = 10,
      _HOLE_WIDTH = 15

  $(function(){
    ctx = $('canvas')[0].getContext('2d')
    staticctx = $('canvas')[1].getContext('2d')
    init()
    drawBorder(23, 10, 500, 10)
    drawBorder(23, 10, 10, 500)
    drawBorder(23+200, 10+70, 50, 50)
    drawBorder(23, 500+10-10, 500, 10)
    drawBorder(500+23-10, 10, 10, 500)
    // drawHole(432, 366)
    drawHole(140, 100)
    setInterval(animLoop, 5)

    $(document).mousemove(function(e){
      pX = e.pageX - $('canvas').offset().left
      pY = e.pageY - $('canvas').offset().top
    })

    $(document).mousedown(function(e){
      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]
    })
  })

  function animLoop() {
    ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());

    if(bVec != null){
      collide()
      drawBall(bX = bX-bVec[0], bY = bY-bVec[1])
      checkHole()
    }
    else
      drawBall(bX, bY)
    drawBracket()
  }

  function init() {
    bX = bY = 100
    staticctx.fillStyle = _COLOR_GRASS
    staticctx.fillRect(23, 10, 500, 500)
  }

  function drawBorder(x, y, width, height) {
    staticctx.fillStyle = _COLOR_BORDER
    staticctx.fillRect(x, y, width, height)
    borders.push(new Border(x, y, width, height))
  }

  function debugBorder(border) {
    drawDebugBorder(border)
    setTimeout(function(){drawDebugBorderUndo(border)}, 2*1000)
  }

  function drawDebugBorder(border) {
    staticctx.fillStyle = 'red'
    staticctx.fillRect(border.x, border.y, border.width, border.height)
  }

  function drawDebugBorderUndo(border) {
    staticctx.fillStyle = _COLOR_BORDER
    staticctx.fillRect(border.x, border.y, border.width, border.height)
  }

  function drawHole(x, y) {
    staticctx.beginPath()
    staticctx.arc(x, y, _HOLE_WIDTH, 0, Math.PI*2)
    staticctx.fillStyle = _COLOR_HOLE
    staticctx.fill()
    staticctx.closePath()
    hole = [x, y]
  }

  function drawBall(x, y) {
    ctx.beginPath()
    ctx.arc(x, y, bWidth, 0, Math.PI*2)
    ctx.fillStyle = _COLOR_BALL
    ctx.fill()
    ctx.closePath()
  }

  function drawBracket() {
    if(bVec != null) return;
    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)
    }

    ctx.beginPath()
    ctx.moveTo(bX, bY)
    ctx.lineTo(x, y)
    ctx.strokeStyle = _COLOR_BRACKET
    ctx.stroke()
    ctx.closePath()
  }

  function collide() {
    var coll = [false, false, false, false] //left, top, right, bottom
    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){
        debugBorder(el)
        if(crossWidth<crossHeight){
          if (crossWidth<(-crossHeight))
            coll[3] = true
          else
            coll[0] = true
        } else {
          if (crossWidth<(-crossHeight))
            coll[2] = true
          else
            coll[1] = true
        }
      }
    })

    if(coll[0]){
      console.log('left < 0');
      bVec = [Math.abs(bVec[0]), bVec[1]]
    }
    if(coll[1]){
      console.log('top < 0');
      bVec = [bVec[0], Math.abs(bVec[1])]
    }
    if(coll[2]){
      console.log('right > 0');
      bVec = [-Math.abs(bVec[0]), bVec[1]]
    }
    if(coll[3]){
      console.log('bottom > 0');
      bVec = [bVec[0], -Math.abs(bVec[1])]
    }
  }

  function checkHole() {
    if(bX >= hole[0]-_HOLE_WIDTH/2 && bX <= hole[0]+_HOLE_WIDTH/2 && bY >= hole[1] && bY-_HOLE_WIDTH/2 <= hole[1]+_HOLE_WIDTH/2)
      alert('Hole')
  }

  /** 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>
First release of GUI 2017-06-18 16:33:49 +00:00			`<!--Copyright (c) 2017 Copyright Cliffbreak.de All Rights Reserved.-->`
Initial commit 2017-06-18 14:46:11 +00:00			`<head>`
Fix Emoji 2017-06-18 16:44:10 +00:00			`<title>⛳ Minigolf</title>`
First release of GUI 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>`
Initial commit 2017-06-18 14:46:11 +00:00			`</head>`
			`<body>`
First release of GUI 2017-06-18 16:33:49 +00:00			`<canvas width="1280" height="720"></canvas>`
			`<canvas width="1280" height="720"></canvas>`
Initial commit 2017-06-18 14:46:11 +00:00			`</body>`
First release of GUI 2017-06-18 16:33:49 +00:00
			`<script>`
			`var ctx,`
			`staticctx,`
			`bX,`
			`bY,`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`bWidth = 10,`
First release of GUI 2017-06-18 16:33:49 +00:00			`pX,`
Shoot the ball! 2017-06-18 20:17:35 +00:00			`pY,`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`bVec,`
Hole detection 2017-06-20 12:25:53 +00:00			`borders = [],`
			`hole = []`
First release of GUI 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'`

Double tickrate 2017-06-20 11:28:29 +00:00
Shoot the ball! 2017-06-18 20:17:35 +00:00			`var _MAX_BRACKET = 100,`
Double tickrate 2017-06-20 11:28:29 +00:00			`_BALL_SPEED = 100,`
Hole detection 2017-06-20 12:25:53 +00:00			`_BALL_SPEED_THRESHOLD = 10,`
			`_HOLE_WIDTH = 15`
Add f***ing max bracket size! 2017-06-18 19:50:42 +00:00
First release of GUI 2017-06-18 16:33:49 +00:00			`$(function(){`
			`ctx = $('canvas')[0].getContext('2d')`
			`staticctx = $('canvas')[1].getContext('2d')`
			`init()`
Test collision with larger barriers 2017-06-20 11:52:21 +00:00			`drawBorder(23, 10, 500, 10)`
			`drawBorder(23, 10, 10, 500)`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`drawBorder(23+200, 10+70, 50, 50)`
Test collision with larger barriers 2017-06-20 11:52:21 +00:00			`drawBorder(23, 500+10-10, 500, 10)`
			`drawBorder(500+23-10, 10, 10, 500)`
Hole detection 2017-06-20 12:25:53 +00:00			`// drawHole(432, 366)`
			`drawHole(140, 100)`
Double tickrate 2017-06-20 11:28:29 +00:00			`setInterval(animLoop, 5)`
First release of GUI 2017-06-18 16:33:49 +00:00
			`$(document).mousemove(function(e){`
			`pX = e.pageX - $('canvas').offset().left`
			`pY = e.pageY - $('canvas').offset().top`
Add f***ing max bracket size! 2017-06-18 19:50:42 +00:00			`})`
Double tickrate 2017-06-20 11:28:29 +00:00
Add f***ing max bracket size! 2017-06-18 19:50:42 +00:00			`$(document).mousedown(function(e){`
Shoot the ball! 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]`
Add f***ing max bracket size! 2017-06-18 19:50:42 +00:00			`})`
First release of GUI 2017-06-18 16:33:49 +00:00			`})`

			`function animLoop() {`
			`ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());`
Double tickrate 2017-06-20 11:28:29 +00:00
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`if(bVec != null){`
			`collide()`
			`drawBall(bX = bX-bVec[0], bY = bY-bVec[1])`
Hole detection 2017-06-20 12:25:53 +00:00			`checkHole()`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`}`
Shoot the ball! 2017-06-18 20:17:35 +00:00			`else`
			`drawBall(bX, bY)`
First release of GUI 2017-06-18 16:33:49 +00:00			`drawBracket()`
			`}`

			`function init() {`
			`bX = bY = 100`
			`staticctx.fillStyle = _COLOR_GRASS`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`staticctx.fillRect(23, 10, 500, 500)`
First release of GUI 2017-06-18 16:33:49 +00:00			`}`

Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`function drawBorder(x, y, width, height) {`
First release of GUI 2017-06-18 16:33:49 +00:00			`staticctx.fillStyle = _COLOR_BORDER`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`staticctx.fillRect(x, y, width, height)`
			`borders.push(new Border(x, y, width, height))`
			`}`

More collision debugging... 2017-06-19 16:21:58 +00:00			`function debugBorder(border) {`
			`drawDebugBorder(border)`
			`setTimeout(function(){drawDebugBorderUndo(border)}, 2*1000)`
			`}`

Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`function drawDebugBorder(border) {`
			`staticctx.fillStyle = 'red'`
			`staticctx.fillRect(border.x, border.y, border.width, border.height)`
First release of GUI 2017-06-18 16:33:49 +00:00			`}`
Double tickrate 2017-06-20 11:28:29 +00:00
More collision debugging... 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)`
			`}`
First release of GUI 2017-06-18 16:33:49 +00:00
			`function drawHole(x, y) {`
			`staticctx.beginPath()`
Hole detection 2017-06-20 12:25:53 +00:00			`staticctx.arc(x, y, _HOLE_WIDTH, 0, Math.PI*2)`
First release of GUI 2017-06-18 16:33:49 +00:00			`staticctx.fillStyle = _COLOR_HOLE`
			`staticctx.fill()`
			`staticctx.closePath()`
Hole detection 2017-06-20 12:25:53 +00:00			`hole = [x, y]`
First release of GUI 2017-06-18 16:33:49 +00:00			`}`

			`function drawBall(x, y) {`
			`ctx.beginPath()`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`ctx.arc(x, y, bWidth, 0, Math.PI*2)`
First release of GUI 2017-06-18 16:33:49 +00:00			`ctx.fillStyle = _COLOR_BALL`
			`ctx.fill()`
			`ctx.closePath()`
			`}`

			`function drawBracket() {`
Hide bracket after shoot 2017-06-18 20:20:12 +00:00			`if(bVec != null) return;`
Add f***ing max bracket size! 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)`
			`}`
Double tickrate 2017-06-20 11:28:29 +00:00
First release of GUI 2017-06-18 16:33:49 +00:00			`ctx.beginPath()`
			`ctx.moveTo(bX, bY)`
Add f***ing max bracket size! 2017-06-18 19:50:42 +00:00			`ctx.lineTo(x, y)`
First release of GUI 2017-06-18 16:33:49 +00:00			`ctx.strokeStyle = _COLOR_BRACKET`
			`ctx.stroke()`
			`ctx.closePath()`
			`}`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00
			`function collide() {`
More collision debugging... 2017-06-19 16:21:58 +00:00			`var coll = [false, false, false, false] //left, top, right, bottom`
Added physics (still buggy as f**k...) 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){`
More collision debugging... 2017-06-19 16:21:58 +00:00			`debugBorder(el)`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`if(crossWidth<crossHeight){`
More collision debugging... 2017-06-19 16:21:58 +00:00			`if (crossWidth<(-crossHeight))`
			`coll[3] = true`
			`else`
			`coll[0] = true`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`} else {`
More collision debugging... 2017-06-19 16:21:58 +00:00			`if (crossWidth<(-crossHeight))`
			`coll[2] = true`
			`else`
			`coll[1] = true`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`}`
			`}`
			`})`
Test collision with larger barriers 2017-06-20 11:52:21 +00:00
More collision debugging... 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');`
Double tickrate 2017-06-20 11:28:29 +00:00			`bVec = [bVec[0], Math.abs(bVec[1])]`
More collision debugging... 2017-06-19 16:21:58 +00:00			`}`
			`if(coll[2]){`
			`console.log('right > 0');`
Double tickrate 2017-06-20 11:28:29 +00:00			`bVec = [-Math.abs(bVec[0]), bVec[1]]`
More collision debugging... 2017-06-19 16:21:58 +00:00			`}`
			`if(coll[3]){`
			`console.log('bottom > 0');`
Double tickrate 2017-06-20 11:28:29 +00:00			`bVec = [bVec[0], -Math.abs(bVec[1])]`
More collision debugging... 2017-06-19 16:21:58 +00:00			`}`
Added physics (still buggy as f**k...) 2017-06-18 22:55:08 +00:00			`}`

Hole detection 2017-06-20 12:25:53 +00:00			`function checkHole() {`
			`if(bX >= hole[0]-_HOLE_WIDTH/2 && bX <= hole[0]+_HOLE_WIDTH/2 && bY >= hole[1] && bY-_HOLE_WIDTH/2 <= hole[1]+_HOLE_WIDTH/2)`
			`alert('Hole')`
			`}`

Added physics (still buggy as f**k...) 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`
			`}`
First release of GUI 2017-06-18 16:33:49 +00:00			`</script>`

			`<script src="http://localhost:35729/livereload.js"></script>`