試圖讓遊戲組件在JavaScript中透明

我一直在關注W3School關於HTML5遊戲開發的教程，使用JavaScript創建一個相當簡單的遊戲。試圖讓遊戲組件在JavaScript中透明

該代碼有效，但我想將綠色塊更改爲透明，只要它與大紅色塊發生碰撞。以下是我的代碼：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
<style> 
 
canvas { 
 
    border:1px solid #d3d3d3; 
 
    background-color: #f1f1f1; 
 
} 
 
</style> 
 
</head> 
 
<body onload="startGame()"> 
 
<script> 
 
var score = 0; 
 
var myGamePiece; 
 
var myObstacles = []; 
 
var myScore; 
 

 
function startGame() { 
 
    myGamePiece = new component(30, 30, "red", 10, 120); 
 
    myScore = new component("30px", "Consolas", "black", 280, 40, "text"); 
 
    myGameArea.start(); 
 
} 
 

 
var myGameArea = { 
 
    canvas : document.createElement("canvas"), 
 
    start : function() { 
 
     this.canvas.width = 480; 
 
     this.canvas.height = 270; 
 
     this.context = this.canvas.getContext("2d"); 
 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
     this.frameNo = 0; 
 
     this.interval = setInterval(updateGameArea, 20); 
 
     }, 
 
    clear : function() { 
 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
} 
 

 
function component(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    this.width = width; 
 
    this.height = height; 
 
    this.speedX = 0; 
 
    this.speedY = 0; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.update = function() { 
 
     ctx = myGameArea.context; 
 
     if (this.type == "text") { 
 
      ctx.font = this.width + " " + this.height; 
 
      ctx.fillStyle = color; 
 
      ctx.fillText(this.text, this.x, this.y); 
 
     } else { 
 
      ctx.fillStyle = color; 
 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
 
     } 
 
    } 
 
    
 
    this.newPos = function() { 
 
     this.x += this.speedX; 
 
     this.y += this.speedY; 
 
    } 
 
    this.crashWith = function(otherobj) { 
 
     var myleft = this.x; 
 
     var myright = this.x + (this.width); 
 
     var mytop = this.y; 
 
     var mybottom = this.y + (this.height); 
 
     var otherleft = otherobj.x; 
 
     var otherright = otherobj.x + (otherobj.width); 
 
     var othertop = otherobj.y; 
 
     var otherbottom = otherobj.y + (otherobj.height); 
 
     var crash = true; 
 
     if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { 
 
      crash = false; 
 
     } 
 
     return crash; 
 
    } 
 
} 
 

 
function updateGameArea() { 
 
    var x, height, gap, minHeight, maxHeight, minGap, maxGap; 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
     if (myGamePiece.crashWith(myObstacles[i])) { 
 
      score += 1; 
 
     
 

 
     } 
 
    } 
 
    myGameArea.clear(); 
 
    myGameArea.frameNo += 1; 
 
    if (myGameArea.frameNo == 1 || everyinterval(300)) { 
 
     x = myGameArea.canvas.width; 
 
     y = myGameArea.canvas.height; 
 
     y = Math.floor(Math.random() * y); 
 
     myObstacles.push(new component(10, 10, "green", x, y)); 
 
     
 
    } 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
     myObstacles[i].speedX = -1; 
 
     myObstacles[i].newPos(); 
 
     myObstacles[i].update(); 
 
    } 
 
    myScore.text="SCORE: " + score; 
 
    myScore.update(); 
 
    myGamePiece.newPos(); 
 
    myGamePiece.update(); 
 
} 
 

 
function everyinterval(n) { 
 
    if ((myGameArea.frameNo/n) % 1 == 0) {return true;} 
 
    return false; 
 
} 
 

 
function moveup() { 
 
    myGamePiece.speedY = -1; 
 
} 
 

 
function movedown() { 
 
    myGamePiece.speedY = 1; 
 
} 
 

 
function moveleft() { 
 
    myGamePiece.speedX = -1; 
 
} 
 

 
function moveright() { 
 
    myGamePiece.speedX = 1; 
 
} 
 

 
function clearmove() { 
 
    myGamePiece.speedX = 0; 
 
    myGamePiece.speedY = 0; 
 
} 
 

 
</script> 
 
<div style="text-align:center;width:480px;"> 
 
    <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br> 
 
    <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button> 
 
    <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br> 
 
    <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button> 
 
</div> 
 

 
<p>The score will count one point for each frame you manage to "stay alive".</p> 
 
</body> 
 
</html>

我試着寫類似的更新功能的changeColor（）函數，但ctx.fillStyle =「RGBA（0,0， 0,0）「;

我一直被困在這個很長一段時間。任何形式的援助將不勝感激。

來源

2016-10-17 bitnahian

你需要一個this.color屬性添加到您的component函數的構造（也color必須this.color在update()函數內部構造說）。然後只要改變myObstacles [i]的color屬性，當你迭代它們並檢測碰撞（我相信「透明」的作品）。

Here是一個小提琴。祝你好運！

來源

2016-10-17 12:23:58

完美的作品！謝謝！：D – bitnahian

沒問題！如果你覺得它有幫助，你能接受答案嗎？ :) –

試圖讓遊戲組件在JavaScript中透明

回答

相關問題