21xrx.com
2024-06-02 19:47:30 Sunday
登录
文章检索 我的文章 写文章
用JavaScript编写简单小游戏和计算器
2023-06-11 05:36:48 深夜i     --     --
JavaScript 简单小游戏 计算器

三个

随着互联网和移动设备的普及，JavaScript成为了一门非常重要的编程语言。在这篇文章中，我们将介绍如何用JavaScript编写两个简单的应用程序——小游戏和计算器。

首先，让我们来看看如何编写一个简单的小游戏。我们可以使用HTML5 canvas元素来绘制游戏画面，并使用JavaScript来控制游戏逻辑。下面是一个示例代码，展示了如何绘制一个简单的小球，并让它能够左右移动：

script

var canvas = document.getElementById("canvas");


var ctx = canvas.getContext("2d");


var ballX = 50;


var ballY = 50;


var ballSpeedX = 10;


function moveBall() {


 ballX += ballSpeedX;


 if (ballX < 0 || ballX > canvas.width) {


  ballSpeedX *= -1;


 }


}


function drawBall() {


 ctx.clearRect(0, 0, canvas.width, canvas.height);


 ctx.beginPath();


 ctx.arc(ballX, ballY, 10, 0, Math.PI*2);


 ctx.fillStyle = "#0095DD";


 ctx.fill();


}


setInterval(function() {


 moveBall();


 drawBall();


}, 30);

这段代码会在canvas元素中绘制一个蓝色的小球，并且定时移动它。好了，现在我们已经知道了如何编写一个简单的小游戏，接下来让我们来看看如何编写一个简单的计算器。

使用JavaScript编写计算器非常简单，我们可以使用HTML表单元素来创建用户界面，并使用JavaScript来处理用户输入和计算结果。下面是一个示例代码，展示了如何创建一个计算器：

script

var firstNumber = document.getElementById("first");


var secondNumber = document.getElementById("second");


var operand = document.getElementById("operand");


var result = document.getElementById("result");


function calculate() {


 var num1 = Number(firstNumber.value);


 var num2 = Number(secondNumber.value);


 var op = operand.value;


 var res = 0;


 switch(op) {


  case "+":


   res = num1 + num2;


   break;


  case "-":


   res = num1 - num2;


   break;


  case "*":


   res = num1 * num2;


   break;


  case "/":


   res = num1 / num2;


   break;


 }


 result.innerHTML = res;


}


var calcForm = document.getElementById("calc");


calcForm.addEventListener("submit", function(event) {


 event.preventDefault();


 calculate();


});

这段代码会在HTML页面中创建一个表单，用户可以在表单中输入两个数字和一个操作符（+、-、*、/），然后点击“计算”按钮，计算结果会显示在页面上。好了，现在我们已经学会了如何用JavaScript编写一个简单的计算器。

总的来说，JavaScript是一门非常重要的编程语言，它可以用于开发Web应用程序、移动应用程序、桌面应用程序等等。在本文中，我们介绍了如何用JavaScript编写两个简单的应用程序——小游戏和计算器，希望对读者有所帮助。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复