Use native Canvas to write and solve snakes and problems.

Use native Canvas to write and solve snakes and problems.

To learn Canvas, I wrote this little game for myself and everyone to learn.

 

Github: https://github.com/zhiyishou/Gsnake

Play On: http://zhiyishou.github.io/Gsnake

 

Games:

 

Preface:

To facilitate loading and transfer, I wrote the entire JavaScript code in html. To facilitate reading, the function structure is clearly separated in html,

And there are enough comments in the code.

 

The function structure is as follows:

|----script       |----Definations        |----Global Snake variables        |----Global Canvas variables        |----Global Panel variables        |----Global Stage variables        |----Global Game status variables    |----Init Functions        |----initPanel        |----initButtons        |----initStage        |----initCanvas        |----initMaps        |----SnakeNode        |----initSnake        |----produceSingle        |----init    |----Draw Funcitons        |----drawScore        |----drawButton        |----drawButtons        |----drawSnake        |----drawSingle        |----drawStage        |----draw    |----Action Functions        |----moveSnake        |----main    |----Event Functions        |----KeyDown        |----getOffsetPosition        |----determineButton        |----MouseMove        |----ClickButton        |----debounce        |----bind        |----Pause        |----Start        |----ReStart        |----Died    |----ROCK and ROLL        |----init()        |----main()

 

 

Problems encountered and solutions:

I. mouse events

Internal events cannot be added or deleted in the Canvas. To be precise, the Canvas is a simple Canvas, so that the entire Canvas can perform event operations in the Dom.

If you want to implement internal click or mousemove events in the Canvas, there are two solutions:

 

1. Use the surrounding boundary to determine:

• Based on:

• Trigger: when an event occurs, the entire array is traversed to determine whether the object is within the boundary range based on the coordinates to determine the object where the mouse is located.
• Disadvantage: In this case, the object must be a regular Cartesian quadrilateral with no implementation for complex graphics.

 

2. Use the isPointInPath method in CanvasAPI:

• Based on:
• Trigger: when an event occurs, the entire array is traversed and the objects in the array are re-painted. That is, the context is changed every time an object is drawn. The current context uses the isPointInPath or isPointInStroke method, pass in the Offset coordinates to determine whether the mouse is in its path and determine the current focus or click object. (The context in the canvas will be reset after the closePath method)
• Advantage: complex graphic events can be implemented.

 

Ii. Rendering Problems

In my previous version, I set the entire object operation and object painting to an Interval to implement the current situation. Later I wrote it and found that this would be very rigid, if you want to add or modify some functions, You need to modify the entire code, even in this model.

Finally, we separate the painting from the operation:

• Set Interval for plotting, for example:

SetInterval (function () {draw () ;}, 1000/60) // redraw 60 times per second

• The changes to the property of the Drawing Object are bound to the event, for example:

Event Functions in this game

Principle: Object events are used to change the attributes of an object, while object attributes are used for rendering. The values of the two logics are independent of each other.

Advantage: the overall program logic is clearer, making it easier to add and modify subsequent functions.

 

 

The End