Google dino with tractor's game

Click here for free DL of the app version that can save data.

No:40476

←

Prev Next

→

Google dino with tractor
Developer User18141｜Date and time 24/2/3 2:38:48
Build time 10.521 sec｜Game capacity 2.389KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<html>
<head>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="game" width="800" height="400"></canvas>

// Load Images
      const dinoImg = new Image();
      dinoImg.src = "https://cdn.jsdelivr.net/emojione/assets/png/1f40c.png";

const tractorImg = new Image();
      tractorImg.src = "https://cdn.jsdelivr.net/emojione/assets/png/1f69c.png";

// Game Variables
      let dinoX = 50;
      let dinoY = 200;
      let dinoSpeedY = 0;
      const gravity = 0.5;

let tractorX = 800;
      let tractorY = 230;
      const tractorSpeedX = 5;

let score = 0;
      let isGameOver = false;

function drawDino() {
        ctx.drawImage(dinoImg, dinoX, dinoY, 50, 50);
      }

function drawTractor() {
        ctx.drawImage(tractorImg, tractorX, tractorY, 100, 100);
      }

function updateDino() {
        dinoY += dinoSpeedY;
        dinoSpeedY += gravity;

if (dinoY > canvas.height - 50) {
          dinoY = canvas.height - 50;
          dinoSpeedY = 0;
        }
      }

function updateTractor() {
        tractorX -= tractorSpeedX;

if (tractorX + 100 < 0) {
          score++;
          tractorX = canvas.width;
        }

if (
          dinoX + 50 > tractorX &&
          dinoX < tractorX + 100 &&
          dinoY + 50 > tractorY
        ) {
          isGameOver = true;
        }
      }

function drawScore() {
        ctx.fillStyle = "#000";
        ctx.font = "20px Arial";
        ctx.fillText(`Score: ${score}`, 20, 30);
      }

function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

drawDino();
        drawTractor();
        updateDino();
        updateTractor();
        drawScore();

if (!isGameOver) {
          requestAnimationFrame(gameLoop);
        } else {
          ctx.fillStyle = "#000";
          ctx.font = "40px Arial";
          ctx.fillText("Game Over!", 300, 200);
        }
      }

function jump() {
        if (dinoY >= canvas.height - 50) {
          dinoSpeedY = -10;
        }
      }

document.addEventListener("keydown", jump);

gameLoop();
    });
  </script>
</body>
</html>