I have a problem i have create multiple texts and a canvas file for the snake game in javascript however when i load it all in the browser (using Firefox) the resolution on my screen changes the snake-game and so i created this:
<script type="text/javascript" src="snake.js" class="snake">
var canvas=document.getElementById('myCanvas');
</script>
can i move this script using css and tagging the class to make the script run on the left side of my browser if so how do i define the class in css?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="textrotate.css">
</head>
<body>
<p class="warning">Warning do not press multiple keys simultaneous if you do you will lose and have to start from the beginning.</p>
<p class="warning2">The right side and the bottom u can go through however you might lose your snake (possible to turn back) and the<br>left and the upper side touch them and its game over.</p>
<p class="enjoy">Good luck and enjoy the 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%;
}