├── Icon ├── .gitignore ├── demo.gif ├── qrcode.png ├── turn-left-right.arproj ├── README.md └── scripts └── script.js /Icon : -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | "Icon\r" 3 | .arstudio/project.marker 4 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiyeonseo/spark-ar-left-right-game/HEAD/demo.gif -------------------------------------------------------------------------------- /qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiyeonseo/spark-ar-left-right-game/HEAD/qrcode.png -------------------------------------------------------------------------------- /turn-left-right.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiyeonseo/spark-ar-left-right-game/HEAD/turn-left-right.arproj -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # spark-ar-left-right-game 3 | - Demo : (a black layer is just for my privacy) ![demo](demo.gif) 4 | - Link to FB : https://www.facebook.com/fbcameraeffects/tryit/728315064296179/ 5 | - QR code : ![qrcode](qrcode.png) 6 | 7 | ## Environment 8 | - Spark AR Studio v66.0 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /scripts/script.js: -------------------------------------------------------------------------------- 1 | //============================================================================== 2 | // 3 | // Simple Game using FaceGestures (isTurnedLeft, isTurnedRight) 4 | // Get score when the face turns same direction. 5 | // 6 | //============================================================================== 7 | 8 | const Scene = require('Scene'); 9 | const Time = require('Time'); 10 | const FaceGestures = require('FaceGestures'); 11 | const FaceTracking = require('FaceTracking'); 12 | const TouchGestures = require('TouchGestures'); 13 | 14 | const face = FaceTracking.face(0); 15 | 16 | const tap_to_start_text_node = Scene.root.find('start_text'); 17 | const main_text_node = Scene.root.find('main_text'); 18 | 19 | const score_text_node = Scene.root.find('score_text'); 20 | 21 | const remain_time_node = Scene.root.find('time_rectangle'); 22 | const screen = Scene.root.find('canvas0'); 23 | 24 | let blink = false; 25 | 26 | // For Start Text 27 | let blinkerTimer = Time.setInterval(function () { 28 | blink = !blink; 29 | tap_to_start_text_node.hidden = blink; 30 | }, 700); 31 | 32 | function startBlink(text) { 33 | tap_to_start_text_node.text = text; 34 | blinkerTimer = Time.setInterval(function () { 35 | blink = !blink; 36 | tap_to_start_text_node.hidden = blink; 37 | }, 700); 38 | } 39 | 40 | // First instruction 41 | let firstPlay = true; 42 | function firstInstruction() { 43 | 44 | const instruction_node1 = Scene.root.find('instruction_rec0'); 45 | const instruction_node2 = Scene.root.find('instruction_rec1'); 46 | 47 | firstPlay = false; 48 | instruction_node1.hidden = false; 49 | instruction_node2.hidden = false; 50 | tap_to_start_text_node.hidden = true; 51 | 52 | const timeoutTimer = Time.setTimeout(function () { 53 | instruction_node1.hidden = true; 54 | instruction_node2.hidden = true; 55 | tap_to_start_text_node.hidden = true; 56 | score_text_node.hidden = false; 57 | main_text_node.hidden = false; 58 | startCountdown(); 59 | }, 2000); 60 | } 61 | 62 | // Ready 3, 2, 1 63 | function startCountdown() { 64 | let starting = 3; 65 | const countdownTimer = Time.setInterval(function () { 66 | main_text_node.text = starting + ""; 67 | if (starting == 0) { 68 | Time.clearInterval(countdownTimer); 69 | startGame(); 70 | } 71 | starting--; 72 | }, 1000); 73 | } 74 | 75 | // init time/score/status 76 | let timer = 100; 77 | let score = 0; 78 | let playing = false; 79 | let timeover = false; 80 | 81 | 82 | // tap to start / restart 83 | TouchGestures.onTap(screen).subscribe(function () { 84 | tap_to_start_text_node.hidden = true; 85 | Time.clearInterval(blinkerTimer); 86 | if (firstPlay) { 87 | firstInstruction(); 88 | } else { 89 | remain_time_node.transform.scaleX = 1; 90 | timer = 100; 91 | score = 0; 92 | score_text_node.text = "0"; 93 | timeover = false; 94 | playing = false; 95 | 96 | startCountdown(); 97 | } 98 | }); 99 | 100 | let direction = null; 101 | 102 | function startGame() { 103 | const gameTimer = Time.setInterval(function () { 104 | if (timer < 1) { 105 | Time.clearInterval(gameTimer); 106 | main_text_node.text = "Game Over"; 107 | timeover = true; 108 | startBlink('Tap to restart'); 109 | } else { 110 | if (!playing) { 111 | playing = true; 112 | direction = getRandomDirection(); 113 | main_text_node.text = direction == 0 ? 'left' : 'right'; 114 | } 115 | } 116 | timer--; 117 | remain_time_node.transform.scaleX = (timer / 100); 118 | }, 100); 119 | } 120 | 121 | FaceGestures.isTurnedLeft(face).monitor().subscribe(function (changedValue) { 122 | if (timeover === false && changedValue.newValue && direction === 0) { 123 | answerCorrect(); 124 | } 125 | }); 126 | 127 | FaceGestures.isTurnedRight(face).monitor().subscribe(function (changedValue) { 128 | if (timeover === false && changedValue.newValue && direction === 1) { 129 | answerCorrect(); 130 | } 131 | }); 132 | 133 | // game modules 134 | 135 | function answerCorrect() { 136 | playing = false; 137 | score += 10; 138 | score_text_node.text = score.toString(); 139 | showGreen(); 140 | direction = null; 141 | } 142 | 143 | function showGreen() { 144 | const green_o_node = Scene.root.find('flag_text'); 145 | green_o_node.hidden = false; 146 | Time.setTimeout(function () { 147 | green_o_node.hidden = true; 148 | }, 200); 149 | } 150 | 151 | function getRandomDirection() { // 0 or 1 152 | return Math.floor(Math.random() * 2); 153 | } 154 | 155 | --------------------------------------------------------------------------------