如何解决我的游戏中的这个问题 [英] How do I fix this problem with my game

问题描述

我正在制作一个游戏，真正的重点是挥动一把简单的剑，或者真的是为了刺它。如果你按下键盘上的d键，剑应该以一种看起来像刺戳或刺伤的方式移动。这是我的代码：

 <  ！DOCTYPE     html  >  
 <   html  >  
 <   head  >  
 <   meta    < span class =code-attribute> name   =  viewport    content   =  width =设备宽度，initial-scale = 1.0  /  >  
 <   style  >  
  canvas  {
  border  ：  1px solid＃d3d3d3;  
  background-color  ： ＃f1f1f1;  
} 
 < /  风格 >  
  <   / head  >  
 <   body     onload   =  startGame（） >  
 
 <   script  >  
  var  myGamePiece，sword; 
 
 
  function  startGame（）{
 
 sword =  new 组件（ 29 ， 5 ，   orange， 225 ， 225 < /跨度>）; 
 myGamePiece =  new 组件（ 30 ， 30 ，  blue， 225 ， 225 ）; 
 
 myGameArea.start（）; 
} 
 
  var  myGameArea = {
 canvas： document  .createElement（  canvas），
 start： function （）{
  this  .canvas.width =  480 ; 
 此 .canvas.height =  270 ; 
 此 .context = 此 .canvas.getContext（  2d）; 
  document  .body.insertBefore（ this  .canvas， document  .body.childNodes [ 0 ]）; 
 此 .frameNo =  0 ; 
  this  .interval = setInterval（updateGameArea， 20 ）; 
  window  .addEventListener（'  keydown'， function （e）{
 e.preventDefault（）; 
 myGameArea.keys =（myGameArea.keys || []） ; 
 myGameArea.keys [e.keyCode] =（e.type ==   keydown）; 
}）
  window  .addEventListener（'  keyup'， function （e）{
 myGameArea.keys [e.keyCode] =（e.type = =   keydown）; 
}）
}，
 stop： function （）{
 clearInterval（ this  .interval）; 
}，
 clear： function （）{
  this 。 context.clearRect（ 0 ， 0 ， this  .canvas.width， this  .canvas.height）; 
} 
} 
 
 
  function 组件（宽度，高度，颜色，x，y，类型）{
 
  this  .type = type; 
 此 .width = width; 
 此 .height = height; 
 此 .speed =  0 ; 
 此 .angle =  0 ; 
 此 .moveAngle =  0 ; 
 此 .x = x; 
 此 .y = y; 
  this  .update =  function （）{
 ctx = myGameArea.context; 
 ctx.save（）; 
 ctx.translate（ this  .x， this  .y）; 
 ctx.rotate（ this  .angle）; 
 ctx.fillStyle = color; 
 ctx.fillRect（ this  .width / -2， this  .height / -2，  this  .width， this  .height）; 
 ctx.restore（）; 
} 
 此 .newPos = 功能（）{
 < span class =code-keyword> this  .angle + =  this  .moveAngle *  Math  .PI /  180 ; 
 此 .x + = 此 .speed *  Math  .sin（ this  .angle）; 
 此 .y  -  = 此 .speed *  Math  .cos（ this  .angle）; 
} 
} 
 
  function  updateGameArea（）{
 myGameArea.clear（）; 
 myGamePiece.moveAngle =  0 ; 
 myGamePiece.speed =  0 ; 
  if （myGameArea.keys&& myGameArea.keys [ 37 ]）{myGamePiece .x  -  =  2 ; sword.x  -  =  2 ;} 
  if （myGameArea.keys&& myGameArea .keys [ 39 ]）{myGamePiece.x + =  2 ; sword.x + =  2 ;} 
  if （myGameArea.keys&& myGameArea .keys [ 38 ]）{myGamePiece.y  -  =  1 ; sword.y  -  =  1 ;} 
  if （myGameArea.keys&& myGameArea .keys [ 40 ]）{myGamePiece.y + =  1 ; sword.y + =  1 } 
  if （myGameArea.keys&& myGameArea。键[ 83 ]）{jumping（）} 
  if （myGameArea.keys&& ; myGameArea.keys [ 68 ]）{swingForth（）} 
 sword.newPos（）; 
 sword.update（）; 
 myGamePiece.newPos（）; 
 myGamePiece.update（）; 
} 
 
  var  swingForth =  function （）{
 sword.x + =  3 } 
 setTimeout（swordReturn， 100 ）
} 
 
  var  swordReturn =  function （）{
 sword .x = myGamePiece.x 
 sword.y = myGamePiece.y 
} 
 
 
 
  var  jumping =  function （）{
 myGamePiece.y  -  =  3  
 sword.y  -  =  3  
 setTimeout（下降， 100 ）
} 
 
  var  falling =  function （）{
 myGamePiece.y + =  3  
 sword.y + =  3  
} 
 
 
 
 <   /   script  >  
 
 <   p  >  <   / p  >  
 
 <   / body  >  
 <   / html  >  

当我运行代码时，那剑运动不起作用（我命名了这个功能） swingForth）。有人可以解释原因吗？



我尝试过：



我我试图寻找任何错误，但我找不到任何错误。

解决方案

哦......这段代码的问题太糟糕了，我不知道该怎么做谈论。第一个问题是HTML。只有两个元素， body 的子元素： script 和 p 。什么都没有呈现。元素 p 为空，代码什么都不做。



严格来说， body 的HTML内容并不总是必要的。您可以在JavaScript中添加所有HTML DOM元素;你甚至试图这样做。但是你需要一些有效的JavaScript代码才能实现它。您的代码只创建了几个函数对象。这些函数都没有被调用。所以，代码根据你所写的内容做了应该做的事情：没有。



所以我完全回答了你的问题;你没有要求为你编写工作代码，这是公平的。这不仅仅是快速问题与解决方案的目标。答案论坛，但它甚至不可能，因为你甚至没有解释游戏应该做什么。这也是公平的，因为你只想知道为什么有些动作不会发生。我回答了。



但是我想不那么正式并且给你一些非正式的建议：什么应该是任何游戏的基础？这应该是主要的事件周期。您已经执行了一步， setTimeout 调用，但从不调用调用函数。但真正正确的方法是使用 window.requestAnimationFrame 。循环的想法是：将函数传递给此函数，该函数执行游戏循环，然后调用 window.requestAnimationFrame 。请参阅：

window.requestAnimationFrame（） - Web API 。



此外，如果在某些隐藏浏览器中没有实现此函数，可以添加此函数作为后备，并实现为对<$的调用C $ C> window.setTimeout 。我不太确定应该总是在实践中完成，只是为了支持一些非常过时的东西。您可以查看我的文章（派生作品）中显示的功能齐全的游戏示例画布上的俄罗斯方块。



那么，你能做什么？好吧，坐下来，实际上写下游戏的代码。 :-)

使用调试器解决为什么某些函数没有调用或不工作的问题。



< DD> -SA

I am making a game, and really the point is to swing a simple sword, or really to jab it. If you press the key "d" on the keyboard, the sword should move a in a way that it looks like a jab or stab or whatever. Here is my code:

<!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 myGamePiece, sword;

  
function startGame() {
  
    sword = new component(29, 5, "orange", 225, 225);
    myGamePiece = new component(30, 30, "blue", 225, 225);
    
    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);
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    stop : function() {
        clearInterval(this.interval);
    },
    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.speed = 0;
    this.angle = 0;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();
    }
    this.newPos = function() {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.x -=2; sword.x -=2 ;}
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.x += 2; sword.x += 2;}
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.y -= 1; sword.y -= 1;}
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.y += 1; sword.y += 1}
    if (myGameArea.keys && myGameArea.keys[83]) {jumping()}
    if (myGameArea.keys && myGameArea.keys[68]) {swingForth()}
    sword.newPos();
    sword.update();
    myGamePiece.newPos();
    myGamePiece.update();
} 

var swingForth = function(){
  sword.x + = 3}
  setTimeout(swordReturn, 100)
}
 
var swordReturn = function(){
  sword.x = myGamePiece.x
  sword.y = myGamePiece.y
}  
  


var jumping = function(){
  myGamePiece.y -=3
  sword.y -=3
  setTimeout(falling, 100)
}

var falling = function(){
  myGamePiece.y += 3
  sword.y +=3
}



</script>

<p></p>

</body>
</html>

When I run the code, that sword movement is not working (I named the function swingForth). Can someone explain why?

What I have tried:

I have tried to look for any mistakes, but I can not find any.

解决方案

Oh… the problems of this code are so bad that I don't know what to talk about. First problem is HTML. There are only two elements, children of body: script and p. Nothing is rendered. The element p is empty and code does nothing.

Strictly speaking, HTML content of body is not always necessary. You can add all the HTML DOM elements in JavaScript; and you even try to do so. But then you need some working JavaScript code which actually does it. Your code just creates several function objects. None of those functions are called. So, the code does what is should do according to what you write: nothing.

So I answered your question in full; you did not ask to write working code for your, and this is fair. Not only this would not be the goal of Quick Questions & Answers forum, but it would not be even possible, because you did not even explain what the game should do. This is also fair, because you only wanted to know why some movement does not happen. I answered.

But I would like to be not so formal and give you some non-formal advise: what should be the basis of any game? This should be the main event cycle. You already made one step, setTimeout call, but the calling function is never called. But really correct approach is using window.requestAnimationFrame. The idea of the the cycle is: you pass a function to this function, and that function performs the game cycle and then calls window.requestAnimationFrame. Please see:
window.requestAnimationFrame() — Web APIs.

Moreover, this function, if it is not implemented in some relict browsers, can be added as a fallback, and implemented as the call to window.setTimeout. I'm not quite sure that is should always be done in practice, just to support something very obsolete. You can look at a sample of a fully functional game shown in my article (derived work) Tetris on Canvas.

So, what can you do? Well, sit down and actually write the code of the game. :-)
The problems "why some function is not called" or "does not work" are solved using the debugger.

—SA

这篇关于如何解决我的游戏中的这个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！