This article describes how to use native js to create simple dual-color sub-game code in combination with html5. It is used for personal learning and practice. Although it is not well written, I will share it with you, if you have any need, refer. I want to switch to html5 games. This is something to learn and practice. I first realized it in process-oriented mode, and then implemented it in object-oriented mode (pitted )......
Demo address: http://runjs.cn/detail/ss8pkzrc
Html code
A game of death
Your browser does not support html5 Canvas elements. Please upgrade to IE9 + or use advanced intelligent browser such as firefox and chrome!
|
Game rules:
1. One player and two players. Each player has 1-6 points, and the number of points is random. The number of points is any number in 2-12.
2. If the player throws 7 or 11 for the first time, the next round is successful in this round.
3. If a player throws 2, 3, or 12, the next round fails.
4. Throw other numbers 4, 5, 6, 7, 8, 9, and 10 to record points and continue to throw
5. When the player throws 7, the current round fails to take the next round.
6. When the number of points the player throws is the same as the previous one, this game wins the next round.
7. When the number of points the player throws is different from the previous one, this Council fails to proceed to the next round.
Extension later:
This game has the bet and points function, and there is no idea, so it is not implemented
|
| |
Script/** game rules: one player and two players, each of which has 1-6 points. The points are displayed at random. The points are any number in 2-12. If the player throws 7 or 11 for the first time, if a player throws 2, 3, or 12 in the next round, the player fails to throw other numbers 4, 5, 6, 7, 8, 9, and 10 in the next round. points and, and continue to throw. When the player throws 7, the current round fails. In the next round, the number of points thrown by the player is the same as that in the previous round, this game is successful in the next round. When the number of points thrown by a player is different from the previous one, this game fails to perform the next round of game: {game object} Stage = {scenario object add (thing) // Add an object addEvent (type, handler) redraw () // re-paint all thing objects} Thing = {// The object draw (canvas) // input a canvas object to draw thing isScope (x, y) // input the position of the mouse relative to the canvas, return boolean, // used to determine whether the mouse is in the thing range. true is true, and false is not in addEvent (type, handler) // public method // set the time for the object} defines the scenario where the object throws in our own scenario: 1. Two worker 1 worker 2. One bulletin board displays information about this board. 3. Three buttons are displayed to start reproduction. **/function Stage (canvas) {this. canvas = document. getElementById (canvas); this. ctx = this. canvas. getContext ('2d '); this. ctx. lineWidth = 1; this. ctx. strokeStyle = 'rgb (255, 0, 0) '; this. width = this. canvas. width; this. height = this. canvas. height; this. things = []; this. addEvent = []; this. rule = {};} Stage. prototype. setings = function () {}; Stage. prototype. draw = function () {for (var thing in this. things) {if (this. things [thing] instanceof Array) {for (var I = 0; I
0? ('Last point ['+ this. rule. integral. join (', ') +'] '): '') + this. rule. hasNext +'
'; Document. getElementById ('log'). innerHTML = html + tmp;} Stage. prototype. clean = function () {for (var I = 0; I
6) this. porints = tmp; this. draw_porints ();} Disc. prototype. draw_porints = function () {var radius = this. width/7; if (this. porints = 1) {// when there is only one point, the point is located in the center of the square (width/2, height/2) with a radius of width/4 draw_porint (this. x + (this. width/2), this. y + (this. height/2), this. width/4, this. stage);} else if (this. porints = 2) {// when there are two points, the first point is in (width/2, (height/7) * 2, and the second point is in (width/2, (height/7) * 5) draw_porint (this. x + (this. width/2), this. y + (this. height/7) * 2), radius, this. stage); draw_porint (this. x + (this. width/2), this. y + (this. height/7) * 5), radius, this. stage);} else if (this. porints = 3) {draw_porint (this. x + (this. width/10) * 2), this. y + (this. height/10) * 2), radius, this. stage); draw_porint (this. x + (this. width/10) * 5), this. y + (this. height/10) * 5), radius, this. stage); draw_porint (this. x + (this. width/10) * 8), this. y + (this. height/10) * 8), radius, this. stage);} else if (this. porints = 4) {draw_porint (this. x + (this. width/7) * 2), this. y + (this. height/7) * 2), radius, this. stage); draw_porint (this. x + (this. width/7) * 5), this. y + (this. height/7) * 2), radius, this. stage); draw_porint (this. x + (this. width/7) * 2), this. y + (this. height/7) * 5), radius, this. stage); draw_porint (this. x + (this. width/7) * 5), this. y + (this. height/7) * 5), radius, this. stage);} else if (this. porints = 5) {draw_porint (this. x + (this. width/10) * 2), this. y + (this. height/10) * 2), radius, this. stage); draw_porint (this. x + (this. width/10) * 2), this. y + (this. height/10) * 8), radius, this. stage); draw_porint (this. x + (this. width/10) * 5), this. y + (this. height/10) * 5), radius, this. stage); draw_porint (this. x + (this. width/10) * 8), this. y + (this. height/10) * 2), radius, this. stage); draw_porint (this. x + (this. width/10) * 8), this. y + (this. height/10) * 8), radius, this. stage);} else if (this. porints = 6) {draw_porint (this. x + (this. width/7) * 2), this. y + (this. height/10) * 2), radius, this. stage); draw_porint (this. x + (this. width/7) * 5), this. y + (this. height/10) * 2), radius, this. stage); draw_porint (this. x + (this. width/7) * 2), this. y + (this. height/10) * 5), radius, this. stage); draw_porint (this. x + (this. width/7) * 5), this. y + (this. height/10) * 5), radius, this. stage); draw_porint (this. x + (this. width/7) * 2), this. y + (this. height/10) * 8), radius, this. stage); draw_porint (this. x + (this. width/7) * 5), this. y + (this. height/10) * 8), radius, this. stage) ;}} Disc. prototype. redraw = function () {this. clean (); this. porints = 1; this. draw_porints ();} Disc. prototype. clean = function () {this. stage. ctx. clearRect (this. x, this. y, this. width, this. height);} function draw_porint (x, y, radius, stage) {stage. ctx. beginPath (); stage. ctx. arc (x, y, radius, 0, 2 * Math. PI, false); stage. ctx. closePath (); stage. ctx. fill ();} function CallBoard (x, y, stage) {this. x = x; this. y = y; this. width = 360; this. height = 50; this. stage = stage; this. notices = []; this. init ();} CallBoard. prototype. init = function () {this. stage. ctx. beginPath (); this. stage. ctx. strokeRect (this. x, this. y, this. width, this. height); this. stage. ctx. closePath (); this. stage. ctx. stroke (); this. draw ();} CallBoard. prototype. draw = function () {for (var I = 0; I
= 4 & this. count <= 10) {this. integral. push (this. count); str + = 'Please throw the dice again! '; This. notice3.redraw (str); this. hasNext = true; return this ;}} else {if (this. count = 7 | this. count! = This. integral [this. integral. length-1]) {str + = 'Sorry, you lost ......! '; This. notice3.redraw (str); this. hasNext = false; return this;} if (this. count = this. integral [this. integral. length-1]) {str + = 'You are too powerful to throw the same number of points as the last time! Congratulations! You have won! '; This. notice3.redraw (str); this. hasNext = false; return this ;}}var stage = new Stage ('game'); stage. setings = function () {var x1 = 20, y1 = 20; var x2 = 210, y2 = 20; var callBoard = new CallBoard (20,200, stage); callBoard. add (new Notice (30,220, 'employee 1, no points. ', CallBoard); callBoard. add (new Notice (220,220, 'second 2, no points. ', CallBoard); callBoard. add (new Notice (30,240,' No vertex or sum currently. ', CallBoard); stage. add (new Disc (x1, y1, stage); stage. add (new Disc (x2, y2, stage); stage. add (callBoard); stage. rule = new Rule ();} stage. setings (); script
Demo Image
The above is all the content of this article, hoping to help you learn js + html5.
