zoukankan      html  css  js  c++  java
  • Flying Before You Walk

    creating the HTML5 for a game

    Loading images and drawing on canvas

    Setting up your game's structure

    Creating an amimated background

    listening for user input

    capability-wise in a short amount of time , and many people believe in 

    browser gaming will be one of the primary distribution mechanismas for 

    gmaes in the coming years.

    Even though it's not an environment originally designed for creating games,

    HTML5 is actually a nic , high-level environment for doing just that.

    So, in lieu of trying to abstract away all the boilerplate by building 

    an engine immediately, you can ge right to the good stuff

    a one-off game built from the ground up on HTML5  a top-down 2-D space

    shooter called Alien Invasion

    BUILDING A COMPLETE GAME IN 500 LINES

    understaing the game

    Alien Invasion is a top-down 2-D shooter game built in the spirit of the game 1942

    or a simplified version of Galaga. The player controls a ship

    shown at the bottom of the screen 

    flying the ship vertically through an endless space field

    while defending Earth against an incoming hoard of aliens 

    on a mobile device , control is via left and right arrows shown on the bottom left of the screen and a Fire button on the right. When played on the desktop, the user can use the keyboard 's arrow keys to fly and spacebar to fire.

    To compensate for all the different screen sizes of mobile devices , the game resizes

    the play area to always play at the size of the device.

    on the desktop it plays in a rectangular  area in the middle of the browser page.

    Structuring the Game

    some asset loading, a title screen,  sprites , user input,collision detection, and a gmae loop to tie it all together.

    a few formal structure as possible . Instead of building explicit class , your take 

    advantage of JS's dynamic typing .   

    JS is weakly (or dynamically )typed because the language doesn't  enforce the type of parameters . 

    This means you define your objects more loosely, adding methods to each object as needed, without building a bounch of base clases of interfaces.

    Image asset handling is dead simple. You load a single image called a sprite sheet.

    that contains all your game's sprite images in a single PNG and execute a callback

    after that image loads.  The game also has a single method for drawing a sprite 

    onto your canvas.

    The title screen renders a sprite for the main title and shows the same animated starfield from the main game moving in the background

    You have an object that you can treat as the current scene,

    and your can tell that scene to update itself and then to draw itself. THis is 

    a simple abstraction that works for both title and end game screens as well as the main

    part of the game.

    User input can use a few event listeners for keyboard input and a few zones on your canvas to detect touch input .  You can use the HTML standard method addEventListener to support both of these.

    lastly, for collision detection, you punt the hard stuff and just loop over the bounding boxes of each of the objects to detect a collision.  This is a slow and naive way to implement collision detection , 

    but it's simple to implement and works reasonably well as long as the number of spires you check against its small.

    The Final Game

    ADDING THE BOILERPLATE HTML AND CSS

    The main boilerplate for an HTML5 file is minimal.You get a valid HTML

    file with a <canvas> element inside of a container centered on the page

  • 相关阅读:
    常见S1信令交互流程
    pthread_cond_wait避免线程空转
    sqlite:多线程操作数据库“database is locked”解决方法(二)
    sqlite:多线程操作数据库“database is locked”解决方法
    大端 小端
    关于天气分类的贝叶斯预测
    n 支队伍比赛,分别编号为 0,1,2。。。。n-1,已知它们之间的实力对比关系, 存储在一个二维数组 w[n][n]中,w[i][j] 的值代表编号为 i,j 的队伍中更强的一支。
    AC自动机 多模式匹配
    浮点数转换成二进制
    在一个缓冲去内实现三个栈,使用自有链表记录空闲块
  • 原文地址:https://www.cnblogs.com/yushunwu/p/2756297.html
Copyright © 2011-2022 走看看