admin 管理员组文章数量: 1184232
游戏截图
游戏说明
鱼的大小和细节随机生成，限制最大移动速度
优化鱼自动移动的方向
A->左 W->上 D->右 S->下 控制鱼移动
项目结构
代码展示
iindex.html代码
<!DOCTYPE>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>鱼塘</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link type="text/css" rel="stylesheet" href="main.css">
<style>
</style>
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%; background: url('1.jpg'); background-size: 100% 100%;">
<div style="width: 100%;height: 40px;background-color: #9acfea">
<button class="btn" onclick="zFish.config.da+=5">增加加速度</button>
<button class="btn" onclick="zFish.config.da > 15 ? (zFish.config.da-=5):0">减小加速度</button>
<label id="jsd">当前加速度：</label>
<label id="mczl">路面摩擦阻力：</label>
<label id="ssjsd">实时加速度：</label>
<label id="sd">当前速度：</label>
<label style="color: red">A->左 W->上 D->右 S->下</label>
<button class="btn" onclick="addFish()">加鱼</button>
</div>
<div style="width: 100%;height: calc(100% - 40px);">
<svg xmlns="http://www.w3/2000/svg" version="1.1" id="svg" style="width: 100%;height: 100%"></svg>
</div>
<script>
var index = 1;
var power = [-1,0,1];
$(zFish.init);
$(addFish);
function addFish(){
var x = zFish.randomNum(7,zFish.config.svgW),y = zFish.randomNum(7,zFish.config.svgH);
var r = zFish.randomNum(3,8);
var len = zFish.randomNum(5,8);
var b = [];
var p1 = parseInt(len/3);
var p2 = parseInt(len/3*2);
var maxR = r;
for (var i = 0;i < len; i++) {
var f = {};
f.x = x - r+2;
f.y = y - r+2;
if(i<=p1){
maxR+= 1;
f.r = maxR ;
}else if(i <= p2){
maxR-= 1;
f.r = maxR;
}else if(i == len - 2){
maxR-= 2;
f.r = maxR ;
}else{
maxR-= 1;
f.r = maxR ;
}
b.push(f);
}
console.log(p1,p2,len);
zFish.addFish({
id: 'fish'+(index ++),
clazz: 'other-f'+zFish.randomNum(1,8),
seed: 0,
head:{
r : r,
x : x,
y : y,
vx : (zFish.randomNum(0,1)>0?1:-1)*zFish.randomNum(15,35),
vy : (zFish.randomNum(0,1)>0?1:-1)*zFish.randomNum(15,25),
xPower : power[zFish.randomNum(0,2)],//-1 0 1 横向加速度
yPower : power[zFish.randomNum(0,2)],//-1 0 1 纵向加速度
},
body:b,
getPower: zFish.random
});
}
</script>
</body>
</html>
main.css代码
.draw-line{
stroke-width:3;
stroke-dasharray: 3,2;
stroke: #FF8C00;
}.other-f1{
stroke: lightskyblue;
}.other-f2 {
stroke: #11EE3D;
}.other-f3 {
stroke: #E6E61A;
}.other-f4 {
stroke: #7B1B35;
}.other-f5 {
stroke: #808080;
}.other-f6 {
stroke: #F70938;
}.other-f7 {
stroke: #44A3BB;
}.other-f8 {
stroke: #9E4DB3;
}
.btn{
padding: 5px 10px;margin: 3px;border: none;background-color: #0c8cc7;color: white;border-radius: 2px;outline: none;cursor: pointer;
font-family: Microsoft YaHei;font-size: 14px;
}main.js代码
(function(){
var config;
var me;
var zFish = {config : config = {
delay: 20,
svgH: 0,
maxVx: 30,
maxVy: 30,
svgW: 0,
da: 40,//默认加速度
df: 8,//默认阻力
},
fishArr: []
};
me = {
id: 'user0',
clazz: '',
type: 1,
seed: 0,
head:{
r : 7,
x : 50,
y : 50,
vx : 0,
vy : 0,
xPower : 0,//-1 0 1 横向加速度
yPower : 0,//-1 0 1 纵向加速度
},
body:[
{x:0,y:0,r:8},
{x:0,y:0,r:9},
{x:0,y:0,r:9},
{x:0,y:0,r:8},
{x:0,y:0,r:7},
{x:0,y:0,r:5},
{x:0,y:0,r:4},
{x:0,y:0,r:5},
]
};
function makeSVG(tag,id) {
var ns = 'http://www.w3/2000/svg';
var el= document.createElementNS(ns, tag);
el.setAttribute("class","draw-line");
el.setAttribute("id",id);
return el;
}
zFish.initRoad = function() {
var svg = $("#svg");
var h = svg.height();
var w = svg.width();
config.svgH = h;
config.svgW = w;
}
zFish.initFish = function(fish) {
var svg = $("#svg");
var h = svg.height();
var w = svg.width();
var ball = $(makeSVG("circle","fish_"+fish.id+"_0"));
ball.addClass(fish.clazz);
var x0 = fish.head.x;
var y0 = h-fish.head.y;
ball.attr("cx",x0).attr("cy",y0).attr("r",fish.head.r);
ball.css("zIndex",fish.body.length + 1);
svg.append(ball);
for (var tai in fish.body) {
var tail = $(makeSVG("circle","fish_"+fish.id+"_"+(parseInt(tai)+1)));
tail.attr("cx",x0).attr("cy",y0).attr("r",fish.body[tai].r);
tail.addClass(fish.clazz+' draw-line');
tail.css('stroke-dasharray',zFish.randomNum(0,4)+','+zFish.randomNum(0,4));
svg.append(tail);
tail.css("zIndex",fish.body.length - parseInt(tai));
}
if(fish.type == 1){
$("#jsd").text("加速度："+config.da);
$("#mczl").text("阻力："+config.df);
$("#sd").text("当前速度：0");
}
}
zFish.initEvent = function() {
$(document).bind('keypress', function(event){
if(event.keyCode === 119){
me.head.yPower = config.da;
}else if(event.keyCode === 100){
me.head.xPower = config.da;
}else if(event.keyCode === 115){
me.head.yPower = -config.da;
}else if(event.keyCode === 97){
me.head.xPower = -config.da;
}
}).bind('keyup', function(event){
if(event.keyCode === 87){
me.head.yPower = 0;
}else if(event.keyCode === 68){
me.head.xPower = 0;
}else if(event.keyCode === 83){
me.head.yPower = 0;
}else if(event.keyCode === 65){
me.head.xPower = 0;
}
});
}
zFish.run = function(fish){
var ball ;
if(fish == null){
fish = me;
}
if(fish.type !== 1){
fish.seed ++;
if(fish.seed > 190){
fish.seed = 0;
}
if(fish.seed == 0 ){
var xy = fish.getPower();
fish.head.xPower = xy.x;
fish.head.yPower = xy.y;
}
}
var ball = fish.head;
var xPower = ball.xPower;
var yPower = ball.yPower;
if(ball.vx !== 0 ){
xPower += (ball.vx > 0) ? -config.df : config.df;
}
if(ball.vy !== 0 ){
yPower += (ball.vy > 0) ? -config.df : config.df;
}
var t = config.delay/1000;
var afterVx = ball.vx + xPower * t;
var afterVy = ball.vy + yPower * t;
//var nowV = parseInt(Math.sqrt(afterVx*afterVx+afterVy*afterVy));
ball.vx = Math.abs(afterVx) <= config.maxVx ? afterVx : (afterVx>0?1:-1)*config.maxVx;
ball.vy = Math.abs(afterVy) <= config.maxVy ? afterVy : (afterVy>0?1:-1)*config.maxVy;
if(Math.abs(ball.vx) < 0.0000000001){
ball.vx = 0;
}
if(Math.abs(ball.vy) < 0.0000000001){
ball.vy = 0;
}
var sx = ball.vx*t + 0.5* xPower*t*t;
var sy = ball.vy*t + 0.5* yPower*t*t;
ball.x += sx *10;
ball.y -= sy *10;
var fix = ball.x;
var fiy = config.svgH-ball.y;
var fishObj = $("#fish_"+fish.id+"_0");
if(ball.x >ball.r && ball.x < config.svgW-ball.r){
fishObj.attr("cx",fix);
}else{
ball.vx = -ball.vx;
if(ball.x <ball.r){
ball.x = ball.r;
fishObj.attr("cx",ball.x);
}else if(ball.x > config.svgW-ball.r){
ball.x = config.svgW-ball.r;
fishObj.attr("cx",config.svgW-ball.r);
}
}
if(ball.y >ball.r&& ball.y < config.svgH-ball.r){
fishObj.attr("cy",ball.y);
}else{
ball.vy = -ball.vy;
if(ball.y <ball.r){
ball.y = ball.r;
fishObj.attr("cy",ball.y);
}else if(ball.y > config.svgH-ball.r){
ball.y = config.svgH-ball.r;
fishObj.attr("cy",config.svgH-ball.r);
}
}
if(fish.type == 1){
fish.seed ++;
if(fish.seed>20){
fish.seed = 0;
$("#ssjsd").text("实时加速度：["+xPower+","+yPower+"]");
if(ball.vx != 0 || ball.vy != 0){
$("#sd").text("当前速度："+parseInt(Math.sqrt(ball.vx*ball.vx+ball.vy*ball.vy)));
}
}
}
//$("#tail0").attr("cx",fix).attr("cy",fiy);
//console.log(ball.vx,ball.vy);
setTimeout(function () {
$("#fish_"+fish.id+"_1").attr("cx",$("#fish_"+fish.id+"_0").attr("cx")).attr("cy",$("#fish_"+fish.id+"_0").attr("cy"));
},30);
for (var i = 1; i< fish.body.length;i++){
var last = $("#fish_"+fish.id+"_"+i);
var ccx = last.attr('cx');
var ccy = last.attr('cy');
var f= function(a,b,a1){
return function () {
$("#fish_"+fish.id+"_"+a).attr(a1,b);
}
};
setTimeout(f(i+1,ccx,'cx'),30);
setTimeout(f(i+1,ccy,'cy'),30);
}
}
zFish.runFish = function(){
var t = setInterval(zFish.run,config.delay);
}
zFish.init = function(){
zFish.initRoad();
zFish.initFish(me);
zFish.initEvent();
zFish.runFish();
}
zFish.addFish = function(fish){
setTimeout(function () {
zFish.fishArr.push(fish);
var f = function(fi){
return function () {
zFish.run(fi);
}
}
zFish.initFish(fish);
setInterval(f(fish),config.delay);
},400);
}
zFish.random = function(){
var s1 = zFish.randomNum(1,3);
var s2 = zFish.randomNum(1,3);
var x = 0,y = 0;
if(s1 == 1){
x = -config.da/2+(10-zFish.randomNum(5,15));
}else if(s1 == 3){
x = config.da/2+(10-zFish.randomNum(5,15));
}else{
x = 0;
}
if(s2 == 1){
y = -config.da/2+(10-zFish.randomNum(5,15));
}else if(s2 == 3){
y = config.da/2+(10-zFish.randomNum(5,15));
}else{
y = 0;
}
return {x:x,y:y};
}
zFish.randomNum = function(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
break;
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
return 0;
break;
}
}
window.zFish = zFish;
}());
项目完整代码下载
html5电脑版鱼塘小游戏-游戏开发文档类资源-CSDN下载鱼塘里鱼的大小和细节随机生成，鱼的数量和速度可以自由控制，可以操作鱼行动的方向更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn/download/weixin_40986713/40002710
相关知识
HTML、CSS和JavaScript是构建现代网页的核心技术，它们相互配合，共同实现了网页的结构、样式和交互行为。下面将详细解释每种技术的特点和用法。
一、HTML（Hypertext Markup Language）
HTML 是一种标记语言，用于描述网页的结构和内容。它由一系列标签组成，通过这些标签可以定义不同的元素和其属性。以下是 HTML 的一些重要概念和常用标签：
-
标签（Tag）：HTML 使用标签来包围和定义文档中的元素。标签通常由尖括号表示，如
<tagname>。常见的标签有<html>、<head>、<body>等。 -
元素（Element）：元素是由开始标签和结束标签组成的整体，用于定义网页中的特定部分。例如，
<p>标签用来定义段落，<img>标签用来插入图片。 -
属性（Attribute）：属性提供了关于元素的额外信息。每个标签都可以具有不同的属性。例如，
<a>标签的href属性用于指定链接的目标地址。 -
结构化标签：HTML5 引入了一些新的结构化标签，如
<header>、<nav>、<section>、<article>等，使得页面的结构更加明确和语义化。
除了以上概念，HTML 还提供了丰富的标签来定义文本、链接、图像、表格、表单等各种元素。通过合理使用这些标签，可以创建出良好的页面结构和内容。
二、CSS（Cascading Style Sheets）
CSS 用于控制网页的样式和布局，通过选择器和声明来定位和修改 HTML 元素的外观。以下是 CSS 的一些重要概念和常用属性：
-
选择器（Selector）：选择器用于指定要应用样式的 HTML 元素。可以根据元素的标签名、类名、ID 等进行选择。例如，
h1选择器选择所有的标题元素。 -
声明块（Declaration Block）：在选择器中，可以使用声明块来定义元素的样式。声明块由花括号包围，包含一个或多个属性声明。例如，
{color: red; font-size: 16px;}定义了元素的文本颜色和字体大小。 -
属性（Property）：属性用于指定元素的样式特征，如颜色、字体、边距等。每个属性都有对应的值，用冒号与属性分隔。例如，
color: red;指定了文本的颜色为红色。 -
盒模型（Box Model）：CSS 使用盒模型来定义元素的布局和边框。盒模型包括内容区域、内边距、边框和外边距。通过调整这些属性，可以控制元素的大小和位置。
CSS 还提供了众多其他特性，如背景样式、浮动、定位、动画等，使开发者能够实现丰富的页面设计效果。
三、JavaScript
JavaScript 是一种脚本语言，用于实现网页的交互功能和动态效果。它可以通过操作 HTML 元素、响应用户事件和与后端进行数据交互来改变网页的行为。以下是 JavaScript 的一些重要概念和用法：
-
变量（Variable）：JavaScript 使用变量来存储和操作数据。变量可以容纳不同类型的值，如数字、字符串、数组、对象等。使用
var、let或const关键字声明变量。 -
数据类型（Data Types）：JavaScript 支持多种数据类型，如数字、字符串、布尔值、数组、对象等。可以使用适当的方法和运算符对它们进行操作。
-
函数（Function）：函数是一段可重复使用的代码块，用于执行特定的任务。通过定义函数，可以将逻辑封装起来，提高代码的可读性和复用性。
-
事件处理：JavaScript 可以捕捉用户在网页上的各种事件，如点击、鼠标移动、表单提交等。通过事件处理函数，可以对这些事件做出响应，并改变网页的状态。
-
DOM 操作：DOM（Document Object Model）是 HTML 文档的对象表示。JavaScript 可以使用 DOM API 来访问和操作网页的元素，例如更改文本内容、修改样式、添加或删除元素等。
-
AJAX 和异步编程：JavaScript 支持使用 AJAX 技术与后端进行数据交互，实现动态加载和更新页面内容。同时，JavaScript 还支持异步编程模式，使得在网络请求和其他耗时操作时不会阻塞页面的运行。
JavaScript 提供了丰富的内置函数和对象，用于处理字符串、日期、数学计算、数组操作等各种任务。此外，也可以通过引入第三方库和框架来扩展 JavaScript 的功能和能力。
总结： HTML 用于定义网页的结构和内容，CSS 用于控制网页的样式和布局，JavaScript 用于实现网页的交互和动态效果。它们共同构成了现代网页开发的基础，通过它们的结合使用，开发者可以创建出丰富、美观且具有良好交互性的网页应用。
版权声明：本文标题：html5 | 电脑版鱼塘小游戏 | 代码教程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754892218a3048193.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论