JS實戰
####大三剛開學 這學期課比較少 因此準備好好學習 --前端。之前大一時簡單瞭解一些HTML+CSS，暑假複習了那些內容，寫了幾個簡單的靜態頁面，現在正式學習JavaScript。
我的學習步驟大概是：
- 靜態頁面
- JS 動態交互頁面
- 框架學習 Rect 框架 與 Vue 框架 ，學習其中一個
後面的全棧開發就不學了 哈哈 自已自學 感覺那些會太難
開學一週了，今天總結一下每週收穫，分享一些代碼！
1. 會飛的小鳥
B站網課鏈接 點這裏
下面這幾張圖片 請放到 pic文件夾下 並於 html 文件在同一個目錄下
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>會飛的小鳥</title>
<style>
body
{
background-color:#777;
width:100%;
height:500px;
}
canvas
{
position:absolute;
top:100px;
left:18%;
border-radius:10px;
background-color:#fff;
}
#mark
{
/*display:flex;*/
position:absolute;
top:20px;
left:1000px;
/*width:200px;*/
height:30px;
font-size:14px;
/*background-color:#fff;*/
/*text-align:center;*/
/*line-height:30px;*/
}
#res
{
position:absolute;
width:150px;
height:150px;
top:230px;
left:41%;
border-radius:50%;
background-color:rgba(20,20,20,0.5);
text-align:center;
display:none;
}
#res h2
{
font-size:12px;
margin:30px auto;
font-weight:400;
}
#res img
{
width:40px;
height:40px;
border-radius:50%;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="400"></canvas>
<div class="mark" id="mark"></div>
<div class="res" id="res">
<h2>得分：100</h2>
<img src="pic/g.jpg" alt="" />
</div>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="pic/s.jpg";
var birdTimer=null;
var birdX=200;
var birdY=100;
img.onload=function()
{
if(birdTimer==null)
{
birdTimer=setInterval(function()
{
if (birdY<=355)
{
birdY++
}
context.clearRect(0,0,800,400);
context.drawImage(img,birdX,birdY,30,30);
drawColumn();
},20);
}
}
document.onmousedown=function()
{
img.src="pic/x.jpg";
birdY=birdY-40;
}
document.onmouseup=function()
{
img.src="pic/s.jpg";
// birdY=birdY-30;
}
var columeArr=[];
var columeTimer=null;
function creatColumn()
{
columeTimer=setInterval(function(){
var colume={};//柱子容器
colume.positionX=800;
colume.positionY=-Math.round(Math.random()*100+100);
colume.imgA=new Image();
colume.imgB=new Image();
colume.imgA.src="pic/xz.png";
colume.imgB.src="pic/sz.png";
colume.id = new Date().getTime();
columeArr.push(colume);
// console.log(colume.id);
},3000);
console.log(columeArr);
}
creatColumn();
var same=null;
var mark=0;
function drawColumn()
{
for(var i=0;i<columeArr.length;i++)
{
columeArr[i].positionX--;
context.drawImage(columeArr[i].imgA,columeArr[i].positionX,columeArr[i].positionY);
context.drawImage(columeArr[i].imgB,columeArr[i].positionX,columeArr[i].positionY+380);
if(birdX+30>=columeArr[i].positionX && birdX-70<=columeArr[i].positionX)
{
//加分；
if(columeArr[i].id!=same)
{
mark++;
same=columeArr[i].id;
// console.log(same);
document.getElementById("mark").innerHTML="得分:"+mark;
}
if(birdY<=columeArr[i].positionY+250||birdY+30>=columeArr[i].positionY+380)
{
clearInterval(columeTimer);
clearInterval(birdTimer);
var ors=document.getElementById("res");
ors.style.display="block";
ors.children[0].innerHTML="得分:"+mark;
if(mark>=0&&mark<=10)
{
ors.children[1].src="pic/b.png";
}
if(mark>10&&mark<=20)
{
ors.children[1].src="pic/silver.jpg";
}
if(mark>20)
{
ors.children[1].src="pic/g.jpg";
}
setTimeout(function(){
ors.children[0].innerHTML="遊戲即將重新開始3s";
ors.children[1].src="";
setTimeout(function(){
window.location.reload();
},3000);
},3000);
}
}
}
}
</script>
</body>
</html>
網課鏈接：https://www.bilibili.com/video/av45705742/?p=201
加油！