Animal School Simulator Sequel a's game

Click here for free DL of the app version that can save data.

No:3050

1194

←

Prev Next

→

Animal School Simulator Sequel a
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/23 15:09:00
Build time 21.847 sec｜Game capacity 2.519KB｜

Script

ライオンの数: 0

＊説明上のコードは、スマホで遊べるライオンのゲームアプリを実装したものです。 HTMLファイルを1つだけ使用し、JavaScriptを含んでいます。画像の読み込み完了後、キャンバスに画像が表示されます。ライオンを追加すると、ライオンの数が表示されます。ゲームとしては、ライオンを追加して数をカウントするという簡単なものです。スマホで遊ぶ前提のため、キャンバスのサイズは画像のサイズに合わせています。また、絵文字を使用しています。🦁はライオンを表しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>どうぶつスクールシミュレーター続編アップデート</title>
    <style>
        #canvas {
            width:100%;
            height:100%;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

// 画像を読み込んでリサイズする関数
        function loadImage(imageUrl, callback) {
            const img = new Image();
            img.onload = function() {
                // 画像をキャンバスのサイズにリサイズする
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                callback();
            }
            img.src = imageUrl;
        }

// ライオンのマシマシゲームクラス
        class LionGame {
            constructor() {
                this.lionCount = 0;
                this.addLionButton = document.getElementById("add-lion");
                this.lionCountText = document.getElementById("lion-count");
                this.addLionButton.addEventListener("click", () => {
                    this.lionCount++;
                    this.lionCountText.textContent = "ライオンの数: " + this.lionCount;
                });
            }
        }

// 実行
        const lionGame = new LionGame();
        loadImage("lion.jpg", () => console.log("画像読み込み完了"));
    </script>
    
    <div>
        <button id="add-lion">ライオンを追加する</button>
        <p id="lion-count">ライオンの数: 0</p>
    </div>
</body>
</html>

＊説明
上のコードは、スマホで遊べるライオンのゲームアプリを実装したものです。
HTMLファイルを1つだけ使用し、JavaScriptを含んでいます。

画像の読み込み完了後、キャンバスに画像が表示されます。
ライオンを追加すると、ライオンの数が表示されます。

ゲームとしては、ライオンを追加して数をカウントするという簡単なものです。

スマホで遊ぶ前提のため、キャンバスのサイズは画像のサイズに合わせています。

また、絵文字を使用しています。🦁はライオンを表しています。