AI game creator

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

No:15567

←

Prev Next

→

dinosaur game
Developer User6758｜Date and time 23/9/10 1:04:31
Build time 35.298 sec｜Game capacity 3.589KB｜

Script

Sure! Here's a simple implementation of the dinosaur game, commonly known as the "No Internet" game, as a single HTML file. The game is playable on a smartphone and uses pictograms for the dinosaur and obstacles.

In this implementation, you need to provide your own images for the dinosaur (`emozi_rabbit.png`) and the obstacle (`emozi_all/cactus.png`). The game is controlled by tapping on the canvas or pressing any key to make the dinosaur jump. The goal is to avoid hitting the obstacle and survive as long as possible. The score is displayed on the top left corner. When the dinosaur collides with the obstacle, the game is over and the "Game Over" message is displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

let dinoX = 50;
    let dinoY = canvas.height - groundHeight - dinoSize;
    let dinoVelocity = 0;
    let isJumping = false;
    let isGameOver = false;
    let score = 0;

// Load images
    dinoImage.src = 'dinosaur.png';
    obstacleImage.src = 'cactus.png';

// Event listeners for controlling the game on a smartphone
    canvas.addEventListener('touchstart', handleJump);
    document.addEventListener('keydown', handleJump);

function handleJump() {
      if (!isJumping && !isGameOver) {
        isJumping = true;
        dinoVelocity = -jumpHeight;
      }
    }

function drawDino() {
      context.drawImage(dinoImage, dinoX, dinoY, dinoSize, dinoSize);
    }

function drawObstacle() {
      context.drawImage(obstacleImage, canvas.width, canvas.height - groundHeight - obstacleSize, obstacleSize, obstacleSize);
    }

function collisionDetection() {
      if (
        dinoX < canvas.width &&
        dinoX + dinoSize > canvas.width &&
        dinoY + dinoSize > canvas.height - groundHeight - obstacleSize
      ) {
        gameOver();
      }
    }

function updateScore() {
      score++;
    }

function drawScore() {
      context.font = '24px Arial';
      context.fillStyle = 'black';
      context.fillText(`Score: ${score}`, 10, 30);
    }

function gameOver() {
      isGameOver = true;
      context.font = '48px Arial';
      context.fillStyle = 'black';
      context.fillText('Game Over', canvas.width / 2 - 120, canvas.height / 2);
    }

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

// Draw ground
      context.fillStyle = 'gray';
      context.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight);

// Draw dino
      drawDino();

// Draw obstacle
      drawObstacle();

// Collision detection
      collisionDetection();

// Update score
      updateScore();

// Draw score
      drawScore();

if (isJumping) {
        dinoVelocity += gravity;
        dinoY += dinoVelocity;

if (dinoY >= canvas.height - groundHeight - dinoSize) {
          dinoY = canvas.height - groundHeight - dinoSize;
          isJumping = false;
        }
      }

if (!isGameOver) {
        requestAnimationFrame(animate);
      }
    }

animate();
  </script>
</body>
</html>
```

In this implementation, you need to provide your own images for the dinosaur (`dinosaur.png`) and the obstacle (`cactus.png`). The game is controlled by tapping on the canvas or pressing any key to make the dinosaur jump. The goal is to avoid hitting the obstacle and survive as long as possible. The score is displayed on the top left corner. When the dinosaur collides with the obstacle, the game is over and the "Game Over" message is displayed.