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

No:12539

102

←

Prev Next

→

A game related to the cartoon created by Jim Davis..ALL
Developer User4920｜Date and time 23/8/19 11:09:48
Build time 15.655 sec｜Game capacity 3.04KB｜

Script

Sure! Here's a simple game related to the cartoon Garfield implemented as a single HTML file with JavaScript:

Garfield Game

In this game, Garfield is represented by a pictogram (image) and can be moved within the game container using arrow keys. The game container acts as a smartphone screen, and the player can control Garfield's movement on the screen using the arrow keys. Note: This code assumes you have a file named "emozi_himawari.png" in the same directory as the HTML file, which contains an image of Garfield.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game related to the cartoon Garfield implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Garfield Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        #game-container {
            display: inline-block;
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        
        .pictogram {
            position: absolute;
            width: 64px;
            height: 64px;
        }
        
        #garfield {
            top: 120px;
            left: 120px;
        }
    </style>
</head>
<body>
    <h1>Garfield Game</h1>
    <div id="game-container">
        <img id="garfield" class="pictogram" src="garfield.png" alt="Garfield">
    </div>
    
    <script>
        // Garfield object
        const garfield = {
            x: 120,
            y: 120
        };
        
        const speed = 20;
        
        // Function to handle keypress events
        function handleKeyPress(event) {
            const code = event.keyCode || event.charCode;
            
            if (code === 37) { // Left arrow key
                moveGarfield(-speed, 0);
            } else if (code === 38) { // Up arrow key
                moveGarfield(0, -speed);
            } else if (code === 39) { // Right arrow key
                moveGarfield(speed, 0);
            } else if (code === 40) { // Down arrow key
                moveGarfield(0, speed);
            }
        }
        
        // Function to move Garfield based on arrow key input
        function moveGarfield(dx, dy) {
            const newx = garfield.x + dx;
            const newy = garfield.y + dy;
            
            if (isValidMove(newx, newy)) {
                garfield.x = newx;
                garfield.y = newy;
                updateGarfieldPosition();
            }
        }
        
        // Function to check if the move is valid (within game container)
        function isValidMove(x, y) {
            return x >= 0 && x <= 236 && y >= 0 && y <= 236;
        }
        
        // Function to update Garfield's position on the screen
        function updateGarfieldPosition() {
            const garfieldElem = document.getElementById("garfield");
            garfieldElem.style.top = garfield.y + "px";
            garfieldElem.style.left = garfield.x + "px";
        }
        
        // Add event listener for key presses
        document.addEventListener("keydown", handleKeyPress);
    </script>
</body>
</html>
```

Note: This code assumes you have a file named "garfield.png" in the same directory as the HTML file, which contains an image of Garfield.