JavaWeb Javascript脚本语言

原创已于 2024-03-25 09:44:13 修改 · 437 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-03-06 09:00:00 首次发布

本文介绍了使用JavaScript进行登录验证，实现当用户输入特定账户和密码时的提示，并展示了如何在HTML/CSS中创建登录界面。同时，对贪吃蛇游戏进行了修改，包括颜色调整、难度降低、分数显示等。

实验目的

掌握Javascript基本语法；
掌握Javascript常见对象。

实验内容

【1】在实验2登录界面的基础上，实现：当用户输入账户为“gdpu”和密码为“xg2022”时，点击登录按钮弹出对话框显示“恭喜您，登录成功！”，输入其它账户和密码时，则显示“对不起，账户或密码错误，请重新输入。”。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	function login(){
		var uReal="米孝子";
		var  pswReal="666";
		var user=document.getElementById("账户").value;
		var psw=document.getElementById("密码").value;
		if (uReal==user && pswReal==psw){
			document.getElementById("结果显示").innerHTML="<span style=color:green>登录成功</span>";
		}else {
			document.getElementById("结果显示").innerHTML="<span style=color:yellow>密码错误或账户不存在</span>";
		}
	}
</script>
	<meta charset="UTF-8">
	<title>原神，启动</title>
	<style>
	body {
		background: url('./wallhaven-p97e9e.jpg');
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0;
	}
	
	form {
		position: relative;
		padding: 20px;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		transform: scale(10);
	}
	</style>
</head>
<body>
	<form align="center">
		账号<input type="text" id="账户"/>
		<br>
		<br>
		密码<input type="password" id="密码"/>
		<br>
		<br>
		<input type="button" value="原神，启动！" onclick="login()"> <br><br>
		<div id="结果显示"></div>
	</form>
</body>
</html>

【2】运行贪吃蛇小游戏，尝试进行以下修改（修改前和修改后的效果如图1、图2所示）：

将黄色的豆子改为红色；
将“青蛇”改为“白蛇”；
降低游戏的难度，即放慢蛇的移动速度，例如每秒移动一次；
在窗口左边添加一个div，用以显示当前游戏分数，例如每吃一个豆子加一分；
如果学有余力，可以尝试进行其它修改，例如修改黑色背景为图片等。

修改前:

修改后：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>贪吃蛇</title>
 <style>
  body {
	   	display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0;
  }
 </style>
</head>
<body>
 <div id=divmark style="width:200px;"></div>
 <canvas id="can" width="400" height="400" style="background: url('./wq67dx.jpg')">对不起，您的浏览器不支持canvas</canvas>
 
 <script>
  var mark=-1;
  var snake = [41, 40],  //snake队列表示蛇身，初始节点存在但不显示
   direction = 1,   //1表示向右，-1表示向左，20表示向下，-20表示向上
   food = 43,    //食物的位置
   n,      //与下次移动的位置有关
   box = document.getElementById('can').getContext('2d');
         //从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点
  function draw(seat, color) {
   box.fillStyle = color;
   box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
         //用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。
  }
  function clear(seat, color) {
	   box.clearRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
	         //以前两个参数为x，y坐标，后两个参数为宽和高。
	  }
  document.onkeydown = function(evt) { 
         //当键盘上下左右键摁下的时候改变direction
   direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
  };
  !function() {
   snake.unshift(n = snake[0] + direction); 
         //此时的n为下次蛇头出现的位置，n进入队列
   if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
         //if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序
    return alert("蛇爆了!");
   }
   draw(n, "white");  //画出蛇头下次出现的位置
   if(n == food) {   //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾
    while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
    draw(food, "red");
    mark=mark+1;
    console.log(mark);
    document.getElementById("divmark").innerHTML="得分："+mark;
   } else {    //没有吃到食物时正常移动，蛇尾出队列
    clear(snake.pop());
   }
   setTimeout(arguments.callee, 200);  
         //每隔0.15秒执行函数一次，可以调节蛇的速度
  }();
 </script>
</body>
</html>