自己造一个banana游戏

error制造者

已于 2024-06-04 18:38:39 修改

阅读量351

点赞数 11

文章标签：游戏

于 2024-06-04 17:12:06 首次发布

本文链接：https://blog.csdn.net/aksgjs/article/details/139448317

版权

Steam平台上免费游戏《Banana》最近爆火，其玩法仅仅是鼠标点击香蕉，左上角数字随着点击次数而增长而已。

为了捡起很久没用的HTML，我便自己写了个差不多的网页，仅供学习。文末有部署好的网址

<!DOCTYPE html>
<html>
<head>
    <title>Banana</title>
    <style>
        .rectangle {
            width: 700px;
            height: 500px;
            background-color: #FFFFCC;
            border: none;
            /* 左右居中 */
            margin: 0 auto;
            position: relative; 
        }
        .rectangle img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 使得图片居中 */
            transition: transform 0.5s; 
        }
        .rectangle #gif {
            position: absolute;
            top: 100%; 
            left: 90%;
        } 
    </style>
</head>
<body>
    <div class="rectangle">
        <img id="banana" src="./image.png" alt="Image" height="200">
        <span id="clickCount" style="position:absolute; top:10px; left:10px; color: brown;">0</span>
         <!--<img id="gif" src="./1.gif" alt="Gif"> -->
    </div>
    <script>
        var count = 0;

        function incrementCount() {
            count++;
            document.getElementById('clickCount').textContent = count;
            document.getElementById('banana').height = 220; // 更改为数值形式
            if (count > 0 && count % 10 === 0) {
                rotateBanana();
            }
        }

        function resetBananaSize() {
            document.getElementById('banana').height = 200; // 更改为数值形式
        }

        function rotateBanana() {
            var banana = document.getElementById('banana');
            // 重置transform属性，保持居中
            banana.style.transform = 'translate(-50%, -50%) rotate(360deg)';
            setTimeout(function() {
                banana.style.transform = 'translate(-50%, -50%)';
            }, 500); 
        }

        var bananaElement = document.getElementById('banana');
        bananaElement.addEventListener('mousedown', incrementCount);
        bananaElement.addEventListener('mouseup', resetBananaSize);
        bananaElement.addEventListener('touchstart', function(event) {
            event.preventDefault(); // 防止默认的触摸行为
            incrementCount();
        });
        bananaElement.addEventListener('touchend', function(event) {
            event.preventDefault(); // 防止默认的触摸行为
            resetBananaSize();
        });
    </script>
</body>
</html>

imag.png来源于banana PNG image transparent image download, size: 800x800px (pngimg.com)

自己写的网页地址：Banana (touchbugs.github.io)