1.锅打灰太狼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锅打灰太狼</title>
<link rel="stylesheet" type="text/css" href="css/lang.css"/>
</head>
<body>
<div class="wp">
<span id="score">0</span>
<span id="time"></span>
<!-- 开始游戏按钮 -->
<div class="smark">
<span id="start">开始游戏</span>
</div>
<!-- 结束游戏 -->
<div class="game-over">
<p>游戏结束</p>
<span id="end">再来一局</span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// 获取元素
var wp = document.querySelector('.wp');
var score = document.querySelector('#score');
var time = document.querySelector('#time');
var start = document.querySelector('#start');
var end = document.querySelector('#end');
//列出洞的位置
var d1 = {l:'98px',t:'115px'};
var d2 = {l:'17px',t:'160px'};
var d3 = {l:'15px',t:'220px'};
var d4 = {l:'30px',t:'293px'};
var d5 = {l:'122px',t:'273px'};
var d6 = {l:'207px',t:'295px'};
var d7 = {l:'200px',t:'211px'};
var d8 = {l:'187px',t:'141px'};
var d9 = {l:'100px',t:'185px'};
var dArr = [d1,d2,d3,d4,d5,d6,d7,d8,d9];
// 设置分数
var s = 0;
// 设置时间
var t = 10;
//设置计时器
var timmer; // 游戏倒计时
var wolfer; // 创建狼的计时器
//随机数函数
function rand(m,n){
return Math.floor(Math.random()*(n-m+1)+m);
}
//点击开始游戏
start.onclick = function(){
//隐藏start的父级
start.parentElement.style.display = 'none';
//倒计时
timmer = setInterval(function(){
gameTime();
},1000);
//创建老狼
wolfer = setInterval(function(){
createWolf();
},2000);
};
//设置倒计时函数
function gameTime(){
t--;
time.style.width = t*180/10 + 'px';
// 游戏结束
if(t<=0){
clearInterval(timmer);
clearInterval(wolfer);
// end 父级显示
end.parentElement.style.display = 'flex';
}
}
// 点击再来一局
end.onclick = function(){
//刷新
location = location;
};
// 创建狼
function createWolf(){
var img = document.createElement('img');
//设置img的位置
var dArrIndex = rand(0,dArr.length-1);
img.style.left = dArr[dArrIndex].l;
img.style.top = dArr[dArrIndex].t;
//设置当前是第几张图片
var index = 0;
//设置当前img显示的是h还是x
img.show = Math.random()<0.8?'h':'x';
img.src = 'img/'+img.show+index+'.png';
//设置该元素是否被点击过
img.da = false;
wp.appendChild(img);
// 设置露头动画,动画有向上和向下两种,需要声明一个动画方向
var dir = true;
//声明动画
var anima = setInterval(function(){
if(dir){
index++;
img.src = 'img/'+img.show+index+'.png';
if(index==5){
dir = false;
}
}else{
index--;
img.src = 'img/'+img.show+index+'.png';
// 回到洞中,然后删除该img
if(index==0){
clearInterval(anima);
wp.removeChild(img);
}
}
},250);
//点击图片
img.onclick = function(){
if(this.da){
return;
}else{
this.da = true;
}
//清除计时器
clearInterval(anima);
index=5;
var daTimmer = setInterval(function(){
index++;
img.src = 'img/'+img.show+index+'.png';
if(index==9){
clearInterval(daTimmer);
//删除元素
wp.removeChild(img);
}
},250);
//设置分数,首先判断是灰太狼还是小灰灰
if(img.show=='h'){ // 灰太狼
s+=10;
score.innerHTML = s;
}else{
s-=10;
score.innerHTML = s;
}
};
}
</script>
css样式
* {
margin:0;
padding:0;
}
.wp {
width:320px;
height:480px;
background:url(../img/game_bg.jpg) no-repeat 0 0;
border:1px #f00 solid;
position: relative;
margin: 50px auto 0;
}
/* 分数和时间 */
#score,#time,.wp img,.smark,.game-over { position: absolute; }
#score {
left:58px;
top:10px;
color:#fff;
font-size:20px;
}
#time {
width:180px;
height:16px;
left:63px;
top:66px;
background-color: #04BE02;
border-radius:8px;
}
/* 游戏的蒙版层 */
.smark,.game-over {
left:0;
top:0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.3);
width:100%;
height:100%;
z-index:100;
}
.game-over {
display: none;
}
.smark span,.game-over span {
display: block;
cursor:pointer;
width:50%;
height:50px;
text-align: center;
line-height:44px;
font-size:30px;
background: #f60;
color:#fff;
}
.game-over {
flex-direction: column;
}
.game-over p {
color:#fff;
font-size:30px;
margin-bottom:50px;
}
/* 设置灰太狼的相关样式 */
.wp img {
width:100px;
height:100px;
}
2.面向对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>面向对象</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
/*
1.面向过程编程(POP),开发的时候,主要是分析编程的步骤
2.面向对象编程(OOP),开发的时候,抽离出来参与开发的对象,使用对象的属性和方法进行编程
类和对象
类是对象的抽象化
对象是类的实例化
js不是完全的面向对象,ECMAScript6之前,没有类的概念,只有对象的概念
*/
// 1.字面量创建一个对象
var obj = {
name:'旺财',
color:'黄色',
lei:'中华田园犬',
eat:function(){
console.log('吃肉');
}
};
obj.eat();
//2.工厂方法创建一个对象
function createDog(name,color){
// 原材料
var dog = new Object();
//加工
dog.name = name;
dog.color = color;
dog.eat = function(){
console.log(this.name);
};
//出厂
return dog;
}
var d1 = createDog('大黄','黑色');
var d2 = createDog('小黑','白色');
d1.eat();
d2.eat();
/*
1.constructor
查看调用对象的构造函数
*/
var arr = new Array();
arr[0] = '哈士奇';
console.log(arr.constructor);
</script>