Awesome Game Controller

Awesome Game Controller using Javascript




This is a useful and fun game controller created by my good friend Morpheus. You can easily add it to your games for visually appealing and useful controls. Simply move your finger inside the circle to see your player move accordingly across the page.

*Featured Code Created by Morpheus


HTML with Javascript



<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="author" content="Morpheus">
    <meta name="copyright" content="Morpheus">
    <meta name="keywords" content="Morpheus,app">
    <meta name="description" content="paint app">
    <title>JOYSTICK</title>
</head>

<body>
    <div id="box" style="width: 20px; height: 20px; background: #000;"></div>

    <script>
        window.onload = () => {
            controller(document.querySelector('#box'))
            //console.log("started");
        };

        function controller(element) {
            let canvas = document.createElement('CANVAS');
            document.body.appendChild(canvas);
            canvas.style.background = "radial-gradient(deepskyblue, black)";
            canvas.style.borderRadius = "50%";
            canvas.style.opacity = "0.6";
            canvas.style.zIndex = "10";
            canvas.style.position = "absolute";
            canvas.style.bottom = "0";
            canvas.style.right = "0";
            let cx = canvas.getContext('2d');
            const W = innerWidth;
            const H = innerHeight;
            const CW = 150;
            const CH = 150;
            const EW = parseInt(element.style.width);
            const EH = parseInt(element.style.height);
            const SPEED = 5;
            canvas.width = CW;
            canvas.height = CH;

            //set CSS for the moving element and canvas
            (function setObject() {
                element.style.position = 'absolute';
                element.style.left = `${Math.ceil(W / 2)}px`;
                element.style.top = `${Math.ceil(H / 2)}px`;
                element.style.zIndex = "5";
                //console.log("CSS set");
            })();

            const controller = {
                x: 0,
                y: 0
            };
            canvas.addEventListener("touchstart", handleStart, false);
            canvas.addEventListener("touchend", handleEnd, false);
            canvas.addEventListener("touchcancel", handleCancel, false);
            canvas.addEventListener("touchmove", handleMove, false);
            canvas.addEventListener("mousedown", mouseStart, false);
            canvas.addEventListener("mouseup", mouseEnd, false);
            canvas.addEventListener("mouseover", mouseMove, false);
            let ongoingTouches = [];
            let interval;
            let mouseMode = false;

            function handleStart(evt) {
                evt.preventDefault();
                let touches = evt.changedTouches;
                for (var i = 0; i < touches.length; i++) {
                    controller.x = (touches[i].pageX - W + CW / 2) / (CW / 2);
                    controller.y = (touches[i].pageY - H + CH / 2) / (CH / 2);
                }
                //console.log(`x:${controller.x} Y:${controller.y}`);
                interval = setInterval(positionElement, 20);
            }

            function handleEnd(evt) {
                evt.preventDefault();
                clearInterval(interval);
                controller.x = 0;
                controller.y = 0;
            }

            function handleCancel(evt) {
                evt.preventDefault();
                var touches = evt.changedTouches;
                clearInterval(interval);
                for (var i = 0; i < touches.length; i++) {
                    //var idx = ongoingTouchIndexById(touches[i].identifier);
                    //ongoingTouches.splice(idx, 1); // remove it; we're done
                }
            }

            function handleMove(evt) {
                evt.preventDefault();
                let touches = evt.changedTouches;
                for (var i = 0; i < touches.length; i++) {
                    controller.x = (touches[i].pageX - W + CW / 2) / (CW / 2);
                    controller.y = (touches[i].pageY - H + CH / 2) / (CH / 2);
                }
                //console.log(`x:${controller.x} Y:${controller.y}`);
                positionElement();
            }

            function mouseStart(evt){
              controller.x = (evt.pageX - W + CW / 2) / (CW / 2);
              controller.y = (evt.pageY - H + CH / 2) / (CH / 2);
              mouseMode =  true;
              interval = setInterval(positionElement, 20);
            }

            function mouseEnd(){
              controller.x = 0;
              controller.y = 0;
              mouseMode = false;
              clearInterval(interval);
            }

            function mouseMove(evt){
              if(mouseMode){
                // clearInterval(interval);
                controller.x = (evt.pageX - W + CW / 2) / (CW / 2);
                controller.y = (evt.pageY - H + CH / 2) / (CH / 2);
                positionElement();
              }
            }

            function positionElement() {
                let currentX = parseInt(element.style.left);
                let currentY = parseInt(element.style.top);
                //console.log(parseInt(element.style.left));
                //console.log(parseInt(currentY));
                // parseInt(element.style.left) + Math.ceil(SPEED * controller.x)
                if(currentX >= 0 && currentX <= (W - EW) && currentY >= 0 && currentY <= (H - EH)){
                    element.style.left = `${currentX + Math.ceil(SPEED * controller.x)}px`;
                    element.style.top = `${currentY + Math.ceil(SPEED * controller.y)}px`;
                }else if (currentX < 0) {
                    element.style.left = "0px";
                }else if (currentX > (W - EW)) {
                  element.style.left = `${W - EW}px`;
                }else if (currentY < 0) {
                  element.style.top = "0px";
                }else if (currentY > (H - EH)) {
                  element.style.top = `${H - EH}px`;
                }
            }
        }
        
        alert("To use this controller for ur game \n\n1. Add this to ur html body \n<script src=\"https://rawgit.com/NeetishRaj/game-controller/master/game-controller.js\"></script\>\n\n2.call the controller() function in ur <script> tag\n\n3. Pass the DOM object that u wanna control as argument to the controller function.\n\nThats it, comment on any issues & suggestions please!");
    </script>
    
</body>

</html>


Click here to run this Awesome Code



Share with Friends


Twitter Facebook Google LinkedIn Email Pinterest Reddit StumbleUpon Tumblr




Thank you and have a Blessed Day




Try these Fun Games by Bobbie:


Ocean Treasures Game


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News




Comments

Popular posts from this blog