ساخت بازی با کانواس و جاوا اسکریپت

saalek110 · Feb 21, 2024

JavaScript:

window.onload = function() {

    // Definitions
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");



    var g = 0.098; //gravity

    //Ball 1
    var ball1 = new Ball(20, 'purple');
    ball1.x = 50;
    ball1.y = 50;
    ball1.context = context;
    ball1.draw();

    //Ball 2
    var ball2 = new Ball(20, 'green');
    ball2.x = 50;
    ball2.y = 450;
    ball2.context = context;
    ball2.draw();


    window.requestAnimationFrame(animationLoop);


    //Velocity
    ball1.vx = 5;
    ball1.vy = 0;


    ball2.vx = 4;
    ball2.vy = -9;




    function animationLoop() {

        // Clear Canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Update

        //Ball 1
        ball1.vy = ball1.vy + g;
        ball1.x = ball1.x + ball1.vx;
        ball1.y = ball1.y + ball1.vy;

        //Ball 2
        ball2.vy = ball2.vy + g;
        ball2.x = ball2.x + ball2.vx;
        ball2.y = ball2.y + ball2.vy;



        // Draw
        ball1.draw()
        ball2.draw()


        // Animate
        window.requestAnimationFrame(animationLoop);
    }


    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
};

یک توپ سبز داریم که صعود و سقوط دارد.
و یک توپ دیگر داریم که انگار دارد اولش به سمت راست می آید ولی دچار سقوط می شود.

saalek110 · Feb 21, 2024

یک توپ‌آبی بزرگ و انگار سنگین داریم و یک توم کوچکتر و انگار سبک ،برخورد این دو توپ را نشان می دهد.

فایل ball.js:

JavaScript:

function Ball(radius, color) {
    // Base
    var ball = this;

    // Specifications
    ball.r = radius || 10; // ball radius
    ball.c = color || 'red'; // ball color
    ball.x = 0; // center x
    ball.y = 0; // center y
    ball.m = 0; // mass
    ball.vx = 0; // velocity of x direction of ball
    ball.vy = 0; // velocity of y direction of ball
    ball.context = null // the drawing context of ball
}

Ball.prototype.draw = function() {
    // Base
    var ball = this;

    // Check Context
    if (!ball.context) { return }

    // Draw Ball
    ball.context.beginPath();
    ball.context.fillStyle = ball.c;
    ball.context.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
    ball.context.fill();
};

JavaScript:

window.onload = function() {

    // Definitions
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");



    var g = 0.098; //gravity

    // Large Ball
    var ball1 = new Ball(50, 'blue');
    ball1.x = 290;
    ball1.y = 250;
    ball1.m = 100;
    ball1.context = context;
    ball1.draw();


    // Small Ball
    var ball2 = new Ball(30, 'green');
    ball2.x = 550;
    ball2.y = 250;
    ball2.m = 6;
    ball2.context = context;
    ball2.draw();



    window.requestAnimationFrame(animationLoop);


    //Velocity
    ball1.vx = 5;
    ball2.vx = -10;




    function animationLoop() {

        // Clear Canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Update

        ball1.x = ball1.x + ball1.vx;
        ball2.x = ball2.x + ball2.vx;

        //Detech Ball Collisions
        if (Math.abs(ball1.x - ball2.x) < ball1.r + ball2.r) {
            //Formül:https://tr.wikipedia.org/wiki/Momentum

            //New Velocity of Ball 1 After Collision
            var v1 = ((ball1.m - ball2.m) * ball1.vx) / (ball1.m + ball2.m) + (2 * ball2.m * ball2.vx) / (ball1.m + ball2.m);

            //New Velocity of Ball 2 After Collision
            var v2 = ((ball2.m - ball1.m) * ball2.vx) / (ball2.m + ball1.m) + (2 * ball1.m * ball1.vx) / (ball1.m + ball2.m);

            ball1.vx = v1;
            ball2.vx = v2;
        }
        //Detech Edge Collisions
        if (ball1.x + ball1.r > canvas.width || ball1.x - ball1.r < 0) {
            ball1.vx *= -1;
        }
        if (ball2.x + ball2.r > canvas.width || ball2.x - ball2.r < 0) {
            ball2.vx *= -1;
        }

        // Draw
        ball1.draw()
        ball2.draw()


        // Animate
        window.requestAnimationFrame(animationLoop);

    }


    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
};

saalek110 · Feb 21, 2024

یک سری توپ قرمز به دیوارها می خورند و برمیگردند و به هم هم برخورد دارند:

JavaScript:

window.onload = function() {

    // Definitions
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");



    var numberOfBalls = 10;
    var balls = [];
    initBalls();
    window.requestAnimationFrame(animationLoop);





    function initBalls() {
        for (var i = 0; i < numberOfBalls; i++) {
            var radius = getRandomIntInt(10, 25);
            var ball = new Ball(radius);
            ball.x = this.getRandomIntInt(radius, canvas.width - radius);
            ball.y = this.getRandomIntInt(radius, canvas.height - radius);
            ball.m = radius;
            ball.context = context;
            ball.vx = this.getRandomIntInt(0, 20) - 10;
            ball.vy = this.getRandomIntInt(0, 20) - 10;
            balls.push(ball);
        }
    }

    function animationLoop() {

        // Clear Canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Update
        moveBalls()
        checkBallCollision()

        // Draw
        drawBalls();

        // Animate
        window.requestAnimationFrame(animationLoop);

    }

    function move(ball) {
        ball.x = ball.x + ball.vx;
        ball.y = ball.y + ball.vy;
        checkEdge(ball);
    }

    function moveBalls() {
        for (var i = 0; i < numberOfBalls; i++) {
            move(balls[i]);
        }
    }

    function drawBalls() {
        for (var i = 0; i < numberOfBalls; i++) {
            balls[i].draw();
        }
    }

    function checkEdge(ball) {
        //Detech Edge Collisions
        if (ball.x + ball.r > canvas.width || ball.x - ball.r < 0) {
            ball.vx *= -1;
        }
        if (ball.y + ball.r > canvas.height || ball.y - ball.r < 0) {
            ball.vy *= -1;
        }
    }

    function isCollided(ball1, ball2) {
        return (Math.abs(ball1.x - ball2.x) < ball1.r + ball2.r) && (Math.abs(ball1.y - ball2.y) < ball1.r + ball2.r)
    }

    function checkBallCollision() {
        for (var i = 0; i < numberOfBalls; i++) {
            var ball1 = balls[i];
            for (var j = i + 1; j < numberOfBalls; j++) {
                var ball2 = balls[j];
                if (isCollided(ball1, ball2)) {
                    console.log(isCollided(ball1, ball2))

                    //Formül:https://tr.wikipedia.org/wiki/Momentum

                    //New Horizontal Velocity of Ball 1 After Collision
                    var vx1 = ((ball1.m - ball2.m) * ball1.vx) / (ball1.m + ball2.m) + (2 * ball2.m * ball2.vx) / (ball1.m + ball2.m);

                    //New Velocity of Ball 2 After Collision
                    var vx2 = ((ball2.m - ball1.m) * ball2.vx) / (ball2.m + ball1.m) + (2 * ball1.m * ball1.vx) / (ball1.m + ball2.m);

                    ball1.vx = vx1;
                    ball2.vx = vx2;



                    //New Vertical Velocity of Ball 1 After Collision
                    var vy1 = ((ball1.m - ball2.m) * ball1.vy) / (ball1.m + ball2.m) + (2 * ball2.m * ball2.vy) / (ball1.m + ball2.m);

                    //New Velocity of Ball 2 After Collision
                    var vy2 = ((ball2.m - ball1.m) * ball2.vy) / (ball2.m + ball1.m) + (2 * ball1.m * ball1.vy) / (ball1.m + ball2.m);

                    ball1.vy = vy1;
                    ball2.vy = vy2;

                }
            }
        }
    }

    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
};


function getRandomIntInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}

قسمت فیزیک تمام شد.

saalek110 · Feb 21, 2024

JavaScript:

window.onload = function() {

    // Definitions
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");

    let KEY_CODE = {
        LEFT: 37,
        UP: 38,
        RİGHT: 39,
        DOWN: 40,
    }

    window.addEventListener('keydown', (event) => {

        switch (event.keyCode) {
            case KEY_CODE.LEFT:
                console.log("LEFT ARROW PRESSED")
                break;
            case KEY_CODE.UP:
                console.log("UP ARROW PRESSED")
                break;
            case KEY_CODE.RİGHT:
                console.log("RİGHT ARROW PRESSED")
                break;
            case KEY_CODE.DOWN:
                console.log("DOWN ARROW PRESSED")
                break;
        }
    })
};

صفحه کلید

saalek110 · Feb 21, 2024

JavaScript:

window.onload = function() {

    // Definitions
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");


    // Mouse Events
    //  - mousedown / mouseup
    //  - mouseover / mouseout
    //  - mousemove
    //  - click
    //  - dblclick


    canvas.addEventListener('mousedown', function(event) {
        console.log('mousedown');
        console.log(event);
    });

    canvas.addEventListener('mouseup', function(event) {
        console.log('mouseup');
        console.log(event);
    });

    canvas.addEventListener('mouseover', function(event) {
        console.log('mouseover');
        console.log(event);
    });

    canvas.addEventListener('mouseout', function(event) {
        console.log('mouseout');
        console.log(event);
    });

    canvas.addEventListener('mousemove', function(event) {
        console.log('mousemove');
        console.log(event);
    });


    canvas.addEventListener('click', function(event) {
        console.log('click');
        console.log(event);
    });

    canvas.addEventListener('dblclick', function(event) {
        console.log('dblclick');
        console.log(event);
    });


};

ماوس.

saalek110 · Feb 21, 2024

JavaScript:

function Ball(radius, color) {
    // Base
    var ball = this;

    // Specifications
    ball.r = radius || 10; // ball radius
    ball.c = color || 'red'; // ball color
    ball.x = 0; // center x
    ball.y = 0; // center y
    ball.m = 0; // mass
    ball.vx = 0; // velocity of x direction of ball
    ball.vy = 0; // velocity of y direction of ball
    ball.context = null // the drawing context of ball
}

Ball.prototype.draw = function() {
    // Base
    var ball = this;

    // Check Context
    if (!ball.context) { return }

    // Draw Ball
    ball.context.beginPath();
    ball.context.fillStyle = ball.c;
    ball.context.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
    ball.context.fill();
};

JavaScript:

window.onload = function() {

    // Definitions
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");

    var boundings = canvas.getBoundingClientRect();
    var g = 0.098;
    var mouseX = 0,
        mouseY = 0;

    //BALL
    var ball = new Ball(25, 'purple');
    ball.x = 400;
    ball.y = 80;
    ball.context = context;

    //Listener
    canvas.addEventListener('mousemove', (event) => {

        mouseX = event.clientX - boundings.left;
        mouseY = event.clientY - boundings.top;
    })



    window.requestAnimationFrame(animationLoop);



    function animationLoop() {

        // Clear Canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Update
        // Y
        ball.vy = ball.vy + g; //ivme
        ball.y = ball.y + ball.vy;

        // Mouse Collision
        if (Math.sqrt(Math.pow((ball.x - mouseX), 2) + 2 + Math.pow((ball.y - mouseY), 2)) < ball.r) {
            console.log("boundings")
            ball.vy *= -1;
        }

        // Draw
        ball.draw()

        // Animate
        window.requestAnimationFrame(animationLoop);
    }


    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
};

saalek110 · Feb 21, 2024

JavaScript:

function Ball(radius, color) {
    // Base
    var ball = this;

    // Specifications
    ball.r = radius || 10; // ball radius
    ball.c = color || 'red'; // ball color
    ball.x = 0; // center x
    ball.y = 0; // center y
    ball.m = 0; // mass
    ball.vx = 0; // velocity of x direction of ball
    ball.vy = 0; // velocity of y direction of ball
    ball.context = null // the drawing context of ball
}

Ball.prototype.draw = function() {
    // Base
    var ball = this;

    // Check Context
    if (!ball.context) { return }

    // Draw Ball
    ball.context.beginPath();
    ball.context.fillStyle = ball.c;
    ball.context.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
    ball.context.fill();
};

JavaScript:

window.onload = function() {

    // Definitions
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");

    var boundings = canvas.getBoundingClientRect();
    this.console.log(boundings)

    //Specs
    var balls = 5;
    var ballsArr = [];
    var currentBall = null;

    //Create Balls
    for (let index = 0; index < balls; index++) {
        var radius = getRandomInt(25, 50);
        var randColor = this.createRandomRGBColor();
        var ballColor = 'rgb(' + randColor.r + ', ' + randColor.g + ', ' + randColor.b + ')';
        var ball = new Ball(radius, ballColor);
        ball.context = context;
        ball.x = getRandomInt(radius, canvas.width - radius);
        ball.y = getRandomInt(radius, canvas.height - radius);
        ballsArr.push(ball);
    }

    drawBalls();



    function drawBalls() {
        //Clear Canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        //Draws Balls
        for (let index = 0; index < balls; index++) {
            ballsArr[index].draw();
        }
    }

    function isMitOnBall(mx, my) {
        for (let index = balls - 1; index >= 0; index--) {
            if (Math.sqrt(Math.pow((mx - ballsArr[index].x), 2) + Math.pow((my - ballsArr[index].y), 2)) < ballsArr[index].r) {
                currentBall = ballsArr[index];
                break;
            }
        }
    }

    //Mouse Event Handlers
    canvas.addEventListener('mousedown', (event) => {
        var mouseDownX = event.clientX - boundings.left;
        var mouseDownY = event.clientY - boundings.top;

        isMitOnBall(mouseDownX, mouseDownY)

    })

    canvas.addEventListener('mousemove', (event) => {
        var mouseMoveX = event.clientX - boundings.left;
        var mouseMoveY = event.clientY - boundings.top;

        if (currentBall) {
            currentBall.x = mouseMoveX;
            currentBall.y = mouseMoveY;
            drawBalls();
        }
    })
    canvas.addEventListener('mouseup', (event) => {
        var mouseUpX = event.clientX - boundings.left;
        var mouseUpY = event.clientY - boundings.top;
        currentBall = null;
    })


    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
};


function createRandomRGBColor() {
    var red = getRandomInt(0, 257);
    var green = getRandomInt(0, 257);
    var blue = getRandomInt(0, 257);
    return { r: red, g: green, b: blue };
};

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

saalek110 · Feb 21, 2024

صفحه وب فوق این آموزش ها را داشت ،
و یک بازی داره. بازی اش مثل بازی سایت w3school عبور از وسط دیوار است.
و یک برنامه paint.

لیست keycode ها در سایت زیر هست:

JS-X.com

Javascript - Web Experts.

blogs.longwin.com.tw

یعنی کد دکمه های کیبورد در کامپیوتر.

saalek110 · Feb 21, 2024

Github

من چون دیدم کپی کردن از داخل پستهای اینجا برای شما سخته و احتمال اشتباه است...عضو github شدم تا پروژه کامل بزارم.

لینک زیر پروژه هواپیماست، ۵ فایل داره.

اسمم اونجا Saalek110 است.

هنوز به سایتgithub اشنا نیستم. عکس را ضمیمه همین پست کردم.

GitHub - Saalek110/plane

Contribute to Saalek110/plane development by creating an account on GitHub.

github.com

آدرس هوم من اینجاست:

Saalek110 - Overview

Saalek110 has 2 repositories available. Follow their code on GitHub.

github.com

یعنی هر فرد فکر کنم یک هوم داره و پروژه هایش هر یک ، یک صفحه داره.

یک عکس هم در پروژه github هست. عکس هم باید کنار بقیه فایلها باشد. لینک داخل فایل index.php برای عکس ببدون پوشه تنظیم شده.

من الان خودم رفتم لینک بالایی ، لینک پروژه ، و پروژه را دانلود کردم، بعد پوشه پروژه را بردم داخل پوشه ای که برای نرم افزار awebserver تنظیم شده، قرار دادم ، اجرا شد. چون پسوند فایلها php است ، نیاز به محیط سرور دارد. در پستهای بعدی لینک تاپیک آموزش کار با نرم افزار awebserver را گفته ام. عکس پروژه کنار بقیه فایلها بود... گذاشتم عکس هواپیما کنار بقیه فایلها بماند.

عکس بازی:

در github اگر هم نخواهید کل پروژه را دانلود کنید ، با زدن یک دکمه میشه یک فایل را کپی گرفت. یا با زدن یک دکمه اون فایل خاص را دانلود کرد.

اینکه چرا من خودم بسته نمی سازم برای دانلود شما ، چون ممکن است گوشی من ویروسی باشد. ولی در github احتمالا خطر ویروس کمتر است.

saalek110 · Feb 21, 2024

http://saalek121.fast-page.org/test/a/git_plane/index.php

نام پوشه درلینک فوق git_plane است ، یعنی در github با نام plane آپلود شده.

در لینک بالا هم آپلود شد.
در همین پست هم کد ۵ فایل را می زارم. و باید یک پوشه با نام images کنار این ۵ فایل باشه و عکس هواپیمای پست قبل را درونش بزارید.

index.php

JavaScript:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>
<?php
include"my_css.php";
?>
</style>
</head>
<body onload="startGame()">
<img id="img2" src="images/war_plane.png" alt="plane" width="30" height="9">
 <script type='text/javascript'>
var hero;
var myObstacles = [];
var myScore;
let heart=1000;

function startGame() {
    hero = new hero(100, 33, "red", 10,120);
       //hero.elevation = ;
       //boing.gravity = 0.05;
 //  myScore = new component("20px", "Consolas", "black", 280, 40, "text");
   document.getElementById("gamearea").innerHTML+="Ready" ;
myGameArea.start();
}
var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
document.getElementById("gamearea").innerHTML+=" start" ;
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}
</script>
<?php
include"component.php";
include"hero.php";
include"updateGameArea.php";
?>
<script>
function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}
function accelerate(n) {
    hero.gravity = n;
 if(n==0)
 {
    hero.gravity = 0;
   hero.gravitySpeed = 0;

 }//n==0
}
</script>
<br><br><br>
<center>
<p id="the_heart"></p>

<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(-0.04)">up</button>
<button type="button" style=" font-size:12px; height:55px; width:120px" onclick="accelerate(0)">stop</button>
<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(0.04)">down</button>
</center>
<p>Use the up and down button to stay in the air</p>
<p>How long can you stay alive?</p>
<p id="gamearea"></p>
</body>
</html>

updateGameArea.php

JavaScript:

<?php
?>
<script>

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
 
        if (hero.crashWith(myObstacles[i])) {
heart--;
if (heart<0)
            return;
        }
 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 130;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 180
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap)+50;
     
        myObstacles.push(new component(40, height, "#887922", x, 0));
        myObstacles.push(new component(130, x - height - gap, "#888000", x, height + gap));
 
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }

 
        ctx = myGameArea.context;
        text="SCORE: " + myGameArea.frameNo;
           ctx.font = "20px" + " "+"Consolas" ;
            ctx.fillStyle = "black";
           ctx.fillText(text, 240, 30);

document.getElementById("the_heart").innerHTML="heart= " + JSON.stringify(heart);
    hero.newPos();
    hero.update();
}

</script>
<?php
?>

component.php

JavaScript:

<?php
?>
<script>
function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.update = function() {
     ctx = myGameArea.context;
     ctx.fillStyle = color;
     ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}
</script>
<?php
?>

hero.php

JavaScript:

<?php
?>
<script>

function hero(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.ahead = 0;
    this.update = function() {
        ctx = myGameArea.context;

              var img = document.getElementById("plane");
                ctx.drawImage(   document.getElementById("img2") ,this.x,this.y,this.width,this.height);
 
 
    }
    this.newPos = function() {
       // this.gravitySpeed += this.gravity;
       // this.x += this.speedX;
      //  this.y += this.speedY + this.gravitySpeed;
          this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
        this.hittop();
    }
    this.hitBottom = function() {
          var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
 this.hittop = function() {
       
        if (this.y < 0) {
            this.y = 0;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

</script>
<?php
?>

my_css.php

JavaScript:

<?php
?>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
  #the_heart {
    border:3px solid #fff733;
    border-radius:25px;
font-size:20px;
    margin-right:150px;
    margin-left:150px;
    padding-top:3px;
    padding-bottom:3px;

    padding-left:30px;

    background-color:rgba(250,130,30,1);
       }
 
   <?php
   ?>

saalek110 · Feb 22, 2024

AWebServer Http Apache PHP Sql - Apps on Google Play

Http Web Server for Android based on Apache and with Php , MariaDb sql enabled.

play.google.com

فایلهای php روی گوشی اجرا نمیشه ، من با نرم افزار بالا دیروز کار کردم تا فایلهای php اجرا بشن.

تاپیک آموزش نرم افزار awebserver:

آموزش کار با نرم افزار Awebserver ، اجرای فایلهای php روی گوشی

https://play.google.com/store/apps/details?id=com.sylkat.apache فایلهای php روی گوشی اجرا نمیشه ، نرم افزار بالا , کاری می کنه تا فایلهای php اجرا بشن.

forum.majidonline.com

ولی فایلهای php اگر روی هاست آپلود آپلود شود مشکلی ندارد و راحت اجرا میشه.

saalek110 · Feb 22, 2024

چون کار با فایلهای php ممکن است برای افرادی سخت باشد ، پروژه را به شکل فایلهای html و js هم در github آپلود کردم:

GitHub - Saalek110/plane_js

Contribute to Saalek110/plane_js development by creating an account on GitHub.

github.com

عکس پروژه ، یعنی عکس همون هواپیما هم جزو پروژه دانلود میشه و نیازی نیست در پوشه images بزارید ، بزارید بشه کنار بقیه فایل ها. مسیرش را تنظیم کردم.

saalek110 · Feb 22, 2024

من می خواستم ساخت یک بازی را شروع کنم ، گفتم اسکلت اولش را جایی برای دانلود بزارم که بازیهای دیگر هم از اینجا شروع بشه.

پروژه فوق را در هاستم هم آپلود کردم:

http://saalek121.fast-page.org/test/a/git_plane_js/index.html?i=1

اسم پوشه git_plane_js است ، یعنی همین پروژه در github با نام plane_js آپلود شده.

saalek110 · Feb 22, 2024

هر کسی برای خودش قالبی دارد:

حالا ، هم حالت فایل js و هم حالت فایل php روی github برای دانلود هست.
البته همان طور که در بررسی قالب در اون تاپیک گفتم ، شما یک تابع را یک جوری اجرا می کنید ، مثلا با رویداد onload از body یا با یک دکمه... بعد اون تابع یک تابع دیگری را به شکل دوره های زمانی به اجرا درمیاره ... بعدا دیدیم بعضی افزراد با یک خط کد ، تابع دوم را به شکل دوره ای به اجرا درمیارن. این کد منظورمه:

JavaScript:

//--------------------
//BUCLE PRINCIPAL
//--------------------
var FPS = 50;
setInterval(function(){
    principal();
}, 1000/FPS);

صفحه قبلی هم که آموزش های اون شخص را من زدم ، از window استفاده می کرد برای اجرای برنامه هایش‌ این طوری می نوشت:

کد:

window.onload = () => {
......
....
...

}

همه کدها را بین کروشه های window.onload قرار می داد.مثلا این طوری:

JavaScript:

window.onload = () => {
    let canvas = document.querySelector('canvas')
    let context = canvas.getContext('2d')


    //Red RectAngle
    context.fillStyle = "red"
    context.fillRect(250, 250, 400, 160);
 
}

من الان کدهای اون شخص را در صفحه قبلی تاپیک و اول صفحه فعلی ، نگاه کردم ، همه کدها از یک قالب خاص استفاده کرده مثلا این خط:

JavaScript:

window.requestAnimationFrame(animationLoop);

یا این تکه کد:

JavaScript:

    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

در خیلی از کدهایش این کدها را می بینیم.

هر کس یک آموزشی را از جایی خونده و طبق اون الگو عمل میکنه. شما هم طبق الگوی خود عمل کنید.

پس کدهایی که من آپلود کردم چیز خاصی داخلش نیست ، و شما خیلی ساده می توانید برنامه خود را بسازید.

ولی با داشتن اون فایلها ،، بعد دانلود از github ، مثلا کد کلاس را داریم و خیلی کدهای دیگه و بقیه کدها ر لابلای اونها می نویسیم.ولی اگر کسی راحت است در قالب طراحی شده خودش کار کنه ، هیچ اشکالی نداره. می تونه از قالب خودش استفاده کنه و باقی کدهای بحث شده را به قالب خوش اضافه کنه.

saalek110 · Feb 22, 2024

مروری بر قالب آپلود شده در github:

در مورد قالبی هم که من آپلود کردم در github ، دو تا کلاس component و hero داره ، در فایلهای جدا. و یک فایل هم به نام updateGameArea داره.
در تابع updateGameArea ، همه کارها ، در این تابع انجام میشه ، همون تابع update معروف است که دوره ای اجرا میشه. داخل این تابع به توابع کلاس ها هم لینک داده میشه. مثلا به تابع برخورد کلاس hero پاس داده میشه.
همچنین داخل قسمت داخلی تابع updateGameArea دیوارها ساخته میشن ، هر ۱۵۰ فریم یک بار. همچنین داخل همین تابع امتیاز رسم میشه ، و باز داخل تابع updateGameArea کانواس پاک میشه و دیوارها و هرو حرکت داده میشن.

توابع کلاس hero ;
اولی update است که کارش رسم hero است ، بعدی newpos است که مختصات hero را تغییر می دهد..
دیگری تابع برخورد به کف است تا از کادر خارج نشه.
من قبل آپلود تابع برخورد با سقف را هم اضافه کردم تا از سقف بالاتر نرود.
تابع آخری هم تابع بررسی برخورد hero با دیوارهاست...
در بازی تانک ، به عوض اینکه تانک جونش کم شود ، دیوارها بعد برخورد رنگش عوض میشد.

هر تابع از کلاس یک رفتار می تونه باشه....مثلا رفتار هواپیما موقع برخورد با کف . یا رفتار در موقع برخورد با دیوارها...
چون کلاس تمام اطلاعات hero را داره ، محل مناسبی برای نشون دادن رفتارش است.

دیوارها تعدادشون زیاده و در تابع updateGameArea یک حلقه ساخته شد تا یکی یکی هر دیوار برخوردش با hero بررسی بشه.

saalek110 · Feb 22, 2024

ما در حقیقت بازی خود را ساخته ایم و آپلود کرده ایم
همون بسته ای که آپلود شد یک بازی کامل است. درسته که هیجان و هدف و داستان بازی نداره ولی همه اجزای بازی را داره. بررسی برخورد داره ، ثبت امتیاز و سوختن داره.
یعنی همه لوازم بازی را داره.
در حقیقت ما در ادامه داریم بازی را توسعه می دهیم. وگرنه اون بسته خودش یک بازی است.
اینکه من زود آپلودش کردم ، می خواستم بسته اول تا می تونه خلوت باشه ، تا به عنوان قالب استفاده بشه ، یعنی برای هر نوع بازی بشه استفاده اش کرد.

saalek110 · Feb 22, 2024

خلاصه کدهای فیزیک:

در صفحه قبلی ، از اون شخص ، دایره هایی داشتیم که سقوط می کرد. یعنی جاذبه تعریف شده بود.
میشه بازیهایی بر این اساس نوشت ، مثل پرتاب تیر، شلیک توپ ، و .....
کاری که اون شخص کرده بود ، افزودن مقداری به y شی است. ولی اگر مقدار ثابتی به شی اضافه بشه ، شی دارای سرعت ثابت خواهد بود.پس ابتدا مقداری باید به سرعت اضافه بشه:

JavaScript:

      ball1.vy = ball1.vy + g;
      ball1.y = ball1.y + ball1.vy;

در کد بالا ، سرعت به علاوه g شده ، و سپس به y شی افزوده شده.

در کد زیر ، سرعت اولیه ۳ توپ مختلف را داریم:

JavaScript:

    ball1.vy = 0;
    ball2.vy = 5;
    ball3.vy = -10;

سرعت اولیه ۳ توپ صفر و مثبت و منفی بوده... سرعت منفی یعنی از y کم می کنه دیگه...پس فکر کنم داره به سمت بالا میره.... و g خودش مثبت است... پس اول مدتی توپ بالایی میره ، و بعدش سقوط می کنه.

برخورد دو توپ سبک و سنگین:

JavaScript:

            //New Velocity of Ball 1 After Collision
            var v1 = ((ball1.m - ball2.m) * ball1.vx) / (ball1.m + ball2.m) + (2 * ball2.m * ball2.vx) / (ball1.m + ball2.m);

            //New Velocity of Ball 2 After Collision
            var v2 = ((ball2.m - ball1.m) * ball2.vx) / (ball2.m + ball1.m) + (2 * ball1.m * ball1.vx) / (ball1.m + ball2.m);

کوچیکه بعد برخورد سرعت بیشتری می گیرد. کد بالا محاسبه سرعت برگشت توپ ها پس از برخورد است.
m جرم است.

قبلا جرم هر توپ داده شده بود، مثلا:

JavaScript:

ball1.m = 100;

و در کلاس Ball صفت r یعنی شعاع را هم داشتیم. شعاع در کد بررسی برخورد دو توپ استفاده شده بود.

saalek110 · Feb 22, 2024

Draw only a part of an image
رسم قسمتی از عکس.

JavaScript:

context.drawImage(img, 100, 0, 200, 50, 10, 30, 200, 50);

In the example a fragment of the image is picked from (100, 0), with a width of 200 and height of 50. The fragment is drawn to (10, 30), with the same width and height as the source. The result will look like this:

Draw Images and Sprite Animations - HTML5 Canvas Tutorial | Spicy Yoghurt

Draw your own images on the canvas and learn how to stretch, scale and rotate them. Use clipping on sprites to create sprite animations. By the end of this tutorial you can draw your own images and animations on the canvas and use them in a game.

spicyyoghurt.com

در کد زیر کلیپ و تغییر سایز هم زمان داریم:

JavaScript:

context.drawImage(img, 100, 0, 200, 50, 10, 30, 400, 100)

saalek110 · Feb 22, 2024

عکسهای چند اسپریتی:

JavaScript:

// Define the size of a frame
let frameWidth = 50;
let frameHeight = 61;

// Rows and columns start from 0
let row = 1;
let column = 3;

context.drawImage(sprite, column*frameWidth, row*frameHeight, frameWidth, frameHeight, 10, 30, frameWidth, frameHeight);

saalek110 · Feb 22, 2024

JavaScript:

// Define the number of columns and rows in the sprite
let numColumns = 5;
let numRows = 2;

// Define the size of a frame
let frameWidth = sprite.width / numColumns;;
let frameHeight = sprite.height / numRows;;

// The sprite image frame starts from 0
let currentFrame = 0;

setInterval(function()
{
    // Pick a new frame
    currentFrame++;

    // Make the frames loop
    let maxFrame = numColumns * numRows - 1;
    if (currentFrame > maxFrame){
        currentFrame = 0;
    }

    // Update rows and columns
    let column = currentFrame % numColumns;
    let row = Math.floor(currentFrame / numColumns);

    // Clear and draw
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(sprite, column * frameWidth, row * frameHeight, frameWidth, frameHeight, 10, 30, frameWidth, frameHeight);

//Wait for next step in the loop
}, 100);

نمایش پشت سر هم قطعات اسپریتی عکس
سالک: من فیلم نگرفتم... همون عکس شیشه بود که با رنگهای مختلف به نمایش در می آمد.