javascript抓不住的月影WEB

javascript开发抓不住的月影WEB

javascript开发的【抓不住的月影WEB】的规则如下：

游戏规则：鼠标从不同的方向往月影WEB的图片上面徘徊，月影WEB的图片会根据从不同的方向徘徊到图片产生不同的变化，直到图片逃出游戏范围，玩家就输了！

1.html部分如下（用来布局显示的页面效果）：

                    <h3>抓不住的月影WEB</h3>
                    <p>游戏规则：鼠标从不同的方向往月影WEB的图片上面徘徊，月影WEB的图片会根据从不同的方向徘徊到图片产生不同的变化，直到图片逃出游戏范围，玩家就输了！</p>
                    <div class="games_1_con" id="game_yue1">
                       <div id="game_yue1_con" class="games_1_con_con"><img src="月影WEB.jpg" alt="月影WEB.jpg"/></div>
                    </div>

这里用div进行布局，先布局是一个范围，然后将图片放在这个范围之中，范围的大小和图片可以根据实际情况来布局；

2.CSS部分代码如下（用来设置html显示出来的样子）：

.games_1_con{width:100%;height:400px;border:1px dashed #808080;overflow:hidden;position:relative;margin-bottom:15px;}
.games_1_con_con{width:50px;height:50px;position:absolute;top:0;left:0px;}
.games_1_con_con img{width:50px;height:50px;}

这里用来给div赋予样式，也是能根据实际情况来给不同的游侠范围和有戏的背景颜色的展现样式；

3.javascript/js部分代码如下（用来写【抓不住的月影WEB】的功能逻辑）：

//抓不住的图片
var game_yue1_con0 = document.getElementById("game_yue1_con");
game_yue1_con.onmouseover = function (e) {
    var xleft = e.clientX - 10 + "px"; // 这里是往X轴方向偏移，偏移的长度根据实际的情况来设置；
    var ytop = e.clientY - 10 + "px"; // 这里是往Y轴方向偏移，偏移的长度根据实际的情况来设置；
    game_yue1_con0.style.left = xleft;
    game_yue1_con0.style.top = ytop;
};

这里赋予【抓不住的月影WEB】的规则逻辑，如果需要设计更为复杂的规则的话，也都可以在这个的基础上面进行修改，比如加上多个图片之类的；

【抓不住的月影WEB】的全部代码如下：

<html>
<head></head>
<style>
.games_1_con{width:100%;height:400px;border:1px dashed #808080;overflow:hidden;position:relative;margin-bottom:15px;}
.games_1_con_con{width:50px;height:50px;position:absolute;top:0;left:0px;}
.games_1_con_con img{width:50px;height:50px;}
</style>
<body>
     <h3>抓不住的月影WEB</h3>
     <p>游戏规则：鼠标从不同的方向往月影WEB的图片上面徘徊，月影WEB的图片会根据从不同的方向徘徊到图片产生不同的变化，直到图片逃出游戏范围，玩家就输了！</p>
     <div class="games_1_con" id="game_yue1">
         <div id="game_yue1_con" class="games_1_con_con"><img src="月影WEB.jpg" alt="月影WEB.jpg"/></div>
     </div>
<script>
var game_yue1_con0 = document.getElementById("game_yue1_con");
game_yue1_con.onmouseover = function (e) {
    var xleft = e.clientX - 10 + "px";
    var ytop = e.clientY - 10 + "px";
    game_yue1_con0.style.left = xleft;
    game_yue1_con0.style.top = ytop;
};
</script>
</body>
</html>

【抓不住的月影WEB】的全部的效果如下：

图1

图2

图3

关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；