HTML游戏—爱心鱼

最新推荐文章于 2022-11-30 21:26:30 发布

原创

最新推荐文章于 2022-11-30 21:26:30 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #视频

前面看了我文章的朋友们估计也能知道我在哪里学习了，快期末考试了，大部分时间要拿来复习。唉，实在是累啊，没有精力看视频学习了，今天就把自己以前跟着做的小游戏拿出来，记录一下吧~

<html>
<head>
	<meta charset="utf-8">
	<title>爱心鱼</title>
	<style type="text/css">
	
	body{
		padding-top: 10px;
	}
	.all_bg{
		width: 800px;
		height: 600px;
		margin: 0px auto;
	}
	#allCanves{
		position: relative;;
		width: 800px;
		height: 600px;
		margin: 0px;
	}
	#canvas1{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;

	}
	#canvas2{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	</style>


</head>
<body>
	
	<ul>
<li><a href="http://www.baidu.com" target="_blank">有问题请百度</a></li>
<li><a href="mailto:1171694317@qq.com?subject=意见">小川的邮箱</a></li>	
</ul>
<div class="all_bg">
	<div id="allCanves">
		<canvas id="canvas1" width="800" height="600"></canvas>
		<canvas id="canvas2" width="800" height="600"></canvas>
		
	</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/background.js"></script>
<script type="text/javascript" src="js/ane.js"></script>
<script type="text/javascript" src="js/fruit.js"></script>
<script type="text/javascript" src="js/mom.js"></script>
<script type="text/javascript" src="js/collision.js"></script>
<script type="text/javascript" src="js/baby.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/wave.js"></script>
<script type="text/javascript" src="js/dust.js"></script>

</body>

</html>

背景：

function drawbackground(){
	ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}

HTLM5常用js

window.requestAnimFrame = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
			return window.setTimeout(callback, 1000 / 60);
		};
})();


function calLength2(x1, y1, x2, y2) {
	return Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
}


function randomColor() {
	var col = [0, 1, 2];
	col[0] = Math.random() * 100 + 155;
	col[0] = col[0].toFixed();
	col[1] = Math.random() * 100 + 155;
	col[1] = col[1].toFixed();
	col[2] = Math.random() * 100 + 155;
	col[2] = col[2].toFixed();
	var num = Math.floor(Math.random() * 3);
	col[num] = 0;
	return "rgba(" + col[0] + "," + col[1] + "," + col[2] + ",";
}


function lerpAngle(a, b, t) {
	var d = b - a;
	if (d > Math.PI) d = d - 2 * Math.PI;
	if (d < -Math.PI) d = d + 2 * Math.PI;
	return a + d * t;
}

function lerpDistance(aim, cur, ratio) {
	var delta = cur - aim;
	return aim + delta * ratio;
}

function inOboundary(arrX, arrY, l, r, t, b) { //在l r t b范围内的检测
	return arrX > l && arrX < r && arrY > t && arrY < b;
}

function rgbColor(r, g, b) {
	r = Math.round(r * 256);
	g = Math.round(g * 256);
	b = Math.round(b * 256);
	return "rgba(" + r + "," + g + "," + b + ",1)";
}

function rgbNum(r, g, b) {
	r = Math.round(r * 256);
	g = Math.round(g * 256);
	b