Ad Code

Responsive Advertisement

Pone Game by using (HTML CSS jS)

  

Pone Game by using (HTML CSS jS)


Topics : PONE GAME
Game : YEs
languages : HTML, CSS, and jS
Browser  support : ALL(Chrome ,Firefox,Brave ... and soon)
 

Preview :



source code : 

Game play online:
HTML
<!DOCTYPE html>
<html>

<head>
  <title>Webdev_rachel</title>
  <link rel="stylesheet" href="ponegame.css">
  <script src="ponegame.js"></script>
</head>

<body>
  <div>

  </div>
  <center>
    <h3>Follow @Webdev_rachel</h3>
  </center>
  <div class="wrapper">
    <canvas width="300" height="200"></canvas>
  </div>
</body>

</html>
CSS
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

canvas {
    /*cursor: pointer;*/
    background: #F8F8F8;
    border-style: groove;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: auto;
}
JAVASCRIPT
window.onload = function () {
    var c;
    var canvas = document.querySelector("canvas");
    c = document.querySelector("canvas");
    c = c.getContext("2d");
    c.width = 300;
    c.height = 200;
    var ballX = c.width / 2; //x axis start postition
    var ballY = c.height / 2;//y axis start postition
    var ballRadius = 4;
    var dx = 1; //x velocity
    var dy = 1; //y velocity
    var paddle1X = 0, paddle1Y = 80, paddle1WIDTH = 3, paddle1HEIGHT = 35;
    var paddle2X = 297, paddle2Y = 80, paddle2WIDTH = 3, paddle2HEIGHT = 35;
    var score1 = 0;
    var score2 = 0;
    var AI = .9; // AI= 0 for multiplayer


    //mousemove eventListener controls
    window.addEventListener("mousemove", function (event) { paddle1Y = event.clientY - innerHeight / 2 - paddle1HEIGHT / 2 + c.height / 2; event.preventDefault(); });
    //touchmove eventListener controls
    canvas.addEventListener("touchmove", function (e) {
        var rect = canvas.getBoundingClientRect();
        var root = document.documentElement;
        var touch = e.changedTouches[0];
        var touchY = parseInt(touch.clientY) - rect.top - root.scrollTop;
        e.preventDefault();
        paddle1Y = touchY - paddle1HEIGHT / 2;
    });





    //keyboard controls
    function dealWithKeyboard(e) {
        if (e.keyCode == "81") { //q
            paddle1Y -= 2;
        }
        else if (e.keyCode == "65") { //a
            paddle1Y += 2;
        }
        if (e.keyCode == "38") { //arrow up
            paddle2Y -= 2;
        }
        else if (e.keyCode == "40") { //arrow down
            paddle2Y += 2;
        }
    }


    //game reset
    function reset() { //reset game == center ball
        ballX = c.width / 2; //center
        ballY = c.height / 2; //center
        dx = 1; //reset speed
        dy = 1; //reset speed
        //AI = 1; //reset AI
    }

    //CORE ANIMATE FUNCTION  
    function animate() {
        requestAnimationFrame(animate);

        c.clearRect(0, 0, c.width, c.height); // x, y, innerWidth, innerHeight //clears canvas
        c.beginPath(); //begin

        //canvas arc circle == ball
        c.arc(ballX, ballY, ballRadius, 0, Math.PI * 2, false); //c.arc(x,y,r,startAngle,endAngle, drawCounterClockwise)
        c.fill(); //fill inside
        c.stroke();//stroke edges


        //canvas paddle1 == player 1 paddle
        c.beginPath(); //begin
        c.fillRect(paddle1X, paddle1Y, paddle1WIDTH, paddle1HEIGHT); //x,y,width,height


        //canvas paddle2 == player 2 paddle
        c.beginPath(); //begin
        c.fillRect(paddle2X, paddle2Y, paddle2WIDTH, paddle2HEIGHT); //x,y,width,height


        //score text for player 1 and player 2
        c.fillText(score1, 100, 10); //score 1
        c.fillText(score2, c.width - 100, 10); //score 2 

        //game colors + random choice of color
        var gameColors = ['red', 'green', 'blue', 'black', 'brown', '#741a1a', '#121f1f'];
        var randomColor = gameColors[Math.floor(Math.random() * gameColors.length)]; //index random color


        //IF BALL TOUCHES RIGHT PADDLE THEN BOUNCE BACK
        function paddle2Bounce() {
            if (ballX + ballRadius > c.width) {

                if (ballY >= paddle2Y && ballY <= paddle2Y + paddle2HEIGHT) {
                    dx = -dx - 0.2; //bounce/reverse ball back + make it faster 0.2
                    //dy = dy-0.1;
                    //AI = AI-0.3; //make AI faster
                    c.fillStyle = randomColor;
                    //c.fillStyle = "#"+Math.random().toString(16).slice(-6); //get random color
                }
                else {
                    score1++;
                    reset();
                }
            }
        }
        // END OF RIGHT PADDLE BOUNCE


        //IF BALL TOUCHES LEFT PADDLE THEN BOUNCE BACK
        function paddle1Bounce() {
            if (ballX - ballRadius < 0) {

                if (ballY >= paddle1Y && ballY <= paddle1Y + paddle1HEIGHT) {
                    dx = -dx + 0.2; //bounce/reverse ball back + make it faster 0.2
                    //dy = dy+0.1;
                    c.fillStyle = randomColor;
                    //c.fillStyle = "#"+Math.random().toString(16).slice(-6); //get random color
                }
                else {
                    score2++;
                    reset();
                }
            }
        }
        //END OF LEFT PADDLE BOUNCE


        //BOUNCE BALL IF IT TOUCHES TOP OR BOTTOM OF THE SCREEN
        function topBottomBounce() {
            if (ballY + ballRadius > c.height || ballY - ballRadius < 0) {
                dy = -dy; //bounce/reverse ball
                //c.fillStyle = randomColor;
                //c.fillStyle = "#"+Math.random().toString(16).slice(-6); //get random color
            }
        }

        //IF PADDLE IS ABOVE OR BELOW CANVAS - GET IT BACK TO CANVAS
        function stayInCanvas() {
            if (paddle1Y + paddle1HEIGHT > c.height) {
                paddle1Y = c.height - paddle1HEIGHT;
            }
            if (paddle1Y < 0) {
                paddle1Y = 0;
            }
            if (paddle2Y + paddle2HEIGHT > c.height) {
                paddle2Y = 165;
            }
            if (paddle2Y < 0) {
                paddle2Y = 0;
            }
        }


        //AI player
        function AIPlayer() {
            if (paddle2Y + paddle2HEIGHT / 2 < ballY) {
                paddle2Y += AI;
            }
            else { paddle2Y -= AI; }
        }


        //move my ball in x and y axis
        function moveBallXandYaxis() {
            ballX += dx; //run ball in x axis
            ballY += dy; //run ball in y axis
        }

        /*
        >>>>>>>>>>CALLING FUNCTIONS<<<<<<<<<<
        */
        moveBallXandYaxis(); //moving ball in x and y axis
        paddle1Bounce(); //bounce/reverse ball from paddle1
        paddle2Bounce(); //bounce/reverse ball from paddle2
        topBottomBounce(); //top and bottom bouncing/reversing ball
        stayInCanvas(); //paddle1 Y axis can be only in canvas.height
        AIPlayer(); //init AI player

    } //end of animate(); function

    animate(); //init animate(); function

}; //end of onload function

Post a Comment

0 Comments

Close Menu