ホームページ > 毎日のプログラミング > HTMLの知識 > ネイティブJSで白いブロックを踏まないゲームを実装(2)

ネイティブJSで白いブロックを踏まないゲームを実装(2)

藏色散人
リリース: 2021-01-11 11:06:34
オリジナル
7055 人が閲覧しました

前回の記事で、「白いブロックを踏まないでください」ミニゲームをネイティブ JS で実装する方法を簡単に共有して紹介しました。そのため、このゲームの具体的な実装アイデアについてよくわからない友人もいるかもしれません。

ネイティブJSで白いブロックを踏まないゲームを実装(2)

それでは、「白いブロックを踏まないでください」ゲームのソースコードに基づいて、具体的な実装方法を段階的に詳しく紹介します。

ソースコード参照: "白いブロックを踏まないゲームのネイティブ JS 実装 (1)"

まず、次のことを理解してください。ゲームソースコード内の HTML の全体的なフレームワーク構造。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>别踩白块小游戏</title>
</head>
<style...>
<body>
<div class="box">
    <div id="cont">
        <div id="go">
            <span>点击开始</span>
        </div>
        <div id="main"></div>

    </div>
    <div id="count"></div>
</div>
</body>
<script...>
</html>
ログイン後にコピー

上記のコードでは、本文に大きな div (ボックス) が作成されます。この div には 2 つの小さな div (id は cont と id は count) が含まれています。ゲームアニメーションでは、「カウント」の部分はゲームカウントを表示するために使用されます。

「カウント」部分は次のようになります:

ネイティブJSで白いブロックを踏まないゲームを実装(2)

続いて、さらに 2 つの div があります (ID は go と main)。

ネイティブJSで白いブロックを踏まないゲームを実装(2)

ネイティブJSで白いブロックを踏まないゲームを実装(2)

ネイティブJSで白いブロックを踏まないゲームを実装(2)

ゲーム コンテンツ領域は、実際には main という ID を持つ div にあります。クリックしてゲームを開始すると、単一の行ではなく、コンテンツ領域全体が移動します。

上の図から、「go」領域と「main」領域が同じサイズであることがわかります。ここでは、「go」と「main」が同時に存在するように main を初期化します。 , mainにtop属性を追加します。top属性を変更することで、ゲームエリア全体が連続落下する効果が得られます。

ネイティブJSで白いブロックを踏まないゲームを実装(2)

そして、「go」と「main」を同時に設定することで、ゲームの成否(白いブロックがクリックされたかどうか)が決まります。


ネイティブJSで白いブロックを踏まないゲームを実装(2)

長さの理由により、この記事ではまず、「白いブロックを踏まないでください」ゲームの HTML コード部分を紹介します。これも非常に簡単です。したがって、後の記事では、「Don't Step on White Blocks」ゲームの特定のコードを引き続き分析していきます。

以上がネイティブJSで白いブロックを踏まないゲームを実装(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート