I am trying to make this: When I click on an image that is on the canvas, a message pops out or another image shows up (some event). I don't understand why my code doesn't work. Can someone help me? Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border: 5px solid #d3d3d3;
background-color: #F08080;
}
</style>
</head>
<body onload="startGame()">
<script>
var backgroundMusic;
function startGame() {
myGameArea.start();
myPlayer = new component(300,300,"dort.png", 10, 120, "image");
backgroundMusic = new sound("panjabi.mp3")
backgroundMusic.play();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1200;
this.canvas.height = 700;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function(e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function(e){
myGameArea.key = false;
})
},
clear : function() {
this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.left = x
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); } }
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myPlayer.speedX = 0;
myPlayer.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myPlayer.speedX = -10}
if (myGameArea.key && myGameArea.key == 39) {myPlayer.speedX = 10}
if (myGameArea.key && myGameArea.key == 38) {myPlayer.speedY = -10}
if (myGameArea.key && myGameArea.key == 40) {myPlayer.speedY = 10}
myPlayer.newPos();
myPlayer.update();
}
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function() {
this.sound.play();
}
this.stop = function(){
this.sound.pause();
}
}
$('#canvas').click(function (e) {
var clickedX = e.pageX - this.offsetLeft;
var clickedY = e.pageY - this.offsetTop;
for(var i = 0; i < myPlayer[i].length; i++) {
if(clickedX < myPlayer[i].right && clickedX > myPlayer[i].left &&
clickedY > myPlayer[i].top && clickedY < myPlayer[i].bottom) {
alert('clicked number');
}
}
});
</script>
</body>
</html>
My first guess: $('#canvas') finds the element with the id "canvas", but your canvas element does not have any id set.
Does it work if you do something like this.canvas.id = 'canvas' in the start function?
Related
I need to resize my spritesheet so it fits the correct dimensions of my game object. I have been looking around the internet and I found that this -ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);- is what i think i need to use. however, i do not know how or where to implement this in my code. i know how it works but i dont know where to put it or where in my code to put it. i use almost completely javascript
var myGamePiece;
var myObstacle;
var object1;
var objects;
var box;
function startGame() {
//creation of objects
wall = new component(30, 100, "black", 300, 200);
myGamePiece = new component(30, 30, "red", 240, 135);
myObstacle = new component(100, 100, "green", 200, 100);
object1 = new component(30, 30, "enemy.png", 340, 125, "image");
box = new component(30, 30, "box.png", 177, 145, "image");
myGameArea.start();
}
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]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
collide : function() {
object1.x += 1;
object1.y += 1;
},
//what to do when pushing box
boxleft : function() {
box.x -= 1;
x -= 1;
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.sx = x;
this.sy = y;
this.swidth = width;
this.sheight = height;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
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);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
//code for gray square
this.crashWith = function(object1) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = object1.x;
var otherright = object1.x + (object1.width);
var othertop = object1.y;
var otherbottom = object1.y + (object1.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
//code to push box
this.pushboxWith = function(box) {
const myleft = this.x;
const myright = this.x + (this.width);
const mytop = this.y;
const mybottom = this.y + (this.height);
const boxleft = box.x-2;
const boxright = box.x + (box.width)+2;
const boxtop = box.y+2;
const boxbottom = box.y + (box.height)-2;
var pushboxleft = true;
var pushboxright = true;
//test if pushing box
if ((myleft < boxright) && (mybottom >= boxtop) && (mytop <= boxbottom) && (myleft > boxleft)) {
pushboxleft = true;
} else {
pushboxleft = false;
}
return pushboxleft;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(object1)) {
myGameArea.collide();
} else if (myGamePiece.pushboxWith(box)) {
myGameArea.boxleft();
} else {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
//keyboard controls. moves everything but the player
if (myGameArea.key && myGameArea.key == 37) {
myObstacle.x += 2;
object1.x += 2;
box.x += 2;
wall.x += 2;
}
if (myGameArea.key && myGameArea.key == 39) {
myObstacle.x += -2;
object1.x += -2;
box.x += -2;
wall.x += -2;
}
if (myGameArea.key && myGameArea.key == 38) {
myObstacle.y += 2;
object1.y += 2;
box.y += 2;
wall.y += 2
}
if (myGameArea.key && myGameArea.key == 40) {
myObstacle.y += -2;
object1.y += -2;
box.y += -2;
wall.y += -2
}
//other square movement. disabled to isolate code.
/*
if (object1.x < myGamePiece.x) {
object1.x += 1;
}
if (object1.x > myGamePiece.x) {
object1.x += -1;
}
if (object1.y < myGamePiece.y) {
object1.y += 1;
}
if (object1.y > myGamePiece.y) {
object1.y += -1;
}
*/
/* object order: the object that is higher on the list
will be on top of objects lower on the list
*/
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
wall.update();
object1.update();
box.update();
//end of list
}
}
i do use some html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script src="main.js"></script>
</body>
</html>
if you need to test my code you can find it here- https://eeeegame-2.octopuscat.repl.co/
I am trying to create a basic platformer game, and I'm working on the gravity section. I am using some if myGameArea.keys statements to allow the player to move their character forwards and backwards, and up. I am using an accelerate function to stop gravity when the up key is pressed, but I can't make it start again when the key is lifted. I know how to implement the onkeyup function (onkeyup = function();) but I don't know how to add it to my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 240);
}
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]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keyup");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
}
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
myGamePiece.gravity = 0.1;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -2;
}
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 2;
}
if (myGameArea.keys && myGameArea.keys[38]) {accelerate(-0.2)}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
</body>
</html>
This is only a small portion of the code. If anyone would like the full amount, comment below to tell me, please. Thanks for your help!
Some issues:
In your keyup event handler, you have:
myGameArea.keys[e.keyCode] = (e.type == "keyup");
But this will set the property value to true. You want false, so just do:
myGameArea.keys[e.keyCode] = false;
(BTW, this error was not there in one of your previous question versions, where you had (e.type == "keydown").
You can also simply set to true in the keydown handler (but there was no error there).
Secondly, the gravitySpeed keeps increasing even when you hit the bottom. This will make that value incredible great, and the counter accelaration when pressing the up key will not have any visible effect, unless you wait long enough. Instead, reset `gravitySpeed here::
this.y = rockbottom;
this.gravitySpeed = 0; // <----
See it run:
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 240);
}
var myGameArea = {
canvas: document.createElement("canvas"),
keys: [], // <--- just initialise here
start: function() {
window.focus();
this.canvas.width = 480;
this.canvas.height = 180;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,
document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys[e.keyCode] = true; // <---
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = false; // <---
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0; // <----
}
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
myGamePiece.gravity = 0.1;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -2; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 2; }
if (myGameArea.keys && myGameArea.keys[38]) {accelerate(-0.2)}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
window.onload = startGame;
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
I am currently creating a Snake Game in html and java script and i am having difficulties creating a collision where the snake (known as 'myGamePiece' in code)(green block)is not colliding with the obstacle (known as 'myObstacle' in code)(red block) and adding 5 extra blocks to the snake. How could i resolve this issue?
I have tried implementing and editing other pieces of code into my game and have been using the W3 schools game tutorial as part of a guide for my game but it doesn't provide or give a clear solution as what i could for my solution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #000000;
background-color: #000000;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(20, 20, "green", 10, 120);
myObstacle = new component(20, 20, "red", 300, 120);
myGameArea.start();
}
//Creates the Game Canvas:
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 900;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
//create the movement with the KeyBoard Arrows:
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
</script>
</body>
</html>
I expect the output to be that when the Game piece collides with the obstacle, 5 more green blocks are added to the end of the game piece, but nothing happens when it collides together.
I created simple function checkCollision() I suggest you to improve it and calculate if there is collision of object given in parameters and then return true, and handle collision in another function.
In that way you will be able to use the same function to check collision with other objects and don't need to rewrite it.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #000000;
background-color: #000000;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(20, 20, "green", 10, 120);
myObstacle = new component(20, 20, "red", 300, 120);
myGameArea.start();
}
//Creates the Game Canvas:
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 900;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
//create the movement with the KeyBoard Arrows:
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
checkCollision(); //check collision
}
function checkCollision()
{
if(Math.abs(myGamePiece.x - myObstacle.x) < myGamePiece.width) //if difference of X of 2 objects is less than with of object, you can replace it with your desired value
if(Math.abs(myGamePiece.y - myObstacle.y) < myGamePiece.height) //the same for the height
console.log("collision"); // handle collision here
}
startGame();
</script>
</body>
</html>
if you got questions don't hesitate to ask
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am creating a platformer in javascript, and I am making a gravity sytem on it. What happens is that gravity is reduced when the player presses the up arrow key. The problem is that the user can press the up arrow multiple times and jump whilst already jumping. Any way to sort this out?
Here is my code:
<!DOCTYPE>
<html>
<head>
<style>
canvas {
border: 1px solid #000000;
background-color: rgb(0, 200, 200);
}
</style>
</head>
<body onload = "startGame()">
<canvas id="myCanvas" width="750" height="300">
<script>
var myGamePiece;
var floor;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 230);
floor = new component(750, 10, "green", 0, 260);
}
var myGameArea = {
canvas : document.getElementById('myCanvas'),
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]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height - 10;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
}
function updateGameArea() {
myGameArea.clear();
floor.update();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {
myGamePiece.speedX = -2.5;
}
if (myGameArea.keys && myGameArea.keys[39]) {
myGamePiece.speedX = 2.5;
}
if (myGameArea.keys && myGameArea.keys[38]) {
accelerate(-0.2)
} else{
accelerate(0.1)
}
if (myGameArea.keys && myGameArea.keys[40]) {
myGamePiece.speedY = 2.5;
}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
</canvas>
</body>
</html>
You only need to check myGamePiece.y >=230 before accelarting
I have changed only two things in your code and it works fine
if (myGameArea.keys && myGameArea.keys[40] && myGamePiece.y >= 230) last if block of your function updateGameArea()
Second Last if block of your updateGameArea()
if (myGameArea.keys && myGameArea.keys[38]) {
if(myGamePiece.y >= 230) accelerate(-0.2)
}
var myGamePiece;
var floor;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 230);
floor = new component(750, 10, "green", 0, 260);
}
var myGameArea = {
canvas : document.getElementById('myCanvas'),
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]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height - 10;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
}
function updateGameArea() {
myGameArea.clear();
floor.update();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {
myGamePiece.speedX = -2.5;
}
if (myGameArea.keys && myGameArea.keys[39]) {
myGamePiece.speedX = 2.5;
}
if (myGameArea.keys && myGameArea.keys[38]) {
if(myGamePiece.y >= 230) accelerate(-0.2)
} else{
accelerate(0.1)
}
if (myGameArea.keys && myGameArea.keys[40] && myGamePiece.y >= 230) {
myGamePiece.speedY = 2.5;
}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
<body onload = "startGame()">
<canvas id="myCanvas" width="750" height="300">
Hope it helps
I tried making a game but I can't the "you died" symbol to work. I don't know how to use JavaScript to create my text inside the canvas.
Also, is there a way to create a myBlockPad variable that stops you from going through it but still lets you move elsewhere?
var myGamePiece;
var myObstacle;
var myBlockPad;
function startGame() {
myGamePiece = new component(40, 40, "#00ff00ff", 50, 140);
myObstacle = new component(10, 200, "#cf0000ff", 300, 120);
myBlockPad = new component(40, 80, "#7e3f00", 0, 120);
myGameArea.start();
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function() {
this.canvas.width = 560;
this.canvas.height = 320;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function(e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function(e) {
myGameArea.key = false;
})
},
clear: function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function() {
clearInterval(this.interval);
document.createElement("/* this is where the game over text goes*/").innerHTML;
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.update();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
}
if (myGameArea.key && myGameArea.key == 37 || myGameArea.key && myGameArea.key == 65) {
myGamePiece.speedX = -3;
} else if (myGameArea.key && myGameArea.key == 39 || myGameArea.key && myGameArea.key == 68) {
myGamePiece.speedX = 3;
} else if (myGameArea.key && myGameArea.key == 38 || myGameArea.key && myGameArea.key == 87) {
myGamePiece.speedY = -3;
} else if (myGameArea.key && myGameArea.key == 40 || myGameArea.key && myGameArea.key == 83) {
myGamePiece.speedY = 3;
} else {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
myGamePiece.update();
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
</body>
</html>
ctx.fillText(text,xAxis,yAxis);
E.g. ctx.fillText("You died",50,50);
Change colour is ctx.fillStyle="red";
Change font and size = ctx.font="30px Arial";