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

No:45532

←

Prev Next

→

Big cat vs small cat
Developer User19614｜Date and time 24/2/20 19:58:07
Build time 8.473 sec｜Game capacity 2.652KB｜

Script

Big Cat vs Small Cat

←

Prev　Next

→ 　

Back　

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

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

<html>
    <head>
        <title>Big Cat vs Small Cat</title>
    </head>
    <body>
        <h1>Big Cat vs Small Cat</h1>
        
        <canvas id="gameCanvas" width="800" height="600"></canvas>
        
        <script>
            const canvas = document.getElementById("gameCanvas");
            const ctx = canvas.getContext("2d");
            
            const bigCatWidth = 100;
            const bigCatHeight = 100;
            let bigCatX = canvas.width / 2 - bigCatWidth / 2;
            let bigCatY = canvas.height / 2 - bigCatHeight / 2;
            
            const smallCatWidth = 50;
            const smallCatHeight = 50;
            let smallCatX = Math.random() * (canvas.width - smallCatWidth);
            let smallCatY = Math.random() * (canvas.height - smallCatHeight);
            
            function drawBigCat() {
                ctx.fillStyle = "orange";
                ctx.fillRect(bigCatX, bigCatY, bigCatWidth, bigCatHeight);
            }
            
            function drawSmallCat() {
                ctx.fillStyle = "gray";
                ctx.fillRect(smallCatX, smallCatY, smallCatWidth, smallCatHeight);
            }
            
            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawBigCat();
                drawSmallCat();
            }
            
            function update() {
                draw();
                
                if(bigCatX < smallCatX + smallCatWidth && 
                   bigCatX + bigCatWidth > smallCatX && 
                   bigCatY < smallCatY + smallCatHeight && 
                   bigCatY + bigCatHeight > smallCatY) {
                    alert("Big Cat caught the Small Cat!");
                    smallCatX = Math.random() * (canvas.width - smallCatWidth);
                    smallCatY = Math.random() * (canvas.height - smallCatHeight);
                }
            }
            
            function keyDownHandler(event) {
                switch(event.key) {
                    case "ArrowLeft":
                        bigCatX -= 10;
                        break;
                    case "ArrowRight":
                        bigCatX += 10;
                        break;
                    case "ArrowUp":
                        bigCatY -= 10;
                        break;
                    case "ArrowDown":
                        bigCatY += 10;
                        break;
                }
            }
            
            document.addEventListener("keydown", keyDownHandler);
            
            setInterval(update, 1000/60);
        </script>
    </body>
</html>