لعبة كرة القدم الاعب يمكن تحريكه بالأسهم الاعب يمكنه لمس الكرة's game

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

No:13210

104

←

Prev Next

→

لعبة كرة القدم الاعب يمكن تحريكه بالأسهم الاعب يم..ALL
Developer User5580｜Date and time 23/8/27 8:26:29
Build time 10.931 sec｜Game capacity 3.359KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jeu de Football</title>
    <style>
        #field {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 20px auto;
            border: 2px solid black;
        }

#player {
            position: absolute;
            top: 180px;
            left: 250px;
            width: 40px;
            height: 40px;
            background-color: red;
        }

#ball {
            position: absolute;
            top: 190px;
            left: 290px;
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="field">
        <div id="player"></div>
        <div id="ball"></div>
    </div>

function movePlayer(event) {
            var player = document.getElementById("player");
            var field = document.getElementById("field");

var playerTop = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
            var playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));

switch (event.key) {
                case "ArrowUp":
                    if (playerTop > 0) {
                        player.style.top = (playerTop - 10) + "px";
                    }
                    break;
                case "ArrowDown":
                    if (playerTop < (field.clientHeight - player.clientHeight)) {
                        player.style.top = (playerTop + 10) + "px";
                    }
                    break;
                case "ArrowLeft":
                    if (playerLeft > 0) {
                        player.style.left = (playerLeft - 10) + "px";
                    }
                    break;
                case "ArrowRight":
                    if (playerLeft < (field.clientWidth - player.clientWidth)) {
                        player.style.left = (playerLeft + 10) + "px";
                    }
                    break;
            }
        }

var ball = document.getElementById("ball");

ball.addEventListener("click", kickBall);

function kickBall() {
            var field = document.getElementById("field");

var ballTop = parseInt(window.getComputedStyle(ball).getPropertyValue("top"));
            var ballLeft = parseInt(window.getComputedStyle(ball).getPropertyValue("left"));

var ballDestinationX = Math.floor(Math.random() * (field.clientWidth - ball.clientWidth));
            var ballDestinationY = Math.floor(Math.random() * (field.clientHeight - ball.clientHeight));

var deltaX = (ballDestinationX - ballLeft) / 100;
            var deltaY = (ballDestinationY - ballTop) / 100;

var interval = setInterval(moveBall, 10);

function moveBall() {
                ballTop += deltaY;
                ballLeft += deltaX;

ball.style.top = ballTop + "px";
                ball.style.left = ballLeft + "px";

if (Math.abs(ballTop - ballDestinationY) < 1 && Math.abs(ballLeft - ballDestinationX) < 1) {
                    clearInterval(interval);
                }
            }
        }
    </script>
</body>
</html>