java小游戏js小程序html css 小游戏

最新推荐文章于 2022-11-14 20:37:24 发布

人还是要有梦想的

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量271

点赞数

本文链接：https://blog.csdn.net/qq_32663053/article/details/125657941

版权

html css js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

java游戏做过飞翔的小鸟。

js,html,css,是后端设计必须要掌握的基本功。

自己做过轮播图，贪吃蛇，QQ界面，中奖等程序

如果需要源码可以进行下载。

开发软件Editplus

<!doctype html>  <!-- 声明文档类型为  网页 DTD H5文档声明>-->
<html>    <!--网页结构开始的地方-->
     <head>
	 <title>淘宝美食汇</title>
	 <meta charset='utf-8'>    <!--设置编码格式为utf-8>-->
	 <meta name='keywords' content='web前端' >
	 <meta name='description' content=' 欢迎各位同学来到web前端零基础直播教学'>

	 <style>
	       *{
               
		   }
		   li{
		       list-style:none;
		   }
	       #wrap{
		          width:1200px;
				  height:360px;
				  box-shadow:0 0 9px #222;
		   }
		   #wrap ur{
		   display:flex;    /*  */
		   flex-wrap:wrap;/*换行显示*/
		   flex-direction:row;

		   justify-content:space-around;
		   algin-items:center;
		   width:100%;
		   height:100%;
		   }
		   #wrap ur li{
		   position:releative;
		   width:362px;
		   height:139px;
		   float:left;
		   box-shadow:
		   }
		   #wrap ur li image{
		   
		   }
	 </style>
	 </head>
	 <body>
	 <--网页内容主题内容-->
	 大家好
	 <div id='wrap'>  </div>  <!--身份证-->
	<ur>
	    <li>
		     <img src='images/1.webp'>
			 <div class='title'>
                     <h3>口水间品鉴</h3>
					    <p>

			 </div>
		</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>

	 </body>


	 <!--
	 html 

h1
h2
h3
行内元素   inline
a span i b标签

块级元素
   div li p可以设置宽度高度位置


	 img      动态数据图片

	 背景     不经常更换 装饰性的 URL style
	   

	   div+css


	   div:    盒子模型  在页面上划分区域的标签


       id命名  通过id名称  wrap找到具体的某一个标签


	   css: 修饰页面上元素的语言 样式 宽度  高度

	   
	 
	 -->
</html>

贪吃蛇的游戏并未找到。但是我给大家介绍下比较简单的设计思路：

还有就是QQ界面，中奖游戏

<!doctype>
<html>
<head>
<meta charset="utf-8">
<meta name="keyword" content="关键词，关键字">
<meta name="description" content="描述信息">
<title>qq页面</title>
<style>
.headd{width:550px;height:235px;background:linear-gradient(to left,#36e2c9,#278ad3,#58efeb);margin:auto;border-radius:3px;box-shadow: 0px 0px 3px #330000;}
.two{width:550px;height:190px;background:#eeeeee;margin:auto;padding-top:20px;border-radius:2px;box-shadow:20px;}
.two .image{width:80px;height:80px;background:blue;margin-left:50px;float:left;}
.headd .content{font-size:60px;color:white;text-align:center;line-height:200px;font-style:italic}
</style>

</head>
<body>
<div class="headd">

<div class="content">
QQ
</div>
<!--<script language="Java Script1.2">
function mouseOver()
{
       if(!document.all)
	   return
	   if(button1.style.borderColor=="yellow")
	      button1.style.borderColor="blue"
	   else
		  button1.style.borderColor="yellow"
}
setInterval("mouseOver()",500)
    var T;
button1.onmouseover=function(){
     T=setInterval("fmouseOver()",500);
}
button1.onmouseout=function(){
  clearInterval(t);
}
</script>-->
</div>
<div class="two">
       <div class="image">
	   </div>
	   <input type="text" name="txt1" style="width:251px;height:30px;margin-left:15px;float:left;">
	   <input type="text" name="txt2" style="width:251px;height:30px;margin-left:15px;float:left;">
	   <div style="line-height:30px;margin-left:400px;color:#0000ff">
	      <a href="http://www.baidu.com">注册账号</a>
	   </div>
	   <div style="line-height:30px;margin-left:400px;color:#0000ff">
	     <a href="http://taobao.com">找回密码</a>
	   </div>
	   <input type="checkbox" style="margin-left:15px;float:left">
	   <div style="float:left;">记住密码</div>
	   <input type="checkbox" style="margin-left:90px;float:left;">
	   <div>自动登录
	   </div>
	 <input type="button" value="登录" id="button1" style="width:200px;height:30px;color:red;margin-left:40px;margin-top:40px;border:3px solid yellow;hover{background-color:blue}" ">
	  <!--onmouseOut=this.style.color="blue" onmouseOver=this.style.color="red">-->
	   
</div>

</body>
</html>

气球飞：

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
		<meta name="keywords" content="关键词，关键字">
		<meta name="descirption" content="描述信息">
		<title>贪吃蛇游戏</title>
		<style>
		   *{
		        margin:0;
				padding:0;
		   }
		   #canvas{
		        display:block;
				margin:0 auto;
		   }
		</style>
</head>
<body>
        <canvas id="canvas"></canvas>
		<script>
		   /*
		            网页游戏开发：canvas     未来趋势
		            1、 响应用户的操作     满足客户需求响应事件    鼠标 键盘事件     javascript 是基于原型的动态解释性语言
					2.操作dom元素     增删修改
					3.Ajax数据交互   json jeson   正则表达式

					4.封装插件  vue angular react jquery
					5.面向对象  原型  原型链 继承 封装  多层
					6.深入底层   ES6

		   */
		</script>
</body>
</html>

中奖游戏

<!doctype html>
<html lang="en">
<head>
       <meta charset="utf-8">
	   <meta name="keywords" content="关键词，关键字">
	   <meta name="description" content="描述信息">
	   <title>转盘抽奖</title>
	   <style>
       *{
	   margin:0;
	   padding:0;
	   }
       #mother-box{
	   position:relative;
	   width:100%;
	   height:1000px;
	   background:red;
	   }

	   #mother-box img.arrow{
	   position:absolute;
	   top:101px;
	   left:181px;
	   }
	   #mother-box .result{
	   display:none;
	   position:absolute;

	         left:224px;
			 top:200px;
	         width:200px;
			 height:100px;
			 color:blue;
			 text-align:center;
			 line-height:90px;
			 background:rgba(0,0,0,.5);
	   }
	   #mother-box .result img.close{
	   position:absolute;
	   left:176px;
	   top:0;
	   }
	   #mother-box .user{
	   position:absolute;
	         width:120px;
			 height:309px;
			 top:140px;
			 left:687px;
			 border:2px solid black;
			 overflow:hidden;
	   }
	   #mother-box .user ul{
	   list-style:none;
	   
	   }
	   li{
	        margin:10px 0;
			background:url("image/user.png") no-repeat 0 center;
	        color:yellow;
			text-indent:20px;
	   }
	   </style>
</head>
<body>
       <div id="mother-box">
				<img src="image/bg1.png" class="box-center">
	            <img src="image/arrow.png" class="arrow">
				
				<div class="user">
				        <ul>
						     <li>15855328904</li>
                             <li>15855328905</li>
							 <li>15855328906</li>
							 <li>15855328907</li>
							 <li>15855328908</li>
							 <li>15855328909</li>
							 <li>15855328914</li>
							 <li>15855328924</li>
							 <li>15855328934</li>
							 <li>15851328904</li>
							 <li>15852328904</li>
							 <li>15853328904</li>
							 <li>15855348904</li>
							 <li>15855368904</li>
						</ul>
				</div>
				<div class="result">
				<p>恭喜你中了100万</p>
				<img src="image/close.png" class="close">
				<div>
	   </div>
	   <script src="js/jquery.min.js"></script>
	   <script src="js/jquery.rotate.min.js"></script>
	   <script type="text/javascript">
	   


	   $("img.arrow").click(function(){
	          var n=Math.floor(Math.random()*8); //向下取整
			  var rota;
			  var str=new Array(8);
			  str[0]="谢谢参与";
			  str[1]="恭喜你获得5元代金券";
			  str[2]="恭喜你获得1元代金券";
			  str[3]="恭喜你获得10元代金券";
			  str[4]="谢谢参与";
			  str[5]="恭喜你获得20元代金券";
			  str[6]="恭喜你获得50元代金券";
			  str[7]="恭喜你获得30元代金券";
			  rota=n*45+4*360;
              rotatefun(rota,str[n]);
	   });
	   $("img.close").click(function(){
	             $(".result").hide();
	   })

	   function rotatefun(rotaa,text){
	            $("img.arrow").rotate({
			        angle:0,
					duration:5000,
					animateTo:rotaa,
					callback:function(){
					    $(".result").show();
						$(".result p").html(text);
					}
			   });
	   }
	   setInterval(function(){
	   $(".user ul").animate({
	   top:"-37px"},
	   500,
	   function(){
		   $(this).append($(".user ul li:first"));
           $(this).css("top",0);
	   }
	   );},1000);
	   </script>
</body>
</html>