Simple HTML Game - Create Your Own Interactive Game with Code - 常规

<!DOCTYPE html>
<html>
    <head>
        <title>Simple HTML Game - Create Your Own Interactive Game</title>
        <style>
            body {
                background-color: #f9f9f9;
            }
            #game-container {
                position: relative;
                width: 500px;
                height: 500px;
                border: 1px solid #ccc;
                margin: 0 auto;
            }
            #game-object {
                position: absolute;
                width: 50px;
                height: 50px;
                background-color: red;
            }
            #score {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Simple HTML Game</h1>
        <div id='game-container'>
            <div id='game-object'></div>
        </div>
        <div id='score'>Score: 0</div>
<pre><code>    &lt;script&gt;
        var gameObject = document.querySelector('#game-object');
        var gameContainer = document.querySelector('#game-container');
        var scoreElement = document.querySelector('#score');
        var score = 0;
        var speed = 5;
        var x = 0;
        var y = 0;

        // Move game object to mouse pointer
        gameContainer.addEventListener('mousemove', function(event) {
            gameObject.style.left = (event.clientX - 25) + 'px';
            gameObject.style.top = (event.clientY - 25) + 'px';
        });

        // Move game object with arrow keys
        document.addEventListener('keydown', function(event) {
            if (event.keyCode === 37) {
                x -= speed;
            } else if (event.keyCode === 38) {
                y -= speed;
            } else if (event.keyCode === 39) {
                x += speed;
            } else if (event.keyCode === 40) {
                y += speed;
            }
            gameObject.style.left = x + 'px';
            gameObject.style.top = y + 'px';
        });

        // Increment score when game object is within container
        setInterval(function() {
            if (gameObject.offsetLeft &gt; 0 &amp;&amp; gameObject.offsetLeft &lt; gameContainer.offsetWidth &amp;&amp; gameObject.offsetTop &gt; 0 &amp;&amp; gameObject.offsetTop &lt; gameContainer.offsetHeight) {
                score++;
                scoreElement.innerText = 'Score: ' + score;
            }
        }, 100);
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html>