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>

Grafika na spletni strani, Javascript in HTML5

Matematik želi prikazati matematično grafiko na zaslonu, po možnosti na spletni strani in -še bolj zaželjeno – po možnosti dinamično. Na začetku je te prikaze sprogramiral sam. Nato pa je bila v preteklih desetletjih razvita vrsta orodij, od tistih za prikaz grafov do orodij za modeliranje, ki se uporabljajo namensko npr. v strojništvu, gradbeništvu.  Programiranje je domala izginilo, sploh pa iz šol.  Slovenske firme danes vneto iščejo programerje, v glavnem brezuspešno. Nekatere jih morajo celo uvažati iz vzhodnih držav.

Sam sem se z dijaki precej ukvarjal z računalniško grafiko, najprej v strem dobrem Turbo Pascalu v operacijskem sistemu DOS, pod Okni pa v nadaljevanju Pascala  – programu Delphi. Dijaki so znali napisati samostojne grafične aplikacije, pretežno simulacije fizikalnih pojavov, in ti programi so se preko orodja Activex dali zaganjati tudi preko spleta. Napredno za tiste čase ob koncu tisočletja, a tudi povezano s težavami. Brskalnik je moral imeti varnostne nastavitve znižane, Delphi pa je bil plačljiv program in je kar nenadoma izginil, skupaj s svojo različico Kilix za Linux.

Sredi prejšnjega desetletja sem na nekem seminarju opazoval predavatelja, kako uspešno je zganjal grafiko na spletni strani z običajnim Javascriptom. Prikaz mi je bil zelo všeč, dosti manj pa koda. Sem pač scrkljan tako od Pascala in Delphija, da ko slišim C++, skoraj dobim ošpice, največ, kar lahko še prezvečim, je Python. Poleg tega se mi je zdelo, da uporablja trike iz CSS. Kljub temu sem napisal nekaj kratkih programov v Javascriptu, pa jih tudi hitro pozabil zaradi obilice drugega dela.

Potem pa mi je prišel v roke standard zadnje verzije HTML-ja, torej HTML 5.0. Podpirajo ga vsi moderni brskalniki, pa tudi mobilne priprave. Postal sem pozoren na njegovo podporo grafiki in sklenil sem, da spet poskusim. Tole je (s pomočjo priročnika seveda) pravkar ratalo. Ni bogvekaj in nič ne miga, je pa dokaz, da se da:

<html>
<head>
	<style type="text.css">
		canvas {border: 1px solid black}
	</style>
</head>
<body>
<h3>Moja prva grafika v HTML5</h3>
<canvas id="mycanvas" width="800" height="500"></canvas>
<script language ="Javascript">
var canvas = document.getElementById('mycanvas');
var c = canvas.getContext('2d');
c.fillStyle="red";
c.fillRect(0,0,20,10);

c.lineWidth=1;
c.beginPath();
c.moveTo(0,100);
c.lineTo(201,100);
c.stroke()

c.beginPath();
c.moveTo(100,0);
c.lineTo(100,120);
c.stroke()

for (i=-100;i<100;i++)
{
c.fillStyle="black";
c.lineColor="red";
c.lineWidth=3;
c.beginPath();
c.moveTo(i+100,100-i*i/100);
c.lineTo(i+101,100-i*i/100);
c.stroke()
}
</script>

</body>
</html>

zgornja koda  nam da naslednji graf kvadratne funkcije:

HTML5 ima navo značko platno <canvas>, na katerega lahko rišemo na spletni strani. Canvas je poznal tudi Delphi, zato  je pojem poznan. Nanj rišemo z ukazi iz Javascripta, kot so drawRect, fill in drawImage.

 

Moja prva grafika v HTML5


Osnove Javascripta (1)


Zgornji pozdrav smo dosegli z naslednjo kodo jezika Javascript :

<script type="text/javascript">
name=window.prompt('Kako ti je ime: ','');
document.write('Zdravo '+name+ ' !');
</script>

Prva in zadnja vrstica sta obvezni, saj brskalniku povesta, da se bo ukvarjal z Javascriptovo kodo. V drugi vrstici dobi spremenljiivka name vrednost, ki jo vnesemo s tipkovnico, tretja vrstica pa pozdrav izpiše.