- 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】
- 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
- 💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】
- 💬 免费且实用的计算机相关知识题库：👉进来逛逛
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。
本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 html5网页版3D反恐英雄游戏
✨ 前言
🕹️ 本文已收录于🎖️100个HTML小游戏专栏：100个H5游戏专栏
https://blog.csdn.net/qq_53544522/category_12064846.html
🎮 目前已有100+小游戏，源码在持续更新中，前100位订阅限时优惠，先到先得。
🐬 订阅专栏后可阅读100个HTML小游戏文章；还可私聊进前端/游戏制作学习交流群；领取一百个小游戏源码。
在线演示地址：https://code.haiyong.site/784/
源码也可在文末进行获取
✨ 项目基本结构
大致目录结构如下（共12个子文件）：
├── fps
│ ├── bg_hd1.jpg
│ ├── bg_hd2.jpg
│ ├── cs_m16g.png
│ ├── ctrl.png
│ ├── en_reckless_cs_fps.png
│ ├── en_reckless_gameover.jpg
│ └── en_reckless_title.jpg
├── js
│ ├── game.php
│ ├── game.php.html
│ └── gm18.min.js
├── icon.png
└── index.html
场景展示
HTML源码
<div id="viewporter">
<header id="header" class="EaselJS">
</header>
<canvas id="canvas" width="640" height="960" style="position: absolute; z-index: 1;"></canvas>
<div id="portraitLock" class="portraitLock">
<img class="rotatePhoneIcon" src="assets/lock.jpg" />
</div>
</div>CSS 源码
html,body
BODY, HTML {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
background-color: #000000;
/*overflow: hidden;*/
}portraitLock
.portraitLock {
position: absolute;
display: none;
width: 100%;
height: 100%;
background-color: #000000;
} rotatePhoneIcon
.rotatePhoneIcon {
width: 60%;
margin: 30px auto;
display: block;
}JS 源码
js 代码较多，这里提供部分，完整源码可以在文末下载
rtalt() 方法
function rtalt() {
0 == window.orientation && (-1 == navigator.userAgent.indexOf("Android") || 425 > window.innerHeight && 2 > window.devicePixelRatio) && setTimeout(scrollTo, 100, 0, 1)
}lding() 方法
function lding() {
ctx.clearRect(0, 0, 320, 416);
lcir(160, 246)
}
function asd2()
function asd2() {
document.getElementById("bspc").innerHTML = null;
document.getElementById("bspc").style.display = "none"
}初始化
function init() {
var e;
gs = -1;
e = navigator.userAgent;
dvid = 0; - 1 < e.indexOf("Android") && (dvid = 1, 4 <= Math.floor(navigator.userAgent.substr(e.indexOf("Android") + 8, 1)) && (dvid = 2)); - 1 < e.indexOf("iPad") && (dvid = 3); - 1 < e.indexOf("iPhone") && (dvid = 4, 2 <= window.devicePixelRatio && (dvid = 5, 568 == window.screen.height && (dvid = 5)));
aut = ""; - 1 < e.indexOf("SCL21") && (aut = "nty_");
wdpr = 1;
chf2.innerHTML = '<canvas id="gcvs" width="320" height="416"></canvas>';
canvas = document.getElementById("gcvs");
ctx = canvas.getContext("2d"); - 1 == document.URL.indexOf("page") ? canvas.style.backgroundImage = "url(fps/en_reckless_title.jpg)" : canvas.style.backgroundImage = "url(fps/en_reckless_title_nolink.jpg)";
canvas.addEventListener("touchstart", tev1, !1);
canvas.addEventListener("touchend", tev2, !1);
canvas.addEventListener("touchmove", tev3, !1);
canvas.addEventListener("mousedown", tev11, !1);
canvas.addEventListener("mouseup", tev22, !1);
canvas.addEventListener("mousemove", tev33, !1);
flt = mt = tm = lps = gldt = 0;
img1 = new Image;
img1.src = "fps/" + aut + "en_reckless_cs_fps.png";
img1.onload = function() {
gsts()
};
img2 = new Image;
img2.src = "fps/bg_hd1.jpg";
img2.onload = function() {
gsts()
};
img3 = new Image;
img3.src = "fps/bg_hd2.jpg";
img3.onload = function() {
gsts()
};
img4 = new Image;
img4.src = "fps/" + aut + "cs_m16g.png";
img4.onload = function() {
gsts()
};
img5 = new Image;
img5.src = "fps/ctrl.png";
img5.onload = function() {
gsts()
};
img6 = new Image; - 1 == document.URL.indexOf("page") ? img6.src = "fps/en_reckless_title.jpg" : img6.src = "fps/en_reckless_title_nolink.jpg";
img6.onload = function() {
gsts()
};
img7 = new Image; - 1 == document.URL.indexOf("page") ? img7.src = "fps/en_reckless_gameover.jpg" : img7.src = "fps/en_reckless_gameover_nolink.jpg";
img7.onload = function() {
gsts()
};
document.body.buttonMode = null;
document.body.backgroundColor = null;
bp_f = {};
bp_fi = 0;
ix = [0, 0, 0, 0, 0, 700, 780, 860, 0, 100, 200, 300, 400, 500, 600, 0, 100, 200, 300, 400, 500, 600, 0, 70, 140, 210, 280, 350, 420, 490, 560, 630, 0, 70, 140, 210, 280, 350, 420, 490, 560, 630, 0, 70, 140, 210, 280, 350, 420, 490, 560, 630, 0, 70, 140, 210, 850, 860, 870, 880, 887, 894, 700, 850, 700, 0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 588, 637, 0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 588, 637, 0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 901, 906, 911, 916, 921, 850, 700, 850, 895, 940, 0, 100, 200, 300, 400, 500, 600, 0, 100, 200, 300, 400, 500, 600, 0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 588, 637, 0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 588, 637, 0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 850, 871, 892, 700, 850, 700, 730, 760, 790, 820, 850, 880, 910, 940, 970, 1002, 0, 0, 150, 700, 733, 766, 799, 832, 865, 898, 931, 964, 700, 733, 750, 763, 778, 793, 808, 823, 838, 853, 868, 883, 898, 700, 750];
iy = [0, 0, 0, 0, 0, 706, 706, 706, 0, 0, 0, 0, 0, 0, 0, 125, 125, 125, 125, 125, 125, 125, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 320, 320, 320, 320, 320, 320, 320, 320, 320, 320, 390, 390, 390, 390, 390, 390, 390, 390, 390, 390, 460, 460, 460, 460, 602, 602, 602, 602, 602, 602, 406, 406, 556, 530, 530, 530, 530, 530, 530, 530, 530, 530, 530, 530, 530, 530, 530, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 670, 670, 670, 670, 670, 670, 670, 670, 670, 670, 670, 670, 602, 602, 602, 602, 602, 634, 786, 556, 556, 556, 740, 740, 740, 740, 740, 740, 740, 865, 865, 865, 865, 865, 865, 865, 990, 990, 990, 990, 990, 990, 990, 990, 990, 990, 990, 990, 990, 990, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1060, 1130, 1130, 1130, 1130, 1130, 1130, 1130, 1130, 1130, 1130, 1130, 1130, 612, 612, 612, 0, 659, 886, 886, 886, 886, 886, 886, 886, 886, 886, 886, 920, 0, 127, 127, 936, 936, 936, 936, 936, 936, 936, 936, 936, 977, 977, 977, 977, 977, 977, 977, 977, 977, 977, 977, 977, 977, 1018, 1005];
iw = [0, 0, 0, 0, 0, 80, 80, 80, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 10, 10, 10, 7, 7, 7, 150, 150, 150, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 5, 5, 5, 5, 5, 85, 100, 45, 45, 45, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 21, 21, 21, 320, 146, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 8, 320, 150, 78, 33, 33, 33, 33, 33, 33, 33, 33, 33, 33, 17, 13, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 320, 3];
ih = [0, 0, 0, 0, 0, 80, 80, 80, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 10, 10, 10, 7, 7, 7, 150, 150, 150, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 6, 6, 6, 6, 6, 25, 100, 46, 46, 46, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 22, 22, 22, 406, 47, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 16, 127, 36, 14, 41, 41, 41, 41, 41, 41, 41, 41, 41, 41, 35, 13, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 10, 7];
gf = 0;
gix = Array(30);
giy = Array(30);
var t = a = 0;
for (e = 0; 30 > e; e++) gix[e] = a, giy[e] = t, a += 320, 1600 <= a && (a = 0, t += 416, 1248 <= t && (t = 0));
mfx = Array(30);
mfy = Array(30);
for (e = t = a = 0; 40 > e; e++) mfx[e] = a, mfy[e] = t, a += 200, 1e3 <= a && (a = 0, t += 160);
dm_vp = 25;
dm_x = 160;
dm_y = 168;
rknx = [];
for (e = 0; 30 > e; e++) rknx[e] = [];
rkny = [];
for (e = 0; 30 > e; e++) rkny[e] = [];
e = 0;
a = [-18, -27, -16, -27, -14, -25, -12, -23, -9, -19, -7, -19, -6, -19, -5, -19, -4, -19, -2, -19, -1, -19, 0, -19, 1, -19, 2, -19, 4, -19, 5, -19, 6, -19, 7, -19, 9, -19, 12, -23, 14, -24, 17, -27, -18, -25, -16, -25, -14, -23, -12, -22, -10, -20, -7, -17, -6, -17, -5, -17, -4, -17, -2, -17, -1, -17, 0, -17, 1, -17, 2, -17, 4, -17, 5, -17, 6, -17, 7, -17, 10, -20, 12, -22, 14, -23, 17, -25, -18, -23, -16, -23, -14, -21, -12, -20, -10, -19, -8, -17, -6, -16, -5, -16, -4, -16, -2, -16, -1, -16, 0, -16, 1, -16, 2, -16, 4, -16, 5, -16, 6, -16, 8, -17, 10, -19, 12, -20, 14, -21, 17, -23, -18, -22, -16, -22, -14, -20, -12, -19, -10, -18, -9, -17, -6, -15, -5, -15, -4, -15, -2, -15, -1, -15, 0, -15, 1, -15, 3, -15, 4, -15, 5, -15, 6, -15, 9, -17, 10, -18, 12, -19, 14, -20, 17, -22, -18, -20, -16, -20, -14, -18, -12, -17, -10, -16, -9, -16, -6, -14, -5, -14, -4, -14, -2, -14, -1, -14, 0, -14, 1, -14, 2, -14, 4, -14, 5, -14, 7, -14, 9, -15, 10, -16, 12, -17, 14, -18, 17, -20, -18, -18, -16, -18, -14, -17, -12, -16, -10, -15, -9, -14, -7, -13, -5, -12, -4, -12, -2, -12, -1, -12, 0, -12, 1, -12, 3, -12, 4, -12, 5, -12, 7, -13, 9, -14, 10, -15, 12, -16, 14, -17, 17, -18, -18, -17, -16, -17, -14, -15, -12, -14, -10, -13, -9, -13, -7, -12, -5, -11, -4, -11, -2, -11, -1, -11, 0, -11, 1, -11, 3, -11, 4, -11, 5, -11, 7, -12, 9, -13, 10, -13, 12, -14, 14, -15, 17, -17, -18, -15, -16, -15, -14, -14, -12, -13, -10, -12, -9, -11, -7, -11, -5, -10, -4, -10, -2, -10, -1, -10, 0, -10, 1, -10, 3, -10, 4, -10, 5, -10, 7, -11, 9, -11, 10, -12, 12, -13, 14, -14, 17, -15, -18, -14, -16, -14, -14, -12, -12, -11, -10, -10, -9, -10, -7, -9, -5, -9, -4, -8, -2, -9, -1, -9, 0, -9, 1, -9, 3, -9, 4, -8, 5, -8, 7, -9, 9, -10, 10, -10, 12, -11, 14, -12, 17, -14, -18, -12, -16, -12, -14, -11, -12, -10, -10, -9, -9, -8, -7, -8, -5, -7, -4, -7, -2, -7, -1, -7, 0, -7, 1, -7, 3, -7, 4, -7, 5, -7, 7, -8, 9, -8, 10, -9, 12, -9, 14, -10, 17, -12, -18, -10, -16, -10, -14, -9, -12, -8, -10, -8, -9, -7, -7, -6, -5, -6, -4, -6, -2, -6, -1, -6, 0, -6, 1, -6, 3, -6, 4, -6, 5, -6, 7, -6, 9, -7, 10, -7, 12, -8, 14, -9, 17, -10, -18, -9, -16, -9, -14, -7, -12, -7, -10, -6, -9, -6, -7, -5, -5, -5, -4, -4, -2, -4, -1, -5, 0, -5, 1, -5, 3, -4, 4, -4, 5, -4, 7, -5, 9, -6, 10, -6, 12, -6, 14, -7, 17, -9, -18, -7, -16, -7, -14, -6, -12, -5, -10, -5, -9, -4, -7, -4, -5, -3, -4, -3, -2, -3, -1, -4, 0, -4, 1, -4, 3, -3, 4, -3, 5, -3, 7, -4, 9, -4, 10, -4, 12, -5, 14, -6, 17, -7, -18, -5, -16, -5, -14, -4, -12, -4, -10, -3, -9, -3, -7, -2, -5, -2, -4, -2, -2, -2, -1, -2, 0, -2, 1, -2, 3, -2, 4, -2, 5, -2, 7, -2, 9, -3, 10, -3, 12, -4, 14, -4, 17, -5, -18, -4, -16, -4, -14, -3, -12, -2, -10, -2, -9, -1, -7, -1, -5, -1, -4, -1, -3, -1, -1, -1, 0, -1, 1, -1, 3, -1, 4, -1, 5, -1, 7, -1, 9, -1, 10, -2, 12, -2, 14, -3, 17, -4, -18, -2, -16, -2, -14, -1, -12, -1, -10, 0, -9, 0, -7, 0, -6, 0, -4, 0, -3, 0, -1, 0, 0, 0, 2, 0, 3, 0, 5, 0, 6, 0, 7, 0, 9, 0, 10, 0, 12, -1, 14, -1, 17, -2];
for (t = 0; 20 > t; t++)
for (var n = 0; 22 > n; n++) rknx[n][t] = a[e], rkny[n][t] = a[e + 1], e += 2;
mshx = [6, 10, 14, 18, 22, 26, 30, 34, 38, 42, 45, 50, 54, 56, 61, 66, 69, 73, 76, 80, 84, 88, 91, 95, 99, 102, 106, 109, 114, 117, 121, 125, 129, 133, 137, 140, 142, 146, 151, 153];
mshy = [191, 192, 191, 192, 193, 193, 192, 192, 192, 192, 192, 193, 193, 192, 193, 193, 194, 194, 193, 193, 193, 194, 194, 195, 194, 193, 195, 194, 196, 193, 197, 195, 196, 196, 196, 196, 196, 197, 196, 197];
msanm = [62, 0, 0, 63, 0, 0, 64, 0, 0];
rad = Math.PI / 180;
pl = 2.9;
idsp1 = .34;
idsp2 = -.34;
hpb = [0, 0, 0, 24, 0, 0, 0, 32, 0, 24, 0, 32];
scrux = [59, 91, 123, 165, 197, 229];
askb = 0;
e = document.URL.substr(0, 19);
t = a = 0;
for (a = 7; 19 > a; a++) t += e.charCodeAt(a);
askb = 1;
aini()
}图片资源
所有的图片全都打包放在文末的下载链接里了。
源码下载
1.CSDN资源下载：https://download.csdn.net/download/qq_44273429/87238570
2.从海拥资源网下载：https://code.haiyong.site/784/
3.也可通过下方卡片添加好友回复反恐英雄获取
![[附源码]Python计算机毕业设计Django教学辅助系统](https://img-blog.csdnimg.cn/46be7d8dfc534c47bf29a762868b3b6d.png)
![[附源码]计算机毕业设计医疗纠纷处理系统Springboot程序](https://img-blog.csdnimg.cn/24749b72e5fd4561a57c07cb45d3e871.png)
![[附源码]计算机毕业设计springboot疫情网课管理系统](https://img-blog.csdnimg.cn/458e320ecaa74e25a4b16bdb628dfeb9.png)
![[附源码]计算机毕业设计新能源汽车租赁Springboot程序](https://img-blog.csdnimg.cn/32c62320d659469a8e34d59a6735e6ab.png)
![[附源码]计算机毕业设计疫情物资管理系统Springboot程序](https://img-blog.csdnimg.cn/942d2056c9c84b64b64edd2df98b29e6.png)
