AI game creator

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

No:45069

172

←

Prev Next

→

Шарик движется к точк клика. Всюду разбросаны моне..ALL
Developer User19457｜Date and time 24/2/20 5:27:02
Build time 18.911 sec｜Game capacity 3.693KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Игра "Шарик"</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    canvas {
        background-color: #f0f0f0;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const ballRadius = 10;
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let mouseX = ballX;
let mouseY = ballY;
let score = 0;
let traps = [];
let coins = [];

function initialize() {
    // Place traps and coins randomly on the canvas
    for (let i = 0; i < 3; i++) {
        traps.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height
        });
    }

for (let i = 0; i < 10; i++) {
        coins.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height
        });
    }

// Place yellow star for victory
    let starX = Math.random() * canvas.width;
    let starY = Math.random() * canvas.height;
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function drawTraps() {
    traps.forEach(trap => {
        ctx.beginPath();
        ctx.rect(trap.x, trap.y, 20, 20);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
    });
}

function drawCoins() {
    coins.forEach(coin => {
        ctx.beginPath();
        ctx.arc(coin.x, coin.y, 5, 0, Math.PI * 2);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
    });
}

function drawStar(starX, starY) {
    ctx.beginPath();
    ctx.moveTo(starX, starY - 20);
    for (let i = 0; i < 5; i++) {
        ctx.rotate(Math.PI / 5);
        ctx.lineTo(starX, starY - 10);
        ctx.rotate(Math.PI / 5);
        ctx.lineTo(starX, starY - 20);
    }
    ctx.fillStyle = "yellow";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawTraps();
    drawCoins();
    drawStar();
}

function update() {
    // Move the ball towards the mouse click
    let dx = mouseX - ballX;
    let dy = mouseY - ballY;
    let distance = Math.sqrt(dx * dx + dy * dy);
    if (distance > 1) {
        ballX += dx / 20;
        ballY += dy / 20;
    }

// Check for collision with traps
    traps.forEach(trap => {
        if (Math.abs(ballX - trap.x) < 10 && Math.abs(ballY - trap.y) < 10) {
            alert("Game over! You hit a trap.");
            location.reload();
        }
    });

// Check for collection of coins
    coins.forEach((coin, index) => {
        if (Math.abs(ballX - coin.x) < 10 && Math.abs(ballY - coin.y) < 10) {
            coins.splice(index, 1);
            score++;
        }
    });

// Check for victory condition
    if (coins.length === 0) {
        alert("Congratulations! You found the yellow star and won the game!");
        location.reload();
    }
}

canvas.addEventListener("mousemove", function(event) {
    mouseX = event.clientX - canvas.getBoundingClientRect().left;
    mouseY = event.clientY - canvas.getBoundingClientRect().top;
});

canvas.addEventListener("click", function() {
    mouseX = event.clientX - canvas.getBoundingClientRect().left;
    mouseY = event.clientY - canvas.getBoundingClientRect().top;
});

initialize();
setInterval(function() {
    update();
    draw();
}, 1000 / 60);
</script>
</body>
</html>