javascript
JS 射击游戏
Js 的射擊小游戲
玩法按下求 技能準備 點擊左鍵射擊，射擊到后面的球得分
代碼如下：直接粘到html文件中即可暢玩：
?
?
<!DOCTYPE html>
?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta charset="utf-8" />
? ? <title></title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0px;
? ? ? ? ? ? padding: 0px;
? ? ? ? }
?
? ? ? ? .b {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? left: 300px;
? ? ? ? ? ? width: 15px;
? ? ? ? ? ? height: 15px;
? ? ? ? ? ? border: 1px solid yellow;
? ? ? ? ? ? -webkit-border-radius: 15px;
? ? ? ? ? ? -moz-border-radius: 15px;
? ? ? ? ? ? background-color: red;
? ? ? ? }
?
? ? ? ? .y {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? left: 150px;
? ? ? ? ? ? width: 15px;
? ? ? ? ? ? height: 15px;
? ? ? ? ? ? border: 1px solid yellow;
? ? ? ? ? ? -webkit-border-radius: 15px;
? ? ? ? ? ? -moz-border-radius: 15px;
? ? ? ? ? ? background-color: green;
? ? ? ? }
?
? ? ? ? #Img {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? left: 0px;
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? border: 1px solid yellow;
? ? ? ? ? ? -webkit-border-radius: 15px;
? ? ? ? ? ? -moz-border-radius: 15px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
?
? ? ? ? .q {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? left: 0px;
? ? ? ? ? ? width: 15px;
? ? ? ? ? ? height: 15px;
? ? ? ? ? ? border: 1px solid yellow;
? ? ? ? ? ? background-size: 100% auto;
? ? ? ? ? ? background-repeat: no-repeat;
? ? ? ? ? ? background-image: url(https://thumbnail0.baidupcs.com/thumbnail/515adce0c31d707acd055666cf0ee0de?fid=372067725-250528-265770217030144&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-8BQFEfnNZRwvmEmBF1OUMXE4Q9Q%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394348028093904219&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video);
? ? ? ? ? ? -webkit-border-radius: 15px;
? ? ? ? ? ? -moz-border-radius: 15px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
?
? ? ? ? #xz {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 495px;
? ? ? ? ? ? left: 1107px;
? ? ? ? ? ? width: 70px;
? ? ? ? }
?
? ? ? ? #Main {
? ? ? ? ? ? background-color: #F60;
? ? ? ? ? ? width: 1177px;
? ? ? ? ? ? height: 570px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="Main">
? ? ? ? <div id="Img"></div>
? ? ? ? <img id="xz" src="https://thumbnail0.baidupcs.com/thumbnail/f6d77c5db40deb70818e8fa1764d512e?fid=372067725-250528-1020959445205490&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-QsVHde1Fml1AOj0RP8F3NjiB0Rg%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394370782677662805&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" />
? ? </div>
? ? <div>一庫一庫 游戲規則：<br>
? ? ? ? 你共有50次q技能的能量。<br>
? ? ? ? 點擊q技能，鼠標左鍵則向鼠標位置釋放，右鍵取消技能<br>
? ? ? ? 直接點擊右鍵上下移動瞎子。<br>
? ? ? ? 共釋放了<span id="qindex">0</span>次q<br>
? ? ? ? 命中英雄<span id="zindex">0</span>次<br>
? ? </div>
? ? <script>
? ? ? ? document.oncontextmenu = function (e) {
? ? ? ? ? ? e.preventDefault();
? ? ? ? };
? ? ? ? var it = null;
? ? ? ? var iy = null;
? ? ? ? var qindex = 0;
? ? ? ? var yindex = 0;
? ? ? ? var zindex = 0;
? ? ? ? var ele = document.getElementById("Main");
? ? ? ? var zele = document.getElementById("zindex");
? ? ? ? var qele = document.getElementById("qindex");
? ? ? ? var xz = document.getElementById("xz");
? ? ? ? var Img = document.getElementById("Img");
? ? ? ? var x = "";
? ? ? ? var y = "";
? ? ? ? var mLength = 3;
? ? ? ? function createB() {
? ? ? ? ? ? var b = document.createElement('div');
? ? ? ? ? ? var mLength = 2;
? ? ? ? ? ? var ib = null;
? ? ? ? ? ? b.className = 'b'
? ? ? ? ? ? ele.appendChild(b);
? ? ? ? ? ? function move() {
? ? ? ? ? ? ? ? if (b.offsetTop < 570) {
? ? ? ? ? ? ? ? ? ? b.style.top = (b.offsetTop + mLength) + "px";
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? b.remove();
? ? ? ? ? ? ? ? ? ? clearInterval(ib);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? ib = setInterval(move, 10);
? ? ? ? ? ? return b;
? ? ? ? }
? ? ? ? function createY() {
? ? ? ? ? ? yindex++;
? ? ? ? ? ? var y = document.createElement('div');
? ? ? ? ? ? var iy = null;
? ? ? ? ? ? y.className = 'y';
? ? ? ? ? ? y.id = yindex + 'y';
? ? ? ? ? ? ele.appendChild(y);
? ? ? ? ? ? function move() {
? ? ? ? ? ? ? ? if (y.offsetTop < 570) {
? ? ? ? ? ? ? ? ? ? y.style.top = (y.offsetTop + mLength) + "px";
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? y.remove();
? ? ? ? ? ? ? ? ? ? clearInterval(iy);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? iy = setInterval(move, 10);
? ? ? ? ? ? return y;
? ? ? ? }
? ? ? ? function GetMouse(oEvent) {
? ? ? ? ? ? x = oEvent.clientX;
? ? ? ? ? ? y = oEvent.clientY;
? ? ? ? ? ? Img.style.left = (x - 5) + "px";
? ? ? ? ? ? Img.style.top = (y - 5) + "px";
? ? ? ? }
? ? ? ? function createQ(index) {
? ? ? ? ? ? var q = document.createElement('div');
? ? ? ? ? ? q.className = 'q'
? ? ? ? ? ? q.id = 'q' + index;
? ? ? ? ? ? q.style.left = xz.offsetLeft + "px";
? ? ? ? ? ? q.style.top = (xz.offsetTop + 40) + "px";
? ? ? ? ? ? ele.appendChild(q);
? ? ? ? ? ? return q;
? ? ? ? }
? ? ? ? function releaseQ() {
? ? ? ? ? ? if (qindex >= 50) {
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? }
? ? ? ? ? ? qindex++;
? ? ? ? ? ? var q = createQ(qindex);
? ? ? ? ? ? qele.textContent = qindex;
? ? ? ? ? ? var qy = q.offsetTop;
? ? ? ? ? ? var qx = q.offsetLeft;
? ? ? ? ? ? var my = y - qy;
? ? ? ? ? ? var mx = x - qx;
? ? ? ? ? ? var titleL = Math.sqrt(my * my + mx * mx);//總長
? ? ? ? ? ? var mLength = 10;//10毫秒運動px數
? ? ? ? ? ? var titleTime = titleL / mLength;//運動到鼠標點的時間
? ? ? ? ? ? var xs = mx / titleTime;//y 速度
? ? ? ? ? ? var ys = (my / titleTime);//x 速度
? ? ? ? ? ? var itq = setInterval(move, 10, qindex);
? ? ? ? ? ? var qOffsetTop = q.offsetTop;
? ? ? ? ? ? var qOffsetLeft = q.offsetLeft;
? ? ? ? ? ? function move(qindex) {
? ? ? ? ? ? ? ? var qqindex = qindex;
? ? ? ? ? ? ? ? qOffsetTop += ys;
? ? ? ? ? ? ? ? qOffsetLeft += xs;
? ? ? ? ? ? ? ? q.style.top = (qOffsetTop) + "px";
? ? ? ? ? ? ? ? q.style.left = (qOffsetLeft) + "px";
? ? ? ? ? ? ? ? // 紅點 getClass 循環紅點 判斷是否碰撞
? ? ? ? ? ? ? ? //綠點 同理 ?但是綠點只有一個
? ? ? ? ? ? ? ? if (q.offsetLeft < 310 && q.offsetLeft > 290) {
? ? ? ? ? ? ? ? ? ? var ba = document.getElementsByClassName('b');
? ? ? ? ? ? ? ? ? ? var offsetTop = q.offsetTop;
? ? ? ? ? ? ? ? ? ? for (var index = 0; index < ba.length; index++) {
? ? ? ? ? ? ? ? ? ? ? ? if (ba[index].offsetTop - 15 < offsetTop && ba[index].offsetTop + 15 > offsetTop) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? q.remove();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ba[index].remove();
? ? ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(itq);
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (qqindex >= 50) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('成績：' + zindex);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? location.reload();
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (q.offsetLeft < 160 && q.offsetLeft > 140) {
? ? ? ? ? ? ? ? ? ? var ya = document.getElementsByClassName('y');
? ? ? ? ? ? ? ? ? ? var offsetTop = q.offsetTop;
? ? ? ? ? ? ? ? ? ? for (var index = 0; index < ya.length; index++) {
? ? ? ? ? ? ? ? ? ? ? ? if (ya[index].offsetTop - 15 < offsetTop && ya[index].offsetTop + 15 > offsetTop) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? q.remove();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ya[index].remove();
? ? ? ? ? ? ? ? ? ? ? ? ? ? zindex++;
? ? ? ? ? ? ? ? ? ? ? ? ? ? zele.textContent = zindex;
? ? ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(itq);
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (qqindex >= 50) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('成績：' + zindex);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? location.reload();
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (q.offsetTop < -20 || q.offsetLeft < -20 || q.offsetTop > 550 || q.offsetLeft > 1150) {
? ? ? ? ? ? ? ? ? ? q.remove();
? ? ? ? ? ? ? ? ? ? clearInterval(itq);
? ? ? ? ? ? ? ? ? ? if (qqindex >= 50) {
? ? ? ? ? ? ? ? ? ? ? ? alert('成績：'+zindex);
? ? ? ? ? ? ? ? ? ? ? ? location.reload();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function moveXZ() {
? ? ? ? ? ? var xzy = xz.offsetTop;
? ? ? ? ? ? var my = y - xzy;
? ? ? ? ? ? it = setInterval(move, 10);
? ? ? ? ? ? function move() {
? ? ? ? ? ? ? ? if (my > 0) {
? ? ? ? ? ? ? ? ? ? if (my > mLength) {
? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop + mLength) + "px";
? ? ? ? ? ? ? ? ? ? ? ? my -= mLength;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop + my) + "px";
? ? ? ? ? ? ? ? ? ? ? ? my = 0;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else if (my < 0) {
? ? ? ? ? ? ? ? ? ? if (-my > mLength) {
? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop - mLength) + "px";
? ? ? ? ? ? ? ? ? ? ? ? my += mLength;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop + my) + "px";
? ? ? ? ? ? ? ? ? ? ? ? my = 0;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? clearInterval(it);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? ? ? //gogogo
? ? ? ? }
? ? ? ? function Main() {
? ? ? ? ? ? setInterval(createB, 1000);
? ? ? ? ? ? setInterval(createY, (600 / (mLength / 10)));
? ? ? ? ? ? ele.onmousemove = GetMouse;
? ? ? ? ? ? document.onkeydown = function (event) {
? ? ? ? ? ? ? ? var e = event || window.event || arguments.callee.caller.arguments[0];
? ? ? ? ? ? ? ? if (e && e.keyCode == 81) {
? ? ? ? ? ? ? ? ? ? if (Img.style.display != 'block') {
? ? ? ? ? ? ? ? ? ? ? ? Img.style.display = 'block';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? ele.onmousedown = function (elem) {
? ? ? ? ? ? ? ? if (Img.style.display == 'block') {
? ? ? ? ? ? ? ? ? ? Img.style.display = 'none';
? ? ? ? ? ? ? ? ? ? if (elem.button == 0) {
? ? ? ? ? ? ? ? ? ? ? ? // 釋放q技能
? ? ? ? ? ? ? ? ? ? ? ? releaseQ()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? if (elem.button == 2) {
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(it);
? ? ? ? ? ? ? ? ? ? ? ? // xz 向坐標點y軸位移
? ? ? ? ? ? ? ? ? ? ? ? moveXZ();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function ChangeBg(id, url) {
? ? ? ? ? ? document.getElementById(id).src = url;
? ? ? ? }
? ? ? ? Main();
? ? </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>? ? <meta charset="utf-8" />? ? <title></title>? ? <style>? ? ? ? * {? ? ? ? ? ? margin: 0px;? ? ? ? ? ? padding: 0px;? ? ? ? }
? ? ? ? .b {? ? ? ? ? ? position: absolute;? ? ? ? ? ? top: 0px;? ? ? ? ? ? left: 300px;? ? ? ? ? ? width: 15px;? ? ? ? ? ? height: 15px;? ? ? ? ? ? border: 1px solid yellow;? ? ? ? ? ? -webkit-border-radius: 15px;? ? ? ? ? ? -moz-border-radius: 15px;? ? ? ? ? ? background-color: red;? ? ? ? }
? ? ? ? .y {? ? ? ? ? ? position: absolute;? ? ? ? ? ? top: 0px;? ? ? ? ? ? left: 150px;? ? ? ? ? ? width: 15px;? ? ? ? ? ? height: 15px;? ? ? ? ? ? border: 1px solid yellow;? ? ? ? ? ? -webkit-border-radius: 15px;? ? ? ? ? ? -moz-border-radius: 15px;? ? ? ? ? ? background-color: green;? ? ? ? }
? ? ? ? #Img {? ? ? ? ? ? display: none;? ? ? ? ? ? position: absolute;? ? ? ? ? ? top: 0px;? ? ? ? ? ? left: 0px;? ? ? ? ? ? width: 10px;? ? ? ? ? ? height: 10px;? ? ? ? ? ? border: 1px solid yellow;? ? ? ? ? ? -webkit-border-radius: 15px;? ? ? ? ? ? -moz-border-radius: 15px;? ? ? ? ? ? text-align: center;? ? ? ? }
? ? ? ? .q {? ? ? ? ? ? position: absolute;? ? ? ? ? ? top: 0px;? ? ? ? ? ? left: 0px;? ? ? ? ? ? width: 15px;? ? ? ? ? ? height: 15px;? ? ? ? ? ? border: 1px solid yellow;? ? ? ? ? ? background-size: 100% auto;? ? ? ? ? ? background-repeat: no-repeat;? ? ? ? ? ? background-image: url(https://thumbnail0.baidupcs.com/thumbnail/515adce0c31d707acd055666cf0ee0de?fid=372067725-250528-265770217030144&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-8BQFEfnNZRwvmEmBF1OUMXE4Q9Q%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394348028093904219&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video);? ? ? ? ? ? -webkit-border-radius: 15px;? ? ? ? ? ? -moz-border-radius: 15px;? ? ? ? ? ? text-align: center;? ? ? ? }
? ? ? ? #xz {? ? ? ? ? ? position: absolute;? ? ? ? ? ? top: 495px;? ? ? ? ? ? left: 1107px;? ? ? ? ? ? width: 70px;? ? ? ? }
? ? ? ? #Main {? ? ? ? ? ? background-color: #F60;? ? ? ? ? ? width: 1177px;? ? ? ? ? ? height: 570px;? ? ? ? }? ? </style></head><body>? ? <div id="Main">? ? ? ? <div id="Img"></div>? ? ? ? <img id="xz" src="https://thumbnail0.baidupcs.com/thumbnail/f6d77c5db40deb70818e8fa1764d512e?fid=372067725-250528-1020959445205490&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-QsVHde1Fml1AOj0RP8F3NjiB0Rg%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394370782677662805&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" />? ? </div>? ? <div>一庫一庫 游戲規則：<br>? ? ? ? 你共有50次q技能的能量。<br>? ? ? ? 點擊q技能，鼠標左鍵則向鼠標位置釋放，右鍵取消技能<br>? ? ? ? 直接點擊右鍵上下移動瞎子。<br>? ? ? ? 共釋放了<span id="qindex">0</span>次q<br>? ? ? ? 命中英雄<span id="zindex">0</span>次<br>? ? </div>? ? <script>? ? ? ? document.oncontextmenu = function (e) {? ? ? ? ? ? e.preventDefault();? ? ? ? };? ? ? ? var it = null;? ? ? ? var iy = null;? ? ? ? var qindex = 0;? ? ? ? var yindex = 0;? ? ? ? var zindex = 0;? ? ? ? var ele = document.getElementById("Main");? ? ? ? var zele = document.getElementById("zindex");? ? ? ? var qele = document.getElementById("qindex");? ? ? ? var xz = document.getElementById("xz");? ? ? ? var Img = document.getElementById("Img");? ? ? ? var x = "";? ? ? ? var y = "";? ? ? ? var mLength = 3;? ? ? ? function createB() {? ? ? ? ? ? var b = document.createElement('div');? ? ? ? ? ? var mLength = 2;? ? ? ? ? ? var ib = null;? ? ? ? ? ? b.className = 'b'? ? ? ? ? ? ele.appendChild(b);? ? ? ? ? ? function move() {? ? ? ? ? ? ? ? if (b.offsetTop < 570) {? ? ? ? ? ? ? ? ? ? b.style.top = (b.offsetTop + mLength) + "px";? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? b.remove();? ? ? ? ? ? ? ? ? ? clearInterval(ib);? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? ib = setInterval(move, 10);? ? ? ? ? ? return b;? ? ? ? }? ? ? ? function createY() {? ? ? ? ? ? yindex++;? ? ? ? ? ? var y = document.createElement('div');? ? ? ? ? ? var iy = null;? ? ? ? ? ? y.className = 'y';? ? ? ? ? ? y.id = yindex + 'y';? ? ? ? ? ? ele.appendChild(y);? ? ? ? ? ? function move() {? ? ? ? ? ? ? ? if (y.offsetTop < 570) {? ? ? ? ? ? ? ? ? ? y.style.top = (y.offsetTop + mLength) + "px";? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? y.remove();? ? ? ? ? ? ? ? ? ? clearInterval(iy);? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? iy = setInterval(move, 10);? ? ? ? ? ? return y;? ? ? ? }? ? ? ? function GetMouse(oEvent) {? ? ? ? ? ? x = oEvent.clientX;? ? ? ? ? ? y = oEvent.clientY;? ? ? ? ? ? Img.style.left = (x - 5) + "px";? ? ? ? ? ? Img.style.top = (y - 5) + "px";? ? ? ? }? ? ? ? function createQ(index) {? ? ? ? ? ? var q = document.createElement('div');? ? ? ? ? ? q.className = 'q'? ? ? ? ? ? q.id = 'q' + index;? ? ? ? ? ? q.style.left = xz.offsetLeft + "px";? ? ? ? ? ? q.style.top = (xz.offsetTop + 40) + "px";? ? ? ? ? ? ele.appendChild(q);? ? ? ? ? ? return q;? ? ? ? }? ? ? ? function releaseQ() {? ? ? ? ? ? if (qindex >= 50) {? ? ? ? ? ? ? ? return false;? ? ? ? ? ? }? ? ? ? ? ? qindex++;? ? ? ? ? ? var q = createQ(qindex);? ? ? ? ? ? qele.textContent = qindex;? ? ? ? ? ? var qy = q.offsetTop;? ? ? ? ? ? var qx = q.offsetLeft;? ? ? ? ? ? var my = y - qy;? ? ? ? ? ? var mx = x - qx;? ? ? ? ? ? var titleL = Math.sqrt(my * my + mx * mx);//總長? ? ? ? ? ? var mLength = 10;//10毫秒運動px數? ? ? ? ? ? var titleTime = titleL / mLength;//運動到鼠標點的時間? ? ? ? ? ? var xs = mx / titleTime;//y 速度? ? ? ? ? ? var ys = (my / titleTime);//x 速度? ? ? ? ? ? var itq = setInterval(move, 10, qindex);? ? ? ? ? ? var qOffsetTop = q.offsetTop;? ? ? ? ? ? var qOffsetLeft = q.offsetLeft;? ? ? ? ? ? function move(qindex) {? ? ? ? ? ? ? ? var qqindex = qindex;? ? ? ? ? ? ? ? qOffsetTop += ys;? ? ? ? ? ? ? ? qOffsetLeft += xs;? ? ? ? ? ? ? ? q.style.top = (qOffsetTop) + "px";? ? ? ? ? ? ? ? q.style.left = (qOffsetLeft) + "px";? ? ? ? ? ? ? ? // 紅點 getClass 循環紅點 判斷是否碰撞? ? ? ? ? ? ? ? //綠點 同理 ?但是綠點只有一個? ? ? ? ? ? ? ? if (q.offsetLeft < 310 && q.offsetLeft > 290) {? ? ? ? ? ? ? ? ? ? var ba = document.getElementsByClassName('b');? ? ? ? ? ? ? ? ? ? var offsetTop = q.offsetTop;? ? ? ? ? ? ? ? ? ? for (var index = 0; index < ba.length; index++) {? ? ? ? ? ? ? ? ? ? ? ? if (ba[index].offsetTop - 15 < offsetTop && ba[index].offsetTop + 15 > offsetTop) {? ? ? ? ? ? ? ? ? ? ? ? ? ? q.remove();? ? ? ? ? ? ? ? ? ? ? ? ? ? ba[index].remove();? ? ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(itq);? ? ? ? ? ? ? ? ? ? ? ? ? ? if (qqindex >= 50) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('成績：' + zindex);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? location.reload();? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? if (q.offsetLeft < 160 && q.offsetLeft > 140) {? ? ? ? ? ? ? ? ? ? var ya = document.getElementsByClassName('y');? ? ? ? ? ? ? ? ? ? var offsetTop = q.offsetTop;? ? ? ? ? ? ? ? ? ? for (var index = 0; index < ya.length; index++) {? ? ? ? ? ? ? ? ? ? ? ? if (ya[index].offsetTop - 15 < offsetTop && ya[index].offsetTop + 15 > offsetTop) {? ? ? ? ? ? ? ? ? ? ? ? ? ? q.remove();? ? ? ? ? ? ? ? ? ? ? ? ? ? ya[index].remove();? ? ? ? ? ? ? ? ? ? ? ? ? ? zindex++;? ? ? ? ? ? ? ? ? ? ? ? ? ? zele.textContent = zindex;? ? ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(itq);? ? ? ? ? ? ? ? ? ? ? ? ? ? if (qqindex >= 50) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('成績：' + zindex);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? location.reload();? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? if (q.offsetTop < -20 || q.offsetLeft < -20 || q.offsetTop > 550 || q.offsetLeft > 1150) {? ? ? ? ? ? ? ? ? ? q.remove();? ? ? ? ? ? ? ? ? ? clearInterval(itq);? ? ? ? ? ? ? ? ? ? if (qqindex >= 50) {? ? ? ? ? ? ? ? ? ? ? ? alert('成績：'+zindex);? ? ? ? ? ? ? ? ? ? ? ? location.reload();? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? }? ? ? ? function moveXZ() {? ? ? ? ? ? var xzy = xz.offsetTop;? ? ? ? ? ? var my = y - xzy;? ? ? ? ? ? it = setInterval(move, 10);? ? ? ? ? ? function move() {? ? ? ? ? ? ? ? if (my > 0) {? ? ? ? ? ? ? ? ? ? if (my > mLength) {? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop + mLength) + "px";? ? ? ? ? ? ? ? ? ? ? ? my -= mLength;? ? ? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop + my) + "px";? ? ? ? ? ? ? ? ? ? ? ? my = 0;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? } else if (my < 0) {? ? ? ? ? ? ? ? ? ? if (-my > mLength) {? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop - mLength) + "px";? ? ? ? ? ? ? ? ? ? ? ? my += mLength;? ? ? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? ? ? xz.style.top = (xz.offsetTop + my) + "px";? ? ? ? ? ? ? ? ? ? ? ? my = 0;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? clearInterval(it);? ? ? ? ? ? ? ? }? ? ? ? ? ? }
? ? ? ? ? ? //gogogo? ? ? ? }? ? ? ? function Main() {? ? ? ? ? ? setInterval(createB, 1000);? ? ? ? ? ? setInterval(createY, (600 / (mLength / 10)));? ? ? ? ? ? ele.onmousemove = GetMouse;? ? ? ? ? ? document.onkeydown = function (event) {? ? ? ? ? ? ? ? var e = event || window.event || arguments.callee.caller.arguments[0];? ? ? ? ? ? ? ? if (e && e.keyCode == 81) {? ? ? ? ? ? ? ? ? ? if (Img.style.display != 'block') {? ? ? ? ? ? ? ? ? ? ? ? Img.style.display = 'block';? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? };? ? ? ? ? ? ele.onmousedown = function (elem) {? ? ? ? ? ? ? ? if (Img.style.display == 'block') {? ? ? ? ? ? ? ? ? ? Img.style.display = 'none';? ? ? ? ? ? ? ? ? ? if (elem.button == 0) {? ? ? ? ? ? ? ? ? ? ? ? // 釋放q技能? ? ? ? ? ? ? ? ? ? ? ? releaseQ()? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? if (elem.button == 2) {? ? ? ? ? ? ? ? ? ? ? ? clearInterval(it);? ? ? ? ? ? ? ? ? ? ? ? // xz 向坐標點y軸位移? ? ? ? ? ? ? ? ? ? ? ? moveXZ();? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? }? ? ? ? function ChangeBg(id, url) {? ? ? ? ? ? document.getElementById(id).src = url;? ? ? ? }? ? ? ? Main();? ? </script></body></html>
轉載于:https://www.cnblogs.com/zwcai/p/7623962.html
總結
- 上一篇： oracle的package是什么意思,
- 下一篇： 关系数据库语言SQL课后练习题（二）