/* CSS TouchPad by Joakim Nyland Inspiration from Chaim's AI code. I wanted to make my own touchpad, so I made one using CSS! I thought a simple 2D game would be good for testing it. Instructions: - Eat the blue box without being eaten by the red box. - Control the yellow box using the touchpad NOTE: CSS is not responsive: If touchPad is out of view, just modify topConstant and widthConstant. Game works bad with battery-saver activated (both squares might get same speed). */ window.addEventListener('load', function(){ alert("Collect the blue box and watch out for the red box!"); var myTouchPad = document.getElementById( "touchPad"); var myPadDot = document.getElementById( "padDot"); var myPlayer=document.getElementById( "player"); var myScoreText = document.getElementById("scoreText"); var currentX; var currentY; var x2; var y2; var currentPos=0; var newPos=0; var firstMove=1; var playerPos=0; var alpha; var radiusLimit; var topConstant = window.innerHeight/3.5; var widthConstant = window.innerWidth/4; var xCenter = window.innerWidth/2 + widthConstant; var yCenter = (window.innerHeight/2) + topConstant; var x = Math.floor(Math.random() * (window.innerWidth-30)); var myScore = 0; var y = Math.floor(Math.random() * 390); var c; var canvas; var size = 10; var squareSize = 20; var up = 10; var dn = 10; var enemyUp = 400; var enemyDn = 250; setInterval( function() { main(currentX,currentY); }, size ); setInterval(enemyMove,size*2); myTouchPad.style.top=(myTouchPad.offsetTop + topConstant); myTouchPad.style.left=(myTouchPad.offsetLeft + widthConstant); myTouchPad.addEventListener('touchstart', function(e){ var touchobj = e.changedTouches[0]; myPadDot.style.left = touchobj.pageX myPadDot.style.top = touchobj.pageY; myPadDot.style.display = "inline"; radiusLimit=( (myTouchPad.offsetWidth/2)-(myPadDot.offsetWidth/2) ); }); myTouchPad.addEventListener('touchmove', function(e){ var touchobj = e.changedTouches[0]; myPadDot.style.display = "inline"; currentX = parseInt(touchobj.pageX, 10) - xCenter; currentY = parseInt(touchobj.pageY, 10) - yCenter; x2 = Math.pow( currentX,2) y2 = Math.pow( currentY ,2) currentPos = Math.sqrt(x2 + y2); if (currentPos < radiusLimit){ myPadDot.style.left = touchobj.pageX; myPadDot.style.top = touchobj.pageY; } else{ alpha = Math.atan( currentY / currentX ); if (currentX<0){ alpha=alpha+Math.PI; } myPadDot.style.left = radiusLimit*Math.cos(alpha)+xCenter; myPadDot.style.top = radiusLimit*Math.sin(alpha)+ yCenter; } }); myTouchPad.addEventListener('touchend', function(e){ myPadDot.style.display = "none"; }); function main(moveX,moveY){ canvas = document.getElementById('canvas'); c = canvas.getContext('2d'); c.fillStyle = "#00b300"; c.fillRect(0, 0, canvas.width, canvas.height); c.fillStyle = "blue"; c.fillRect(x, y, size, size); c.fillStyle = "yellow"; c.fillRect(dn,up,squareSize,squareSize); c.fillStyle = "red"; c.fillRect(enemyDn,enemyUp,squareSize,squareSize); if(myPadDot.style.display == "inline"){ if (moveX>10 && dn<(canvas.width-squareSize)){ dn++; } else if (moveX<-10 && dn>0){ dn--; } if (moveY>10 && up<(canvas.height -squareSize)){ up++; } else if(moveY<-10 && up>0){ up--; } } if ( (x-size)<(dn+squareSize/2) && (x)>(dn-squareSize/2)){ if((y-size)<(up+squareSize/2) && (y)>(up-squareSize/2)){ x = Math.floor(Math.random() * (window.innerWidth-30)); y = Math.floor(Math.random() * 390); myScore++; myScoreText.innerHTML = "Score: " + myScore; } } if ( (enemyDn-squareSize/2)<(dn+squareSize/2) && (enemyDn+squareSize/2)>(dn-squareSize/2)){ if( (enemyUp-squareSize/2)<(up+squareSize/2) && (enemyUp+squareSize/2)>(up-squareSize/2) ){ alert("Game over! Your score: " + myScore); myScore = 0; myScoreText.innerHTML = "Score: " + myScore; up = 10; dn = 10; enemyUp = 300; enemyDn = 150; myPadDot.style.display = "none"; } } } function enemyMove(){ if (enemyDn < dn){ enemyDn++; } else if(enemyDn>dn){ enemyDn--; } if (enemyUp < up){ enemyUp++; } else if(enemyUp>up){ enemyUp--; } } });

2D Game (CSS TouchPad)