AI game creator

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

No:19576

←

Prev Next

→

猫ゆらゆら
Developer User3783｜Date and time 23/10/5 0:33:03
Build time 11.583 sec｜Game capacity 1.702KB｜

Script

了解です。以下にプログラムの例を示します。

このプログラムは、キャンバス上で猫の絵文字が左右に移動するゲームです。猫は壁にぶつかると反転します。スマートフォン上で操作することが前提となっています。以上のプログラムを1枚のHTMLファイルとして実装し、scriptタグに囲ってください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。以下にプログラムの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>猫ゆらゆら</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

var cat = new Image();
            cat.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/google/241/cat-face_1f431.png";

var x = canvas.width / 2;
            var y = canvas.height / 2;

var dx = 2;
            var dy = 2;

function drawCat() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(cat, x, y, 64, 64);
            }

function updateCat() {
                x += dx;
                y += dy;

if (x + 64 > canvas.width || x < 0) {
                    dx = -dx;
                }
                if (y + 64 > canvas.height || y < 0) {
                    dy = -dy;
                }
            }

function gameLoop() {
                drawCat();
                updateCat();
                requestAnimationFrame(gameLoop);
            }

gameLoop();
        };
    </script>
</body>
</html>
```