SH20RAJ/dino-game.markdown

## dino-game.markdown

      
    Raw
  

              dino-game.markdown
            
          
    Dino game

A Pen by SH20RAJ on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Dino Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="200"></canvas>
    <script src="game.js"></script>
</body>
</html>

## script.js
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const dino = {
    x: 50,
    y: 150,
    width: 20,
    height: 20,
    dy: 0,
    gravity: 0.6,
    jumpHeight: -12,
    grounded: true
};

const ground = {
    x: 0,
    y: 180,
    width: canvas.width,
    height: 20
};

const obstacles = [];
let gameSpeed = 4;
let score = 0;
let gameOver = false;
let frameCount = 0;

document.addEventListener('keydown', (e) => {
    if (e.code === 'Space' && dino.grounded) {
        dino.dy = dino.jumpHeight;
        dino.grounded = false;
    }
});

function spawnObstacle() {
    const obstacle = {
        x: canvas.width,
        y: 160,
        width: 20,
        height: 40
    };
    obstacles.push(obstacle);
}

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

    // Ground logic
    ground.x -= gameSpeed;
    if (ground.x <= -ground.width) {
        ground.x = 0;
    }
    ctx.fillStyle = 'green';
    ctx.fillRect(ground.x, ground.y, ground.width, ground.height);
    ctx.fillRect(ground.x + ground.width, ground.y, ground.width, ground.height);

    // Dino logic
    dino.dy += dino.gravity;
    dino.y += dino.dy;
    if (dino.y >= 150) {
        dino.y = 150;
        dino.dy = 0;
        dino.grounded = true;
    }
    ctx.fillStyle = 'black';
    ctx.fillRect(dino.x, dino.y, dino.width, dino.height);

    // Obstacle logic
    if (frameCount % 100 === 0) {
        spawnObstacle();
    }
    for (let i = 0; i < obstacles.length; i++) {
        let obs = obstacles[i];
        obs.x -= gameSpeed;
        if (obs.x + obs.width < 0) {
            obstacles.splice(i, 1);
            score++;
        }
        ctx.fillStyle = 'red';
        ctx.fillRect(obs.x, obs.y, obs.width, obs.height);

        // Collision detection
        if (
            dino.x < obs.x + obs.width &&
            dino.x + dino.width > obs.x &&
            dino.y < obs.y + obs.height &&
            dino.y + dino.height > obs.y
        ) {
            gameOver = true;
        }
    }

    // Score display
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.fillText('Score: ' + score, 10, 30);

    if (!gameOver) {
        frameCount++;
        requestAnimationFrame(update);
    } else {
        ctx.fillStyle = 'red';
        ctx.font = '30px Arial';
        ctx.fillText('Game Over', canvas.width / 2 - 70, canvas.height / 2);
        ctx.font = '20px Arial';
        ctx.fillText('Press Space to Restart', canvas.width / 2 - 100, canvas.height / 2 + 30);
        document.addEventListener('keydown', restartGame);
    }
}

function restartGame(e) {
    if (e.code === 'Space') {
        document.removeEventListener('keydown', restartGame);
        gameOver = false;
        score = 0;
        frameCount = 0;
        obstacles.length = 0;
        dino.y = 150;
        dino.dy = 0;
        update();
    }
}

update();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chrome Dino Game</title>
	<style>
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #f7f7f7;
	font-family: Arial, sans-serif;
	}
	canvas {
	border: 2px solid #000;
	}
	</style>
	</head>
	<body>
	<canvas id="gameCanvas" width="800" height="200"></canvas>
	<script src="game.js"></script>
	</body>
	</html>
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');

	const dino = {
	x: 50,
	y: 150,
	width: 20,
	height: 20,
	dy: 0,
	gravity: 0.6,
	jumpHeight: -12,
	grounded: true
	};

	const ground = {
	x: 0,
	y: 180,
	width: canvas.width,
	height: 20
	};

	const obstacles = [];
	let gameSpeed = 4;
	let score = 0;
	let gameOver = false;
	let frameCount = 0;

	document.addEventListener('keydown', (e) => {
	if (e.code === 'Space' && dino.grounded) {
	dino.dy = dino.jumpHeight;
	dino.grounded = false;
	}
	});

	function spawnObstacle() {
	const obstacle = {
	x: canvas.width,
	y: 160,
	width: 20,
	height: 40
	};
	obstacles.push(obstacle);
	}

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

	// Ground logic
	ground.x -= gameSpeed;
	if (ground.x <= -ground.width) {
	ground.x = 0;
	}
	ctx.fillStyle = 'green';
	ctx.fillRect(ground.x, ground.y, ground.width, ground.height);
	ctx.fillRect(ground.x + ground.width, ground.y, ground.width, ground.height);

	// Dino logic
	dino.dy += dino.gravity;
	dino.y += dino.dy;
	if (dino.y >= 150) {
	dino.y = 150;
	dino.dy = 0;
	dino.grounded = true;
	}
	ctx.fillStyle = 'black';
	ctx.fillRect(dino.x, dino.y, dino.width, dino.height);

	// Obstacle logic
	if (frameCount % 100 === 0) {
	spawnObstacle();
	}
	for (let i = 0; i < obstacles.length; i++) {
	let obs = obstacles[i];
	obs.x -= gameSpeed;
	if (obs.x + obs.width < 0) {
	obstacles.splice(i, 1);
	score++;
	}
	ctx.fillStyle = 'red';
	ctx.fillRect(obs.x, obs.y, obs.width, obs.height);

	// Collision detection
	if (
	dino.x < obs.x + obs.width &&
	dino.x + dino.width > obs.x &&
	dino.y < obs.y + obs.height &&
	dino.y + dino.height > obs.y
	) {
	gameOver = true;
	}
	}

	// Score display
	ctx.fillStyle = 'black';
	ctx.font = '20px Arial';
	ctx.fillText('Score: ' + score, 10, 30);

	if (!gameOver) {
	frameCount++;
	requestAnimationFrame(update);
	} else {
	ctx.fillStyle = 'red';
	ctx.font = '30px Arial';
	ctx.fillText('Game Over', canvas.width / 2 - 70, canvas.height / 2);
	ctx.font = '20px Arial';
	ctx.fillText('Press Space to Restart', canvas.width / 2 - 100, canvas.height / 2 + 30);
	document.addEventListener('keydown', restartGame);
	}
	}

	function restartGame(e) {
	if (e.code === 'Space') {
	document.removeEventListener('keydown', restartGame);
	gameOver = false;
	score = 0;
	frameCount = 0;
	obstacles.length = 0;
	dino.y = 150;
	dino.dy = 0;
	update();
	}
	}

	update();