</pre><pre name="code" class="javascript">
</pre><pre name="code" class="javascript">
</pre><pre name="code" class="javascript">
/*祖瑪小遊戲相信很多人玩過,
今天我嘗試在html5的畫布上嘗試用js寫了一個小遊戲,
開過過程的感悟是:
遇到一堆代碼的時候,應該首先得出一個整體的框架
然後根據這個粗略的框架進行分塊開發
即使剛開始的時候毫無頭緒
也要即刻動手
昨天在看jQuery源碼的時候
看着8千行的代碼
如果硬着頭皮從第一行開始看
保證過不了多久便放棄了
正確的做法是
從剛開始通讀全文劃分功能塊
先從簡單的或者跟現有知識相關聯的入手
然後各個擊破
在每一個板塊集中全部精力攻克
不想其他的模塊或者是整體
這應該是模塊化設計的東西吧
這纔是真理..........嘿嘿 */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{background: black;}
#div1{background:white; width: 600px; margin: 20px auto;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
//加載畫布
var oC=document.getElementById('c1');
var oGc=oC.getContext('2d'); //有這句話才能在畫布上寫東西
var i=0;
var iRotate=0; //青蛙旋轉速度
var yImg=new Image(); //加載青蛙
yImg.src='img/person.png';
yImg.οnlοad=function(){
setInterval(function(){ //外圍小球定時器
oGc.clearRect(0,0,oC.width,oC.height);
//每隔30ms畫一個背景+小球
oGc.beginPath();
oGc.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
oGc.stroke();
oGc.beginPath();
oGc.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
oGc.stroke();
oGc.beginPath();
oGc.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
oGc.stroke();
oGc.beginPath();
oGc.arc(i++,i++,20,0*Math.PI/180,360*Math.PI/180,false);
oGc.stroke();
//畫小球
for(var i=0;i<ball.length;i++){
oGc.beginPath();
oGc,moveTo(ball[i].x,ball[i].y); //將畫筆移動到開始位置,準備畫小球
oGc.arc(ball[i].x,ball[i].y,20,0*Math.PI/180,360*Math.PI/180,false); //0度從右邊中間開始
oGc.fill(); //填充顏色,默認是黑色
}
//青蛙旋轉
oGc.save();
oGc.translate(300,200);
oGc.rotate(iRotate); //通過iRotate控制青蛙跟着鼠標轉
oGc.translate(-40,-40);
oGc.drawImage(yImg,0,0);
oGc.restore();
//吐出來紅色小球
for(var i=0;i<bullet.length;i++){
oGc.save();
oGc.fillStyle='red';
oGc.beginPath(); //每次畫圖,beginPath()和restore()是必須
oGc,moveTo(bullet[i].x,bullet[i].y);
oGc.arc(bullet[i].x,bullet[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
oGc.fill();
oGc.restore();
}
},1000/60);
setInterval(function(){
for(var i=0;i<ball.length;i++){
ball[i].num++; //num爲角度
//當小球運動到左邊中心的時候需要改變方向,因爲兩個圓的半徑不一樣
if(ball[i].num==270){
ball[i].r=150;
ball[i].startX=250;
ball[i].startY=50;
}
if(ball[i].num==270+180){
window.location.reload(); //當有小球到達終點的時候,有細節蘇,重新加載
alert('遊戲結束');
}
ball[i].x=Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startX;
ball[i].y=ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startY;
}
for(var i=0;i<bullet.length;i++){
bullet[i].x=bullet[i].x+bullet[i].sX;
bullet[i].y=bullet[i].y+bullet[i].sY;
}
for(var i=0;i<bullet.length;i++){
for(var j=0;j<ball.length;j++){
if(pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y)){
bullet.splice(i,1); //兩個小球碰撞後通過刪除數組使小球消失
ball.splice(j,1);
break;
}
}
}
},30);
var ball=[];
setInterval(function(){
//通過數組保存小球運動數據可以方便後期拓展
ball.push(
{
x:300,
y:0,
r:200,
num:0,
startX:300,
startY:0
}
)
},350);
//鼠標移動,中心圖片跟着變化
oC.οnmοusemοve=function(ev){
var ev=ev||window.event; //鼠標兼容性設置
var x=ev.clientX-oC.offsetLeft;
var y=ev.clientY-oC.offsetTop;
var a=x-300;
var b=y-200;
var c=Math.sqrt(a*a+b*b);
//已下是設置青蛙跟着鼠標旋轉
//高中數學....
if(a>0 && b>0){
iRotate=Math.asin(b/c)+90*Math.PI/180;
}else if(a>0){
iRotate=Math.asin(a/c);
}
if(a<0 && b>0){
iRotate=-(Math.asin(b/c)+90*Math.PI/180);
}else if(a<0){
iRotate=Math.asin(a/c);
}
};
//吐出來的小球
var bullet=[];
oC.οnmοusedοwn=function(ev){
var ev=ev||window.event;
var x=ev.clientX-oC.offsetLeft;
var y=ev.clientY-oC.offsetTop;
var a=x-300;
var b=y-200;
var c=Math.sqrt(a*a+b*b);
var speed=5; //吐出來小球小球運動素的
var sX=speed*a/c;
var sY=speed*b/c;
bullet.push(
{
x:300,
y:200,
sX:sX,
sY:sY
});
}
};
//碰撞檢測函數
function pz(x1,y1,x2,y2){
var a=x1-x2;
var b=y1-y2;
var c=Math.sqrt(a*a+b*b);
if(c<40){
return 40;
}else{
return false;
}
}
}
</script>
</head>
<body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>
</pre><pre name="code" class="javascript"><img src="https://img-blog.csdn.net/20160424104647522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
</pre><pre name="code" class="javascript"><img src="https://img-blog.csdn.net/20160424104709165?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
</pre><pre name="code" class="javascript">
</pre><pre name="code" class="javascript">
<img src="https://img-blog.csdn.net/20160424104618240?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
