スネークウェブゲームのコード
<スタイル>
::選択 {
色:#FFFFFF;
背景:透明;
}
::-moz-selection {
色:#FFFFFF;
背景:透明;
}
* {
マージン:0;
パディング:0;
フォントファミリー:"VT323";
}
ボディ{
背景色:#000000;
}
.wrap {
マージン左:自動;
margin-right:自動;
}
ヘッダー {
幅:340ピクセル;
フォントサイズ:0;
}
キャンバス{
表示:なし;
ボーダースタイル:ソリッド;
ボーダー幅:10px;
境界線の色:#FFFFFF;
}
キャンバス:フォーカス{
概要:なし;
}
/* トップスタイル */
h1 {
表示:インラインブロック;
幅:100ピクセル;
フォントサイズ:32px;
色:#FFFFFF;
}
.スコア{
表示:インラインブロック;
幅:240ピクセル;
フォントサイズ:20px;
色:#FFFFFF;
text-align:right;
}
.score_value {
フォントサイズ:継承;
}
/* すべての画面のスタイル */
#ゲームオーバー a,#設定 a,#メニュー a {
表示:ブロック;
}
#gameover a,#a:hover の設定,#menu a:hover {
カーソル:ポインタ;
}
#gameover a:hover::before,#set a:hover::before,#menu a:hover::before {
コンテンツ:">";
margin-right:10px;
}
/* メニュー画面のスタイル */
#メニュー{
表示:ブロック;
幅:340ピクセル;
パディングトップ:95px;
パディングボトム:95px;
フォントサイズ:40px;
マージン左:自動;
margin-right:自動;
text-align:center;
色:#FFF;
}
#メニュー h2 {
-webkit-animation:logo-ani 1000ms リニア無限;
アニメーション:logo-ani 1000ms リニア無限;
margin-bottom:30px;
}
#メニューa {
フォントサイズ:30px;
}
@-webkit-keyframes logo-ani {
50% {
-webkit-transform:scale(1.3,1.3);
}
100% {
-webkit-transform:scale(1.0,1.0);
}
}@keyframes logo-ani {
50% {
変換:スケール(1.3,1.3);
}
100% {
変換:スケール(1.0,1.0);
}
}/* ゲームオーバー画面のスタイル */
#ゲームオーバー {
表示:なし;
幅:340ピクセル;
パディングトップ:95px;
パディングボトム:95px;
マージン左:自動;
margin-right:自動;
text-align:center;
フォントサイズ:30px;
色:#FFF;
}
#ゲームオーバー p {
margin-top:25px;
フォントサイズ:20px;
}
/* 設定画面のスタイル */
#setting {
表示:なし;
幅:340ピクセル;
マージン左:自動;
margin-right:自動;
パディングトップ:85px;
パディングボトム:85px;
フォントサイズ:30px;
色:#FFF;
text-align:center;
}
#setting h2 {
margin-bottom:15px;
}
#setting p {
margin-top:10px;
}
#設定入力 {
表示:なし;
}
#ラベルの設定 {
カーソル:ポインタ;
}
#setting input:checked + label {
背景色:#FFF;
色:#000;
}
</スタイル>
</頭>
<body><script src="/demos/googlegg.js"></script>
<ヘッダークラス="ラップ">
<h1>ヘビ</h1>
<p class="score">スコア: <span id="score_value">0</span></p>
</ヘッダー>
<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>
<!-- ゲームオーバー画面 -->
<div id="ゲームオーバー">
<h2>ゲームオーバー</h2>
<p><span style="background-color: #FFFFFF; color: #000000">スペース</span>を押します。 </p>
を始めるには
<a id="newgame_gameover">新しいゲーム</a>
<a id="setting_gameover">設定</a>
</div>
<!-- 設定画面 -->
<div id="設定">
<h2>設定</h2>
<a id="newgame_setting">新しいゲーム</a>
<p>速度:
<input id="speed1" type="radio" name="speed" value="120" チェック/>
<label for="speed1">遅い</label>
<input id="speed2" type="radio" name="speed" value="75" />
<label for="speed2">ノーマル</label>
<input id="speed3" type="radio" name="speed" value="35" />
<label for="speed3">高速</label>
</p>
セクサネージ ウェブ 小型コードは、見た目が楽しい、一口一口のオンライン ネットワーク 小型ケーブルです。
このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロード サイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn
関連記事
25 Jan 2022
新年を楽しく迎えましょう! 2022 年の新年が近づいています。今年は仁寧の寅年です。さまざまな虎の画像を使用した製品が無限に流れています。急いでウェブサイトに虎の要素を追加して、楽しく寅年を迎えましょう。以下の PHP 中国語 Web サイトでは、寅年の祝福を送るための特殊効果コード、寅年の描画アニメーション、その他の特殊効果コードを含む、最新の寅年特殊効果コードをまとめて推奨しています。
10 Jun 2024
リーグ・オブ・レジェンドのモバイルゲームにおけるフレイム・ドラゴン・セティの特殊効果はどうですか?このスキン モードは間もなくリリースされ、多くのプレイヤーがその特殊効果を楽しみにしているはずです。そのため、必要に応じて、編集者がリーグ オブ レジェンド モバイル ゲームのドラゴン マスター フレイム ドラゴン セティの特殊効果を共有します。見てみることができます。 「リーグ・オブ・レジェンド モバイルゲーム」 ドラゴンマスター フレイムドラゴン セティの特殊効果を共有 1. 通常攻撃の特殊効果。 2. スキルの特殊効果が 1 つあります。 3.第二スキルの特殊効果。 4. 3つのスキル特殊効果。 5.究極技の特殊効果。 6. パッシブスキルの特殊効果。
21 Dec 2021
クリスマスが近づいてきました、私たちプログラマもロマンチックになるべきです~PHP中国語ウェブサイトは、さまざまなクリスマスツリーの特殊効果素材やサンタクロースのアニメーションの特殊効果を含む、あらゆる種類の絶妙で実用的なクリスマスの特殊効果コードを共有します。次の雪素材の特殊効果、など、記事内の対応するリンクをクリックしてオンラインでプレビューし、無料でダウンロードしてください。
02 Jul 2024
WeChat の全画面特殊効果の暗号語は何ですか? WeChat の全画面特殊効果コードワードには 2 種類あり、1 つは休日中にのみトリガーされる特殊効果、もう 1 つはいつでもトリガーできる特殊効果です。 WeChat の全画面特殊効果のコード ワードが何なのかをまだ知らない人もたくさんいます。ここでは、WeChat の全画面特殊効果のコード ワードの完全なリストをまとめました。 WeChat の画面を埋める特殊効果の暗号語は何ですか? 1. 鶏ドラムスティック雨のパスワード: 鶏ドラムスティックを追加します。 2. キス雨のパスワード: モモダ、XOXO3、スター雨のパスワード: miss u、miss 4. ケーキの雨の合言葉:誕生日、ハッピーバースデーフェスティバル中 効果的な炎:赤くて明るい爆竹:ハッピーニューイヤー 黄色い星:縁起の良い星が明るく輝く、幸運の星が明るく輝く オレンジ:幸運、幸運、すべてがうまくいく、すべてがうまくいきます 魚: 毎年十分すぎるくらい、毎年魚とリンゴ
16 May 2016
この記事では主に jQuery の携帯電話ダイヤル インターフェイスの特殊効果を紹介します。全体的な特殊効果は非常にリアルで自然なので、必要な方はぜひ参考にしてください。
16 May 2016
ポップアップ広告特殊効果のコード (1 つの IP は 1 回のみポップアップします)
Hot tools Tags
Hot Tools
jQuery+Html5で美しい告白アニメーションコードを実現
jQuery + Html5 は美しい告白アニメーション コードを実装しており、アニメーション効果は素晴らしく、プログラマーの告白には必須です。
カップルのロマンチックな告白 js特撮コード
カップルのロマンチックな告白用の JS 特殊効果コードです。このような特殊効果は、結婚式の写真のウェブサイトで使用したり、個人のウェブサイトに配置したりできます。また、優れた特殊効果です。PHP 中国語 Web サイトのダウンロードを推奨します。
シンプルなJS愛の告白アーティファクト
シンプルなネイティブ JS 愛の告白アーティファクト
BunkerのHTML5パーティクルアニメーション表現効果
Bunker の HTML5 パーティクル アニメーション表現特殊効果コード。アニメーション特殊効果テキストはコード内で変更でき、テキスト入力をカスタマイズできるページを作成できます。非常に人気があるはずです。この HTML5 特殊効果は非常に美しいです。
jQuery レスポンシブ バックグラウンド ログイン インターフェイス テンプレート
jQuery レスポンシブ バックエンド ログイン インターフェイス テンプレート HTML ソース コード. ログイン ページは jQuery を使用してフォームを検証し、ユーザー名とパスワードが要件を満たしているかどうかを判断します. 通常、ログイン ページは企業 Web サイトまたはモール Web サイトで使用する必要があるページです. レスポンシブ バックエンドページ、ブラウザが拡大または縮小すると、ブラウザに応じて背景の画像のサイズが変更されます。 PHP中国語サイトはダウンロードをオススメします!