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

No:3068

1167

←

Prev Next

→

kaiten-zushi
Developer もちきなこ｜Date and time 23/6/23 16:52:33
Build time 16.762 sec｜Game capacity 2.088KB｜

Script

回転寿司ゲーム

得点: 0

←

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>回転寿司ゲーム</title>
	<style>
        body{
            background-color: #f7cac9;
            text-align: center;
        }
        #game_container{
            position: relative;
            width: 90%;
            height: 60vh;
            margin: 0 auto;
        }
        .sushi{
            position: absolute;
            bottom: 0;
            width: 10%;
            cursor: pointer;
            animation: sushi_anim 1s ease-in-out infinite;
        }
        @keyframes sushi_anim{
            0%{
                transform: rotate(0deg);
            }
            50%{
                transform: rotate(10deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }
        #score{
            font-size: 2rem;
            margin-top: 3vh;
        }
	</style>
</head>
<body>
    <h1>回転寿司ゲーム</h1>
    <div id="game_container">
    
    </div>
    <div id="score">
        得点: 0
    </div>
	<script>
        let game_container = document.getElementById("game_container");
        let score = document.getElementById("score");
        let points = 0;
        let sushi_positions = ['10%', '25%', '40%', '55%', '70%', '85%'];
        
        // sushi images
        let sushi_imgs = ["🍣", "🍥", "🍱", "🍙", "🍘", "🍢"];

// add sushi images to the game container
        setInterval(function(){
            let index = Math.floor(Math.random() * 6); // random sushi index
            let sushi = document.createElement("div");
            sushi.className = "sushi";
            sushi.innerHTML = sushi_imgs[index];
            sushi.style.left = sushi_positions[Math.floor(Math.random() * 6)];
            game_container.appendChild(sushi);

// remove sushi when clicked and add points
            sushi.addEventListener("click", function(){
                this.remove();
                points++;
                score.innerHTML = "得点: " + points;
            });
        }, 1000);
	</script>
</body>
</html>