Gallery
Share
Explore

storrowed

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Storrowed</title>

<style>

body { margin: 0; }

canvas { background-color: #e0ffff; display: block; }

.button-container { text-align: center; }

.truck-button { padding: 10px; margin: 5px; }

</style>

</head> add600 add600

<body>

<canvas id="gameCanvas" width="800" height="400"></canvas>

<div class="button-container">

<button class="truck-button" style="background-color: #90ee90;" onclick="reverse('1')">Reverse 1</button>

<button class="truck-button" style="background-color: #ffa500;" onclick="reverse('2')">Reverse 2</button>

<button class="truck-button" style="background-color: #add8e6;" onclick="reverse('3')">Reverse 3</button>

<button class="truck-button" style="background-color: #add600;" onclick="reverse('4')">Reverse 4</button><<br>

<button class="truck-button" style="background-color: #90ee90;" onclick="accelerate('1')">Accelerate 1</button>

<button class="truck-button" style="background-color: #ffa500;" onclick="accelerate('2')">Accelerate 2</button>

<button class="truck-button" style="background-color: #add8e6;" onclick="accelerate('3')">Accelerate 3</button>

<button class="truck-button" style="background-color: # add600;" onclick="accelerate('4')">Accelerate 4</button>

</div>

<script>

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

const trucks = [

{ color: '#90ee90', label: '1', position: 0, speed: 1 },

{ color: '#ffa500', label: '2', position: 0, speed: 1 },

{ color: '#add8e6', label: '3', position: 0, speed: 1 }

{ color: '# add600, label: '4', position: 0, speed: 1 }

];

const overpassPosition = canvas.width - 100;

const truckWidth = 100;

const truckHeight = 50;

const truckCabWidth = 35;

const truckWheelRadius = 10;

let interval;


function drawRiver() {

ctx.fillStyle = '#00008b';

ctx.fillRect(0, 0, canvas.width, 10);

}


function drawTruck(truck, yPosition) {

ctx.fillStyle = truck.color;

ctx.fillRect(truck.position, yPosition, truckWidth, truckHeight);

ctx.fillRect(truck.position + truckWidth, yPosition + 10, truckCabWidth, truckHeight - 20);

ctx.fillStyle = '#000000';

ctx.beginPath();

ctx.arc(truck.position + 20, yPosition + truckHeight, truckWheelRadius, 0, Math.PI * 2);

ctx.arc(truck.position + truckWidth - 20, yPosition + truckHeight, truckWheelRadius, 0, Math.PI * 2);

ctx.fill();

ctx.fillStyle = '#ffffff';

ctx.font = '20px Arial';

ctx.fillText(truck.label, truck.position + truckWidth / 2 - 10, yPosition + truckHeight / 2 + 10);

}


function drawOverpass() {

ctx.fillStyle = '#a9a9a9';

ctx.fillRect(overpassPosition, 0, 20, canvas.height);

}


function checkCollision(truck, yPosition) {

if (truck.position + truckWidth > overpassPosition) {

ctx.clearRect(truck.position, yPosition, truckWidth, 20);

clearInterval(interval);

}

}


function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawRiver();

drawOverpass();

trucks.forEach((truck, index) => {

let yPosition = 50 + (truckHeight + 20) * index;

drawTruck(truck, yPosition);

checkCollision(truck, yPosition);

truck.position += truck.speed;

});

}


function reverse(label) {

const truck = trucks.find(t => t.label === label);

truck.position = Math.max(truck.position - 10, 0);

}


function accelerate(label) {

const truck = trucks.find(t => t.label === label);

truck.position = Math.min(truck.position + 10, overpassPosition - truckWidth);

}


interval = setInterval(draw, 30 * 60000 / (canvas.width - truckWidth)); // Set the interval for 30 minutes to reach the overpass

</script>

<p><small><strong>HBP# 824714</strong></small></p>

</body>

</html>

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.