JavaScript 模擬戦車戦ゲーム (html5 版) ソースコード付き download_javascript スキル

1. キーポイントと発生した問題を要約します。

1. JavaScript での継承の場合、親クラスはメソッド共有のみを提供し、属性はそれぞれのサブクラスに書き込まれて、コンストラクターの混在を避けるのが最善です。親クラスとサブクラス。

2. プロトタイプ シミュレーション継承のコードは、すべてのメソッド定義の前に記述する必要があります。そうしないと、プロトタイプ オブジェクトが変更され、メソッドが未定義になります。

コードをコピーします コードは次のとおりです。

Hero.prototype = new Tank (0, 0, 0);
Hero.prototype.constructor = ヒーロー ;
Hero.prototype.addLife = function(){
this.lifetimes ;
document.querySelector("#life").innerHTML =
}

3. キャンバス上にグラフィックを描画する場合は、四角形の描画に加えて、ctx.beginPath(); と ctx.closePath(); を追加する必要があります。そうしないと、予期しないエラーが発生します。

4. concat 関数は配列を結合したり、要素を新しい配列に返すことができます。

5. Image の src 属性が割り当てられた後、画像がロードされます。完了しないと画像が描画されてしまい失敗しますので、onloadイベント処理を使用します

6. Array関数を拡張し、指定した要素を削除します

コードをコピー コードは次のとおりです:

//指定された要素を削除するように拡張
Array.prototype.deleteElement = function (obj) {
if (obj) {
for (var i = 0; i if (this[i] === obj) {
this.splice (i , 1);
}
}
}
}

7. setInterval("fun",1000) メソッドの最初のパラメータは次のとおりです。このコード文字列を実行するための eval に似た「hero.say()」などの文字列。これにより、関数にパラメータをもたらし、この関数の実行コンテキストも指定できます。しかし、関数がハンドルとして渡される場合、パラメータを取ることができず、最初の方法に加えて、この問題を解決するためにクロージャを使用しました

コードをコピー コードは次のとおりです:

//タイマー、自動的に移動します
this.timer = setInterval ((function (context) {
return function () {
Bullet.prototype.move.call (context)
}
}) (this), 30);現在の実行環境を確認し、call メソッドを呼び出して手動で実行します。

8. メソッドの機能設計には、関数に加えて、この関数を実行するための条件検出も含める必要があります。たとえば、移動には、移動できる状況と移動できない状況が含まれている必要があります。 。このテストは外部に配置しないでください。

9. コードを書くときは、最初に関数を実装してから最適化について考えたり、最初に設計してから実装したりする必要はありません。思考は明確であり、混乱せず、一点に集中する必要があります。

10. JavaScript にはスリープ関数はありません。インターバル実行の目的を達成するために変数を作成できます。

2. コードの実装

1.プログラムはBomb.js,Bullet.js,Draw.js,Tank.js,index.html,img,music,

2.ファイナルエフェクト

に分かれています。

3. コード
1.index.html

コードをコピー コードは次のとおりです:

按下回车键开始游戏

按下1键增加生命、默认是1

剩余生命数 :1

2.Draw.js

复制代 代码如下:

/**
* 14-3-18 に Alane によって作成されました。
*/

function drawing(){
//弾丸と戦車の生死を確認します
checkDead(); /キャンバスをクリアします
ctx.clearRect(0,0,500,400);
//プレイヤーを描画します
if(!hero.isdead){
drawTank(hero); else{
hero.cutLife( );
}
//敵の戦車を描画します
for (var i = 0; i < 敵.length; i ) {
drawTank(敵[i]) ;
}
//敵の弾丸を描画します
for(var j=0;jvar temp = neighbors[j].bulletsList; var i = 0; i < temp.length; i ) {
drawBullet(temp[i])
}
// プレイヤーの弾丸を描画します
var temp = hero. BulletsList;
for (var i = 0; i < temp.length; i ) {
drawBullet(temp[i])
}

//爆弾を描画します
for(var i=0 ;idrawBown(Bombs[i])
}

}

関数drawTank(タンク) {
var x = タンク.x;
var y = タンク.y;

if(tank.direct == 0 || タンク。直接 ==2){
ctx.fillRect(x, y, 5,30);

ctx.fillRect(x 15, y, 5,30); 6, y 8, 8, 15);

ctx.ストロークスタイル = タンク.カラー;
if(tank.direct == 0); >ctx.beginPath();
ctx.moveTo(x 10,y-2);
ctx.closePath(); {
ctx.beginPath();
ctx.moveTo(x 10,y 24);
ctx.closePath(); }

ctx.ストローク();
}else{
ctx.fillRect(x, y, 30,5); );

ctx.fillRect(x 8, y 6, 15,8);

ctx.ストロークスタイル = '#FF0000'; 🎜>if(tank.direct == 3){
ctx.beginPath();
ctx.moveTo(x-2,y 10);
ctx.closePath();
}else{
ctx.beginPath();
ctx.lineTo(x 32,y 10); );
ctx.closePath();

ctx.ストローク();

}
関数drawBullet(弾丸) ctx.fillStyle = Bullet.color ;
ctx.beginPath();
ctx.closePath(); .fill();
}

関数drawBown (obj){
if(obj.life>8){
ctx.drawImage(im,obj.x,obj.y, 50,50);
}else if(obj.life>4){
ctx.drawImage(im2,obj.x,obj.y,50,50); ctx.drawImage(im3,obj .x,obj.y,50,50);
}

obj.lifeDown()
if(obj.life<=0); >Bombs.deleteElement(obj) ;
}
}

function checkDead(){
//敵弾の生死を検出
for(var j=0; j<敵.length;j ){
var temp = 敵[j].bulletsList;
for (var i = 0; i var o = temp[ i];
if(o.isdead ){
temp.deleteElement(o)
}
}
// プレイヤーの弾丸の生死を検出します
var temp = hero.bulletsList;
for (var i = 0; i var o = temp[i]{
temp.deleteElement(o);
}
}

//敵戦車の生死を検出します
for (var i = 0; i < 敵.length; i ) {
var o = 敵[i];
if( o.isdead){
敵.deleteElement(o);
}
}


Bomb.js




コードをコピー


コードは次のとおりです:


/ **
* 14-3-18 に Alane によって作成されました。
*/
function Bomb(x,y){
this .life = 12;
this.x = x;
this.y = y; 🎜>Bomb.prototype.lifeDown = function(){
this.life--
}


Tank.js

コードをコピー

コードは次のとおりです:

/**
* 14-3-7 に Alane によって作成されました。
*/
/**
* 直接 0 上
* 1 右
* 2 下
* 3 左
* @param x
* @param y
* @param direct
* @コンストラクター
*/
//************************************************* ***************************************/
//タンク父类
機能 タンク(x, y, direct) {
this.speed = 2;

}
Tank.prototype.moveUp = function () {
//边界检测
if (this.y < 0) {
//换方向
this.changeDirect();
戻る;
}
this.y -= this.speed;
this.direct = 0;

}
Tank.prototype.moveDown = function () {
if (this.y > height - 30) {
this.changeDirect ();
戻る;
}
this.y = this.speed;
this.direct = 2;
}
Tank.prototype.moveLeft = function () {
if (this.x <0) {
this.changeDirect ();
戻る;
}
this.x -= this.speed;
this.direct = 3;

}
Tank.prototype.moveRight = function () {
if (this.x > width - 30) {
this.changeDirect ();
戻る;
}
this.x = this.speed;
this.direct = 1;

}

//变换方向
Tank.prototype.changeDirect = function () {
while (true) {
var temp = Math.round (Math.ランダム () * 3);
if (this.direct != temp) {
this.direct = temp;
休憩;
}
}
//alert("x=" this.x " y=" this.y " direct=" this.direct)
}

//射击子弹
Tank.prototype.shot = function () {
if(this.isdead){
return;
}
if (this.bulletsList.length < this.maxBulletSize) {
//新建子弹
var Bullet = null;
switch (this.direct) {
case 0:
bullet = new Bullet (this.x 10, this.y - 2, 0, this.color);
休憩;
ケース 1:
bullet = 新しい Bullet (this.x 32, this.y 10, 1, this.color);
休憩;
ケース 2:
bullet = 新しい Bullet (this.x 10, this.y 32, 2, this.color);
休憩;
ケース 3:
bullet = 新しい Bullet (this.x - 2, this.y 10, 3, this.color);
休憩;
}
//放入弹夹
this.bulletsList.push (bullet);
}
}
//************************************************* ***************************************/
//玩家
function Hero (x, y, direct) {
this.lifetimes = 5;
this.isdead = false;
this.color = '#FF0000';
this.x = x;
this.y = y;
this.direct = 直接;
this.bulletsList = [];
this.maxBulletSize = 10;
this.newlife = null;
}
Hero.prototype = 新しい戦車 (0, 0, 0);
Hero.prototype.constructor = ヒーロー;
Hero.prototype.addLife = function(){
this.lifetimes ;
document.querySelector("#life").innerHTML = hero.lifetimes;
}
Hero.prototype.cutLife = function(){
if(this.lifetimes>=1 && !this.newlife){
this.lifetimes--;
this.newlife = setTimeout("hero.newLife()",2000);
}
}
Hero.prototype.newLife = function(){
this.isdead = false;
clearTimeout(hero.newlife);
hero.newlife = null;
document.querySelector("#life").innerHTML = hero.lifetimes;
}


//************************************************* ***************************************/
//敌人タンク
関数 敵 (x, y, 直接) {
this.isdead = false ;
this.color = '青';
this.x = x;
this.y = y;
this.direct = 直接;
this.bulletsList = [];
this.maxBulletSize = 1;


//定時器,自動移動
this.timer1 = setInterval ((function (context) {
return function () {
//移動
敵。プロトタイプ.move.call (コンテキスト);
}
}) (これ)、30);

//定時器,射击
this.timer2 = setInterval ((function (context) {
return function () {
//射击
Tank.prototype.shot.呼び出し (コンテキスト);
}
}) (これ)、2000);

//定時器,变换方向
this.timer3 = setInterval ((function (context) {
return function () {
//射击
Tank.prototype.changeDirect .call (コンテキスト);
}
}) (これ)、3000);
}

Enemy.prototype = 新しい戦車 (0, 0, 0);
Enemy.prototype.constructor = 敵;
Enemy.prototype.move = function () {
switch (this.direct) {
case 0:
this.moveUp ();
休憩;
ケース 1:
this.moveRight ();
休憩;
ケース 2:
this.moveDown ();
休憩;
ケース 3:
this.moveLeft();
休憩;
}
}

Bullet.js

复制代码代码如下:

/**
* 2011 年 14 月 3 日にアランによって作成されました。
*/
function Bullet (x, y, direct, color) {
this.isdead = false;
this.x = x;
this.y = y;
this.direct = 直接;
this.speed = 4;
this.color = カラー;
//定時器，自動運転
this.timer = setInterval ((function (context) {
return function () {
Bullet.prototype.move.call (context)
}
}) (これ)、30);
}
Bullet.prototype.move = function () {
switch (this.direct) {
case 0:
this.y -= this.speed;
休憩;
ケース 1:
this.x = this.speed;
休憩;
ケース 2:
this.y = this.speed;
休憩;
ケース 3:
this.x -= this.speed;
休憩;
}

//边界检测
if (this.y < 0 || this.x > 幅 || this.y > 高さ || this.x < 0) {
clearInterval (this.timer);
this.isdead = true;
}

//碰撞检测 检测敌人タンク
for(var i=0;ivar temp = allTank[i];
if(temp.isdead){
続行;
}
switch (temp.direct){
ケース 0:
ケース 2:if(this.x>temp.x && this.xtemp .y&& this.yif(this.color == temp.color){
break;
}
Bombs.push(new Bomb(temp.x-10,temp.y-10));
clearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}break
ケース 1:
ケース 3:if(this.x>temp.x && this.xtemp.y&& this.yif(this.color == temp.color){
ブレーク;
}
Bombs.push(new Bomb(temp.x-10,temp.y-10));
clearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}休憩;
}
}

}

ソースコード下ダウンロード

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：javascript_javascript スキルにおける propertyIsEnumerable() メソッドの使用の概要次の記事：javascript_javascript スキルにおける propertyIsEnumerable() メソッドの使用の概要

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved