Little Girl Needs Cuddles's game

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

No:50819

120

←

Prev Next

→

Little Girl Needs Cuddles
Developer User20657｜Date and time 24/3/9 19:12:53
Build time 5.307 sec｜Game capacity 1.619KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Little Girl Needs Cuddles</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

let girlImage = new Image();
        girlImage.src = 'girl.png';

let girlX = 400;
        let girlY = 300;

let cuddleX = Math.floor(Math.random() * 800);
        let cuddleY = Math.floor(Math.random() * 600);

girlImage.onload = function() {
            ctx.drawImage(girlImage, girlX, girlY);
        }

function drawCuddle() {
            ctx.fillStyle = 'pink';
            ctx.fillRect(cuddleX, cuddleY, 20, 20);
        }

function distance(x1, y1, x2, y2) {
            return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
        }

canvas.addEventListener('click', function(event) {
            let clickX = event.clientX - canvas.getBoundingClientRect().left;
            let clickY = event.clientY - canvas.getBoundingClientRect().top;

if (distance(clickX, clickY, cuddleX, cuddleY) < 20) {
                alert('Cuddle achieved! Good job!');
                cuddleX = Math.floor(Math.random() * 800);
                cuddleY = Math.floor(Math.random() * 600);
            }
        });

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawCuddle();
            ctx.drawImage(girlImage, girlX, girlY);

requestAnimationFrame(gameLoop);
        }

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