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

No:13779

104

←

Prev Next

→

Uno
Developer User6025｜Date and time 23/8/30 0:47:51
Build time 29.04 sec｜Game capacity 4.406KB｜

Script

Sure! Here's a simple Uno game implemented as a single HTML file, using JavaScript and pictograms. The game is designed for smartphone operation. Just copy and paste the code into an HTML file, save it, and then open it in a web browser on your smartphone to play.

Uno Game

This implementation of the Uno game includes a basic game board with a discard pile. The initial card on the discard pile is displayed using pictograms based on the card's color, action, and number. You can expand the `deck` array to include more Uno cards as per your needs. Enjoy playing Uno on your smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Uno Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #game-board {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
        }
        .card {
            width: 70px;
            height: 100px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            border: 1px solid black;
            border-radius: 7px;
            font-size: 20px;
        }
        .pictogram {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>Uno Game</h1>
    <div id="game-board">
        <div class="card" id="discard-pile"></div>
    </div>
    
    <script>
        // Available card colors
        const colors = {
            red: "red",
            blue: "blue",
            yellow: "yellow",
            green: "green"
        };

// Available card actions
        const actions = {
            skip: "Skip",
            reverse: "Reverse",
            draw2: "Draw +2"
        };

// Available card numbers
        const numbers = {
            zero: "0",
            one: "1",
            two: "2",
            three: "3",
            four: "4",
            five: "5",
            six: "6",
            seven: "7",
            eight: "8",
            nine: "9"
        };

// Uno card class
        class UnoCard {
            constructor(color, action, number) {
                this.color = color;
                this.action = action;
                this.number = number;
            }
        
            getHtml() {
                let html = `<div class="card" style="background-color:${this.color};">`;
                html += this.getPictogram();
                html += "</div>";
                return html;
            }
        
            getPictogram() {
                let pictogram = "";
                switch (this.action) {
                    case actions.skip:
                        pictogram += "<div class='pictogram' style='background-image: url(skip.png);'></div>";
                        break;
                    case actions.reverse:
                        pictogram += "<div class='pictogram' style='background-image: url(reverse.png);'></div>";
                        break;
                    case actions.draw2:
                        pictogram += "<div class='pictogram' style='background-image: url(draw2.png);'></div>";
                        break;
                    default:
                        for (let i = 0; i < parseInt(this.number); i++) {
                            pictogram += "<div class='pictogram' style='background-image: url(dot.png);'></div>";
                        }
                }
                return pictogram;
            }
        }

// Array of available Uno cards
        const deck = [
            new UnoCard(colors.red, actions.skip),
            new UnoCard(colors.blue, actions.reverse),
            new UnoCard(colors.yellow, actions.draw2),
            new UnoCard(colors.green, numbers.two)
        ];

// Rendering the current card on discard pile
        function renderCurrentCard() {
            const discardPile = document.getElementById("discard-pile");
            discardPile.innerHTML = deck[0].getHtml();
        }

// Starting the game
        function startGame() {
            renderCurrentCard();
        }

// Game entry point
        startGame();
    </script>
</body>
</html>
```