当前位置: 开发笔记 > 编程语言 > 正文

HTML5与Javascript实现网页弹球游戏

作者：perfect_rl | 来源：互联网 | 2023-05-19 16:28

最终效果图：1.使用html5的canvas技术和javascript实现弹球游戏整体流程图：1.1html5can

最终效果图：

1. 使用html 5 的canvas 技术和Javascript实现弹球游戏

整体流程图：

1.1 html5 canvas技术的使用

首先在html页面中定义画布。

定义完画布之后就可以在Javascript代码中对画布进行操作。

canvas = document.getElementById('gamePane');
ctx = canvas.getContext("2d");

在画布中构画图形。

         ballImg = new Image();
         ballImg.src = "/site_media/images/kkball.ico";
         ctx.drawImage(ballImg, ballX- radius, ballY-radius, 2*radius, 2*radius);

1.2 Javascript弹球游戏实现

使用canvas技术我们实现了弹球游戏的GUI界面，接下来是游戏功能逻辑。

1.2.1首先明确游戏功能：

A. 游戏元素：弹球，砖块，挡板，道具。

B. 游戏开始，球从挡板出发，碰撞到砖块或者游戏边界时会反弹，碰撞到砖块时砖块消失，如果砖块隐藏了道具，道具显示并下落，碰到挡板时会发挥道具效果。弹球碰到挡板时也会反弹，但是如果碰到下边界则会损失游戏生命。

C. 当砖块完全消失时进入下一关，随着关卡数增加，板的长度会减小，球的速度回加快。

D. 道具： 1. 使弹球速度乘以1.3；2. 使弹球速度除以1.3；3. 使板的长度乘以2；4. 使板的长度除以2；

1.2.2 画布的刷新

画布的刷新使用html中的定时器实现。每0.003秒调用一次draw，更新画面。

 interval = setInterval(draw, 3);

1.2.3用户交互

用户通过鼠标进行交互，游戏还未开始时，球和板的x坐标都会随鼠标x坐标变化。这时点击鼠标左键，球和板的x坐标不再变化，这时可以设置球运行方向，方向为鼠标所在位置。游戏开始后，板x坐标随鼠标x坐标变化。

为鼠标点击和移动设置响应函数。

canvas.addEventListener('mousedown',onMouseDown, false);canvas.addEventListener('mousemove', padMove, false);
canvas.addEventListener('mouseup', start, false);

鼠标事件响应函数。

//鼠标落下点击事件
function onMouseDown(e){
        if(isStart==0){
           isPressed = 1;
 }
}
    //鼠标移动点击事件
function padMove(e){
var x;
x = e.layerX;
x = xx = x>(worldWidth-padWidth/2)?(worldWidth-padWidth/2):x;
padX = x;
 
if(isStart==0){ //如果游戏还未开始，则需要重新绘制板，如果游戏开始了，板的绘制在draw中完成。
           if(isPressed == 0){
                    ballX = padX;
                    ctx.clearRect(0, worldHeight-padHeight-2*radius, worldWidth, 2*radius); //clear the pad                 
                    drawBall();
                    drawPad();
           }
}
}
 
//鼠标抬起事件函数，设置弹球角度，设置定时器定时刷新页面。
function start(e){
if(isStart==0){
           ballAngle = Math.atan((worldHeight- e.layerY)/(e.layerX - ballX));
           if(ballAngle > 0){
                    ballAngle = - ballAngle;
           }
           else{
                    ballAngle = Math.PI - ballAngle;
           }
 
 
           isStart =1;
 
           isPressed = 0;
 
           interval = setInterval(draw, 3);
}
}

1.2.4 弹球运动与碰撞检测

弹球位置更新。

ballX = ballX + ballSpeed * Math.cos(ballAngle);
         ballY = ballY + ballSpeed * Math.sin(ballAngle);

球游戏边界碰撞检测。

//球碰撞到左右两边边界
if(ballX  worldWidth - radius){
           ballAngle = Math.PI - ballAngle;
}
//球碰到上边界
if(ballY            ballAngle = Math.PI*2 - ballAngle;
}
//球碰到下边界
if(ballY > worldHeight-radius){
//如果球未碰到板上，则游戏停止，判断生命是否用完，用完游戏结束
           if(ballX padX + padWidth/2){
                    ctx.clearRect(0,0,worldWidth,worldHeight-padHeight);
                    self.clearInterval(interval);
                    if(life>0){
                             drawInfo(1);
                             life = life -1;
                             reset();
 
}
                    else if(life ==0){
                             drawInfo(2);
                             getData();
 
                    }
                    return;
           }
//球碰到板上
           else{
                    ballAngle = Math.PI*2 - ballAngle;
           }
}
//判断砖块是否打完，如果打完进入下一关
if(count>= col*row){
           ctx.clearRect(0,0,worldWidth,worldHeight-padHeight);
 
           self.clearInterval(interval);
           newLevel();
           return;
         }

1.2.5 弹球与砖块碰撞检测。

每次弹球到达可能有砖块的那一层的时候，判断弹球位置所在砖块是否还在，如果还在，则消去它，同时判断其是否有道具。如果有，则创建道具。

function testCollision(){
//球的位置不可能有砖块
if(ballY > brickHeight * row){
           return;
}
//循环判断弹球在那一层
for(var i = row;i>0;i--){
           if((ballY-radius)<=(brickHeight*i)){
                   
          
                    if((ballY-radius)>(brickHeight*(i-1))){
                             var x = Math.floor(ballX/brickWidth);
 
                             if(bricks[i-1][x].isdisplay==0){
                                       continue;
                             }
                             else{
                                       bricks[i-1][x].isdisplay=0;
                                       ballAngle= Math.PI*2-ballAngle;
                                       score= score+100;
                                       count = count +1;
                //判断是否有道具
                                       if(bricks[i-1][x].tool!=0){
                                                var brickX = bricks[i-1][x].col * brickWidth;
                                                var brickY = bricks[i-1][x].row * brickHeight;
                                                var temp = new tool(brickX, brickY, bricks[i-1][x].tool);
                                                toolArray.push(temp);                                            }
                                       return;
                             }
 
                    }
                    else{
                             continue;
                    }
 
           }
           else
                    break;
}
}

1.2.6 道具的实现

初始化时创建一个存放道具的Array。

  toolArray = new Array();

if(bricks[i-1][x].tool!=0){
           var brickX = bricks[i-1][x].col * brickWidth;
           var brickY = bricks[i-1][x].row * brickHeight;
           var temp = new tool(brickX, brickY, bricks[i-1][x].tool);
    toolArray.push(temp);                                           
}

每次碰到砖块时，判断砖块是否有道具，如果有道具就创建道具，将其放入数组。砖块是否有道具及道具类型由随机数产生。

每次刷新画面时调用testTool函数，判断道具是否落到底部。如果落到板上则发挥效果。

function testTool(){
//循环遍历整张道具数组
for(var i = 0;i           console.log("tesetool", toolArray[i].type);
           var temp = toolArray[i];
//道具还未落到底部
           if(temp.y                    continue;
           }
           else{
    //道具落到板上，判断道具类型，发挥效果。
                    if(temp.x>=padX-padWidth/2 && temp.x<=padX+padWidth/2){
                             switch(temp.type){
                                       case 1:{
                                                if(ballSpeed<2.6)
                                                         ballSpeed=ballSpeed*1.3;
                                                console.log("tool", temp.type);
                                                break;
                                       }
                                       case 2:{
                                                if(ballSpeed>1.5)
                                                ballSpeed=ballSpeed/1.3;
                                                console.log("tool", temp.type);
                                                break;
                                       }
                                       case 3:{
                                                if(padWidth<200){
                                                         padWidth = padWidth *2;
                                                }
                                                console.log("tool", temp.type);
                                                break;
                                       }
                                       case 4:{
                                                if(padWidth>50)
                                                         padtool", temp.type);
                                                break;
                                       }
                             }
 
 
                    }
 
                    toolArray.splice(i, 1);
 
 
           }
}
}

完整代码：

var canvas;
var ctx;
var ballX = 500;
var ballY = 470;
var ballAngle = -Math.PI/2;
var radius = 20;
var ballSpeed = 2;
var padX = 500;  //挡板位置
var padWidth = 100;
var padHeight = 10;
var worldWidth;
var worldHeight;
var interval;
var score = 0;
var brickWidth = 100;
var brickHeight = 25;
var bricks;
var color;
var col = 10;
var row = 5;
var isStart = 0;
var time = 0;
var life = 3;
var isPressed = 0;
var level = 1;
var count = 0;
var ballImg;
var brickImg;
var padImg;
var tool1Img;
var tool2Img;
var tool3Img;
var tool4Img;
var toolArray;

var toolLength = 30;
var toolHeight = 30;

var isLoad = [0,0,0,0,0,0,0];

var loadInterval;


function brick(){
	this.col = 0;
	this.row = 0;
	this.isdisplay = 1;  //是否显示
	this.tool = 0;  //道具类型，0 表示无道具。
	this.color = "#000000"
}

//tool: 
//type:
//1: make the ball speed x1.3
//2: make the ball speed /1.3
//3: make the pad length twice
//4: make the pad length 1/2
function tool(x , y ,type){
	this.x = x;
	this.y = y;
	this.type = type;
}


function loadImage(){
	tool1Img = new Image();
	tool1Img.src = "/site_media/images/tool1.png";1
	tool1Img.addEventListener('load', function(){isLoad[0]=1}, false);
	tool2Img = new Image();
	tool2Img.src = "/site_media/images/tool2.png";
	tool2Img.addEventListener('load', function(){isLoad[1]=1}, false);
	tool3Img = new Image();
	tool3Img.src = "/site_media/images/tool3.png";
	tool3Img.addEventListener('load', function(){isLoad[2]=1}, false);
	tool4Img = new Image();
	tool4Img.src = "/site_media/images/tool4.png";
	tool4Img.addEventListener('load', function(){isLoad[3]=1}, false);
	padImg = new Image();
	padImg.src = "/site_media/images/pad.png";
	padImg.addEventListener('load', function(){isLoad[4]=1}, false);
	ballImg = new Image();
	ballImg.src = "/site_media/images/kkball.ico";
	ballImg.addEventListener('load', function(){isLoad[5]=1}, false);
	brickImg = new Image();
	brickImg.src = "/site_media/images/brick.ico";
	brickImg.addEventListener('load', function(){isLoad[6]=1}, false);
	//brickImg.addEventListener('load', init, false);
	loadInterval = setInterval(loadTest, 3);
}

//to test if all of the image is loaded
function loadTest(){
	var i;
	for(i=0;i		if(isLoad[i]==0){
			break;
		}
	}
	if(i>=isLoad.length){
		self.clearInterval(loadInterval);
		init();
	}
}
function GetRandomNum(Min,Max)
{   

	var Rand = Math.random();   
	console.log("Rand", Rand);
	if(Rand>0 && Rand<0.6){
		return 0;
	}
	else if(Rand<=0.7){
		return 1;
	}
	else if(Rand<=0.8){
		return 2;
	}
	else if(Rand<=0.9){
		return 3;
	}
	else if(Rand <=1){
		return 4;
	}
}   




function init(){  //init the game pane
	padWidth = 100;
	ballSpeed = 2;
	count = 0;
	isStart = 0;
	ballX = 500;
	ballY = 470;
	padX = 500;
	canvas = document.getElementById('gamePane');
	worldWidth = canvas.width;
	worldHeight = canvas.height;
	ctx = canvas.getContext("2d");
	toolArray = new Array();

	//create the array of the bricks
	//canvas.addEventListener('keydown', onKeyDown, true);
	drawInfo(3);
	color = new Array("#FF0000", "#00FF00", "#0000FF", "#ff00ff")
	bricks = new Array();
	for(var i = 0; i		bricks[i] = new Array();
		for(var j = 0;j			var temp = new brick();
			temp.col = j;
			temp.row = i;
			temp.isdisplay=1;
			temp.tool = GetRandomNum(1, 4);
			console.log("temp.tool", temp.tool);
			temp.color = color[(i*col+j)%4];
			bricks[i][j]= temp;
			
		}
	}
	canvas.focus();

	drawBall();
	drawPad();
	drawText();
	drawBricks();
	canvas.addEventListener('mousedown',onMouseDown, false);

	canvas.addEventListener('mousemove', padMove, false);

	canvas.addEventListener('mouseup', start, false);
}


function reset(){
	padWidth = 100;
	ballSpeed =2;
	toolArray = new Array();
	isStart=0;
	ballX = 500;
	ballY = 470;
	padX = 500;
	drawBricks();
	drawBall();
	drawPad();
	drawText();
}

function newLevel(){
	padWidth = padWidth - 5;
	ballSpeed = ballSpeed + 0.1;
	if(padWidth<= 40){
		drawInfo(4);
		getData();
		return;
	}
	else{
		row = row +1;
		level =level + 1;
		init();
	}	
}

function onMouseDown(e){
	if(isStart==0){
		isPressed = 1;
	}
}



function padMove(e){
	var x;
	x = e.layerX; 
	x = x	x = x>(worldWidth-padWidth/2)?(worldWidth-padWidth/2):x;
	padX = x;

	if(isStart==0){
		if(isPressed == 0){
			ballX = padX;
			ctx.clearRect(0, worldHeight-padHeight-2*radius, worldWidth, 2*radius); //clear the pad		
			drawBall();
			drawPad();
		}
	}
}


function start(e){
	if(isStart==0){
		ballAngle = Math.atan((worldHeight- e.layerY)/(e.layerX - ballX));
		if(ballAngle > 0){
			ballAngle = - ballAngle;
		}
		else{
			ballAngle = Math.PI - ballAngle;
		}


		isStart =1;

		isPressed = 0;

		interval = setInterval(draw, 3);
	}



}




function testCollision(){
	if(ballY > brickHeight * row){
		return;
	}

	for(var i = row;i>0;i--){
		if((ballY-radius)<=(brickHeight*i)){
			
		
			if((ballY-radius)>(brickHeight*(i-1))){
				var x = Math.floor(ballX/brickWidth);

				if(bricks[i-1][x].isdisplay==0){
					continue;
				}
				else{
					bricks[i-1][x].isdisplay=0;
					ballAngle= Math.PI*2-ballAngle;
					score= score+100;
					count = count +1;
					if(bricks[i-1][x].tool!=0){
						var brickX = bricks[i-1][x].col * brickWidth;
						var brickY = bricks[i-1][x].row * brickHeight;
						var temp = new tool(brickX, brickY, bricks[i-1][x].tool);
						toolArray.push(temp);					}
					return;
				}

			}
			else{
				continue;
			}

		}
		else
			break;
	}
}

function testTool(){
	for(var i = 0;i		console.log("tesetool", toolArray[i].type);
		var temp = toolArray[i];
		if(temp.y			continue;
		}
		else{
			if(temp.x>=padX-padWidth/2 && temp.x<=padX+padWidth/2){
				switch(temp.type){
					case 1:{
						if(ballSpeed<2.6)
							ballSpeed=ballSpeed*1.3;
						console.log("tool", temp.type);
						break;
					}
					case 2:{
						if(ballSpeed>1.5)
						ballSpeed=ballSpeed/1.3;
						console.log("tool", temp.type);
						break;
					}
					case 3:{
						if(padWidth<200){
							padWidth = padWidth *2;
						}
						console.log("tool", temp.type);
						break;
					}
					case 4:{
						if(padWidth>50)
							padtool", temp.type);
						break;
					}
				}


			}

			toolArray.splice(i, 1);


		}
	}
}

function postData(){
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.open("POST","../storeScore/",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	var text = "score="+score;
	xmlhttp.send(text)

}


function getData(){
	var url = "../storeScore/"+score+"/";
	window.location = url;
}

function drawInfo(num){

	ctx.fOnt= '50pt Calibri';
	ctx.fillStyle = "#E67E22";
	var text="One life lost!"
	if (num ==2){
		text = "Game over!"
	}
	else if(num ==3){
		text = "Level "+ level;
	}
	else if(num ==4){
		text = "Congratulations!"
	}
	ctx.fillText(text, 350, 250);
}


function drawBall(){

	ctx.drawImage(ballImg, ballX- radius, ballY-radius, 2*radius, 2*radius);

}

function drawBricks(){
	for(var i =0;i		for(var j=0;j			if(bricks[i][j].isdisplay ==1){
				ctx.fillStyle = bricks[i][j].color;
				var x = bricks[i][j].col * brickWidth;
				var y = bricks[i][j].row * brickHeight;
				//ctx.fillRect(x, y, brickWidth, brickHeight);
				ctx.drawImage(brickImg, x, y, brickWidth, brickHeight);
			}

		}
	}
}

function drawPad(){
	//ctx.fillStyle = "#0000FF";
	ctx.clearRect(0, worldHeight-padHeight, worldWidth, padHeight); //clear the pad
	//ctx.fillRect(padX-padWidth/2, worldHeight-padHeight, padWidth, padHeight);
	ctx.drawImage(padImg, padX-padWidth/2, worldHeight-padHeight, padWidth, padHeight);
}


function drawText(){
	ctx.fOnt= '15pt Calibri';
	ctx.fillStyle = "black";
	var text= "level:"+level;
	ctx.fillText(text, 900, 370)
	text = "life:   " + life;
	ctx.fillText(text, 900, 430);
	text = 'point:'+score; 
	ctx.fillText(text, 900, 390);
	var min;
	if(time > 60){
		min =Math.floor(time/60);
	}
	else{
		min =0;
	}
	var sec = Math.floor(time % 60);
	if(min <10){
		tMin = '0'+ min;
	}
	else
		tMin = ''+min;
	if(sec<10){
		tSec = '0'+sec;
	}
	else
		tSec=''+ sec;
	text = 'time: '+ tMin +":"+tSec;
	ctx.fillText(text, 900, 410);
}

function drawTool(){
	for(var i =0;i		switch(toolArray[i].type){
			case 1:{
				ctx.drawImage(tool1Img, toolArray[i].x, toolArray[i].y, 30, 30);
				break;
			}

			case 2:{
				ctx.drawImage(tool2Img, toolArray[i].x, toolArray[i].y, 30, 30);
				break;
			}

			case 3:{
				ctx.drawImage(tool3Img, toolArray[i].x, toolArray[i].y, 30, 30);
				break;
			}
			case 4:{
				ctx.drawImage(tool4Img, toolArray[i].x, toolArray[i].y, 30, 30);
				break;
			}
		}
		toolArray[i].y = toolArray[i].y+1;
	
	}
}

function draw(){
	//first clear the canvas 

	ctx.clearRect(0,0,worldWidth,worldHeight-padHeight);
	//ball
	drawBall();
	drawPad();
	drawBricks();

	drawTool();

	drawText();
	//flush the position of the ball
	ballX = ballX + ballSpeed * Math.cos(ballAngle);
	ballY = ballY + ballSpeed * Math.sin(ballAngle);

	//test the collision of the brick and the ball





	testCollision();
	testTool();


	if(ballX  worldWidth - radius){
		ballAngle = Math.PI - ballAngle;
	}

	if(ballY 		ballAngle = Math.PI*2 - ballAngle;
	}



	if(ballY > worldHeight-radius){
		if(ballX padX + padWidth/2){
			ctx.clearRect(0,0,worldWidth,worldHeight-padHeight);
			self.clearInterval(interval);
			if(life>0){
				drawInfo(1);
				life = life -1;
				reset();

			}
			else if(life ==0){
				drawInfo(2);
				getData();

			}
			return;
		}
		else{
			ballAngle = Math.PI*2 - ballAngle;
		}
	}
	if(count>= col*row){
		ctx.clearRect(0,0,worldWidth,worldHeight-padHeight);

		self.clearInterval(interval);
		newLevel();
		return;
	}

	time = time +0.003;
}

推荐阅读

io
深入理解 JavaScript 函数式编程技巧与应用（下篇）

本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例，我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中，节点之间的连线代表路径，连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ... [详细]

蜡笔小新 2024-11-08 19:44:31
spring
技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统

技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]

蜡笔小新 2024-11-11 15:24:24
default
使用纯JavaScript实现贪吃蛇游戏的开发技巧与解析

本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例，深入解析了游戏逻辑、动画效果及用户交互的实现过程，为开发者提供了宝贵的参考和实践经验。 ... [详细]

蜡笔小新 2024-11-08 13:56:09
text
木偶评估函数拒绝将JSHandles和ElementHandles用作参数

在处理木偶评估函数时，我发现可以顺利传递本机对象（如字符串、列表和数字），但每当尝试将JSHandle或ElementHandle作为参数传递时，函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的，建议在使用时进行适当的转换或封装，以确保函数能够正确处理。 ... [详细]

蜡笔小新 2024-11-07 18:34:55
text
HTML5大文件传输技术深度解析与实践分享

本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析，详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题，并提供了可供参考的代码示例和解决方案。此外，文章还讨论了常见的技术挑战及优化策略，旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]

蜡笔小新 2024-10-28 18:59:50
match
使用摄像头捕获图像并将其保存为文件

本文介绍了如何利用摄像头捕捉图像，并将捕获的图像数据保存为文件。通过详细的代码示例，展示了摄像头调用的具体实现方法，适用于多种应用场景，如安全监控、图像处理等。 ... [详细]

蜡笔小新 2024-10-24 15:03:41
io
在JavaScript中实现电子邮件和密码的输入验证 - Implementing Input Validation for Email and Password in JavaScript

本文旨在构建一个JavaScript函数，用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式，并检查密码强度，以提升用户账户的安全性。通过集成正则表达式和条件判断语句，该方法能够有效防止常见的输入错误，同时提供即时反馈，改善用户体验。 ... [详细]

蜡笔小新 2024-10-24 14:23:11
bit
C#编程指南：利用ASP.NET和JavaScript实现带有Fingerprint功能的Web应用登录系统

本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术，用户无需输入传统的登录ID即可完成身份验证，从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能，确保系统的稳定性和可靠性。 ... [详细]

蜡笔小新 2024-11-09 18:14:37
instance
C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨

本文探讨了C++异步编程中获取线程执行结果的方法与技巧，并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型，本文详细介绍了如何高效地处理多线程任务，确保程序的稳定性和性能。同时，文章还结合实际案例，展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]

蜡笔小新 2024-11-09 15:14:28
io
JavaScript XML操作实用工具类：XmlUtilsJS技巧与应用

JavaScript XML操作实用工具类：XmlUtilsJS技巧与应用 ... [详细]

蜡笔小新 2024-11-06 15:15:26
io
如何根据浏览器类型动态加载npm包以优化前端性能？

本文探讨了如何通过检测浏览器类型来动态加载特定的npm包，从而优化前端性能。具体而言，仅在用户使用Edge浏览器时加载相关包，以提升页面加载速度和整体用户体验。此外，文章还介绍了实现这一目标的技术细节和最佳实践，包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]

蜡笔小新 2024-11-06 13:30:57
javascript
如何按顺序获取网页链接？

我有一个包含多个URL的数组。首先，需要同步获取数组中的第一个和第二个URL，当其中任意一个请求完成时，再继续处理第三个URL。这种按序获取的方式可以确保数据的正确性和完整性，避免因并发请求导致的数据混乱。 ... [详细]

蜡笔小新 2024-11-01 15:07:04
go
利用Google Sheets自定义函数实现Ajax调用 - Executing Ajax Requests via Google Sheets Custom Functions

本文探讨了如何在 Google Sheets 中通过自定义函数实现 AJAX 调用。具体介绍了编写脚本的方法，以便在电子表格中发起 AJAX 请求，从而实现数据的动态获取与更新。这种方法不仅简化了数据处理流程，还提高了工作效率。 ... [详细]

蜡笔小新 2024-11-01 09:54:38
text
如何高效地压缩JavaScript代码以提升网页性能

本篇内容介绍了“javascript如何压缩”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处 ... [详细]

蜡笔小新 2024-10-23 14:37:16
default
HTML5 sever-sent onmessage方法不执行，怎么回事，求大神指点！做服务器广播，页面接收！

我想实现HTML5sever-sent实现服务器发送消息，然后页面来获取消息，网上找了好多方法，最终找到了一个能用的，但是消息获取页面不执行onmessage方法，求大神指点！本人用.net写的，代 ... [详细]

蜡笔小新 2024-10-19 18:03:08

perfect_rl

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章