开发工具:Vs Code
开发语言:JavaScript脚本语言
所用技术:JavaScript事件
功能名称:模拟植物大战僵尸种植植物
所用事件:
mousedown:鼠标按下
mouseup:鼠标抬起
mousemove:鼠标进入事件
html代码:
<!-- 创建一个豌豆射手 --> <img id="_img" src="./wdss.png">
css代码:
/* 创建一个动画 */ @keyframes identifier { 0%{transform:skew(0deg,0deg);} 30%{transform:skew(3deg,1deg);} 60%{transform:skew(0deg,0deg);} 100%{transform:skew(-3deg,-1deg);} } /* 为豌豆射手添加这个动画效果 */ #_img{ animation: identifier 1.5s linear infinite; }
JavaScript代码:
//为豌豆射手设置大小 _img.setAttribute("width","100px"); //鼠标按下事件监听 _img.onmousedown = function (){ //为页面创建进入事件监听 document.onmousemove = function(){ //设置豌豆射手跟随鼠标移动:豌豆射手的绝对定位设置为鼠标在页面的位置,使用 //【event.clientX/clientY获取】 _img.style.cssText += `position:abslute;top:${event.clientY};left:${event.clientX}`; } } //鼠标抬起事件监听 _img.onmouseup = function (){ //清空鼠标进入页面事件 document.onmousemove = ""; }
效果图:
打印坐标验证:
---------------------------------------------------------
ps:博主会使用鼠标事件完成理想的效果了
博主有个大胆的想法:还原植物大战僵尸场景,希望大家多多指导