how to change arrow keys events to touch events in below html puzzle game

Question

I trying to develop a puzzle game in HTML. I'm able to move puzzle boxes using arrow keys in laptop but I'm unable to move boxes on mobile due to there is no arrow keys. I'm not aware of changing arrow keys to touchmove events in order to operate from mobile. I'm beginner in HTML.

Please help me to change this code to touch mobile.

Thanks in advance!

Below is my code:

PUZZLE
<style>
canvas {
    width:450px;
    height:450px;
    border: 5px solid black;
    margin:auto
}
</style>




<div id="top" style="width:1200px; margin:auto; margin-top:10px; text-align:center">
<header style="width:1190; height:100px;;border-left:10px solid black; ">
<h1 style="font-size:70px; margin:auto; text-align:center; color:black; text-shadow:2px 2px cyan;text-decoration:underline">CLASSIC-PUZZLE-GAME</h1>
</header>

<div style="margin-top:10px; height:1000px;">
<div>
<div style="width:50%; float:left; display:inline">
<div style="text-align:center; height:30px">
<h1 id="message"></h1>
</div>
<div style="text-align:center; height:30px">
<h1 id="moves"></h1>

  <audio id="cheers" controls="none" preload="auto" style="display:none">
  <source src="aud.mp3" type="audio/mp3">
  </source></audio>
  
  <audio id="cut" controls="none" preload="auto" style="display:none">
  <source src="cut.mp4" type="audio/mp4">
  </source></audio>
  
   <audio id="no" controls="none" preload="auto" style="display:none">
  <source src="no.mp4" type="audio/mp4">
  </source></audio>
  
</div>

<div>
<canvas id="canvas" height="450px" width="450px"></canvas>
</div>
</div>
<div style=" padding-top:2px; text-align:center; width:50% padding-top:10px">
<h1 style="font-size:40px; color:magenta; text-decoration:underline">ORIGINAL IMAGE</h1>
<div style="margin:auto">
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz1" width="150" height="150" />
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz2" width="150" height="150" />
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz3" width="150" height="150" />
</div>
<div>
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz4" width="150" height="150" />
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz5" width="150" height="150" />
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz6" width="150" height="150" />
</div>
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz7" width="150" height="150" />
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz8" width="150" height="150" />
<img src="https://1.bp.blogspot.com/-2ai8IpKEQPw/WbY2F58ZYeI/AAAAAAAAG1s/pewFrPODHoo_uRyksAdBLRiCaQJHahygACEwYBhgL/s200/vvv.jpg" id="puzz9" width="150" height="150" />
</div>
</div>
</div>

<script>
 var canvas=document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var empty=9;
var moves=-1;
function shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex;

      // While there remain elements to shuffle...
      while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

      return array;
    }
var ar=[1,2,3,4,5,6,7,8,0];
im=shuffle([1,2,3,4,5,6,7,8,0]);

for(var i=0;i<=8;i++){
    if(im[i]==0)
        empty=i+1;
}

var restart=0;
function won(){
    ctx.clearRect(300,300,150,150);
    var img=document.getElementById("puzz9");
    var pat=ctx.createPattern(img,"repeat");
    ctx.fillStyle=pat;
    ctx.fillRect(300,300,150,150);
    m=document.getElementById("message");
    m.innerHTML="You won the game in "+moves.toString() +" moves";
    au=document.getElementById("cheers");
    au.play();
    restart=1;
    moves=-1;
}

function draw(){
    moves++;
    mov=document.getElementById("moves");
    mov.innerHTML="MOVES: "+ moves.toString();
    m=document.getElementById("message");
    m.innerHTML="";
  var t;
  t=0;
  if(restart==1){
    
      im=shuffle([1,2,3,4,5,6,7,8,0]);
        for(var i=0;i<=8;i++){
            if(im[i]==0)
                empty=i+1;
            
                
        }
        
        console.log(empty);
        
     ctx.clearRect(0,0,450,450);
      restart=0;
  }
    for(var i=0;i<9;i++){
        if(im[i]!=ar[i])
            t=1;    
    }
    console.log(im);
    console.log(ar);
    
    for(var i=0;i<3;i++){
        for(var j=0;j<3;j++){
               component(i,j);          
        }
    }
    
    console.log(t);
    
    if(t==0){
        console.log("one more");
        won();
    }
    
}

function component(x, y) {
    
    var text="puzz";
    z=x+3*y;
    z=im[z];
    text=text+z.toString();
    if(z!=0)
    {
        var img=document.getElementById(text);
        var pat=ctx.createPattern(img,"repeat");
        ctx.fillStyle=pat;
    }
    
    else
    {
        ctx.fillStyle="white";
    }
    
    ctx.fillRect(150*x,150*y,150,150);    
}

function moveup() {
    ctx.clearRect(0,0,450,450);
    if(restart==1)
        {
        draw();
        return;
        }
    if(empty==9||empty==7||empty==8){
        au=document.getElementById("no");
        au.play();
        moves--;
        draw();
    } 
    else{
        au=document.getElementById("cut");
        au.play();
        text="puzz";
        var curr=empty;
        empty=empty+3;
        var next=empty;
        im[curr-1]=im[next-1];
        im[next-1]=0;
        draw();
        
    }
    console.log(empty);
}

function movedown() {
    ctx.clearRect(0,0,450,450);
    if(restart==1)
    {
    
    draw();
    return;
    }
    if(empty==1||empty==2||empty==3) {
        au=document.getElementById("no");
        au.play();
        moves--;
        draw();
    }
    else{
        au=document.getElementById("cut");
        au.play();
        text="puzz";
        var curr=empty;
        empty=empty-3;
        var next=empty;
        im[curr-1]=im[next-1];
        im[next-1]=0;
        draw();
        
    }
    
    console.log(empty);
    
}

function moveleft() {
    ctx.clearRect(0,0,450,450);
    
    if(restart==1)
    {
    
    draw();
    return;
    }
    
    if(empty==6||empty==9||empty==3) {
        au=document.getElementById("no");
        au.play();
        moves--;  
        draw();
        }
        else{
            au=document.getElementById("cut");
            au.play();
            text="puzz";
            var curr=empty;
            empty=empty+1;
            var next=empty;
            im[curr-1]=im[next-1];
            im[next-1]=0;
            draw();
            
      
        }
      console.log(empty);
}

function moveright() {
    ctx.clearRect(0,0,450,450);
    if(restart==1)
    {
    moves--;
    draw();
    return;
    }
      if(empty==1||empty==4||empty==7) {
          au=document.getElementById("no");
            au.play();
          moves--;
          draw();
        }
        else{
            au=document.getElementById("cut");
            au.play();
            text="puzz";
            var curr=empty;
            empty=empty-1;
            var next=empty;
            im[curr-1]=im[next-1];
            im[next-1]=0;
            draw();
        }console.log(empty);
    
      }
      
window.addEventListener('keydown', function (e) {
    key = e.keyCode;
    if(key==37){
        e.preventDefault();
        moveleft();
    }
    if(key==38){
        e.preventDefault();
        moveup();
    }
    if(key==39){
        e.preventDefault();
        moveright();
    }
    if(key==40){
        e.preventDefault();
        movedown();
    }
    if(key==83){
        e.preventDefault();
        start();
    }
    
});
function start() {
                draw();
            }
            ctx.font = "30px Arial";
            window.onload = function () {
                start()
            }
</script>
</div>
</!doctype>

You should listen for keydown or keyup events. More on that [here](https://stackoverflow.com/a/22469245/14259273) — mplusr, Sep 12 '20 at 06:24
I'm very new to html.where I need to edit the code to make it work on mobile. — Vamsi, Sep 12 '20 at 06:41

how to change arrow keys events to touch events in below html puzzle game

0 Answers0