krouzek:class

chodec.js

Chodec = function(herniPlocha){
  /* Pocatecni pozice */
  this.x=200;
  this.y=200;
 
  this.rychlost=0;
  this.uhel=0;
 
  this.mujElement = document.createElement('div');
  this.mujElement.className="chodec";
  herniPlocha.appendChild(this.mujElement);            
 
}
 
Chodec.prototype.vykresli = function(){
 
  //Aktualizuj souradnice  dle rychlosti
  var rychlostX = getXDiff (this.uhel, this.rychlost);   
  var rychlostY = getYDiff (this.uhel, this.rychlost);
  this.x += rychlostX;
  this.y += rychlostY;
 
 
  //Zapis nove souradnice          
  this.mujElement.style.top=this.y+"px";
  this.mujElement.style.left=this.x+"px";
 
  this.mujElement.style.transform="rotate("+this.uhel+"deg)";
 
}
 
 
/* Pomocne funkce */
function getXDiff(angle,velocity){
var angleRad=((angle+90)/180)*Math.PI;
return Math.cos(angleRad)*velocity;
}
 
 
function getYDiff(angle,velocity){
var angleRad=((angle+90)/180)*Math.PI;
return Math.sin(angleRad)*velocity;
}

index.html

<!DOCTYPE html>
<html lang="cs">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
 
<style>
/* Vzhled */
.chodec {position:absolute;width:10px;height:10px;background-color:black}
</style>
</head>
 
<body>
<script src="chodec.js"></script> 
 
 
 
<div id="hra">
 
</div>   
 
 
<script>
/* <![CDATA[ */
 
document.body.onload = function(){
 
  /* Vytvoreni jednoho auticka */
  var herniPlocha = document.getElementById("hra");
  var chodec= new Chodec(herniPlocha);
 
 
  //Herni loop - vykreslovací funkce 
  var vykresliVse = function(){
      chodec.vykresli();
  }
 
  //Herni loop
  setInterval(vykresliVse, 16.6);
 
 }
/* ]]> */
</script> 
 
</body>
</html>