本公司郑重承若:一次合作,终身免费提供技术服务!13071312958hp@hepingw.com微信联系和平网络科技-专业网站建设|网站制作|仿站|模板下载|微信小程序开发-何平网络科技(深圳)有限公司 |建站论坛 |免费建站 |建站视频教程

和平网络科技-专业网站建设|网站制作|仿站|模板下载|微信小程序开发-何平网络科技(深圳)有限公司
当前位置:和平网站建设 > 成功案例 > 外贸案例 >

一款休闲捕鱼小游戏源码,有各种音效,可静音,适应手机玩兼容苹果手机和安卓手机

日期:2020-04-12      浏览次数:

和平网络制作休闲捕鱼小游戏源码,有各种音效,可静音,适应手机玩,兼容苹果手机和安卓手机;
js+HTML5编码生成 网页版捕鱼达人游戏,效果不错。
游戏源码
<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>捕鱼达人</title>
<link rel="shortcut icon" href="#" />
<style>
* {
margin: 0px;
padding: 0px;
}
 
body {
background: black;
}
 
#canvas {
background-image: url(Images/bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
 
#more {
display: none;
}
 
/*竖屏*/
@media screen and (orientation: portrait) {
html {
width: 100vh;
height: 100vh;
}
 
body {
width: 100vh;
height: 100vh;
transform: rotate(90deg);
}
 
#canvas {
width: 100%;
height: 100%;
}
}
</style>
<script src="css/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 
$(document).click(function (e) {
var size = 100//自定义大小
$('body').append("<div class='dianjixiaoguo'>")//创建一个div
$('.dianjixiaoguo').css({//设置初始样式
position: 'fixed',//使用相对于浏览器进行定位(必须)
left: e.clientX,
top: e.clientY,
borderRadius: size + 'px',
border: '3px solid #69f',
}).stop().animate({//设置最终样式,用动画来表现(当点击过快时需要用stop来终止上一次未进行完的动画)
width: size,
height: size,
left: e.clientX - size / 2,
top: e.clientY - size / 2,
opacity: '0'
}, 1000, function () {//动画运行完毕后删除此div
$('body .dianjixiaoguo').remove()
})
 
})
</script>
</head>
 
<body>
<canvas id="canvas">
您的浏览器太low了!
</canvas>
<img src="Images/more.png" alt="" id="more">
<!-- <audio src="Images/background.mp3" loop autoplay id="bgAudio"></audio> -->
<audio src="Images/background.mp3" loop id="bgAudio"></audio>
<embed src="Images/background.mp3" loop id="bgAudio" hidden="true"></embed>
</audio>
<script>
// 音量
let volume = 1
// 背景音乐
let bgAudio = document.getElementById('bgAudio')
// 创建音频
function cAudio(src) {
let audio = new Audio(`Images/${src}.mp3`)
audio.volume = volume
audio.addEventListener('ended', () => audio.remove())
document.body.appendChild(audio)
audio.play()
}
function cImg(obj) {
let img = new Image(obj.w, obj.h)
img.src = `Images/${obj.src}.png`
return img
 
}
function loadImg(arr, fn) {
var result = {};
var iNow = 0;
for (var i = 0; i < arr.length; i++) {
var oImage = new Image();
oImage.setAttribute('crossOrigin', 'anonymous');
var tmp = arr[i].split('.');
result[tmp[0]] = oImage;
oImage.onload = function () {
iNow++;
if (iNow >= arr.length) {
fn(result);
}
}
oImage.src = 'Images/' + arr[i];
}
}
window.onload = function () {
var oCans = document.getElementById('canvas');
var curW = document.documentElement.clientWidth || document.body.clientWidth;
var curH = document.documentElement.clientHeight || document.body.clientHeight;
console.log(curW, curH)
var intger = '00000';
var intgerArr = getInteger(0);
var i = 0;
 
// 添加广告链接
let more = document.getElementById('more')
// 音乐按钮
let btnOn = cImg({ w: 40, h: 40, src: 'btn-volume-on' })
let btnOff = cImg({ w: 40, h: 40, src: 'btn-volume-off' })
oCans.width = curW - 10;
oCans.height = curH - 10;
//  获取画布 初始化
var oGc = oCans.getContext('2d');
// 添加点击事件
let rect = [
{
x: oCans.width - 200, y: oCans.height - 100, w: 150, h: 100, fn: () => {
window.open('https://www.baidu.com/')
}
},
{
x: 20, y: 10, w: 40, h: 40, fn: () => {
volume = volume > 0 ? 0 : 1
}
}
]
oCans.addEventListener('click', e => {
e = e || event;//获取事件对象
rect.forEach(obj => {
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
//如果事件位置在矩形区域中
if (x >= obj.x && x <= obj.x + obj.w && y >= obj.y && y <= obj.y + obj.h) {
obj.fn()
}
})
})
 
// 波浪初始化
var boHeight = canvas.height / 10;
var posHeight = canvas.height / 8.2;
//初始角度为0 
var step = 0;
//定义三条不同波浪的颜色 
var lines = ["rgba(0,222,255, 0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"];
 
 
 
loadImg(['pig.png', 'gun.png', 'zidan.png', 'gold.png', 'fish1.png', 'fish4.png', 'fish4_1.png', 'fish5.png', 'fish5_1.png', 'fish6.png', 'fish6_1.png', 'fish7.png', 'fish7_1.png', 'fish8.png', 'fish8_1.png', 'fish1_1.png', 'fish2.png', 'fish2_1.png', 'fish3.png', 'fish3_1.png', 'integer.png', 'bottom.jpg'], function (result) {
//炮的运动
// oGc.drawImage(result['gun'], 0, 0, 100, 98, oCans.offsetWidth / 2 - 32, oCans.offsetHeight - 70, 100, 98);
oGc.drawImage(result['gun'], 0, 0, 100, 98, oCans.offsetWidth / 2 - 32, oCans.offsetHeight - 70, 10, 98);
var gun = {};
var pig = {};
var goldArr = [];
var goldRun = [];
var zidanArr = [];
//  积分的位置
var bottomL = intgerArr.length * 40;
gun.x = oCans.offsetWidth / 2;
gun.y = oCans.offsetHeight - 100;
pig.arcX = result['pig'].width / 2;
pig.arcY = (oCans.offsetHeight - result['pig'].height / 2);
pig.curPoy = 0.5;
oCans.onmouseover = function () {
this.onmousemove = function (ev) {
var oEvent = ev || event;
var iMx = oEvent.layerX;
var iMy = oEvent.layerY;
gun.hudu = -(Math.atan2(iMx - gun.x, iMy - gun.y) + 180 * Math.PI / 180);
//炮
oGc.save();
oGc.translate(gun.x, gun.y + 32);//设置原点
 
oGc.rotate(gun.hudu);
oGc.drawImage(result['gun'], 0, 0, 64, 64, -32, -32, 64, 64);
oGc.restore();
}
this.onmousedown = function (ev) {
cAudio('rifle')
var oEvent = ev || event;
var iCx = oEvent.layerX;
var iCy = oEvent.layerY;
zidanArr.push(
{
x: gun.x,
y: gun.y,
startX: iCx,
startY: iCy,
iRatio: 0,
hudu: gun.hudu,
curPoy: 1
}
);
}
}
//画
setInterval(function () {
oGc.clearRect(0, 0, oCans.offsetWidth, oCans.offsetHeight);
// 给背景音乐赋值
bgAudio.volume = volume
// 绘制广告链接
oGc.drawImage(more, oCans.width - 200, oCans.height - 100, 150, 100);
// 绘制音乐按钮
if (volume) {
oGc.drawImage(btnOn, 20, 10, 40, 40)
} else {
oGc.drawImage(btnOff, 20, 10, 40, 40)
}
// document.title = zidanArr.length + '/' + fashArr.length + '/' + goldArr.length + '/' + goldRun.length;
 
// 绘制波浪
//画3个不同颜色的矩形 
step++;
for (var j = lines.length - 1; j >= 0; j--) {
oGc.fillStyle = lines[j];
//每个矩形的角度都不同,每个之间相差45度 
var angle = (step + j * 50) * Math.PI / 180;
var deltaHeight = Math.sin(angle) * boHeight;
var deltaHeightRight = Math.cos(angle) * boHeight;
oGc.beginPath();
oGc.moveTo(0, posHeight + deltaHeight);
oGc.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight - boHeight, canvas.width / 2, posHeight + deltaHeightRight - boHeight, canvas.width, posHeight + deltaHeightRight);
oGc.lineTo(canvas.width, canvas.height);
oGc.lineTo(0, canvas.height);
oGc.lineTo(0, posHeight + deltaHeight);
oGc.closePath();
oGc.fill();
}
//子弹
for (i = 0; i < zidanArr.length; i++) {
var theY = Math.floor(24 - Math.cos(zidanArr[i].hudu) * 24 - 10);
var theX = Math.ceil(Math.sin(zidanArr[i].hudu) * 24);
var arcX = zidanArr[i].x + theX;
var arcY = zidanArr[i].y + theY;
zidanArr[i].iRatio = (zidanArr[i].startX - arcX) / (zidanArr[i].startY - arcY);
 
oGc.save();
oGc.translate(arcX, arcY);//设置原点
oGc.rotate(zidanArr[i].hudu);
oGc.drawImage(result['zidan'], 0, parseInt(zidanArr[i].curPoy) * 48, 30, 48, theX - 15, theY - 24, 30, 48);
oGc.restore();
 
zidanArr[i].y -= 6;
zidanArr[i].x -= 6 * zidanArr[i].iRatio.toFixed(2);
zidanArr[i].curPoy += 0.3;
if (zidanArr[i].curPoy > 3) {
zidanArr[i].curPoy = 0;
}
if (zidanArr[i].x <= 0 || zidanArr[i].x >= oCans.offsetWidth || zidanArr[i].y <= 0 || zidanArr[i].y >= oCans.offsetHeight) {
zidanArr.splice(i, 1);
i--;
}
}
 
//炮
oGc.save();
oGc.translate(gun.x, gun.y + 32);//设置原点
oGc.rotate(gun.hudu);
oGc.drawImage(result['gun'], 0, 0, 100, 98, -32, -32, 100, 98);
oGc.restore();
//鱼
for (i = 0; i < fashArr.length; i++) {
 
var speedX = 2;
 
if (fashArr[i].type == 1) {
speedX = -2;
}
var speedY = parseFloat(speedX * Math.tan(fashArr[i].hudu));
fashArr[i].x = fashArr[i].x + speedX;
fashArr[i].y = fashArr[i].y + speedY;
 
oGc.save();
oGc.translate(fashArr[i].x, fashArr[i].y);
oGc.rotate(fashArr[i].hudu);
oGc.drawImage(result[fashArr[i].name], 0, parseInt(fashArr[i].curPoy) * fashArr[i].h, fashArr[i].w, fashArr[i].h, speedX, speedY, fashArr[i].w, fashArr[i].h);
oGc.restore();
fashArr[i].curPoy += fashArr[i].step;
if (fashArr[i].curPoy > fashArr[i].endPoy) {
fashArr[i].curPoy = 0;
}
if (fashArr[i].type == 0 && fashArr[i].x > oCans.offsetWidth) {
fashArr.splice(i, 1);
i--;
} else if (fashArr[i].x < -fashArr[i].w) {
fashArr.splice(i, 1);
i--;
}
}
 
// 底边
// 积分背景图
oGc.drawImage(result['bottom'], 0, 0, result['bottom'].width, result['bottom'].height, bottomL, curH - 70, (intgerArr.length - 1) * result['integer'].height / 10, result['integer'].height / 10 + 5);
 
//打中
for (i = 0; i < zidanArr.length; i++) {
for (var n = 0; n < fashArr.length; n++) {
if (collideTest(zidanArr[i].x, zidanArr[i].y, 30, 46, fashArr[n].x, fashArr[n].y, fashArr[n].w, fashArr[n].h)) {
// 子弹碰撞了 创建音频
cAudio('money')
var goldTmp = {
x: fashArr[n].x,
y: fashArr[n].y,
curPoy: 0,
};
intgerArr = getInteger(fashArr[n].intger);//设置积分
goldArr.push(goldTmp);
fashArr.splice(n, 1);
zidanArr.splice(i, 1);
i--;
break;
}
}
}
 
//金币
for (i = 0; i < goldArr.length; i++) {
// oGc.drawImage(result['gold'], 0, parseInt(goldArr[i].curPoy) * 51, 49, 51, goldArr[i].x, goldArr[i].y, 49, 51);
oGc.drawImage(result['gold'], 0, parseInt(goldArr[i].curPoy) * 51, 49, 51, goldArr[i].x, goldArr[i].y, 49, 51);
if (goldArr[i].curPoy >= 5) {
goldRun.push({
curX: goldArr[i].x,
curY: goldArr[i].y,
});
goldArr.splice(i, 1);
} else {
goldArr[i].curPoy += 0.5;
}
}
 
//金币运动
 
if (pig.curPoy > 0.5) {
pig.curPoy -= 0.08;
} else {
pig.curPoy = 0;
}
 
for (i = 0; i < goldRun.length; i++) {
oGc.drawImage(result['gold'], 0, 0, 49, 51, goldRun[i].curX, goldRun[i].curY, 49, 51);
var speedX = parseInt((pig.arcX - goldRun[i].curX) * 0.2);
var speedY = parseInt((pig.arcY - 20 - goldRun[i].curY) * 0.2);
goldRun[i].curX += speedX;
goldRun[i].curY += speedY;
if (speedX == 0) {
goldRun.splice(i, 1);
i--;
pig.curPoy = 1;
}
}
 
//pig
oGc.drawImage(result['pig'], 0, Math.round(pig.curPoy) * 90, 90, 90, 0, oCans.offsetHeight - 90, 90, 90);
 
//积分
for (i = 0; i < intgerArr.length; i++) {
// 金币的位置
oGc.drawImage(result['integer'], 0, intgerArr[i].old, result['integer'].width, result['integer'].height / 10, bottomL + (i * result['integer'].width), curH - 60, result['integer'].width, result['integer'].height / 10);
var intSpeed = (intgerArr[i].number - intgerArr[i].old) / 8;
intSpeed = intSpeed > 0 ? Math.ceil(intSpeed) : Math.floor(intSpeed);
intgerArr[i].old += intSpeed;
}
 
 
}, 1000 / 60);
});
 
var fashArr = [];
// 初始化鱼
var arr = [
{
name: 'fish1',
endPoy: 12,
step: 0.1,
w: 80,
h: 80,
intger: 2
},
{
name: 'fish2',
endPoy: 8,
step: 0.1,
w: 60,
h: 64,
intger: 3
},
{
name: 'fish3',
endPoy: 9,
step: 0.1,
w: 50,
h: 56,
intger: 1
},
{
name: 'fish4',
endPoy: 4,
step: 0.1,
w: 200,
h: 200,
intger: 10
},
{
name: 'fish5',
endPoy: 3,
step: 0.1,
w: 200,
h: 200,
intger: 5
},
{
name: 'fish6',
endPoy: 10,
step: 0.1,
w: 178,
h: 187,
intger: 5
},
{
name: 'fish7',
endPoy: 4,
step: 0.1,
w: 100,
h: 100,
intger: 5
},
{
name: 'fish8',
endPoy: 4,
step: 0.1,
w: 100,
h: 100,
intger: 5
}
]
setInterval(function () {
 
var rand = Math.round(Math.random() * (arr.length - 1));
var iType = Math.round(Math.random() * 1);
var tmp = {
x: -arr[rand].w,
y: oCans.offsetHeight / 2 - 150,
hudu: (Math.PI / 180) * (parseInt(Math.random() * 60 - 20)),
curPoy: 0,
step: arr[rand].step,
endPoy: arr[rand].endPoy,
name: arr[rand].name,
w: arr[rand].w,
h: arr[rand].h,
intger: arr[rand].intger,
type: 0
};
if (iType === 1) {
 
tmp.type = 1;
tmp.x = oCans.offsetWidth + tmp.w;
tmp.name = tmp.name + '_1';
}
fashArr.push(tmp);
}, 800);
 
//碰撞检测
function collideTest(x1, y1, w1, h1, x2, y2, w2, h2) {
var r1 = x1 + w1;
var b1 = y1 + h1;
 
var r2 = x2 + w2;
var b2 = y2 + h2;
 
if (x1 > r2 || r1 < x2 || b1 < y2 || y1 > b2) {
return false;
} else {
return true;
}
 
}
function getInteger(num) {
var intgerArr = [];
for (var i = 0; i < String(intger).length; i++) {
intgerArr.push({
old: Number(String(intger)[i]) * 53,
curPoy: 0
});
}
intger = parseFloat(intger) + num;
for (i = String(intger).length; i < 6; i++) {
intger = '0' + intger;
}
for (i = 0; i < intgerArr.length; i++) {
intgerArr[i].number = Number(String(intger)[i]) * 53;
}
return intgerArr;
}
}
</script>
 
 
</body>
 
</html>



一款******休闲捕鱼小游戏源码,有各种音效,可静音,适应手机玩


一款******休闲捕鱼小游戏源码,有各种音效,可静音,适应手机玩