• 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】
• 🤟 前端学习课程：👉【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源码

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 = 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.也可通过下方卡片添加好友回复反恐英雄获取