I'm attempting to animate 3 boats using JavaScript within a Canvas element. However, I've encountered a problem with my project where the startGame function isn't displaying the images I've selected. Strangely, it only seems to work with the Pic/boat.jpg image that serves as the background. Both my teacher and classmates are stumped by this issue, and despite trying various solutions, none have resolved the problem for me. I'm hoping someone here can provide some assistance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="MainC/C.css" />
<!--
<script src="main.js"></script> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<style>
header {
background-color: rgb(28, 72, 88);
width: 100%;
min-height: 100px;
opacity: 0.7;
position: fixed;
background-image: url(pic/VORIcon.png);
}
body,
html {
height: 100%;
margin: 0%;
background-repeat: no-repeat;
background-size: cover;
}
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body background="Pic/boat.jpg" onload="startGame()">
<header>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
<a href="#News">News</a>
<a href="#OCRLive">Live Race</a>
</div>
</div>
</header>
<br>
<br>
<br>
<br>
<br>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script>
var myGamePiece1;
var myGamePiece2;
var myGamePiece3;
var myGamePiece4;
function startGame() {
myGameArea.start();
myGamePiece1 = new component(30, 30, "Pic/Boat.jpg", 10, 30, "image");
myGamePiece2 = new component(30, 30, "Pic/Boat.jpg", 10, 110, "image");
myGamePiece3 = new component(30, 30, "Pic/Boat.jpg", 10, 190, "image");
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function () {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function () {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
function updateGameArea() {
myGamePiece1.update();
myGamePiece2.update();
myGamePiece3.update();
}
</script>
</body>
</html>
If you need further information or clarification, please let me know. I appreciate any help!
PS: Any picture other than the background won't display correctly for me.
CSS:
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
min-width: 160px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 0;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}