WPFでゲーム「イライラ棒」

家族で旅行に行ってきました。旅先の子供向け施設で施設の方手作りの”イライラ棒”がありました、金属線の間に触れないように棒を通していくゲームです。WPFなら簡単にもうちょっと面白い要素が作れそうなのでトライ。

WPFアプリケーションとして作成し、おもにXAMLで記述していきます。ポイントはリソース定義したアニメーション。

 MainWindow.xaml(1/2)

<Window x:Class="IrritatingBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:IrritatingBar"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="rotatingEllipseStyle">
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(RotateTransform.Angle)" From="0" To="360" Duration="0:0:3"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="slidingRectangleStyle">
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
                            <DoubleAnimation Storyboard.TargetProperty="Width" From="40" To="100" Duration="0:0:3.5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
</Window>

アニメーションを使って、矩形の幅を変化させ楕円を回転させています。回転角をアニメーションで変化させたいけど、コントロールのプロパティとして公開されている訳ではないので、Transformをセットした後、その角度を変化させています。ウィンドウに矩形や楕円、その他要素を自由に使ってイライラ棒の通り道を作成します。イメージは左上がスタート、右下がゴールです。

MainWindow.xaml(2/2)

<Window x:Class="IrritatingBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:IrritatingBar"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Rectangle Fill="#FF32298B" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="10"/>
        <Rectangle Fill="#FF32298B" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="11" Margin="506,0,0,0"/>
        <Rectangle Fill="#FF32298B" HorizontalAlignment="Left" Height="12" VerticalAlignment="Top" Width="475" Margin="10,308,0,0"/>
        <Rectangle Fill="#FF32298B" HorizontalAlignment="Left" Height="12" VerticalAlignment="Top" Width="475" Margin="32,0,0,0"/>
        <Rectangle Style="{StaticResource slidingRectangleStyle}" Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="10,26,0,0" VerticalAlignment="Top" Width="189"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="90" Margin="177,12,0,0" VerticalAlignment="Top" Width="22"/>
        <Ellipse Style="{StaticResource rotatingEllipseStyle}" Grid.Row="0" x:Name="mediaHoge1" Width="200" Height="30" Fill="#FF298B32">
            <Ellipse.LayoutTransform>
                <RotateTransform/>
            </Ellipse.LayoutTransform>
        </Ellipse>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="147" Margin="248,161,0,0" VerticalAlignment="Top" Width="22"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="32,81,0,0" VerticalAlignment="Top" Width="148"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="186" Margin="32,102,0,0" VerticalAlignment="Top" Width="20"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="32,267,0,0" VerticalAlignment="Top" Width="191"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="79,230,0,0" VerticalAlignment="Top" Width="151"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="248" Margin="463,40,0,0" VerticalAlignment="Top" Width="22"/>
        <Rectangle Style="{StaticResource slidingRectangleStyle}" Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="204,81,0,0" VerticalAlignment="Top" Width="176"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="128" Margin="358,121,0,0" VerticalAlignment="Top" Width="22"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="94" Margin="79,136,0,0" VerticalAlignment="Top" Width="25"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="59" Margin="158,157,0,0" VerticalAlignment="Top" Width="26"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="27" Margin="204,102,0,0" VerticalAlignment="Top" Width="26"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="20" Margin="295,175,0,0" VerticalAlignment="Top" Width="63"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="20" Margin="270,210,0,0" VerticalAlignment="Top" Width="63"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="20" Margin="295,249,0,0" VerticalAlignment="Top" Width="85"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="30" Margin="48,136,0,0" VerticalAlignment="Top" Width="26"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="62" Margin="204,19,0,0" VerticalAlignment="Top" Width="22"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="215,19,0,0" VerticalAlignment="Top" Width="270"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="244" Margin="417,59,0,0" VerticalAlignment="Top" Width="22"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="237,52,0,0" VerticalAlignment="Top" Width="202"/>
        <Rectangle Fill="#FF298B32" HorizontalAlignment="Left" Height="21" Margin="295,282,0,0" VerticalAlignment="Top" Width="144"/>
    </Grid>
</Window>

wpfiraira

あとは簡単なあたり判定だけ付けておきましょう。

MainWindow.xaml.cs

namespace IrritatingBar
{
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            SetupHandler();
        }

        private void SetupHandler()
        {
            foreach (var child in LogicalTreeHelper.GetChildren(this))
            {
                if (child is UIElement)
                {
                    UIElement childControl = (UIElement)child;
                    childControl.MouseEnter += (s, e) => MessageBox.Show("失敗");
                }
            }
        }
    }
}

上のデザイン画からはわかりませんが、スタイルで回転させたり幅を変更しているので実行時には以下のような画面になります。

wpfiraira2

ゲームなので凝る要素はいくらでもあるわけですが、ここまでで。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中