JosefGav · JosefGav · May 31, 2022 · May 31, 2022
diff --git a/index.html b/index.html
@@ -6,12 +6,15 @@
         <title>Snake game</title>
         <script src="p5.js"></script>
         <script src="p5.min.js"></script>
+        <script src="swipedevents.js"></script>
     </head>
 
     <body>
         <div id="length"></div>
         <div id="game">
         </div>
+
+        <button onclick="reload()" style="width: 100px;height:100px;display: block;">Reload</button>
         <script src="grid.js"></script>
         <script src="snake.js"></script>
     </body>

diff --git a/snake.js b/snake.js
@@ -79,23 +79,8 @@ document.addEventListener("keydown",e => {
             leadingBall.direction = directions.left;
             break;
         case 82:
-            leadingBall = {
-                x:20,
-                y:39,
-                direction: directions.up,
-            }
-            historyOfLeadingBallPositions = [[leadingBall.x,leadingBall.y]];
-            snakeLength = 5;
-
-            for (let y = 0; y < 40 ; y ++) {
-                for (let x = 0; x < 40; x++){
-                    grid[y][x].status = statuses.empty;
-                }
-            }
-            gameState = 0;
-            setTimeout(()=> grid[Math.floor(Math.random()*40)][Math.floor(Math.random()*40)].status = statuses.apple, 100)
-            }
-
+            reload();
+    }
 })
 
 function generateFood() {
@@ -146,4 +131,28 @@ function changeDirection(direction){
 setInterval(() => {
     if (gameState === 1)document.getElementById("length").innerHTML = `Length: ${snakeLength}`;
     if (gameState === 2) document.getElementById("length").innerHTML = `Length: ${snakeLength}, press r to restart`;
-}, 150)
+}, 150)
+
+document.addEventListener("swiped-up",()=> {changeDirection(directions.up); leadingBall.direction = directions.up;})
+document.addEventListener("swiped-right",()=> {changeDirection(directions.right); leadingBall.direction = directions.right;})
+document.addEventListener("swiped-down",()=> {changeDirection(directions.down); leadingBall.direction = directions.down;})
+document.addEventListener("swiped-left",()=> {changeDirection(directions.left); leadingBall.direction = directions.left;})
+
+function reload(){
+    leadingBall = {
+        x:20,
+        y:39,
+        direction: directions.up,
+    }
+    historyOfLeadingBallPositions = [[leadingBall.x,leadingBall.y]];
+    snakeLength = 5;
+
+    for (let y = 0; y < 40 ; y ++) {
+        for (let x = 0; x < 40; x++){
+            grid[y][x].status = statuses.empty;
+        }
+    }
+    gameState = 0;
+    setTimeout(()=> grid[Math.floor(Math.random()*40)][Math.floor(Math.random()*40)].status = statuses.apple, 100)
+
+}
diff --git a/style.css b/style.css
@@ -1,7 +1,7 @@
 #game {
     display: inline-grid;
-    height: 600px;
-    width: 600px;
+    height: 800px;
+    width: 800px;
     background-color:  black;
     grid-template-columns: repeat(40,1fr);
     grid-template-rows: repeat(40,1fr);

diff --git a/swipedevents.js b/swipedevents.js
@@ -0,0 +1,157 @@
+/*!
+ * swiped-events.js - v@version@
+ * Pure JavaScript swipe events
+ * https://github.com/john-doherty/swiped-events
+ * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+(function (window, document) {
+
+    'use strict';
+
+    // patch CustomEvent to allow constructor creation (IE/Chrome)
+    if (typeof window.CustomEvent !== 'function') {
+
+        window.CustomEvent = function (event, params) {
+
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+
+        window.CustomEvent.prototype = window.Event.prototype;
+    }
+
+    document.addEventListener('touchstart', handleTouchStart, false);
+    document.addEventListener('touchmove', handleTouchMove, false);
+    document.addEventListener('touchend', handleTouchEnd, false);
+
+    var xDown = null;
+    var yDown = null;
+    var xDiff = null;
+    var yDiff = null;
+    var timeDown = null;
+    var startEl = null;
+
+    /**
+     * Fires swiped event if swipe detected on touchend
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchEnd(e) {
+
+        // if the user released on a different target, cancel!
+        if (startEl !== e.target) return;
+
+        var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20px
+        var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10);    // default 500ms
+        var timeDiff = Date.now() - timeDown;
+        var eventType = '';
+        var changedTouches = e.changedTouches || e.touches || [];
+
+        if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
+            if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+                if (xDiff > 0) {
+                    eventType = 'swiped-left';
+                }
+                else {
+                    eventType = 'swiped-right';
+                }
+            }
+        }
+        else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+            if (yDiff > 0) {
+                eventType = 'swiped-up';
+            }
+            else {
+                eventType = 'swiped-down';
+            }
+        }
+
+        if (eventType !== '') {
+
+            var eventData = {
+                dir: eventType.replace(/swiped-/, ''),
+                touchType: (changedTouches[0] || {}).touchType || 'direct',
+                xStart: parseInt(xDown, 10),
+                xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
+                yStart: parseInt(yDown, 10),
+                yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)
+            };
+
+            // fire `swiped` event event on the element that started the swipe
+            startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));
+
+            // fire `swiped-dir` event on the element that started the swipe
+            startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));
+        }
+
+        // reset values
+        xDown = null;
+        yDown = null;
+        timeDown = null;
+    }
+
+    /**
+     * Records current location on touchstart event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchStart(e) {
+
+        // if the element has data-swipe-ignore="true" we stop listening for swipe events
+        if (e.target.getAttribute('data-swipe-ignore') === 'true') return;
+
+        startEl = e.target;
+
+        timeDown = Date.now();
+        xDown = e.touches[0].clientX;
+        yDown = e.touches[0].clientY;
+        xDiff = 0;
+        yDiff = 0;
+    }
+
+    /**
+     * Records location diff in px on touchmove event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchMove(e) {
+
+        if (!xDown || !yDown) return;
+
+        var xUp = e.touches[0].clientX;
+        var yUp = e.touches[0].clientY;
+
+        xDiff = xDown - xUp;
+        yDiff = yDown - yUp;
+    }
+
+    /**
+     * Gets attribute off HTML element or nearest parent
+     * @param {object} el - HTML element to retrieve attribute from
+     * @param {string} attributeName - name of the attribute
+     * @param {any} defaultValue - default value to return if no match found
+     * @returns {any} attribute value or defaultValue
+     */
+    function getNearestAttribute(el, attributeName, defaultValue) {
+
+        // walk up the dom tree looking for attributeName
+        while (el && el !== document.documentElement) {
+
+            var attributeValue = el.getAttribute(attributeName);
+
+            if (attributeValue) {
+                return attributeValue;
+            }
+
+            el = el.parentNode;
+        }
+
+        return defaultValue;
+    }
+
+}(window, document));