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

saalek110

Well-Known Member
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

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

فایل 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

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

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

Well-Known Member
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

Well-Known Member
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

Well-Known Member
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

Well-Known Member
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

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

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

یعنی کد دکمه های کیبورد در کامپیوتر.
 
آخرین ویرایش:

saalek110

Well-Known Member
Github
من چون دیدم کپی کردن از داخل پستهای اینجا برای شما سخته و احتمال اشتباه است...عضو github شدم تا پروژه کامل بزارم. :D :clap: :) :rose::rose:


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


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

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


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


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


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

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


عکس بازی:

Screenshot_۲۰۲۴-۰۲-۲۱_۲۲۴۱۰۳.jpg

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

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

saalek110

Well-Known Member

نام پوشه درلینک فوق 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

Well-Known Member

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

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



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

saalek110

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


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

saalek110

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

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


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

saalek110

Well-Known Member
هر کسی برای خودش قالبی دارد:

حالا ، هم حالت فایل 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

Well-Known Member
مروری بر قالب آپلود شده در github:

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

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

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

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

saalek110

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

saalek110

Well-Known Member
خلاصه کدهای فیزیک:

در صفحه قبلی ، از اون شخص ، دایره هایی داشتیم که سقوط می کرد. یعنی جاذبه تعریف شده بود.
میشه بازیهایی بر این اساس نوشت ، مثل پرتاب تیر، شلیک توپ ، و .....
کاری که اون شخص کرده بود ، افزودن مقداری به 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

Well-Known Member
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:
Screenshot_۲۰۲۴-۰۲-۲۲_۱۴۳۲۳۵.jpg Screenshot_۲۰۲۴-۰۲-۲۲_۱۴۳۳۱۷.jpg

در کد زیر کلیپ و تغییر سایز هم زمان داریم:
JavaScript:
context.drawImage(img, 100, 0, 200, 50, 10, 30, 400, 100)

Screenshot_۲۰۲۴-۰۲-۲۲_۱۴۳۸۱۹.jpg
 

saalek110

Well-Known Member
عکسهای چند اسپریتی:

Screenshot_۲۰۲۴-۰۲-۲۲_۱۴۴۲۲۹.jpg

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);


Screenshot_۲۰۲۴-۰۲-۲۲_۱۴۴۴۱۲.jpg
 

saalek110

Well-Known Member
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);

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

جدیدترین ارسال ها

بالا