Arhiv Značk: aninacija

Padanje kroglice in njen odboj od sten

Objavljeno ,
Odgovori

Na spletni strani lahko, če uporabimo Javascript, kažemo tudi grafiko in celo kaj animiramo. Tule primer sposojene kode iz spletnega učbenika Javascripta, ki sem jo priredil za svoje potrebe.

Koda je naslednja:

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; charset=UTF-8; initial-scale=2.0"/>
<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<p>
Kažem kroglico, ki se odbija od tal in sten.
<body>
<p><button class="button" onclick ="startGame();">Klikni tu za začetek</button>
 
<script>
var mySound;
var myGamePiece;

function startGame() {
    myGamePiece = new component(10, "red", 5, 5);
 //   mySound=new sound("bounce.mp3");
    myGameArea.start();
}


var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 680;
        this.canvas.height = 470;
	this.canvas.style="border:10px solid #0000FF";
        this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);  
            this.interval = setInterval(updateGameArea, 20);
	        
    },	
     stop : function() {
        clearInterval(this.interval);
    },   
    clear : function() {
   this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);     
    }
}

function component(radij, color, x, y, type) {
	
    this.type = type;
    this.r = radij;
    this.x = x;
    this.y = y;    
    this.speedX = 3;
    this.speedY = 0;    
    this.gravity = 0.1;
    this.gravitySpeed = 0;
    this.bounce = 0.98;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.arc(this.x, this.y, this.r,0,2.1*Math.PI);
        ctx.fill();
        ctx.stroke()
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.speedX=0.9995*this.speedX;
	this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.r;
	var rob =  myGameArea.canvas.width;      
	if ((this.y > rockbottom) || (this.y<0)) {
            this.y=rockbottom;
	    //mySound.play();
            this.gravitySpeed = -(this.gravitySpeed * this.bounce);
        }
	if ((this.x > rob-radij) || (this.x<5)) {
	    this.speedX=-this.speedX};
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();
    myGamePiece.update();
}

</script>

</body>
</html>

Z njo dobimo naslednjo animacijo:

biljardPrenos

Z majhno spremembo zgornje kode pa lahko namesto kroglice dobimo prikaz njenega tira:

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; charset=UTF-8; initial-scale=2.0"/>
<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<p>
Kažem tir kroglice, ki se odbija od tal in sten.
<body>
<p><button class="button" onclick ="startGame();">Klikni tu za začetek</button>
 
<script>
var mySound;
var myGamePiece;

function startGame() {
    myGamePiece = new component(0, "white", 5, 5);
 //   mySound=new sound("bounce.mp3");
    myGameArea.start();
}


var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 680;
        this.canvas.height = 470;
	this.canvas.style="border:10px solid #0000FF";
        this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);  
            this.interval = setInterval(updateGameArea, 20);
	        
    },	
     stop : function() {
        clearInterval(this.interval);
    },   
    clear : function() {
   this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);     
    }
}

function component(radij, color, x, y, type) {
	
    this.type = type;
    this.r = radij;
    this.x = x;
    this.y = y;    
    this.speedX = 2;
    this.speedY = 0;    
    this.gravity = 0.1;
    this.gravitySpeed = 0;
    this.bounce = 0.98;
    this.update = function() {
        ctx = myGameArea.context;
        //ctx.beginPath();
        ctx.fillStyle = color;
	//ctx.borderStyle="red";
	//ctx.style.color="blue";
        ctx.arc(this.x, this.y, this.r,0,2.1*Math.PI);
        ctx.fill();
        ctx.stroke()
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.speedX=0.9995*this.speedX;
	this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.r;
	var rob =  myGameArea.canvas.width;      
	if ((this.y > rockbottom) || (this.y<0)) {
            this.y=rockbottom;
	   // mySound.play();
            this.gravitySpeed = -(this.gravitySpeed * this.bounce);
        }
	if ((this.x > rob-radij) || (this.x<5)) {
	    this.speedX=-this.speedX};
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();
    myGamePiece.update();
}

</script>

</body>
</html>
biljard10Prenos