Announcement

Collapse
No announcement yet.

Bejewled Type game

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Bejewled Type game

    So I am making a basic tile swapping game like bejewled but I have gotten stuck.

    HTML Code:
    <script>
    var output="";
    var throughput="";
    
    for (i = 0; i < 100; i++) {output += Math.floor((Math.random() * 5) + 1).toString();}
    
    throughput = "<table>";
    i = 0;
    for (var v of output) 
    {
    	if(i%10==0){throughput += "</tr><tr>";}
    	throughput += "<td>"+v+"</td>";;
    	i=i+1;
    }
    throughput += "</table>";
    
    document.write(throughput.split('1').join("<img src='crystal.png' />").split('2').join("<img src='greencrystal.png' />").split('3').join("<img src='bluecrystal.svg' />").split('4').join("<img src='orangecrystal.png' />").split('5').join("<img src='redcrystal.png' />"));
    
    for(i = 0;i < document.getElementsByTagName("img").length; i++){
    	document.getElementsByTagName("img")[i].id=i;
    }
    
    
    for(i = 0;i < document.getElementsByTagName("img").length; i++){
     document.getElementsByTagName("img")[i].addEventListener('click', function(){  myFunction(this.src,this.id);}, false);
    }
    
    function myFunction(a, b) {
    	if(checkCookie()===""){setCookie("id", b, 30);}
    	else if(checkCookie()==b+10||checkCookie()==b-10||checkCookie()==b-1||checkCookie()==b+1)
    	{
    		images=document.getElementsByTagName("img");
    		temp=document.getElementsByTagName("img")[checkCookie()].src;
    		images[checkCookie()].src=a;
    		images[b].src=temp;
    		checklink(checkCookie());
    		checklink(b);
    		setCookie("id", "", 30);		
    	}
    	else{setCookie("id", b, 30);}
    }
    
    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname+"="+cvalue+"; "+expires;
    }
    
    function checklink(temp){
    	var array = ["crystal.png","greencrystal.png","bluecrystal.svg","orangecrystal.png","redcrystal.png"];
    	images=document.getElementsByTagName("img");
    	rootimage=images[temp].src;
        if(images[temp-10].src==rootimage && images[temp-20].src==rootimage)
    	{
    		for(i=temp; i>0; i=i-10)
    		{
    			if(i>30){
    				images[i].src=images[i-30].src;
    			}
    			else{
    				images[i].src= shuffle(array)[0];
    			}
    		}	
    	}	
    }
    
    
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    
    function checkCookie() {
        var id=getCookie("id");
        if (id != "") {
            return(id);
        } 
    }
    
    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;
    }
    
    
    </script>
    <style>
    	body{margin:0px;}
    	td, table{border:1px solid black;border-collapse:collapse;}
    	img{width:50px;height:50px;cursor:pointer;}
    	img:hover{ transform: rotate(90deg);
    	-ms-transform: rotate(90deg); /* IE 9 */
    	-moz-transform: rotate(90deg); /* Firefox */
    	-webkit-transform: rotate(90deg); /* Safari and Chrome */
    	-o-transform: rotate(90deg);}
    </style>
    
    <body></body>
    So basically it will get rid of the images in a column of three above. But it isn't working for down and I can't figure why.

    HTML Code:
     if(images[temp-10].src==rootimage && images[temp-20].src==rootimage)
    	{
    		for(i=temp; i>0; i=i-10)
    		{
    			if(i>30){
    				images[i].src=images[i-30].src;
    			}
    			else{
    				images[i].src= shuffle(array)[0];
    			}
    		}	
    	}
    sorts the image up but when I change from - top + and add 20 to the temp in the for loop it isn't working...
Working...
X