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

No:36968

I want a green square to be coming from the side a..ALL
Developer User16935｜Date and time 24/1/19 16:59:35
Build time 14.719 sec｜Game capacity 4.025KB｜

Script

Sure! Here's a simple implementation of the game you described in a single HTML file using JavaScript:

Green Square Game

Score: 0

Copy and paste the above code into a new HTML file (e.g., `game.html`) and open it in a web browser. You should see a game where you control a blue square using the arrow keys, and a green square moves from right to left on the screen. If the green square collides with the player, you lose and get an alert. If you score 10 points by clicking on the green square, you win and get an alert as well. Note: This is a very basic implementation to get you started. You can further enhance the game by adding more features like levels, sound effects, and animations.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the game you described in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Green Square Game</title>
    <style>
        #player {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: blue;
        }

#greenSquare {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: green;
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <script>
        var player;
        var greenSquare;
        var score = 0;

function startGame() {
            player = {
                x: 0,
                y: 0,
                speed: 5
            };
            greenSquare = {
                x: window.innerWidth - 40,
                y: Math.floor(Math.random() * (window.innerHeight - 40)),
                speed: 3
            };
            score = 0;

document.addEventListener("keydown", movePlayer);

setInterval(updateGameArea, 20);
        }

function updateGameArea() {
            checkCollision();

moveGreenSquare();
            drawPlayer();
            drawGreenSquare();
            showScore();
        }

function movePlayer(event) {
            var key = event.keyCode;

if (key == 37) { // Left arrow
                player.x -= player.speed;
            } else if (key == 39) { // Right arrow
                player.x += player.speed;
            } else if (key == 38) { // Up arrow
                player.y -= player.speed;
            } else if (key == 40) { // Down arrow
                player.y += player.speed;
            }
        }

function moveGreenSquare() {
            greenSquare.x -= greenSquare.speed;
        }

function drawPlayer() {
            var playerElement = document.getElementById("player");
            playerElement.style.left = player.x + "px";
            playerElement.style.top = player.y + "px";
        }

function drawGreenSquare() {
            var greenSquareElement = document.getElementById("greenSquare");
            greenSquareElement.style.left = greenSquare.x + "px";
            greenSquareElement.style.top = greenSquare.y + "px";
        }

function checkCollision() {
            if (greenSquare.x >= player.x && greenSquare.x <= player.x + 40 &&
                greenSquare.y >= player.y && greenSquare.y <= player.y + 40) {
                endGame();
            }
        }

function endGame() {
            alert("Game Over! You Lose. Final Score: " + score);
            clearInterval(updateGameArea);
            document.removeEventListener("keydown", movePlayer);
        }

function showScore() {
            document.getElementById("score").textContent = "Score: " + score;

if (score >= 10) {
                endGame();
                alert("Congratulations! You Win!");
            }
        }

function increaseScore() {
            score++;
        }
    </script>

<h1>Green Square Game</h1>
    <div id="player"></div>
    <div id="greenSquare" onclick="increaseScore()"></div>
    <p id="score">Score: 0</p>

Note: This is a very basic implementation to get you started. You can further enhance the game by adding more features like levels, sound effects, and animations.