HTML5 car racing game
HTML5 car track drag racing game code free download:
https://download.csdn.net/download/qq_44273429/14017244
Introduction: H5 boutique sprint racing club game, racing game source code. Game introduction: mouse, keyboard left and right keys, control the direction of the car, let's start the racing game. Compatible with mobile phones (horizontal screen mode is better, shaking left and right to control the direction), with background sound effects. Although the project is simple, it is for everyone to learn and reference.
Project structure:
index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="HandheldFriendly" content="True">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.01, minimal-ui" />
<title>HTML5汽车赛道飙车游戏</title>
<meta name="keywords" content="HTML5,汽车赛道,飙车游戏" />
<meta name="description" content="HTML5汽车赛道飙车游戏代码下载。H5精品短跑赛车俱乐部游戏，赛车游戏源代码。游戏介绍：鼠标,键盘左右键，控制赛车方向，让我们开始赛车比赛游戏吧。兼容手机移动端（横屏模式效果更好，左右晃动控制方向），带背景音效。" />
<meta name="author" content="js代码(www.jsdaima.com)" />
<meta name="copyright" content="js代码(www.jsdaima.com)" />
<style>
body {
margin: 0px;
padding: 0px;
width: 100%;
background-color:black;
}
canvas {
-ms-touch-action: none;
image-rendering: -o-crisp-edges;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
</style>
<script src="viewporter.js"></script>
</head>
<body>
<div id="viewporter">
<canvas id="canvas" moz-opaque></canvas>
</div>
</body>
<script src="TweenMax.min.js"></script>
<script src="howler.js"></script>
<script src="app.js"></script>
</html>
01 The constructor adds support for the selector. HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>3333</li>
</ul>
<script>
/*
* jQ整体是一个自调函数，
* 这个自调函数接收两个参数，第一个是全局对象，第二个是jQ的主体函数，
* 然后自调函数内间接调用了传入的主体函数，
* 主体函数对外暴露了两个全局变量$ 与 jQuery。
* */
// 1、整体自调
(function(global, factory){
factory( global );
})(window, function(window) {
// 缓存一些常用的方法，提高查找效率
var document = window.document;
var arr = [],
push = arr.push,
slice = arr.slice;
// 3、定义工厂函数
var jQuery = function(selector) {
return new jQuery.fn.init(selector);
}
// 4、给原型起一个简称，添加原型上添加一些核心成员
jQuery.fn = jQuery.prototype = {
construcotr: jQuery
}
// 5、定义构造函数，顺带把构造函数添加到工厂的原型中
var init = jQuery.fn.init = function(selector) {
[].push.apply(this, document.querySelectorAll(selector));
};
// 6、把构造函数的原型替换为工厂的原型，保持一致；
// 这样init实例就可以使用工厂原型的方法了
init.prototype = jQuery.fn;
// 7、添加一个组织整体结构的extend方法
jQuery.extend = jQuery.fn.extend = function() {
var arg = arguments, argLen = arg.length;
var i = 1, key;
var target = arg[0];
// 如果参数为1，copy给this
if(argLen === 1) {
target = this;
i = 0;
}
// 遍历每一个被copy的对象
for(; i < argLen; i++) {
// 遍历得到对象的属性，copy给target
for(key in arg[i]) {
if(arg[i].hasOwnProperty(key)) {
target[key] = arg[i][key];
}
}
}
return target;
};
// 2、主体函数暴露全局变量
window.jQuery = window.$ = jQuery;
});
</script>
<script>
console.log($('li'));
</script>
</body>
</html>