I am making an animation with canvas, I have managed to make the image (ship.png) to be controlled with the up, right, down and left keys. But I have problems with the bounce effect when reaching the limit of the screen. Could you help me if you could give me some suggestions on how to do it please.
I have tried to make the bounce effect in this part of the code: this.displacement = function(e)
I was specifically thinking of putting an OR conditional here: (e.keyCode == '38') but I can't think of a way to do it.
This is the part of the code that I am doing.
ship.png
const CREATION = 100;
const PRECARGE = 200;
const START = 300;
class spaceship{
constructor(x, y,image){
this.x = x;
this.y = y;
this.image=image;
this.speed = 20;//initial speed, before any key
this.get_direction=null;
this.set_direction=null;
}
getX() {
return this.x;
}
getY(){
return this.y;
}
getSpeed(){
return this.speed;
}
setX(x){
this.x = x;
}
setY(y) {
this.y = y;
}
setSpeed(speed){
this.speed=speed;
}
setimage(image) {
this.image = image;
}
getimage() {
return this.image;
}
draw(ctx) {
ctx.drawImage(this.getimage(),0,0,100,50,this.getX(),this.getY(),100,50);
}
}//end of spaceship class
function Animation(){
this.state = CREATION;
this.images = new Array();
this.canvas = document.getElementById("canvas");
this.context = this.canvas.getContext("2d");
this.aux_canvas = document.createElement("canvas"); // "canvas" refer to the <canvas> tag.
this.aux_context = this.aux_canvas.getContext("2d")
this.canvas.width=document.body.clientWidth; //current window size
this.canvas.height=document.body.clientHeight;
this.aux_canvas.width=document.body.clientWidth;
this.aux_canvas.height=document.body.clientHeight;
this.ship = null;
var object=this;
this.loadImages = function(){
this.images["ship"] = new Image();
this.images["ship"].name="ship";
this.images["ship"].src= "ship.png";
}
this.update = function(){
/*
context.clearRect(x,y,width,height);
*/
this.aux_context.clearRect(0, 0, this.canvas.width, this.canvas.height); //clean the canvas of ships
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); // in both canvases the background is not erased
this.ship.draw(this.aux_context);
this.context.drawImage(this.aux_canvas,0,0,this.aux_canvas.width,this.aux_canvas.height,0,0,this.canvas.width,this.canvas.height);
this.ship.set_direction(this.ship.get_direction()+(this.ship.getSpeed()));
}
this.displacement = function(e) {
e = e || window.event;
if (e.keyCode == '38'|| e.keyCode == '40') {
//up
object.ship.set_direction=object.ship.setY;
object.ship.get_direction=object.ship.getY;
if (e.keyCode == '38') //up
object.ship.setSpeed(-20);
else//down
object.ship.setSpeed(20);
}
else if (e.keyCode == '37' || e.keyCode == '39') {
object.ship.set_direction=object.ship.setX;
object.ship.get_direction=object.ship.getX;
if (e.keyCode == '37') //left
object.ship.setSpeed(-20);
else//right
object.ship.setSpeed(20);
}
}
this.executeMachineStates = function(){
var imagesUploaded=true;
console.log("state: I enter "+object.state);
if (object.state == CREATION) {
object.loadImages();
object.state = PRECARGE;
setTimeout(object.executeMachineStates, 100);
console.log("state: CREATION");
} else {
if(object.state==PRECARGE){
console.log("state: PRECARGE");
for(var i=0;i<object.images.length;i++)
if(object.images[i].complete!=true)
imagesUploaded=false;
if(imagesUploaded==true){
//200 and 100 is the ship's initial position
object.ship = new spaceship(200, 100,object.images["ship"]);
object.ship.get_direction=object.ship.getX; //initial movement
object.ship.set_direction=object.ship.setX; //on x-axis
object.state = START;
document.onkeydown = object.displacement;
}
setTimeout(object.executeMachineStates, 100);
}else{
if(object.state==START){
console.log("state: START de la Animation");
object.update();
setTimeout(object.executeMachineStates, 100);
}
}
}
}
}//end of class/function Animation
animation= new Animation();
animation.executeMachineStates();
body {
background-image:url("space.png");
background-repeat: no-repeat;
background-size: 100%;
}
<html>
<head>
<title>Martians</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin: 0;padding: 0">
<canvas id="canvas">
</canvas>
<script src="script.js"></script>
</body>
</html>
