HTML5經典坦克大戰及原始碼
一、簡單介紹
隨著人們精神文化生活的日益豐富,為了讓我們在閒暇的時間多方面發展個人的興趣愛好,為了更好的開發個人智力,遊戲成為人們生活中不可缺少的一部分。作為休閒遊戲的起源應該追溯到早期的俄羅斯方塊和坦克大戰,坦克大戰時童年經常玩的遊戲,也是一款經典遊戲,對我們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經典坦克大戰及原始碼
一、簡單介紹 隨著人們精神文化生活的日益豐富,為了讓我們在閒暇的時間多方面發展個人的興趣愛好,為了更好的開發個人智力,遊戲成為人們生活中不可缺少的一部分。作為休閒遊戲的起源應該追溯到早期的俄羅斯方塊
[原始碼和文件分享]基於C++實現的經典坦克大戰遊戲
1 題目描述 這戰車大戰就是指紅白機的戰車大戰，操縱戰車，將敵人通通轟掉，完成這個關卡。 小時後完紅白機時，不能輸人金手指，沒辦法自由控制遊戲，現在剛好有這個OOP專題機會，我們就仿製一個戰車大戰，自己可以完全控制程式碼，做到比輸人金手指更完整的控制。 程式使用 DEV-C 編譯器進行開
分享8個難忘的HTML5炫酷動畫及原始碼
HTML5的強大之處不僅在於讓網頁元素更加靈活多變，更在於它可以很方便地實現各種網頁動畫特效，讓你的網站更加富有現代化特色。就現在的瀏覽器而言，已經基本都支援HTML5了，所以這也方便了我們開發者免去了考慮瀏覽器相容性的頭疼問題。今天要分享一些令人難忘的HTML
HTML5製作坦克大戰遊戲+Canvas繪製基礎圖形——學習筆記一
1.離線儲存：1)儲存到本地，可以離線瀏覽網頁 2）不用cookie(安全性不太高，來回互動的資料量比較大) 2.語音識別 3.影象識別 4.HTML5遊戲 5.CSS3的強大之處：動畫和各種選擇
JAVA練手專案（三）：坦克大戰遊戲原始碼
經過幾天的練習和研究終於自己能寫出坦克大戰遊戲了，寫完這個程式後感覺收穫了很多東西，對JAVA的知識又有了一定的增長，接下來還準備繼續寫幾個小專案來練習J2SE 由於程式碼太長就不發在部落格裡了，我上傳到了資源下載裡，有需要的朋友大家可以去下載
Java開發的遊戲之三 坦克大戰 完整原始碼
截圖： 程式碼過長不在此貼出，所有的程式碼都打包在以下連結中壓縮包裡，包括背景圖片。 原始碼下載連結： http://download.csdn.net/detail/destiny199
html5-學習 坦克大戰知識點總結
坦克大戰知識總結 一、認識html5標籤：<DOCTYPE html> 二、認識html部分和javascript部分註釋的不同方式； 1、html採用：<!—註釋內容--> 2、vascript採用：// 三、認識了html中嵌入javascrip
超多經典 canvas 實例，動態離子背景、移動炫彩小球、貪吃蛇、坦克大戰、是男人就下100層、心形文字等等等
ntb contex lin 如果 maxwidth sel 容器 操作 reat 超多經典 canvas 實例 普及：<canvas> 元素用於在網頁上繪制圖形。這是一個圖形容器，您可以控制其每一像素，必須使用腳本來繪制圖形。 註意：IE 8 以及更早的版本不
面向對象經典案例坦克大戰
菜單 記錄 沒有 間隔 mes sets font 爆炸效果 private package Tank;import java.awt.*;import java.awt.event.ActionEvent;import java.awt.event.ActionListe
html5制作坦克大戰
dex bsp 左右移動 補充 .html 沒有 處理機 tel element 全部html5都采用繪圖技術完成。坦克是畫出來的。（坦克，子彈，墻，水，草坪） 首先我們畫出坦克。 坦克是兩邊兩個矩形，中間一個大矩形，矩形了有一個圓，還有一根線。 畫出坦克的思路是以坦克的左
小白學習Unity 3D做經典遊戲坦克大戰日常
簡單 esp 還需 分享圖片 經典遊戲 平滑濾波 一起 耗時 date() 老師 | Trigger 學習者 |小白 出品 | Siki 學院 Hello，小夥伴們。接下來小白跟Trigger老師做一款2D遊戲坦克大戰。從素材、代碼到場景和UI的遊戲開發。小白把日常遇到的
【opencv】經典的細化提取骨架理論及原始碼
本章我們學習一下Hilditch演算法的基本原理，從網上找資料的時候，竟然發現兩個有很大差別的演算法描述，而且都叫Hilditch演算法。不知道那一個才是正宗的，兩個演算法實現的效果接近，第一種演算法更好一些。 第一種演算法描述參考paper和程式碼： Linear
python3少兒程式設計學習之_坦克大戰射擊遊戲_turtle版原始碼
"""坦克大戰,小坦克被一群大坦克包圍,情況十分危急。小坦克的優勢在於速度快，能連續發射。 """ #從海龜模組匯入所有命令 from turtle import * import math from random import randint def load_s
【原創】使用HTML5+canvas+JavaScript開發的原生中國象棋遊戲及原始碼分享
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
[原始碼和文件分享]基於C++實現的坦克大戰遊戲
遊戲介紹 上面分別是下一次要改變的方向，是上、左的時候，原始狀態的不同情況；右、下類似 已移動後，不擦除原來的障礙物為第一齣發點 走到這種狀態，是有前提的，這點很重要，也是能處理好的根本原因；不會憑空，走到某種狀態 符合行為規範 注意：關於同類坦克
精妙無比 8款HTML5動畫例項及原始碼
新的一週開始了，我們分享HTML5和CSS3的工作也將繼續前行。今天要給大家帶來8款精妙無比的HTML5動畫例項，每一個動畫演示都有原始碼提供下載，非常方便大家學習HTML5的相關知識，一起來看看吧。1、基於HTML5 Canvas的圖表外掛Chart.jsch
HTML5+JS實現坦克大戰小遊戲
聽了韓順平老師的視訊教程，學到了不少程式設計思想，原來看似簡單的坦克大戰小遊戲寫起來其實並不簡單。這裡總結一下這幾天學到的東西。 首先是關於html5的知識了。這裡我們基本上只用了畫布canvas來畫坦克，還有就是html5的第一行<!DOCTY
HTML5+JavaScript製作坦克大戰遊戲——學習筆記三
1.接《HTML5+JavaScript製作坦克大戰遊戲——學習筆記二》 解決了以下問題： 1）可以同時傳送多顆子彈 2）在第一顆子彈消亡之前傳送第二顆子彈，第一顆子彈不會消失 示例程式碼：（TankBattle.html） <!DOCTYPE html> &
經典資料結構及演算法-Java實現-附原始碼（可下載）
閒暇之餘，將自己之前敲過的資料結構與演算法程式碼整理了一下，最後放在一個工程下面：具體分類：剛看了下專案目錄，少了排序分類介紹圖，在這裡補上（此圖來源於網上）最後，程式碼比較多，只展示下排序演算法的程式碼。package com.lzz.algorithm.sorting;
HTML5 坦克大戰遊戲的製作思路
程式碼 DEMO 不管寫的過程中覺得有多便祕，寫完了回過頭再去看這個遊戲其實並不算多麼的複雜，一些基本的問題處理好就行——這也是這篇文章所想要說明的東西。因此這篇部落格只能算是記錄了一下寫一個遊戲過程中的一些思路，如果有同學也想要自己寫一個遊戲並