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>