0

我有一个问题，我已经在 javascript 中为蛇游戏创建了多个文本和一个画布文件，但是当我在浏览器中（使用 Firefox）加载它时，屏幕上的分辨率会改变蛇游戏，所以我创建了这个：

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

我可以使用css移动这个脚本并标记类以使脚本在浏览器的左侧运行如果是这样我如何在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>

的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%;
}
4

0 回答 0