-->

Source code game Dinosaurus Google Chrome



Source code yang Ram bagikan kali ini ialah gane dinosaurus google chrome.
Game dino ini akan muncul saat kalian buka laman di google chrome tetapi kalian tidak terhubung ke internet.

Tanpa basa-basi, inilah source codenya:

    
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>T-rex Runner Game</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    font-family: "Press Start 2P",
    Sans-Serif;
}
body {
    display: grid;
    place-items: center;
    width: 100vw;
    min-height: 100vh;
}
#gameOverMsg {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 100%;
    top: calc(50% - 30px);
}
#gameOverMsg.show {
    display: flex;
}
#gameOverMsg #msg {
    color: #495359;
}
#restartBtn {
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    background: url("https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/img/restart.png");
    background-size: 100% 100%;
    margin-top: 10px;
}
#scoreContainer {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: calc(50% - 80px);
    right: 10px;
    color: #495359;
    font-size: 12px;
}
#scoreContainer > * {
    margin: 5px;
}
#loader {
    position: fixed;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 10000;
}
#loader #loader-text {
    animation: blink 1s linear infinite;
}
@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
</style>
<body>
    <div id="loader">
        <div id="loader-text">
            Loading...
        </div>
    </div>
    <canvas></canvas>
    <div id="gameOverMsg">
        <p id="msg">
            Game Over
        </p>
        <button id="restartBtn"></button>
    </div>
    <div id="scoreContainer">
        <div>
            HI <span id="hiscore"></span>
        </div>
        <div id="score"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
    <script>
    
        const $ = s => document.querySelector(s);
        const c = t => console.log(t);
        const canvas = $("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = innerWidth;
        canvas.height = 200;

        // Game related variables
        let animationType, playerImg, groundImg, enemyImg, jumpSound, gameOverSound, scoreSound, cloudImg, sunImg;
        let jump = false;
        let gravity = 1;
        let jumpForce = 15;
        let enemySX = [(208/6)*0, (208/6)*1, (208/6)*3, (208/6)*4, (208/6)*5, (208/6)*0];
        let gameOver = false;

        // Loading Assests
        playerImg = new Image();
        playerImg.src = "https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/img/player.png";
        groundImg = new Image();
        groundImg.src = "https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/img/sprite1.png";
        enemyImg = new Image();
        enemyImg.src = "https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/img/enemy.png";
        cloudImg = new Image();
        cloudImg.src = "https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/img/cloud.png";
        sunImg = new Image();
        sunImg.src = "https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/img/sun.png";
        jumpSound = new Howl({
            src: ["https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/audio/jump.mp3"]
        });
        gameOverSound = new Howl({
            src: ["https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/audio/gameover.mp3"]
        });
        scoreSound = new Howl({
            src: ["https://raw.githubusercontent.com/AvinashProgrammer/T-rex-Runner-Game/main/audio/score.mp3"]
        });

        function game() {

            // Score and High score
            let scoreElm = $("#score");
            let hiscoreElm = $("#hiscore");
            let score = 0;
            let hiscore = 0;


            // Classes for creating objects
            class Component {
                constructor(sprite, sx, sy, w, h, x, y, cw, ch) {
                    this.sprite = sprite;
                    this.sx = sx;
                    this.sy = sy;
                    this.w = w;
                    this.h = h;
                    this.x = x;
                    this.y = y;
                    this.cw = cw;
                    this.ch = ch;
                    this.velY = 0;
                }
                draw() {
                    ctx.drawImage(this.sprite, this.sx, this.sy, this.w, this.h, this.x, this.y, this.cw, this.ch);
                }
                update() {
                    this.draw();
                }
            }


            // creating player, ground and enemy array
            let enemyArray = [];
            let cloudArray = [];
            const player = new Component(playerImg, 0, 0, 351/4, 99, 20, canvas.height - 60, 50, 50);
            const ground = new Component(groundImg, 0, 100, 2440/7, 30, 0, canvas.height - 40, canvas.width, 30);
            const sun = new Component(sunImg, 0, 0, 79, 85, canvas.width/2+50, 50, 10, 10);

            // Function for animation
            function animate() {
                animationType = requestAnimationFrame(animate);
                ctx.fillStyle = "rgb(255,255,255)";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Sun
                sun.update();
                sun.x -= 0.2;
                if (sun.x < -sun.w) {
                    sun.x = canvas.width;
                }

                // cloud
                cloudArray.forEach(cloud => {
                    cloud.update();
                    cloud.x -= 1;
                })

                // Ground animation
                if (score < 100) {
                    if (ground.sx < 2440 - ground.w) {
                        ground.sx += 6;
                    } else {
                        ground.sx = 0;
                    }
                } else if (score > 100 && score < 250) {
                    if (ground.sx < 2440 - ground.w) {
                        ground.sx += 7;
                    } else {
                        ground.sx = 0;
                    }
                } else if (score > 250 && score < 500) {
                    if (ground.sx < 2440 - ground.w) {
                        ground.sx += 8;
                    } else {
                        ground.sx = 0;
                    }
                } else if (score > 500 && score < 1000) {
                    if (ground.sx < 2440 - ground.w) {
                        ground.sx += 9;
                    } else {
                        ground.sx = 0;
                    }
                } else {
                    if (ground.sx < 2440 - ground.w) {
                        ground.sx += 10;
                    } else {
                        ground.sx = 0;
                    }
                }
                ground.update()


                // Player Jump
                if (player.y < canvas.height - 60) {
                    player.velY += gravity;
                } else {
                    if (jump) {
                        player.velY = -jumpForce;
                        jumpSound.play();
                        jump = false;
                    }
                    if (player.velY > 0) {
                        player.velY = 0;
                    }
                }

                player.y += player.velY;
                player.update();

                // Drawing Enemy
                enemyArray.forEach((enemy, index) => {
                    enemy.update();
                    if (score < 100) {
                        enemy.x -= 6;
                    } else if (score > 100 && score < 250) {
                        enemy.x -= 7;
                    } else if (score > 250 && score < 500) {
                        enemy.x -= 8;
                    } else if (score > 500 && score < 1000) {
                        enemy.x -= 9;
                    } else {
                        enemy.x -= 10;
                    }

                    if (enemy.x < -enemy.w) {
                        enemyArray.splice(index, 1);
                    }

                    //Game over
                    let distance = checkCollision(player, enemy);
                    if (distance < 40) {
                    cancelAnimationFrame(animationType);
                        // navigator.vibrate(200);
                        $("#gameOverMsg").classList.add("show");
                        gameOver = true;
                        gameOverSound.play();
       /*
          Instructions for automating game:-
          1. Uncomment line no. 210.
          2. Comment line no. 199, 201, 202, 203
          3. Change line no. 198 if(distance < 40) to if(distance < 100)
       */
                        //jump = true;
                    }
                })

                // High score
                if (hiscore < score) {
                    hiscore = score;
                    hiscoreElm.innerHTML = `${scoreElm.innerHTML}`;
                }
                if (gameOver) {
                    hiscore = hiscoreElm.innerHTML;
                }

                // score sound
                if (score%100 == 0 && score != 0) {
                    scoreSound.play();
                }



            }
            animate()

            // Function to check collision
            function checkCollision(obj1, obj2) {
                return Math.hypot(obj1.x - obj2.x, obj1.y - obj2.y);
            }

            // Function to change Player Frame
            function changePlayerFrame() {
                if (player.sx < 351 - player.w && player.velY == 0) {
                    player.sx += player.w;
                } else if (player.velY < 0) {
                    player.sx = 0;
                } else {
                    player.sx = 0;
                }
            }
            setInterval(changePlayerFrame, 100)

            // Function to generate Enemy
            function generateEnemy() {
                let enemyHeight,
                y;
                if (Math.random() < 0.5) {
                    enemyHeight = 70;
                    y = canvas.height - 80;
                } else {
                    enemyHeight = 50;
                    y = canvas.height - 60;
                }
                enemyArray.push(
                    new Component(
                        enemyImg,
                        enemySX[Math.floor(Math.random() * enemySX.length)],
                        0,
                        208/6,
                        75,
                        canvas.width + 20,
                        y,
                        30,
                        enemyHeight
                    )
                );
            }
            setInterval(generateEnemy, 1200)

            function generateCloud() {
                let cloudY = 30 + (Math.random()*70);
                cloudArray.push(new Component(cloudImg, 0, 0, 94, 50, canvas.width+60, cloudY, 50, 30))
            }
            generateCloud()
            setInterval(generateCloud, 2000)

            // Score
            setInterval(() => {
                if (!gameOver) {
                    let modScore;
                    if (score < 10-1) {
                        modScore = `0000${score += 1}`;
                    } else if (score < 100-1) {
                        modScore = `000${score += 1}`;
                    } else if (score <= 1000-1) {
                        modScore = `00${score += 1}`;
                    } else if (score <= 10000-1) {
                        modScore = `0${score += 1}`;
                    } else {
                        modScore = "You are hacker";
                    }
                    scoreElm.innerHTML = `${modScore}`;
                } else {
                    score = 0;
                }
            },
                200)

        }
        $("#restartBtn").addEventListener("click", ()=> {
            game()
            $("#gameOverMsg").classList.remove("show");
            gameOver = false;
        })
        addEventListener("load", () => {
            $("#loader").style.display = "none";
            game()
        })
        addEventListener("touchstart", ()=> {
            jump = true;
        })
        addEventListener("touchend", ()=> {
            jump = false;
        })

    </script>
</body>
</html>

Lihat Demo