I have a RNG set up to spawn "ocs" in a small game, I have an image source set up for how I want the orc to look but I cannot get the orc image to appear at the points of randomYposition and orcXposition.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17013455_assignment_2</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="17013455_ass2_task1.js"></script>
</body>
</html>
Here is my code:
window.onload=function () {
var canvas = document.getElementById("canvas");
var gc = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 448;
gc.clearRect(0, 0, canvas.width, canvas.height);
var orc = new Image();
orc.src = "https://imgur.com/MIWLkHT";
var background = new Image();
background.src = "https://i.imgur.com/9mPYXqC.png";
background.onload = function () {
gc.drawImage(background, 0, 0)
};
//sword dimentions
var swordHeight = 50;
var swordWidth = 25;
var swordX = 50;
var swordY = 220;
//orc dimentions
var orcWidth = 5;
var orcHeight = 10;
//controls for player
var upPressed = false;
var downPressed = false;
function keyUpHandler(e) {
if (e.keyCode === 38) {
upPressed = false;
}
else if (e.keyCode === 40) {
downPressed = false;
}
}
function drawSword() {
/*Make a box to represent a sword until sprites are used*/
gc.beginPath();
gc.rect(swordX, swordY, swordWidth, swordHeight);
gc.fillStyle = "#000000";
gc.fill();
gc.closePath();
}
var orcs = [];
function spawnorc() {
drawOrc();
console.log('spawn an orc');
var randomYposition = Math.floor(Math.random() * (canvas.height -
orcHeight));
var orcXposition = canvas.width - 20;
var newOrc = {
x: orcXposition,
y: randomYposition
};
function drawOrc() {
orc.onload = function () {
gc.drawImage(orc, randomYposition, orcXposition, orcWidth,
orcHeight);
}
}
orcs.push(newOrc);
console.log(newOrc);
}
function keyDownHandler(e) {
if (e.keyCode === 38) {
upPressed = true;
}
else if (e.keyCode === 40) {
downPressed = true;
}
}
function render() {
if (downPressed && swordY < canvas.height - swordHeight) {
swordY += 3;
}
else if (upPressed && swordY > 0) {
swordY -= 3;
}
gc.drawImage(background, 0, 0);
drawSword();
}
document.addEventListener("keydown", keyDownHandler, "false");
document.addEventListener("keyup", keyUpHandler, "false");
render();
spawnorc();
setInterval(spawnorc, 3000);
setInterval(render, 10);
};
The log shows that the number generator is working and spawning an "orc" however if I try and put "spawn orc" in the render function they spawn far too quickly, but I'm not sure how to get the orc to appear at the points without having it render.
Aucun commentaire:
Enregistrer un commentaire