AI game creator

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

No:3603

6955

←

Prev Next

→

Kumamon candy
Developer anonymous｜Date and time 70/1/1 10:04:52
Build time unknown sec｜Game capacity 3.892KB｜

Script

くまモン飴というゲームを作りました。

このゲームは、画面上のくまモンが落ちてくる飴を取るゲームです。くまモンを左右に移動させ、飴とくまモンが接触するとスコアが加算されます。時間内にできるだけ多くの飴を取り、高いスコアを目指しましょう！

←

Prev　Next

→ 　

Back　

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

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

くまモン飴というゲームを作りました。

<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>くまモン飴</title>
<style>
    #wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #f6e9cc;
        font-size: 30px;
    }

#game {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        background-color: #f1c40f;
        border-radius: 150px;
        position: relative;
        margin-bottom: 30px;
    }

#player {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background-color: #e74c3c;
        position: absolute;
        bottom: 0;
        left: 120px;
        cursor: pointer;
    }

#score {
        font-size: 50px;
        color: #2c3e50;
        margin-bottom: 20px;
    }
</style>
</head>
<body>
<div id="wrapper">
    <div id="game">
        <div id="player"></div>
    </div>
    <div id="score">0</div>
    <script>
        const game = document.getElementById('game');
        const player = document.getElementById('player');
        const score = document.getElementById('score');

let playerPosition = 0;
        let candyPosition = 0;
        let currentScore = 0;

function movePlayer(distance) {
            playerPosition += distance;
            player.style.left = playerPosition + 'px';
        }

function checkCollision() {
            const candy = document.getElementById('candy');
            const playerLeft = playerPosition;
            const playerRight = playerPosition + 60;
            const playerBottom = 60;
            const candyLeft = candyPosition;
            const candyRight = candyPosition + 30;
            const candyTop = 0;

if (playerRight >= candyLeft && playerLeft <= candyRight && playerBottom >= candyTop) {
                return true;
            } else {
                return false;
            }
        }

function spawnCandy() {
            const candy = document.createElement('div');
            candy.id = 'candy';
            candy.style.width = '30px';
            candy.style.height = '30px';
            candy.style.borderRadius = '15px';
            candy.style.backgroundColor = '#2ecc71';
            candy.style.position = 'absolute';
            candy.style.top = 0;
            candy.style.left = Math.floor(Math.random() * 270) + 'px';
            game.appendChild(candy);
        }

setInterval(moveCandy, 50);
        spawnCandy();
    </script>
</div>
</body>
</html>