資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究使用 JavaScript 的遊戲——射擊子彈
此遊戲使用 JavaScript 和 code.org 的遊戲實驗室製作。
遊戲故事/規則/介紹
玩家必須透過按向上、向下、向左和向右箭頭鍵來移動突擊隊員，並使突擊隊員逃離圍牆區域。要走出門口，突擊隊員需要找到正確的鑰匙。其中一把鑰匙是門的鑰匙。鑰匙放置在保護區內。突擊隊員需要在拾取正確的鑰匙的同時到達門口。圍牆區域內有很多燃油坦克。如果突擊隊員在這些坦克的射程內，子彈就會被髮射，突擊隊員可能會死亡。但是突擊隊員有一個盾牌，可以透過按“s”鍵來啟動，可以保護突擊隊員免受子彈的傷害。但是，盾牌只能持續很短的時間。玩家的挑戰是讓突擊隊員走出門口，保護士兵免受子彈傷害，並贏得這場遊戲。遊戲非常簡單，具有所需遊戲設計的所有功能。它巧妙地結合了技巧和隨機性。它既不太容易也不太難玩。即時反饋會以視覺方式顯示在螢幕上。一旦子彈擊中突擊隊員，玩家就會輸掉遊戲，並且可以重新開始遊戲。
遊戲設計步驟（資料夾和檔案）
以下是各個步驟：
步驟 1 − 建立一個新資料夾。將其命名為 firethebulletsgame。現在儲存或建立所有小尺寸圖片，如下面“所用圖片”部分所示。
步驟 2 − 使用 “https://photoscissors.com/” 或任何其他背景去除軟體去除所有圖片的背景。
步驟 3 − 前往 code.org。註冊或登入。
步驟 4 − 透過選擇遊戲實驗室啟動新專案。透過轉到動畫選項卡 -> 新動畫 -> 上傳影像來上傳所有影像。
所用圖片
主要遊戲設計步驟
遊戲設計需要以下步驟：
步驟 1 − 宣告變數併為玩家（突擊隊員）、盾牌、鑰匙、門、牆壁、坦克（敵方士兵）建立精靈，並設定動畫。
步驟 2 − 使用隨機函式將一個鍵設定為正確的鍵。
步驟 3 − 使用箭頭鍵編寫移動玩家的程式碼。
步驟 4 − 建立這些函式：draw()、throwBullet()、hitBullet()、pickthekey() 和 result()。
步驟 5 − 編寫條件，如果突擊隊員與鑰匙碰撞，他將拾取這些鑰匙。
步驟 6 − 編寫條件，如果突擊隊員死亡，玩家將收到“你輸了”的訊息。
步驟 7 − 編寫條件，如果突擊隊員帶著正確的鑰匙與門碰撞，他將收到獲勝的訊息。
突擊隊員遊戲的程式碼
var gameState = 0;
var playerAlive = true;
var bullet1,bullet2,bullet3,bullet4;
var bulletGroup = createGroup();
var rand = randomNumber(1,4);
var rightKey = 0;
var workingBullet = true;
var time = 200;
//player
var commando = createSprite(40,365,30,30);
commando.setAnimation("playerR");
commando.scale = 0.1;
commando.setCollider("circle",0,0,200);
//shield
var shield = createSprite(commando.x,commando.y,50,50);
shield.setAnimation("shield");
shield.visible = false;
//door
var door1=createSprite(300,10,50,50);
//keys
var key1=createSprite(110,300,10,10);
var key2=createSprite(290,210,10,10);
var key3=createSprite(90,190,10,10);
var key4=createSprite(50,100,10,10);
//walls
var wall1 = createSprite(131,10,255,10);
var wall2 = createSprite(366,10,48,10);
var wall3 = createSprite(5,200,10,380);
var wall4 = createSprite(395,200,10,380);
var wall5 = createSprite(235,390,330,10);
var wall6 = createSprite(200,280,260,10);
var wall7 = createSprite(100,227,200,10);
var wall8 = createSprite(265,70,10,100);
var wall9 = createSprite(135,65,135,10);
var wall10 = createSprite(35,120,75,10);
var wall11 = createSprite(296,120,72,10);
var wall12 = createSprite(70,92,10,65);
var wall13 = createSprite(330,92,10,65);
var wall14 = createSprite(70,200,10,62);
var wall15 = createSprite(200,201,10,62);
var wall16 = createSprite(264,200,10,62);
var wall17 = createSprite(264,306,10,62);
var wall18 = createSprite(166,120,72,10);
var wall19 = createSprite(102,174,72,10);
var wall20 = createSprite(135,148,10,60);
var wall21 = createSprite(297,174,72,10);
var wall22 = createSprite(135,310,10,60);
var wall23 = createSprite(200,365,10,60);
var wall24 = createSprite(330,365,10,60);
var wall25 = createSprite(330,226,125,10);
var wall26 = createSprite(70,335,125,10);
//adding walls to an array
var walls = [wall1,wall2,wall3,wall4,wall5,wall6,wall7,wall8,wall9,wall10,wall11,wall12,wall13,wall14,wall15,wall16,wall17,wall18,wall19,wall20,wall21,wall22,wall23,wall24,wall25,wall26];
//soldiers
var sol1 = createSprite(100,95,30,30);
var sol2 = createSprite(30,250,30,30);
var sol3 = createSprite(360,360,30,30);
var sol4 = createSprite(300,95,30,30);
function draw() {
background("white");
//start text
noStroke();
fill(0);
textSize(15);
text("Start",25,395);
//door animation
door1.setAnimation("door");
//keys animation
key1.setAnimation("key1");
key1.scale = 0.5;
key2.setAnimation("key2");
key2.scale = 0.5;
key3.setAnimation("key3");
key3.scale = 0.5;
key4.setAnimation("key4");
key4.scale = 0.5;
//guns animations
sol1.setAnimation("cannonR");
sol1.scale = 0.125;
sol2.setAnimation("cannonR");
sol2.scale = 0.125;
sol3.setAnimation("cannonT");
sol3.scale = 0.125;
sol4.setAnimation("cannonT");
sol4.scale = 0.125;
// wall's function
for(var n = 0;n<26;n++){
walls[n].shapeColor = "black";
if(commando.isTouching(walls[n])){
commando.collide(walls[n]);
shield.collide(walls[n]);
}
}
pickthekey();
//movement of the player
//making the shield change its position according to the player
if(keyDown(UP_ARROW)){
commando.y = commando.y - 10;
shield.y = commando.y;
commando.setAnimation("playerB");
}
if(keyDown(DOWN_ARROW)){
commando.y = commando.y + 10;
shield.y = commando.y;
commando.setAnimation("playerF");
}
if(keyDown(LEFT_ARROW)){
commando.x = commando.x - 10;
shield.x = commando.x;
commando.setAnimation("playerL");
}
if(keyDown(RIGHT_ARROW)){
commando.x = commando.x + 10;
shield.x = commando.x;
commando.setAnimation("playerR");
}
//throwing bullets only when the player is alive
if(playerAlive===true){
throwBullet();
}
//using shield
if(keyWentDown("s") && playerAlive === true){
gameState = 1;
shield.visible =true;
workingBullet = false;
time = 200;
}
//making shield disappear
if(shield.visible === true){
time--;
}
if(time === 0){
shield.visible = false;
workingBullet = true;
}
//calling functons
hitBullet();
result();
drawSprites();
}
function throwBullet(){
//workingBullet = true;
if(commando.x<390 && commando.x>330 && commando.y<330 && commando.y>230){
if (World.frameCount%40===0){
bullet1 = createSprite(360,340,10,10);
bullet1.scale = 0.3;
bullet1.setAnimation("bulletT");
bullet1.velocityY= -12;
bulletGroup.add(bullet1);
}
}
if(commando.x<390 && commando.x>40 && commando.y<275 && commando.y>230){
if (World.frameCount%40===0){
bullet2 = createSprite(50,250,10,10);
bullet2.scale = 0.3;
bullet2.setAnimation("bulletR");
bullet2.velocityX= 9;
bulletGroup.add(bullet2);
}
}
if(commando.x<260 && commando.x>115 && commando.y<115 && commando.y>70){
if (World.frameCount%40===0){
bullet3 = createSprite(120,95,10,10);
bullet3.scale = 0.3;
bullet3.setAnimation("bulletR");
bullet3.velocityX= 9;
bulletGroup.add(bullet3);
}
}
if(commando.x<325 && commando.x>270 && commando.y<115 && commando.y>15){
if (World.frameCount%40===0){
bullet4 = createSprite(300,75,10,10);
bullet4.scale = 0.3;
bullet4.setAnimation("bulletT");
bullet4.velocityY= -12;
bulletGroup.add(bullet4);
}
}
}
function result(){
if(rightKey > 0 && commando.isTouching(door1)){
textSize(20);
text("You Win!!",30,30);
commando.visible = false;
door1.visible = false;
shield.visible = false;
}
if(playerAlive === false){
textSize(20);
text("You Lose!!",30,30);
}
if(playerAlive === true && rightKey === 0 && commando.isTouching(door1)){
textSize(20);
text("Get the Right Key",30,30);
}
}
function hitBullet(){
if(bulletGroup.isTouching(commando) && workingBullet === true){
commando.destroy();
playerAlive = false;
}else if(workingBullet === false && bulletGroup.isTouching(commando)){
bulletGroup.destroyEach();
}
}
function pickthekey(){
//defining the conditions for a key to be the right one to open the door
if(commando.isTouching(key1)){
if(rand === 1){
rightKey = 1;
}
key1.destroy();
}
if(commando.isTouching(key2)){
if(rand === 2){
rightKey = 2;
}
key2.destroy();
}
if(commando.isTouching(key3)){
if(rand === 3){
rightKey = 3;
}
key3.destroy();
}
if(commando.isTouching(key4)){
if(rand === 4){
rightKey = 4;
}
key4.destroy();
}
}
輸出
此處提供的下圖顯示玩家移動突擊隊員。
圖 1：使用向上、向下、向左和向右箭頭移動突擊隊員。
圖 2：如果玩家輸掉遊戲，則顯示帶有“你輸了！！”訊息的結果。
結論
在這篇遊戲開發文章中，給出了製作簡單入門級遊戲的完整步驟。此遊戲可用作示例，以整合學習 javascript 所需的所有基本步驟。此遊戲具有製作遊戲引人入勝且具有挑戰性所需的所有主要遊戲設計功能。此遊戲是在 code.org 上使用遊戲實驗室製作的。遊戲中的即時反饋以視覺方式以及文字訊息的形式顯示。
更新於：2023年5月10日
397 次瀏覽
廣告