aboutsummaryrefslogtreecommitdiff
path: root/src/pp/static
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2020-04-12 14:42:03 -0500
committerMark Powers <markppowers0@gmail.com>2020-04-12 14:42:03 -0500
commit7e6648902b262484bc0aac824c3784b1ae4b8591 (patch)
treebc56275222a58228fd714af0dad58c660f004ab7 /src/pp/static
parent1bffb064e2414ced5b1924a4f9fbd822a09c718e (diff)
Update games, add scores
Diffstat (limited to 'src/pp/static')
-rw-r--r--src/pp/static/index.html35
-rw-r--r--src/pp/static/main.js269
-rw-r--r--src/pp/static/templates.js18
3 files changed, 322 insertions, 0 deletions
diff --git a/src/pp/static/index.html b/src/pp/static/index.html
new file mode 100644
index 0000000..a245b6b
--- /dev/null
+++ b/src/pp/static/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <title>Picture Pieces</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <style>
+ canvas {
+ /* transform-origin: top left; */
+ /* transform: scale(4, 4); */
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+ </style>
+</head>
+
+<body style="padding:0; margin:0; overflow:hidden;">
+ <canvas id="canvas"></canvas>
+ <script src="/pp/templates.js"></script>
+ <script src="/pp/main.js"></script>
+ <div style="display: none">
+ <img src="/pp/tiles/0.png" id="img0">
+ <img src="/pp/tiles/1.png" id="img1">
+ <img src="/pp/tiles/2.png" id="img2">
+ <img src="/pp/tiles/3.png" id="img3">
+ <img src="/pp/tiles/4.png" id="img4">
+ <img src="/pp/tiles/5.png" id="img5">
+ <img src="/pp/tiles/6.png" id="img6">
+ <img src="/pp/tiles/7.png" id="img7">
+ </div>
+</body>
+
+</html>
diff --git a/src/pp/static/main.js b/src/pp/static/main.js
new file mode 100644
index 0000000..79d6414
--- /dev/null
+++ b/src/pp/static/main.js
@@ -0,0 +1,269 @@
+// The callbacks to be called each frame on update,
+// and on draw
+// The interval object
+var gameInterval, selectedX, selectedY, timeElapsed, timeStart, frame;
+let width = 800;
+let height = 600;
+let fps = 30;
+let gameOver = false
+
+let mouseX, mouseY;
+
+let IMG_WIDTH = 33
+let IMG_HEIGHT = 39
+let TILE_WIDTH = 2 + IMG_WIDTH
+let TILE_HEIGHT = 2 + IMG_HEIGHT
+
+// leave first two blank
+var board
+
+window.onload = function () {
+ canvas = document.getElementById("canvas");
+ ctx = canvas.getContext("2d");
+ canvas.width = width;
+ canvas.height = height;
+ document.addEventListener("mousedown", mouseDownCallback);
+ document.addEventListener("mouseup", mouseUpCallback);
+ document.addEventListener("mousemove", function(e){
+ mouseX = e.x
+ mouseY = e.y
+ });
+ init();
+}
+
+function game() {
+ frame++
+ updateCallback();
+ drawCallback();
+}
+
+function init() {
+ gameInterval = setInterval(game, 1000 / fps);
+ timeStart = Math.floor(new Date().getTime() / 1000)
+ timeElapsed = 0
+ frame = 0
+ loadTemplate()
+}
+
+function shuffle(a) {
+ var j, x, i;
+ for (i = a.length - 1; i > 0; i--) {
+ j = Math.floor(Math.random() * (i + 1));
+ x = a[i];
+ a[i] = a[j];
+ a[j] = x;
+ }
+ return a;
+}
+
+function swapTiles(){
+ count = 0
+ template = []
+ for (var x = 0; x < board.length; x++) {
+ template.push([])
+ for (var y = 0; y < board[x].length; y++) {
+ template[x].push(undefined)
+ template[x][y] = board[x][y]
+ if(board[x][y] != undefined){
+ count++
+ }
+ }
+ }
+ for (var i = 0; i < count/2; i++) {
+ items.push(i)
+ items.push(i)
+ }
+ shuffle(items)
+ board = []
+ for (var x = 0; x < template.length; x++) {
+ board.push([])
+ for (var y = 0; y < template[x].length; y++) {
+ board[x].push(undefined)
+ if (template[x][y] != undefined) {
+ board[x][y] = items.pop()
+ }
+ }
+ }
+}
+
+function loadTemplate() {
+ template = dragon
+ items = []
+ for (var i = 0; i < 8; i++) {
+ items.push(i)
+ items.push(i)
+ }
+ shuffle(items)
+ board = []
+ for (var x = 0; x < template.length; x++) {
+ board.push([])
+ for (var y = 0; y < template[x].length; y++) {
+ board[x].push(undefined)
+ if (template[x][y]) {
+ board[x][y] = items.pop()
+ }
+ }
+ }
+}
+
+var updateCallback = function () {
+ timeElapsed = Math.floor(new Date().getTime() / 1000) - timeStart
+
+ var done = true
+ for (var x = 0; x < board.length; x++) {
+ for (var y = 0; y < board[x].length; y++) {
+ if (board[x][y] != undefined) {
+ done = false
+ }
+ }
+ }
+ if (done) {
+ clearInterval(gameInterval)
+ gameOver = true
+ }
+}
+
+var drawCallback = function () {
+ font(48);
+ ctx.fillStyle = "#99b3ff";
+ ctx.fillRect(0, 0, width, height);
+ ctx.fillStyle = "#b30000"
+ ctx.fillRect(0, 0, 800, 50)
+ ctx.fillRect(600, 0, 200, 600)
+ ctx.lineWidth = 2
+ ctx.strokeStyle = "#ffcc00"
+ ctx.fillStyle = "#ffcc00"
+ ctx.strokeRect(1, 50, 600, 549)
+ font(50)
+ ctx.fillText("Picture Pieces", 100, 36)
+
+ if(gameOver){
+ ctx.fillStyle = "#000080"
+ font(50)
+ ctx.fillText("Congratuations", 100, 200)
+ font(24)
+ var minutes = Math.floor(timeElapsed / 60)
+ var seconds = timeElapsed % 60
+ ctx.fillText("Your final time was " + minutes + ":" + seconds, 110, 240)
+ return
+ }
+
+
+ for (var x = board.length-1; x >= 0; x--) {
+ for (var y = 0; y < board[x].length; y++) {
+ if (board[x][y] == undefined) {
+ continue
+ }
+ ctx.fillStyle = "#ffe6e6"
+ ctx.beginPath()
+ ctx.moveTo(x * TILE_WIDTH, y * TILE_HEIGHT)
+ ctx.lineTo(x * TILE_WIDTH-6, y * TILE_HEIGHT+6)
+ ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+ ctx.lineTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+ ctx.closePath()
+ ctx.fill();
+
+ ctx.fillStyle = '#ff9999'
+ ctx.beginPath()
+ ctx.moveTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+ ctx.lineTo((x+1) * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+ ctx.lineTo((x+1) * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+ ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+ ctx.closePath()
+ ctx.fill();
+
+ ctx.lineWidth
+ ctx.strokeStyle = "#ffcc00"
+ ctx.beginPath()
+ ctx.moveTo(x * TILE_WIDTH, y * TILE_HEIGHT)
+ ctx.lineTo(x * TILE_WIDTH-6, y * TILE_HEIGHT+6)
+ ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+ ctx.lineTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+ ctx.closePath()
+ ctx.stroke();
+ ctx.beginPath()
+ ctx.moveTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+ ctx.lineTo((x+1) * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+ ctx.lineTo((x+1) * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+ ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+ ctx.closePath()
+ ctx.stroke();
+
+ // ctx.strokeRect(x * TILE_WIDTH, y * TILE_HEIGHT, TILE_WIDTH, TILE_HEIGHT)
+ }
+ }
+
+ ctx.strokeStyle = "#ffcc00"
+ for (var x = 0; x < board.length; x++) {
+ for (var y = 0; y < board[x].length; y++) {
+ if (board[x][y] == undefined) {
+ continue
+ }
+ ctx.strokeRect(x * TILE_WIDTH, y * TILE_HEIGHT, TILE_WIDTH, TILE_HEIGHT)
+ ctx.drawImage(document.getElementById("img" + board[x][y]), 1 + x * TILE_WIDTH, 1 + y * TILE_HEIGHT)
+ }
+ }
+
+
+ ctx.strokeStyle = "#ffcc00"
+ ctx.fillStyle = "#ffcc00"
+ font(24)
+ ctx.fillText("Time: " + timeElapsed, 600, 36)
+ ctx.fillText("Shuffle", 650, 130)
+
+ if(650 - 10 < mouseX && mouseX < 700+10 && 150-10 < mouseY && mouseY < 150+10){
+ ctx.fillStyle = "#ffee22"
+ } else {
+ ctx.fillStyle = "#ffcc00"
+ }
+ ctx.beginPath();
+ ctx.moveTo(700, 150+10)
+ ctx.arc(650, 150, 10, Math.PI/2, 3*Math.PI/2)
+ ctx.lineTo(700, 150-10)
+ ctx.arc(700, 150, 10, 3*Math.PI/2, Math.PI/2)
+ ctx.fill();
+ // ctx.fillRect(625, 125, 150, 20)
+
+ ctx.strokeStyle = "red"
+ if (selectedX != undefined && selectedY != undefined && board[selectedX][selectedY] != undefined) {
+ ctx.beginPath();
+ let rad = TILE_WIDTH / 2 + Math.cos(frame / 7) * 2
+ ctx.arc(selectedX * TILE_WIDTH + TILE_WIDTH / 2, selectedY * TILE_HEIGHT + TILE_HEIGHT / 2, rad, 0, 2 * Math.PI)
+ ctx.stroke()
+ }
+}
+
+var mouseDownCallback = function (e) {
+ if(650 - 10 < mouseX && mouseX < 700+10 && 150-10 < mouseY && mouseY < 150+10){
+ swapTiles(board)
+ return
+ }
+
+ var tileX = Math.floor(e.x / TILE_WIDTH)
+ var tileY = Math.floor(e.y / TILE_HEIGHT)
+ if (board[tileX] != undefined && board[tileX][tileY] != undefined) {
+ if (selectedX != undefined &&
+ selectedY != undefined) {
+ if (board[selectedX][selectedY] != undefined &&
+ (tileX != selectedX || tileY != selectedY) &&
+ (board[tileX + 1][tileY] == undefined || board[tileX - 1][tileY] == undefined)) {
+ if (board[selectedX][selectedY] == board[tileX][tileY]) {
+ board[selectedX][selectedY] = undefined
+ board[tileX][tileY] = undefined
+ }
+ }
+ }
+ if (board[tileX + 1][tileY] == undefined || board[tileX - 1][tileY] == undefined) {
+ selectedX = tileX
+ selectedY = tileY
+ }
+ }
+}
+
+var mouseUpCallback = function (e) {
+
+}
+
+function font(size) {
+ ctx.font = size + "px Courier";
+}
diff --git a/src/pp/static/templates.js b/src/pp/static/templates.js
new file mode 100644
index 0000000..8e4c032
--- /dev/null
+++ b/src/pp/static/templates.js
@@ -0,0 +1,18 @@
+dragon = [
+ [],
+ [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, true , undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, true , true , undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, true , true , true , true , true , undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+ [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+] \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-24 16:15:24 +0000