Spiel-Hindernisse

} Spiel-Controller
Selbst ausprobieren Spiel-Score

按下按钮可移动红色方块：

掌控一切

现在我们要控制红色方块。

添加四个按钮：上、下、左、右。

为每个按钮编写一个函数，以沿选定方向移动组件。

im component 构造函数中创建两个新属性，并将它们命名为 speedX und speedY。这些属性被用作速度指示器。

im component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX und speedY 属性来更改组件的位置。

在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：

实例

<script>
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  myRightBtn.update();
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  myRightBtn.update();
myRightBtn.update();
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.newPos();
  myLeftBtn.update();
myRightBtn.update();
function moveup() {}}
  myGamePiece.speedY -= 1;
myRightBtn.update();
function movedown() {
  myGamePiece.speedY += 1;
myRightBtn.update();
function moveleft() {
  myGamePiece.speedX -= 1;
myRightBtn.update();
function moveright() {
  myGamePiece.speedX += 1;
myRightBtn.update();
</script>
<button onclick="moveup()">RAUF</button>
<button onclick="movedown()">RUNTER</button>
<button onclick="moveleft()">LINKE</button>
<button onclick="moveright()">RECHTS</button>

myGamePiece.update();

Bewegung stoppen

Wenn erforderlich, können Sie den roten Quadrat beim Loslassen der Taste anhalten.

Fügen Sie eine Funktion hinzu, um den Geschwindigkeitssensor auf 0 zu setzen.

Um sowohl für normale Bildschirme als auch für Touchscreens vorzubereiten, fügen wir Code für beide Arten von Geräten hinzu:

实例

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
myRightBtn.update();
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">RAUF</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">RUNTER</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LINKE</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RECHTS</button>

myGamePiece.update();

Tastatur als Controller

Wir können auch mit den Pfeiltasten auf der Tastatur den roten Quadrat steuern.

eine Methode erstellt, um zu überprüfen, ob eine Taste gedrückt wird, und myGameArea des Objekts key Eigenschaft aufgesetzt wird Tastencode. Wenn eine Taste gelöst wird, wird key Eigenschaft aufgesetzt wird false：

实例

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.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function (e) {
      myGameArea.key = e.keyCode;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.key = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  myRightBtn.update();
myRightBtn.update();

Dadurch können wir, wenn eine der Pfeiltasten gedrückt wird, den roten Block bewegen:

实例

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  Wenn (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
  Wenn (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
  Wenn (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
  Wenn (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myLeftBtn.update();
myRightBtn.update();

myGamePiece.update();

Wenn mehrere Tasten gedrückt werden

Was passiert, wenn mehrere Tasten gleichzeitig gedrückt werden?

In diesem Beispiel kann das Element nur horizontal oder vertikal bewegt werden. Jetzt möchten wir, dass das Element auch diagonal bewegt werden kann.

für myGameArea Das Objekt wird eine keys Das Array, und für jede gedrückte Taste wird ein Element eingefügt und mit dem Wert truegeändert, der Wert bleibt true, bis die Taste nicht mehr gedrückt wird, der Wert ist in keyup Die Funktion des Ereignisbeobachters wird auf false：

实例

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.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  myRightBtn.update();
myRightBtn.update();
 function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  Wenn (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
  Wenn (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
  Wenn (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myLeftBtn.update();
myRightBtn.update();

myGamePiece.update();

Verwenden Sie den Mauszeiger als Controller

Wenn Sie den Mauszeiger verwenden möchten, um den roten Würfel zu steuern, wählen Sie myGameArea Fügen Sie einem Objekt eine Methode hinzu, um die x- und y-Koordinaten des Mauszeigers zu aktualisieren:

实例

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //verstecken Sie den ursprünglichen Cursor
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousemove', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  myRightBtn.update();
myRightBtn.update();

Dann können wir den roten Würfel mit dem Mauszeiger bewegen:

实例

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  myRightBtn.update();
  myLeftBtn.update();
myRightBtn.update();

myGamePiece.update();

Berühren Sie den Bildschirm, um das Spiel zu steuern

Wir können auch den roten Würfel auf dem Berührungsbildschirm steuern.

im myGameArea Fügen Sie einem Objekt eine Methode hinzu, die die x- und y-Koordinaten des Bildschirmberührungsstandorts verwendet:

实例

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.interval = setInterval(updateGameArea, 20);
    window.addEventListener('touchmove', function (e) {
      myGameArea.x = e.touches[0].screenX;
      myGameArea.y = e.touches[0].screenY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  myRightBtn.update();
myRightBtn.update();

Dann können wir, wenn der Benutzer den Bildschirm berührt, denselben Code wie für den Mauszeiger verwenden, um den roten Würfel zu bewegen:

实例

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  myRightBtn.update();
  myLeftBtn.update();
myRightBtn.update();

myGamePiece.update();

Controller auf dem Canvas

Wir können auch unsere eigenen Buttons auf dem Canvas zeichnen und sie als Controller verwenden:

实例

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  myUpBtn = new component(30, 30, "blue", 50, 10);
  myDownBtn = new component(30, 30, "blue", 50, 70);
  myLeftBtn = new component(30, 30, "blue", 20, 40);
  myRightBtn = new component(30, 30, "blue", 80, 40);
  myGameArea.start();
myRightBtn.update();

Fügen Sie eine neue Funktion hinzu, um zu bestimmen, ob ein bestimmtes Komponente (im Beispiel ein Button) geklickt wurde。

Zunächst müssen Sie Event-Listener hinzufügen, um zu überprüfen, ob ein Mausklick ausgeführt wurde（mousedown und mouseup）。Um auf Touchscreens zu reagieren, müssen Sie auch Event-Listener hinzufügen, um zu überprüfen, ob der Bildschirm geklickt wurde（touchstart und touchend）：

实例

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.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousedown', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('mouseup', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
    window.addEventListener('touchstart', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('touchend', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  myRightBtn.update();
myRightBtn.update();

Jetzt myGameArea Das Objekt hat Eigenschaften, die uns die x- und y-Koordinaten des Klicks mitteilen können. Wir verwenden diese Eigenschaften, um zu überprüfen, ob ein Klick auf einen unserer blauen Knöpfe ausgeführt wurde.

Dieser neue Methodenname lautet clickedist component Eine Methode des Konstruktors, die überprüft, ob ein Komponente geklickt wurde.

im updateGameArea Funktion, wenn einer der blauen Knöpfe geklickt wird, führen wir die erforderlichen Operationen aus:

实例

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  myRightBtn.update();
  this.clicked = function() {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var clicked = true;
    if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
      clicked = false;
    myRightBtn.update();
    return clicked;
  myRightBtn.update();
myRightBtn.update();
function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    if (myUpBtn.clicked()) {
      myGamePiece.y -= 1;
    myRightBtn.update();
    if (myDownBtn.clicked()) {
      myGamePiece.y += 1;
    myRightBtn.update();
    if (myLeftBtn.clicked()) {
      myGamePiece.x += -1;
    myRightBtn.update();
    if (myRightBtn.clicked()) {
      myGamePiece.x += 1;
    myRightBtn.update();
  myRightBtn.update();
  myUpBtn.update();
  myDownBtn.update();
  myLeftBtn.update();
  myRightBtn.update();
  myLeftBtn.update();
myRightBtn.update();

myGamePiece.update();

} Spiel-Controller
Selbst ausprobieren Spiel-Score

课程表

HTML-Grafiken

HTML 绘图

谷歌地图

SVG-Tutorial

Canvas 教程

Canvas-Uhr

HTML 游戏

选修课

课程推荐：

Spiel-Hindernisse

掌控一切

实例

Bewegung stoppen

实例

Tastatur als Controller

实例

实例

Wenn mehrere Tasten gedrückt werden

实例

Verwenden Sie den Mauszeiger als Controller

实例

实例

Berühren Sie den Bildschirm, um das Spiel zu steuern

实例

实例

Controller auf dem Canvas

实例

实例

实例

Nächste Seite

Werkzeugkasten

Canvas-API