首页前端开发中'猴子摘桃'游戏的代码

前端开发中'猴子摘桃'游戏的代码

时间: 2024-11-06 22:24:12 浏览: 23

"猴子摘桃"是一种常见的JavaScript动画练习，通常涉及到HTML、CSS和JavaScript的交互。以下是一个简单的HTML和JavaScript版本的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>猴子摘桃</title> <style> #monkey { position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background-color: brown; border-radius: 50%; cursor: pointer; } #peach { position: absolute; top: 200px; left: 200px; width: 50px; height: 50px; background-color: pink; border-radius: 50%; } </style> </head> <body> <div id="monkey"></div> <div id="peach"></div> <script> const monkey = document.getElementById('monkey'); const peach = document.getElementById('peach'); monkey.addEventListener('click', function() { if (Math.random() < 0.5) { peach.style.top = Math.floor(Math.random() * 300) + 'px'; peach.style.left = Math.floor(Math.random() * 300) + 'px'; } else { // 猴子跳起来尝试抓取 let newTop = parseInt(peak.offsetTop); if (newTop > 50) { newTop -= 10; } else { newTop = 50; } peach.style.top = newTop + 'px'; } }); </script> </body> </html> ``` 这个代码创建了一个猴子元素和一个桃子元素，并通过点击猴子时随机移动桃子的位置模拟采摘过程。当猴子试图抓住桃子时，它会向上跳动。这只是一个基础版本，实际游戏中可能会加入更多的动画效果和复杂逻辑。

阅读全文