Mochi The screen shows a rice cake rendered by JavaScript. The rice cake is round and white in color. By tapping and stretching the rice cake with a finger, the drawing of the rice cake is pulled toward your finger, as if the rice cake were stretched. Lets play with it by stretching it!'s game

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

No:7808

3937

←

Prev Next

→

Mochi The screen shows a rice cake rendered by Jav..ALL
Developer もちきなこ｜Date and time 23/7/9 23:17:02
Build time 6.276 sec｜Game capacity 1.506KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
    border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>

// Initialize rice cake position and size
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 30;

// Function to draw the rice cake
function drawRiceCake() {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = "#ffffff";
    ctx.fill();
    ctx.closePath();
}

// Function to handle touch events
function handleTouch(event) {
    event.preventDefault();
    var rect = canvas.getBoundingClientRect();
    var touchX = event.targetTouches[0].clientX - rect.left;
    var touchY = event.targetTouches[0].clientY - rect.top;

// Check if touch is inside the rice cake
    var dx = Math.abs(touchX - x);
    var dy = Math.abs(touchY - y);
    if (dx < radius && dy < radius) {
        // Calculate new rice cake size based on touch distance from the center
        var distance = Math.sqrt(dx * dx + dy * dy);
        var newSize = radius + distance;

// Update rice cake size and redraw it
        radius = newSize;
        drawRiceCake();
    }
}

// Event listener for touch events
canvas.addEventListener("touchstart", handleTouch, false);
canvas.addEventListener("touchmove", handleTouch, false);

// Initial rice cake drawing
drawRiceCake();
</script>
</body>
</html>