Question

新编码，我决定使用我从网上提取的6张图片创建一个互动的onclick冒险游戏。

我将第一张图片添加到画布上，并在画布上放置了一个很酷的小动画，但是现在我遇到了一个大问题。

整个游戏在一个画布上完成，使用MULTIPLE，以及点击活动的分支。

示例：在标题屏幕上，用户可以选择“开始游戏”或“信用”（作为可点击文本完成）。

如果用户选择“开始游戏”，屏幕将转换为图片编号2，再次点击后，图片编号2会模糊，并且旁白文字将出现在用户面前。但是，如果他们选择“积分”，则屏幕转换为不同的图片，图片编号3.在图片编号3上，积分以慢速自动向上滚动方式显示。

我在网上看过这个，但我通常会在我正在寻找的一般情况下获得答案，我发现的一些结果是开关案例（对它们的经验不多，更不用说制作分支开关了）案例），交互式故事讲述，事件处理程序等的Undum框架。

我没有使用Javascript或画布工作，在我处理这个项目之前，我认为最好直接提出我的项目问题，并获得一个经验丰富的意见，以及一个接一个地打破项目并形成某种攻击方式。

知道这个项目将如何运作，你们建议我使用哪些资源或编码方法？这个“分支”动画树甚至会是什么样的？

以下是我的代码到目前为止：

- HTML -

<html>
<head>
    <title>Detective</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag  'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <!--   load in the jquery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js">
    </script>
</head>
<body>

</body>
</html>

- CSS -

body{
  background:#000;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

canvas{
/*the code below this activates the canvas border, turn it on to visibly see how big the canvas is */

/*  border: 1px solid red;*/  

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    display: none;
}

@font-face{
  font-family: 'Betty Noir Regular';
  src: url('/assets/bettynoir.ttf');
}

- JS -

var canvas = document.createElement('canvas'); 
var w = canvas.width = 800,
    h = canvas.height = 400;
var c = canvas.getContext('2d');

var img = new Image();
img.src = 'http://oi41.tinypic.com/4i2aso.jpg';

var background = new Image();
background.src = "https://i2.wp.com/i2.listal.com/image/2669447/500full.jpg";



var position = {x : 410, y : 238};

document.body.appendChild(canvas);

var particles = [];
var random = function(min, max){
  return Math.random()*(max-min)*min;
};

function Particle(x, y){
  this.x = x;
  this.y = y;
  this.velY = -2;
  this.velX = (random(1, 10)-5)/10;
  this.size = random(3, 5)/10;
  this.alpha = 1;
  this.update = function(){
    this.y += this.velY;
    this.x += this.velX;
    this.velY *= 0.99;
    if(this.alpha < 0){this.alpha = 0;}
    c.globalAlpha = this.alpha;
    c.save();
    c.translate(this.x, this.y);
    c.scale(this.size, this.size);
    c.drawImage(img, -img.width/2, -img.height/2);
    c.restore();
    this.alpha *= 0.96;
    this.size += 0.02;//  
  };
}

var draw = function(){
  var p = new Particle(position.x, position.y);
  particles.push(p);

  // draw the background image before you draw the particles
  c.drawImage(background,160,0);
  c.font="20px Betty Noir Regular";
  c.fillStyle = "white";
  c.fillText("Start",500,200);

  c.font="20px Betty Noir Regular";
  c.fillStyle = "white";
  c.fillText("Credits",500,250);

  while(particles.length > 500) particles.shift();

  for(var i = 0; i < particles.length; i++)
  {
    particles[i].update();
  }
};



setInterval(draw, 3500/60);


$(document).ready(function() {
 $("canvas").fadeIn(7000);
});

$(document).ready(function() {
    $("#noir-song").get(0).play();
});

我如何在Canvas上创建“选择你自己的冒险游戏”？

0 个答案: