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