JS 射击游戏
Posted 笑逗逗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于JS 射击游戏的主要内容，如果未能解决你的问题，请参考以下文章