Padanje kroglice in njen odboj od sten

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:

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>
Ta vnos je objavil Vinc v Osnove Javascripta, Programiranje in zaznamoval z , , , . Dodaj zaznamek do trajne povezave .

O Vinc

Končal gimnazijo v Črnomlju 1971, pričel honorarno poučevati na tej gimnaziji v šol.letu 1973/74, se v šol. letu 1976/77 zaposlil kot učitelj matematike, leta 1978 diplomiral iz pedagoške matematike pri dr. Niku Prijatelju s temo Galoisova teorija. Na gimnaziji in poklicni kovinarski šoli učil matematiko, fiziko in računalništvo ter informatiko, dokumentaristiko in arhivistiko. Dolgoletni mentor šahovskega, fotografskega, fizikalnega, računalniškega in<a \href{http://www2.arnes.si/48/sscrnomelj/astro.html}{ astronomskega} krožka. Absolvent 3. stopnje pedagoške fizike, v 90. letih član skupine za prenovo gimnazijske fizike, avtor programske opreme za merilno krmilni vmesnik, soavtor učbenikov za gimnazijo Fizika-Mehanika in Fizika-Elektrika. Mentor trinajstim raziskovalnim nalogam v okviru Gibanja Znanost mladini ter trem raziskovalnim nalogam v okviru Krkinih nagrad in številnim tekmovalcem iz logike, matematike, fizike in računalništva. Mentor \href{http://www2.arnes.si/48/ssnmcrnom5/sola/}{2. spletne strani šole}, pobudnik in od 2007 do 2010 urednik spletnih učilnic Srednje šole Črnomelj. Pobudnik šolske Facebook strani. Več najdete na njegovi \href{http://vincenc.petruna.com/}{spletni strani.}

Dodaj odgovor

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja

* Copy This Password *

* Type Or Paste Password Here *

12.938 Spam Comments Blocked so far by Spam Free Wordpress