VSCode
================================
– index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="image.css">
</head>
<body>
<div id="canvasContainer">
<canvas id="canvas" width="900" height="520"></canvas>
</div>
<script src="image.js"></script>
</body>
</html>
================================
– image.js code:
const cCanvas = document.getElementById('canvas');
cCanvas.width = 600;
cCanvas.height = 300;
const cContext = cCanvas.getContext('2d');
const cBackgroundImage = new Image();
const cBackgroundWidth = cCanvas.width;
let lBackgroundHeight;
const cCarImage = new Image();
const cCarImageWidth = 40;
const cCarImageHeight = 100;
let lCarImageX;
let lCarImageY;
document.addEventListener('DOMContentLoaded', (ev) =>
{
cBackgroundImage.onload = function () {
cCarImage.onload = function ()
{
const cAspectRatio = cBackgroundImage.naturalWidth / cBackgroundImage.naturalHeight;
lBackgroundHeight = cCanvas.height = cBackgroundWidth / cAspectRatio;
lCarImageX = cBackgroundWidth / 2 - cCarImageWidth / 2;
lCarImageY = lBackgroundHeight - cCarImageHeight;
cContext.drawImage(cBackgroundImage, 0, 0, cBackgroundWidth, lBackgroundHeight);
cContext.drawImage(cCarImage, lCarImageX, lCarImageY, cCarImageWidth, cCarImageHeight);
}
cCarImage.src = "Car.jpg";
}
cBackgroundImage.src = "Streets.jpg";
}
)
document.body.addEventListener("keydown", e =>{
e.preventDefault();
switch(e.key){
case 'ArrowUp':
lCarImageY -= 10;
break;
case 'ArrowDown':
lCarImageY += 10;
break;
case 'ArrowLeft':
lCarImageX -= 10;
break;
case 'ArrowRight':
lCarImageX += 10;
break;
}
render();
})
function render(){
cContext.clearRect(0, 0, cCanvas.width, cCanvas.height);
cContext.drawImage(cBackgroundImage, 0, 0, cBackgroundWidth, lBackgroundHeight);
cContext.drawImage(cCarImage, lCarImageX, lCarImageY, cCarImageWidth, cCarImageHeight);
}
================================
– This code puts a car on a street background. The arrow keys move the car on the street.
================================
I want the car to also turn 90 degrees when the keyboard letter “l” is entered.
================================
– This was added to < body > html:
<div style="margin: 8px">
<img id="CarRotate" src="Car.jpg" />
</div>
================================
– In image.js, this
const cCarImage = new Image();
was replaced with this.
// const cCarImage = new Image();
const cCarImage = document.getElementById('CarRotate');
================================
– Two lines of code were deleted
document.addEventListener('DOMContentLoaded', (ev) =>
{
cBackgroundImage.onload = function () {
// cCarImage.onload = function ()
{
...
}
// cCarImage.src = "Car.jpg";
}
cBackgroundImage.src = "Streets.jpg";
}
)
================================
– This was added to switch(e.key)
case 'l':
cCarImage.style.transform = 'rotate(90deg)';
break;
================================
– Unfortunately, this displays “two” cars on the street. One car is moved by the arrows. The other car rotates.
What do I change to combine the movements into one car?
Streets.jpg => https://snipboard.io/4YgDaf.jpg
Car.jpg => https://snipboard.io/ptkWjJ.jpg
