1 big bouncing sad face 50 small bouncing happy faces's game

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

No:15048

←

Prev Next

→

1 big bouncing sad face 50 small bouncing happy fa..ALL
Developer User6472｜Date and time 23/9/5 21:19:46
Build time 31.65 sec｜Game capacity 3.482KB｜

Script

Sure, here's an example of a game where you control a big bouncing sad face using smartphone operation, while trying to catch 50 small bouncing happy faces:

In this game, a big bouncing sad face (red color) will move according to your mouse position on the smartphone screen. The objective is to catch 50 small bouncing happy faces (green color) by touching them with the big face. The faces will bounce around the screen and change direction when they hit the edges. Note: This code will work when saved as a standalone HTML file and opened in a web browser.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a game where you control a big bouncing sad face using smartphone operation, while trying to catch 50 small bouncing happy faces:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Face Game</title>
    <style>
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

var bigFace = {
                x: width / 2,
                y: height / 2,
                radius: 70,
                vx: 5,
                vy: 5,
                color: "#FF0000"
            };

var happyFaces = [];
            var totalHappyFaces = 50;

for (var i = 0; i < totalHappyFaces; i++) {
                happyFaces.push({
                    x: Math.random() * width,
                    y: Math.random() * height,
                    radius: 20,
                    vx: Math.random() * 4 - 2,
                    vy: Math.random() * 4 - 2,
                    color: "#00FF00"
                });
            }

function drawFace(face) {
                context.beginPath();
                context.arc(face.x, face.y, face.radius, 0, Math.PI * 2, false);
                context.fillStyle = face.color;
                context.fill();
            }

function update() {
                context.clearRect(0, 0, width, height);

for (var i = 0; i < happyFaces.length; i++) {
                    var face = happyFaces[i];
                    face.x += face.vx;
                    face.y += face.vy;

if (face.x + face.radius > width || face.x - face.radius < 0) {
                        face.vx *= -1;
                    }
                    
                    if (face.y + face.radius > height || face.y - face.radius < 0) {
                        face.vy *= -1;
                    }

drawFace(face);
                }

bigFace.x += bigFace.vx;
                bigFace.y += bigFace.vy;

if (bigFace.x + bigFace.radius > width || bigFace.x - bigFace.radius < 0) {
                    bigFace.vx *= -1;
                }
                
                if (bigFace.y + bigFace.radius > height || bigFace.y - bigFace.radius < 0) {
                    bigFace.vy *= -1;
                }

drawFace(bigFace);
                
                window.requestAnimationFrame(update);
            }
            
            canvas.addEventListener("mousemove", function(event) {
                bigFace.x = event.clientX;
                bigFace.y = event.clientY;
            });

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

Note: This code will work when saved as a standalone HTML file and opened in a web browser.