"use strict"; var RGBT = function(canvasId, debug) { var MARGIN = 20; var FIELD_WIDTH = 80; var FIELD_HEIGHT = Math.round(FIELD_WIDTH * Math.sqrt(3) / 2); var ROWS_NUMBER = 6; var BUTTON_SIZE = 60; var AJAX_URL = 'https://ajax.cichyfragles.pl/rgbt.php'; var canvas; var context; var fields; var buttons; var gameStatus; var gameHash; var startPosition; var moves = []; var debugCounter = 0; var init = function() { canvas = document.getElementById(canvasId); if(typeof(canvas) != 'object') { alert('Invalid canvas ID!'); return; } canvas.width = (FIELD_WIDTH * ROWS_NUMBER) + (MARGIN * 2); canvas.height = (FIELD_HEIGHT * ROWS_NUMBER) + (MARGIN * 2); context = canvas.getContext('2d'); buttons = [ // { // 'name' : 'hiScores', // 'x' : MARGIN, // 'y' : MARGIN, // 'size' : 50, // 'imgSrc' : 'https://cichyfragles.pl/files/rgbt-hi-scores.jpg', // 'onclick' : loadHiScores // }, { 'name' : 'refresh', 'x' : canvas.width - MARGIN - 60, 'y' : MARGIN, 'size' : 50, 'imgSrc' : 'https://cichyfragles.pl/files/rgbt-refresh.jpg', 'onclick' : function() { if(confirm('Czy na pewno chcesz zacząć od nowa?')) { save('reset'); startGame(); } } } ]; buttons.forEach(function(button) { button.image = document.createElement('img'); button.image.onload = function() { context.drawImage(button.image, button.x, button.y, button.size, button.size); } button.image.src = button.imgSrc; }); canvas.onmousemove = onmousemove; window.onbeforeunload = onquit; canvas.addEventListener('mouseup', tapOrClick, false); canvas.addEventListener('touchend', tapOrClick, false); startGame(); }; var tapOrClick = function(e) { if(e.touches && e.touches.length > 0) { for(var i = 0; i < e.touches.length; i++) { onclick({ 'clientX' : e.touches[i].pageX, 'clientY' : e.touches[i].pageY }); } } else if(e.clientX && e.clientY) { onclick({ 'clientX' : e.clientX, 'clientY' : e.clientY }); } event.preventDefault(); return false; } var startGame = function() { moves = []; canvas.style.cursor = 'wait'; advAJAX.post({ 'url' : AJAX_URL, 'parameters' : { 'action' : 'start', }, 'timeout' : 5000, 'onComplete' : function(data) { canvas.style.cursor = 'default'; try { var response = JSON.parse(data.responseText); gameHash = response.hash; startPosition = response.position; } catch(e) { gameHash = Math.random(); startPosition = generateStartPosition(); } buildBoard(); } }); }; var buildBoard = function() { fields = []; var counter = 0; for(var i = 1; i < ROWS_NUMBER * 2; i++) { var row = []; for(var j = 0; j < Math.ceil(i / 2); j++) { row.push(startPosition[counter++]); } fields.push(row); } gameStatus = 'playing'; drawBoard(); }; var generateStartPosition = function() { var position = ''; var colors = ['r', 'g', 'b']; var fieldsNumber = ROWS_NUMBER * ROWS_NUMBER; for(var i = 0; i < fieldsNumber; i++) { var rand = Math.floor(3 * Math.random()); position += colors[rand]; } return position; }; var onmousemove = function(e) { var mouseX = e.clientX + window.pageXOffset - canvas.offsetLeft; var mouseY = e.clientY + window.pageYOffset - canvas.offsetTop; if(getHoveredButton(mouseX, mouseY) || (gameStatus == 'playing' && hoverBoard(mouseX, mouseY))) { canvas.style.cursor = 'pointer'; } else { canvas.style.cursor = 'default'; } }; var onclick = function(e) { if(window.location.hash == '#debug') { var debugContainer = document.getElementById(canvasId + '-debug'); if(!debugContainer) { debugContainer= document.createElement('table'); debugContainer.id = canvasId + '-debug'; canvas.parentNode.insertBefore(debugContainer, canvas.nextSibling); } var row = '
# | Nick | Ruchy |
---|---|---|
' + (i + 1) + ' | '; html += '' + scores[i].username + ' | '; html += '' + scores[i].moves_count + ' | '; html += '
Twój wynik: ' + moves.length + ' ' + getMovesWord(moves.length) + '
'; } } else { html = 'Póki co brak wyników...
'; } var hsContainer = document.getElementById(canvasId + '-hiScores'); if(!hsContainer) { hsContainer = document.createElement('div'); hsContainer.id = canvasId + '-hiScores'; hsContainer.style.visibility = 'hidden'; canvas.parentNode.insertBefore(hsContainer, canvas.nextSibling); } hsContainer.innerHTML = html; hsContainer.style.top = (canvas.offsetTop + Math.round((canvas.offsetHeight - hsContainer.offsetHeight) / 2)) + 'px'; hsContainer.style.left = (canvas.offsetLeft + Math.round((canvas.offsetWidth - hsContainer.offsetWidth) / 2)) + 'px'; hsContainer.style.visibility = 'visible'; hsContainer.style.display = 'block'; }; var drawBoard = function() { drawRect(0, 0, canvas.width, canvas.height, '#FFF'); buttons.forEach(function(button) { context.drawImage(button.image, button.x, button.y, button.size, button.size); }); var center = Math.round(canvas.width / 2) + MARGIN; var colors = { 'r' : '#F88', 'g' : '#8F8', 'b' : '#78F', 'y' : '#FF8' }; for(var i = 0; i < fields.length; i++) { for(var j = 0; j < fields[i].length; j++) { var x = MARGIN + Math.round(center + (j * FIELD_WIDTH) - ((fields[i].length + (i % 2)) * FIELD_WIDTH / 2)); var y = MARGIN + (Math.ceil(i / 2) * FIELD_HEIGHT); context.beginPath(); context.moveTo(x, y); if(i % 2) { context.lineTo(x + FIELD_WIDTH, y); context.lineTo(x + (FIELD_WIDTH / 2), y + FIELD_HEIGHT); } else { context.lineTo(x + (FIELD_WIDTH / 2), y + FIELD_HEIGHT); context.lineTo(x - (FIELD_WIDTH / 2), y + FIELD_HEIGHT); } context.lineTo(x, y); context.closePath(); context.strokeStyle = '#333'; context.stroke(); context.fillStyle = colors[fields[i][j]]; context.fill(); } } }; var drawRect = function(x, y, width, height, fill, stroke) { context.beginPath(); context.moveTo(x, y); context.lineTo(x + width, y); context.lineTo(x + width, y + height); context.lineTo(x, y + height); context.lineTo(x, y); context.closePath(); context.fillStyle = fill; context.fill(); if(stroke) { context.strokeStyle = stroke; context.stroke(); } }; init(); };