Scribd
Upload
9 views2 pages

Out Put Code

This document contains JavaScript code for creating a simple canvas-based game titled 'Rawalpindi/Islamabad Crime Game'. It sets up a game environment with a character, a car, and buildings, while implementing a drawing function to render these elements on the canvas. The game loop continuously updates the display, allowing for character movement and interaction within the game world.

Uploaded by

gul.7044
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views2 pages

Out Put Code

This document contains JavaScript code for creating a simple canvas-based game titled 'Rawalpindi/Islamabad Crime Game'. It sets up a game environment with a character, a car, and buildings, while implementing a drawing function to render these elements on the canvas. The game loop continuously updates the display, allowing for character movement and interaction within the game world.

Uploaded by

gul.7044
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import { createCanvas, loadImage } from 'canvas';

const WIDTH = 800;


const HEIGHT = 600;
const canvas = createCanvas(WIDTH, HEIGHT);
const ctx = canvas.getContext('2d');
const title = "Rawalpindi/Islamabad Crime Game";

const fontSize = 30;


ctx.font = `${fontSize}px sans-serif`;
const clock = setInterval(() => {}, 1000 / 60);

// Colors
const GRAY = 'rgb(50, 50, 50)';
const WHITE = 'rgb(255, 255, 255)';
const CAR_COLOR = 'rgb(150, 150, 255)';
const CHARS = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 100, 255)'];
const CHAR_NAMES = ["Saim", "Addan", "Gulsher"];
let char_index = 0;

// Entities
const char = { x: 100, y: 100, width: 20, height: 20 };
const car = { x: 400, y: 300, width: 40, height: 20 };
const buildings = [];
for (let x = 1; x < 7; x++) {
for (let y = 1; y < 5; y++) {
buildings.push({ x: x * 100, y: y * 100, width: 80, height: 80 });
}
}

function draw() {
ctx.fillStyle = GRAY;
ctx.fillRect(0, 0, WIDTH, HEIGHT);

// Roads
ctx.strokeStyle = 'rgb(80, 80, 80)';
for (let x = 0; x < WIDTH; x += 100) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, HEIGHT);
ctx.stroke();
}
for (let y = 0; y < HEIGHT; y += 100) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(WIDTH, y);
ctx.stroke();
}

// Buildings
ctx.fillStyle = 'rgb(100, 100, 100)';
buildings.forEach(b => {
ctx.fillRect(b.x, b.y, b.width, b.height);
});

// Car
ctx.fillStyle = CAR_COLOR;
ctx.fillRect(car.x, car.y, car.width, car.height);
// Character
ctx.fillStyle = CHARS[char_index];
ctx.fillRect(char.x, char.y, char.width, char.height);

// UI
const name = CHAR_NAMES[char_index];
ctx.fillStyle = WHITE;
ctx.fillText(`Character: ${name}`, 10, 30);
}

let run = true;


function gameLoop() {
if (run) {
draw();
requestAnimationFrame(gameLoop);
}
}

gameLoop();

You might also like