HTML5经典坦克大战及源码
目錄
一、簡單介紹
二、具體界面
主界面
排行榜界面
組員信息界面
組員信息場景
三、部分代碼
3.1 界面繪制的實現
6.2 坦克移動實現
3.3 發射炮彈
3.4聲音處理
3.5計分
四、總結
一、簡單介紹
隨著人們精神文化生活的日益豐富,為了讓我們在閑暇的時間多方面發展個人的興趣愛好,為了更好的開發個人智力,游戲成為人們生活中不可缺少的一部分。作為休閑游戲的起源應該追溯到早期的俄羅斯方塊和坦克大戰,坦克大戰時童年經常玩的游戲,也是一款經典游戲,對我們90后而言,是童年最珍貴的回憶。
?Html5橫空出世,開啟了新的RIA革命, 是未來Web發展的重要方向。這款Html5坦克大戰是基于javascript,結合modernizr開源庫設計的單機小游戲,用戶可以控制坦克移動,可以選擇關卡,攻擊敵人等??二、具體界面
主界面
排行榜界面
組員信息界面
組員信息場景
三、部分代碼
3.1 界面繪制的實現
?<canvas id="canvasOne"width="650" height="384" top=50px; left=50px;>Yourbrowser does not support the HTML 5 Canvas. </canvas>
6.2 坦克移動實現
下面給出敵人坦克移動的代碼
functionenemyupdate() {
??????????????????????? enemytank.shapenum =(0.1 + enemytank.shapenum) % 8 + 9; //減慢滾帶的速度
??????????????????????? enemytank.enemytankshape= Math.floor(enemytank.shapenum);
??????????????????????? //下
??????????????????????? if(enemytank.enemytankAngle== 180) {
??????????????????????????? swerve()
??????????????????????????? enemytank.nexty +=enemytank.enemytankspeed;
??????????????????????????? if(scene[Math.ceil((enemytank.nexty- 20) / 32)][Math.ceil((enemytank.nextx - 20) / 32)] != 0 ||scene[Math.ceil((enemytank.nexty - 20) / 32)][Math.floor((enemytank.nextx - 12)/ 32)] != 0) {
?????????????????????????????? enemyhitwall()
??????????????????????????? }
??????????????????????? }
??????????????????????? //左
??????????????????????? if(enemytank.enemytankAngle== 270) {
??????????????????????????? swerve()
??????????????????????????? enemytank.nextx -=enemytank.enemytankspeed;
??????????????????????????? if(scene[Math.floor((enemytank.nexty- 12) / 32)][Math.floor((enemytank.nextx - 12) / 32)] != 0 || scene[Math.ceil((enemytank.nexty- 20) / 32)][Math.floor((enemytank.nextx - 12) / 32)] != 0) {
?????????????????????????????? enemyhitwall()
??????????????????????????? }
??????????????????????? }
??????????????????????? //右
??????????????????????? if(enemytank.enemytankAngle== 90) {
??????????????????????????? swerve()
??????????????????????????? enemytank.nextx +=enemytank.enemytankspeed;
??????????????????????????? if(scene[Math.ceil((enemytank.nexty- 20) / 32)][Math.ceil((enemytank.nextx - 20) / 32)] != 0 ||scene[Math.floor((enemytank.nexty - 12) / 32)][Math.ceil((enemytank.nextx - 20)/ 32)] != 0) {
?????????????????????????????? enemyhitwall()
??????????????????????????? }
??????????????????????? }
??????????????????????? //上
??????????????????????? if(enemytank.enemytankAngle== 0) {
??????????????????????????? swerve()
??????????????????????????? enemytank.nexty -=enemytank.enemytankspeed;
??????????????????????????? if(scene[Math.floor((enemytank.nexty- 12) / 32)][Math.floor((enemytank.nextx - 12) / 32)] != 0 ||scene[Math.floor((enemytank.nexty - 12) / 32)][Math.ceil((enemytank.nextx - 20)/ 32)] != 0) {
?????????????????????????????? enemyhitwall()
??????????????????????????? }
??????????????????????? }
??????????????????????? //隨機發射炮彈
??????????????????????? var enemyfire =Math.floor(Math.random() * 100);
??????????????????????? if(enemyfire == 0) {
??????????????????????????? if(enemyshell.shellflage){
?????????????????????????????? return;
??????????????????????????? }
??????????????????????????? if(enemytank.nextx< 0) {
?????????????????????????????? return;
??????????????????????????? } else {
?????????????????????????????? enemyshell.shellflage= true;
?????????????????? ??????????? enemyshell.nextx = enemytank.nextx;
?????????????????????????????? enemyshell.nexty= enemytank.nexty;
?????????????????????????????? enemyshell.shellAngle= enemytank.enemytankAngle;
?????????????????????????????? if(enemyshellInterval){
?????????????????????????????????? clearInterval(enemyshellInterval);
?????????????????????????????????? enemyshellInterval= null;
?????????????????????????????? }
?????????????????????????????? enemyshellInterval= setInterval(enemyrdrawshell, 33);
??????????????????????????? }
??????????????????????? }
??????????????????????? //檢測是否打擊到目標
??????????????????????? if(impact(shell,enemytank)) {
??????????????????????????? if(shellInterval) {
?????????????????????????????? clearInterval(shellInterval);
?????????????????????????????? shellInterval =null;
??????????????????????????? }
??????????????????????????? score++;
??????????????????????????? if(score >=record) {
?????????????????????????????? record = score;
?????????????????????????????? localStorage.record= record;
??????????????????????????? }
??????????????????????????? if(score >= level* 5) {
?????????????????????????????? level++;
?????????????????????????????? if(level > 5){
?????????????????????????????????? gameover =true;
?????????????????????????????????? return
?????????????????????????????? }
?????????????????????????????? scene =scenenum[(level - 1) % 4];
?????????????????????????????? for(var enemynum= 0; enemynum <= 2; enemynum++) {
?????????????????????????????? ??? var tempx = 48 + enemynum * 192;
?????????????????????????????????? //敵軍坦克
?????????????????????????????????? tempenemytank= {
????????????????????????????????????? appearx:tempx,
????????????????????????????????????? appeary:48,
????????????????????????????????????? x: tempx,
????????????????????????????????????? y: 48,
????????????????????????????????????? nextx:tempx,
????????????????????????????????????? nexty: 48,
????????????????????????????????????? enemytankspeed:Speed + level * 0.5,
????????????????????????????????????? enemytankAngle:180,
????????????????????????????????????? enemytankshape:0,
????????????????????????????????????? shapenum:0
?????????????????????????????????? };
?????????????????????????????????? enemy[enemynum]= tempenemytank;
?????????????????????????????? }
?????????????????????????????? tankmove = {
?????????????????????????????????? appearx: 240,
?????????????????????????????????? appeary: 304,
?????????????????????????????????? x: 240,
?????????????????????????????????? y: 304,
?????????????????????????????????? nextx: 240,
?????????????????????????????????? nexty: 304,
?????????????????????????????????? tankAngle:Angle,
?????????????????????????????????? tankspeed:Speed,
?????????????????????????????????? tankshape:shape,
?????????????????????????????????? tanknextshape:shape
?????????????????????????????? };
?????????????????????????????? enemyshell = {
?????????????????????????????????? x: 0,
?????????????????????????????????? y: 0,
?????????????????????????????????? nextx: 0,
?????????????????????????????????? nexty: 0,
?????????????????????????????????? shellspeed:Speed + level * 0.5 + 2,
?????????????????????????????????? shellshape:21,
?????????????????????????????????? shellAngle:Angle,
?????????????????????????????????? shellflage:false
?????????????????????????????? };
?????????????????????????????? surplus = 6;
??????????????????????????? }
??????????????????????????? surplus--;
??????????????????????????? setTimeout(function(){
?????????????????????????????? shell.shellflage= false
??????????????????????????? }, 300);
??????????????????????????? explode(enemytank)
??????????????????????????? enemytank.nextx =-500;
??????????????????????????? shell.nextx = -500;
??????????????????????????? shell.nexty = -500;
??????????????????????? }
??????????????????????? //檢測是否打擊到玩家
??????????????????????? if(impact2(enemyshell,tankmove)) {
??????????????????????????? if(invincible) {
?????????????????????????????? return;
??????????????????????????? }
??????????????????????????? if(enemyshellInterval){
?????????????????????????????? clearInterval(enemyshellInterval);
?????????????????????????????? enemyshellInterval= null;
??????????????????????????? }
??????????????????????????? life--;
??????????????????????????? if(life <= 0) {
?????????????????????????????? gameover = true;
?????????????????????????????? return;
??????????????????????????? }
??????????????????????? ??? invincible = true;
??????????????????????????? setTimeout(function(){
?????????????????????????????? invincible =false
??????????????????????????? }, 2000)
??????????????????????????? explode(tankmove)
??????????????????????????? setTimeout(function(){
?????????????????????????????? enemyshell.shellflage= false
??????????????????????????? }, 300);
??????????????????????????? tankmove.nextx =-500;
??????????????????????????? enemyshell.nextx =-500;
??????????????????????????? enemyshell.nexty =-500;
??????????????????????? }
??????????????????????? //與敵人相撞
??????????????????????? if(impact(enemytank,tankmove)) {
??????????????????????????? if(enemyshellInterval){
?????????????????????????????? clearInterval(enemyshellInterval);
?????????????????????????????? enemyshellInterval= null;
??????????????????????????? }
??????????????????????????? if(invincible) {
?????????????????????????????? return;
??????????????????????????? }
??????????????????????????? invincible = true;
??????????????????????????? setTimeout(function(){
?????????????????????????????? invincible =false
??????????????????????????? }, 2000)
??????????????????????????? life--;
??????????????????????????? if(life <= 0) {
?????????????????????????????? gameover = true;
?????????????????????????????? return;
??????????????????????????? }
??????????????????????????? explode(tankmove)
??????????????????????????? tankmove.nextx =-500;
?
??????????????????????? }
??????????????????????? //自動轉向
??????????????????????? function swerve() {
??????????????????????????? var j =Math.floor(Math.random() * 100);
??????????????????????????? if(j == 0) {
?????????????????????????????? enemytank.enemytankAngle+= 90;
??????????????????????????? }
??????????????????????????? if(j == 1) {
?????????????????????????????? enemytank.enemytankAngle-= 90;
??????????????????????????? }
??????????????????????????? enemytank.enemytankAngle= (enemytank.enemytankAngle + 360) % 360;
??????????????????????? }
??????????????????????? //撞墻轉向
??????????????????????? function enemyhitwall(){
??????????????????????????? enemytank.nextx =enemytank.x;
??????????????????????????? enemytank.nexty =enemytank.y;
??????????????????????????? var j =Math.floor(Math.random() * 2);
??????????????????????????? if(j == 0) {
?????????????????????????????? enemytank.enemytankAngle+= 90;
??????????????????????????? } else {
?????????????????????????????? enemytank.enemytankAngle-= 90;
??????????????????????????? }
??????????????????????????? enemytank.enemytankAngle= (enemytank.enemytankAngle + 360) % 360;
??????????????????????? }
???????????????????? }
3.3 發射炮彈
????????????? //炮彈數組
?????????????????????? shell= {
???????????????????????? x:0,
???????????????????????? y:0,
???????????????????????? nextx:0,
???????????????????????? nexty:0,
???????????????????????? shellspeed:Speed + 4,
???????????????????????? shellshape:20,
???????????????????????? shellAngle:Angle,
???????????????????????? shellflage:false
?????????????????????? };
?
???????????? //敵軍炮彈數組
?????????????????????? varenemyshell = {
???????????????????????? x:0,
???????????????????????? y:0,
???????????????????????? nextx:0,
???????????????????????? nexty:0,
???????????????????????? shellspeed:Speed + 2,
???????????????????????? shellshape:21,
???????????????????????? shellAngle:Angle,
???????????????????????? shellflage:false
?????????????????????? };
?????????
????????????????????? //空格，發射炮彈
??????????????????????????? functionspace() {
??????????????????????????????? if(keyPressList[32]== true) {
?????????????????????????????????? if(gameover){
?????????????????????????????????????? location.reload();
?????????????????????????????????? }
?????????????????????????????????? if(shell.shellflage){
?????????????????????????????????????? return;
?????????????????????????????????? }
?????????????????????????????????? if(tankmove.nextx< 0) {
?????????????????????????????????????? return;
?????????????????????????????????? }else {
?????????????????????????????????????? shootSound.play();
?????????????????????????????????????? shell.shellflage= true;
?????????????????????????????????????? shell.nextx= tankmove.nextx;
?????????????????????????????????????? shell.nexty= tankmove.nexty;
?????????????????????????????????????? shell.shellAngle= tankmove.tankAngle;
?????????????????????????????????????? if(shellInterval){
????????????????????????????????????????? clearInterval(shellInterval);
????????????????????????????????????????? shellInterval= null;
?????????????????????????????????????? }
????????????????????????????????????? shellInterval= setInterval(drawshell, 33);
?????????????????????????????????? }
??????????????????????????????? }
??????????????????????????? }
//檢測炮彈是否撞墻
??????????????????????????????? functionhitwall(i) {
?????????????????????????????????? switch(i){
?????????????????????????????????????? case26:
????????????????????????????????????????? if(shellInterval){
????????????????????????????????????????????? clearInterval(shellInterval);
????????????????????????????????????????????? shellInterval= null;
????????????????????????????????????????? }
????????????????????????????????????????? setTimeout(function(){
????????????????????????????????????????????? shell.shellflage= false
????????????????????????????????????????? },300);
????????????????????????????????????????? shell.nextx= -500;
????????????????????????????????????????? shell.nexty= -500;
????????????????????????????????????????? return0;
????????????????????????????????????????? break
?
?????????????????????????????????????? case31:
????????????????????????????????????????? if(shellInterval){
????????????????????????????????????????????? clearInterval(shellInterval);
????????????????????????????????????????????? shellInterval= null;
????????????????????????????????????????? }
????????????????????????????????????????? setTimeout(function(){
????????????????????????????????????????????? shell.shellflage= false
????????????????????????????????????????? },300);
????????????????????????????????????????? shell.nextx= -500;
????????????????????????????????????????? shell.nexty= -500;
????????????????????????????????????????? returni;
????????????????????????????????????????? break
?????????????????????????????????????? case30:
????????????????????????????????????????? if(shellInterval){
????????????????????????????????????????????? clearInterval(shellInterval);
????????????????????????????????????????????? shellInterval= null;
????????????????????????????????????????? }
????????????????????????????????????????? setTimeout(function(){
????????????????????????????????????????????? shell.shellflage= false
????????????????????????????????????????? },300);
????????????????????????????????????????? shell.nextx= -500;
????????????????????????????????????????? shell.nexty= -500;
????????????????????????????????????????? returni;
????????????????????????????????????????? break
?????????????????????????????????????? default:
????????????????????????????????????????? return0;
?????????????????????????????????? }
??????????????????????????????? }
3.4聲音處理
?????????????????????? //聲音
???????????????????????? //爆炸
?????????????????????? varexplodeSound = document.createElement("audio");
?????????????????????? document.body.appendChild(explodeSound);
?????????????????????? explodeSound.setAttribute("src","audio/explode1.mp3");
?????????????????????? explodeSound.valume= .5;
?????????????????????? //發射子彈
?????????????????????? varshootSound = document.createElement("audio");
?????????????????????? document.body.appendChild(shootSound);
?????????????????????? shootSound.setAttribute("src","audio/shoot1.mp3");
?????????????????????? shootSound.volume= .5;
?????????????????????? //玩家行走
?????????????????????? varplayermove = document.createElement("audio");
?????????????????????? document.body.appendChild(playermove);
?????????????????????? playermove.setAttribute("src","audio/move1.mp3");
?????????????????????? playermove.valume= .001;
?????????????????????? //敵人行走
?????????????????????? varenemyrmove = document.createElement("audio");
?????????????????????? document.body.appendChild(enemyrmove);
?????????????????????? enemyrmove.setAttribute("src","audio/move2.mp3");
?????????????????????? enemyrmove.valume= .001;
?
3.5計分
context.clearRect(496, 16, 138, 352);
??????????????????????????? context.fillStyle= "#3cb371";
??????????????????????????? context.fillRect(496,16, 138, 352);
??????????????????????????? context.save();
??????????????????????????? context.fillStyle= "#000000";
??????????????????????????? context.font= "italic bold 23px serif";
??????????????????????????? context.fillText("關? 卡:" + level +"", 500, 80);
??????????????????????????? context.fillText("敵? 人:" + surplus +"", 500, 110);
??????????????????????????? context.fillText("生? 命:" + life +"", 500, 140);
??????????????????????????? context.fillText("得? 分:" + score +"", 500, 170);
??????????????????????????? context.fillText("最高分:" + record +"", 500, 200);
??????????????????????????? context.restore();
?
??????????????????????????? context.save();
??????????????????????????? context.fillStyle= "#000000";
??????????????????????????? context.font= "normal bold 15px normal";
??????????????????????????? context.fillText("游戲說明: 玩家", 500, 270);
??????????????????????????? context.fillText("操控坦克進行戰", 500,290);
??????????????????????????? context.fillText("斗，擊毀敵方得", 500,310);
??????????????????????????? context.fillText("分，被擊毀或相", 500,330);
??????????????????????????? context.fillText("相撞減分。", 500,350);
??????????????????????????? context.restore();
?
?
score++;
??????????????????????????????? if(score>= record) {
?????????????????????????????????? record= score;
?????????????????????????????????? localStorage.record= record;
??????????????????????????????? }
??????????????????????????????? if(score>= level * 5) {
?????????????????????????????????? level++;
?????????????????????????????????? if(level> 5) {
?????????????????????????????????????? gameover= true;
?????????????????????????????????????? return
?????????????????????????????????? }
?????????????????????????????????? scene= scenenum[(level - 1) % 4];
?????????????????????????????????? for(varenemynum = 0; enemynum <= 2; enemynum++) {
?????????????????????????????????????? vartempx = 48 + enemynum * 192;
?????????????????????????????????????? //敵軍坦克
?????????????????????????????????????? tempenemytank= {
????????????????????????????????????????? appearx:tempx,
????????????????????????????????????????? appeary:48,
????????????????????????????????????????? x:tempx,
????????????????????????????????????????? y:48,
????????????????????????????????????????? nextx:tempx,
????????????????????????????????????????? nexty:48,
????????????????????????????????????????? enemytankspeed:Speed + level * 0.5,
????????????????????????????????????????? enemytankAngle:180,
????????????????????????????????????????? enemytankshape:0,
????????????????????????????????????????? shapenum:0
?????????????????????????????????????? };
?????????????????????????????????????? enemy[enemynum]= tempenemytank;
四、總結
這是我學習Html5一個多月以來，首次做的一個小項目，由于之前學過別的語言，所以做起來并不覺得困難。通過這個小項目，讓我更深的了解了面向對象，同時也更深入的了解了一些新的知識點，稍作總結：對象能夠移動的本質是：改變對象的坐標，再對對象重畫。由于重畫的速度很快，我們的肉眼無法察覺，因此就以為是移動了。根據坦克的起始坐標，根據坦克的方向設一個變量相應的改變坦克的起始坐標。然后在通過重畫，就達到了運動的效果。通過這次編程實訓和撰寫實訓報告,我們學會了一些編程技巧,同時也鞏固了平常所學的理論知識,如html5、js、jquery,對調試程序也有了進一步的認識,有時候一個小小的語法錯誤都會導致程序編譯不通過。所以在編程過程中,一定要認真對待,在使用HBuilder環境開發時,進一步的感受到了HBuilder的強大,對于拽寫實訓報告一定要注意格式,任何事情都有它的規范,不能因個人喜好而決定。
設計中存在的不足之處:
1.坦克行走沒有聲音
2.地圖畫大有困難
3.游戲刷新時有閃爍現象(雙緩沖)
希望結束實訓能在日后的學習中修復BUG,用于學習,勤于鉆研、不斷提高自己。
******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************** 下載鏈接 ? ? HTML5經典坦克大戰下載 ?HTML5經典坦克大戰源碼下載總結
以上是生活随笔為你收集整理的HTML5经典坦克大战及源码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux系统pcre是什么作用,Lin
- 下一篇： Netscape浏览器