javascript - how to setting fixed position of canvas using css? -


i have problem have create multiple texts , canvas file snake game in javascript when load in browser (using firefox) resolution on screen changes snake-game , created this:

    <script type="text/javascript" src="snake.js" class="snake">     var canvas=document.getelementbyid('mycanvas');     </script> 

can move script using css , tagging class make script run on left side of browser if how define class in css?

    <!doctype html>     <html>     <head>     <link rel="stylesheet" type="text/css" href="textrotate.css">      </head>     <body>     <p class="warning">warning not press multiple keys simultaneous if lose , have start beginning.</p>      <p class="warning2">the right side , bottom u can go through might lose snake (possible turn back) , the<br>left , upper side touch them , game over.</p>      <p class="enjoy">good luck , enjoy game!!!</p>      <pre class="normal">     snake     </pre>     <div>     <pre class="rotate">     snake     </pre>      <pre class="rotate2">     snake     </pre>     </div>     <canvas id="canvas" width="650" height="450" style="border:1px solid #ccff00;">     </canvas>       <script src="jquery.min.js" type="text/javascript"></script>       <audio id="audio_1" hidden="true" autoplay="autoplay" controls preload> <source src="sound.wav"> <source src="sound.mp3"> <source src="sound.ogg">     </audio>     <audio id="audio_2" controls preload hidden="true" > <source src="sound.wav"> <source src="sound.mp3"> <source src="sound.ogg">     </audio>      <script type="text/javascript"> document.getelementbyid('audio_1').addeventlistener('ended', function(){     this.currenttime = 0;     this.pause();     document.getelementbyid('audio_2').play(); }, false);  document.getelementbyid('audio_2').addeventlistener('ended', function(){     this.currenttime = 0;     this.pause();     document.getelementbyid('audio_1').play(); }, false);      </script>      <script type="text/javascript" src="snake.js" class="snake">     var canvas=document.getelementbyid('mycanvas');        </script>      </body>      </html> 

the css:

    pre.rotate2{ transform:rotate(90deg); -webkit-transform:rotate(90deg);     display:block; font-size:82%; color:yellow; position:fixed; bottom:300px; right:-110px; }      pre.rotate{ transform:rotate(270deg); -webkit-transform:rotate(270deg);    display:block; font-size:82%; color:lime; position:fixed; bottom:290px; right:5px; }      pre.normal{ float:left; color:cyan; }      body{ background-color: black; }      p.warning{ color: #ff66cc; position:fixed; font-size: 90%; bottom:16%; left:0.3%; }      p.warning2{ color: #ff66cc; position:fixed; font-size: 90%; bottom:12%; left:0.3%; }      p.enjoy{ color: #ff66cc; position:fixed; bottom:10%; left:0.3%; } 


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -